Open ralmidani opened 7 years ago
@ralmidani yup I figured making disabling or specifying the auto-import a configuration option would be a good choice. I'll take a look at that today
@ralmidani I added a jsxFramework
compiler option (and corresponding --jsx-framework
command-line option) to specify which framework's conventions it should use when compiling JSX. So far added react
(default), reactNative
, and vue
as options; released as coffeescript-jsxy@0.1.7
if you want to test it out in an actual Vue project
So to compile for Vue, you could do eg on the command line:
coffee --jsx-framework vue -p tmp.coffee
or if you're passing a config options object into a build tool, set jsxFramework: 'vue'
. I updated coffee-jsxy-loader
to accept jsxFramework
option (released as coffee-jsxy-loader@0.1.1
) so if you're using Webpack, you might use loader config:
test: /\.coffee$/,
loader: [
'babel-loader',
{
loader: 'coffee-jsxy-loader',
options: {
jsxFramework: 'vue',
},
},
],
Looking at Vue, the differences I saw as far as how JSX should be compiled were:
createElement()
helper gets injected)class
attribute, not className
classnames
helper, it should just pass dynamic class names as array value of class
attribute. So eg .(class1, class2: maybe)
compiles to <div class={[class1, {class2: maybe}]}></div>
style
attribute is ok with an array value (like React Native), so .[...]
style shorthand (not yet documented) should compile to array value (rather than _extends()
)For now, see the test in this PR (or ask) if you have questions about how these syntaxes are working for Vue. I'll add documentation for how to configure the jsxFramework
option, what effects it has on the compiled JSX, and document the new .[...]
style shorthand
This PR should be a good example if you're interested in how to add a config/command-line option to the compiler. And yes we should support any frameworks that use JSX if possible, I haven't looked at the others you mentioned (Mithril, Preact, Inferno) - are you interested in seeing if you can add the relevant jsxFramework
config options to support them (and maybe see if there are other aspects of JSX compilation that they need to control for any of the other frameworks)? Otherwise I can look at their docs
I plan to use Vue rather than React for my own real-world projects. Mithril, Preact, and Inferno also support JSX. While React is the most popular, shouldn't we avoid making assumptions about which library a dev is using?