Fantastic Idea

[crherman7]

I love this idea and your proof of concept. What I'm really interested in this for are 2 different aspects.

In react I would love to see the use of this for directives similar to vue such as v-if...https://vuejs.org/guide/essentials/conditional.html#v-if-on-template. Would be a nice way to clean up ternaries and nullcoals.

In react native I would love to use this for applying tailwind styles. Right now I use twrnc but I create proxy components to make the className prop available utilizing just strings instead of doing a tw.style('...'). In this case I would be hoping to highjack & sanitize props.

[laurci]

Thanks! Sorry for the late reply :) I didn't actually expect anyone to like the idea :)

v-if style directives could be implemented. I personally don't think they clean-up the code, quite the opposite, but I will give it a go.

I don't quite get the second one. Could you share a full example or some docs?

Thanks!

[crherman7]

@laurci hahah I went down a rabbit hole and stumbled upon your repo and thought it could be very useful.

Fair point, my biases probably belong to vue, svelte, etc. more templated code :) So I messed around with the code testing some different approaches and I didn't see a way to intercept an html tag i.e. div it would only let me intercept custom components i.e. MyComponent. So maybe this isn't possible.

My second example is more about simplifying react native styling. Not sure how familiar you are with react native so forgive me if I am giving too detail. In react native you have to provide an object i.e. StyleSheet for styles. Unfortunately TailwindCSS is not directly supported by TailwindCSS. There is a port twrnc which basically allows to wrap a string of Tailwind utility classes with a tw object. It works just fine, I was just hoping there could be even a cleaner way. In react native the styling is done on the style on the View component for example. So instead of doing <View style={tw'flex justify-center items-center'} ... /> I was hoping that I could just extend any react native component to provide className like react and then intercept the components and translate className -> style.

[laurci]

I'm not sure of the div either, I have to give it a go to try :) (btw you can also checkout the npm package http://npmjs.com/react-directive-attributes and try it yourself).

Now I get it :) you want to pass className attribute value to the tw template and the result must be passed to style. You can totally do that :) I think it should work right now, out of the box :)

[aifrim]

// #1
{cond && <Component />}

// #2
{cond ? <Foo /> : <Bar />}

#1 could me morphed into a decizional

<Component if={comd} />

@crherman7, you can implement this yourself 🍡

[crherman7]

@aifrim hahah yes I'm well aware of these options - the directives work on custom components just not html tags i.e. div....but this is fine react-native it works for all components.

[crherman7]

@laurci yes this works perfectly as is thanks again!

[laurci]

Nice! Let me know how it goes :) I decided to continue the project. Right now I don't have the time, but I will work on it soon.