[Feature request] Support JSX

[Andreyco]

Since Reactjs is very popular, I'd like to see support for JSX in CK2.

For starters, reload page on JSX file save event. Yes, this can be hotfixed by adding .jsx into "Generic Page Extensions", but it's not the right solution.

Compiling JSX into pure JS would be pure awesomeness. FB provides tools to do that, which you can find here Allowing to use ES6 syntax with transpiling back to ES5 (using --harmony flag) would be even more awesome.

Thanks for consideration.

Keep on super good work you are doing! :)

[ericbae]

ok, I don't want to take this feature request TOO far, but many of the ReactJS implementations also use browserify/webpack type of "modular" implementation (being able to use modules from npm etc).

It would be great if CodeKit can support this too - too ambitious?

[watzon]

+1000

[chrisdrackett]

was actually surprised this wasn't already supported when I opened my new project in codekit today!

[mydudechris]

+1

[jitinl]

+1

[Andreyco]

Meanwhile, Facebook banned it's React-tools, which contained JSX transpiler in favor of Babel.

Babel transpiles ES6 (and part of ES7) into ES5, which allows us to write javascript of future right now. Also, it understands JSX, so no problem here.

Talking about implementation, I think it would be best to add record to "Special Language Tools", similar to Autoprefix, let's say.

Thus, original title could be "Add Babel support."

[jitinl]

I really wanted this in CodeKit so I "made it work" by renaming my .jsxfiles to .coffee and changing the CoffeeScript compiler in CodeKit to a custom CoffeeScript compiler - the Babel compiler. So CodeKit thinks it's compiling CoffeeScript files - but the files are in real jsx or ES6 and the compiler is the jsx compiler.

This is working for me - for JSX code as well as ES6 as far as I could try. Here's the code: https://github.com/jitinl/codekit-jsx-hack if anyone wants to check it out.

[ericbae]

That's a pretty cool hack actually. :+1:

[bdkjones]

That is a nifty hack, but it's also not necessary. I spent a lot of time creating Hooks for exactly this sort of scenario. You can simply add a Hook to your project that says, "Anytime I save a JS file, do X". Hooks are meant for stuff like this, where people want to extend CodeKit without waiting for me to integrate everything.

[jitinl]

I actually thought of using hooks in the beginning. But the thing is that (as far as I understand) you can only add hooks after CodeKit finishes processing the files and not before. This created two problems that I can remember:

1. If I am merging multiple files (using @codekit-prepend) - like a mix of plain JS files (say jquery.min.js) and my own JSX/ES6 files - CodeKit would try to merge all of them and then run my hook. This would mean that even something like jQuery gets compiled by Babel which is not required.
2. I won't be able to use CodeKit's minification - that's because I need to minify after the compilation not before. Uglify will not be able to process the uncompiled JSX syntax anyways.

What I was really looking for is a hook that runs before CodeKit processes files and this hack was the only workaround I could come up with. This way Babel only compiles only the JSX/ES6 scripts (and leaves the rest alone), and minification works successfully.

But I guess if somebody does not need CodeKit's minification - and the letting all merged scripts go through Babel is not a problem, setting a hook is probably an easier task.

[bdkjones]

You could simply call Uglify.js yourself from the Hook, after running everything through Babel.

On 28 Jun 2015, at 22:33, jitinl notifications@github.com wrote:

I actually thought of using hooks in the beginning. But the thing is that (as far as I understand) you can only add hooks after CodeKit finishes processing the files and not before. This created two problems that I can remember:

If I am merging multiple files (using @codekit-prepend) - like a mix of plain JS files (say jquery.min.js) and my own JSX/ES6 files - CodeKit would try to merge all of them and then run my hook. This would mean that even something like jQuery gets compiled by Babel which is not required.

I won't be able to use CodeKit's minification - that's because I need to minify after the compilation not before. Uglify will not be able to process the uncompiled JSX syntax anyways.

What I was really looking for is a hook that runs before CodeKit processes files and this hack was the only workaround I could come up with. This way Babel only compiles only the JSX/ES6 scripts (and leaves the rest alone), and minification works successfully.

But I guess if somebody does not need CodeKit's minification - and the letting all merged scripts go through Babel is not a problem, setting a hook is probably an easier task.

— Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/554#issuecomment-116443910.

[jitinl]

I agree - I could say create two hooks - one for Babel and one for uglify.js and that would work nicely (except that I won't be using the CodeKit interface for minifying anymore). But any help with the first problem? I do want to merge my files using @codekit-prepend but don't want all of them to run through the first hook (the compiler) - only the JSX ones.

[bdkjones]

Well Babel should ignore any JS syntax that doesn’t need to be transpiled, correct?

On 28 Jun 2015, at 22:39, jitinl notifications@github.com wrote:

I agree - I could say create two hooks - one for Babel and one for uglify.js and that would work nicely (except that I won't be using the CodeKit interface for minifying anymore). But any help with the first problem? I do want to merge my files using @codekit-prepend but don't want all of them to run through the first hook (the compiler) - only the JSX ones.

— Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/554#issuecomment-116448457.

[jitinl]

I agree it should, theoretically. I just tried running it on jQuery and it did make some changes but very few (9 lines were changed) and I am guessing they would probably be harmless. I was actually expecting it to make loads of changes - I guess I was wrong. That said, I quickly created a hook for running Babel and tested it in my project - it does something to the React-Router library code that I am using and that starts throwing some error. My guess is Babel is modifying the React-Router code in a way that it does not work anymore. I think it has something to do with the new ES6 module system and the module system that React-Router is using.

Maybe I made a mistake somewhere and I am not sure, but at this moment the CoffeeScript hack feels significantly faster (since it does not have to compile the library scripts), safer and is easy for me to use so I will keep on using it :)

Thanks

[ericbae]

Having at least gotten the attention of Bryan, can we find out whether Babel will be supported in the future releaes of CodeKit? :) (pretty please?)

[bdkjones]

Yes.

Sent from my iPhone

On Jun 29, 2015, at 04:09, Eric Bae notifications@github.com wrote:

Having at least gotten the attention of Bryan, can we find out whether Babel will be supported in the future releaes of CodeKit? :) (pretty please?)

— Reply to this email directly or view it on GitHub.

[meetbryce]

+1

[subhaze]

@jitinl I've made a post on using CodeKit's hooks to transpile babeljs files, not sure if it'll be much/any faster than your current workaround, but this post does explain at the bottom how to use @codekit-prepend per usual and still be able to use CodeKit's built-in minification workflow.

@bdkjones The only issue with hooks I've had so far is not being able to "Anytime I save a JS file, do X" due to CK needing to process the file in some way before a hook is triggered, the options being The full path of any processed file, The filename of any processed file, and The output path of any processed file

It would be amazing to see The full path of any saved file and The filename of any saved file :)

I've tried to work around this on JS files with JSHint/JSLint being the The filename of any processed file trigger, which does trigger the hook, but unfortunately CK_INPUT_PATHS is not set. This feels like a bug so I've submitted an issue https://github.com/bdkjones/CodeKit/issues/574 but I guess this could be by design?

[mewejo]

Hi Brian,

Do you have an ETA on when Babel/JSX will be added?

Thanks!

[arthurperton]

+1

[ghost]

+100

[mwaustin]

+1

[fmaida]

+1

[kylegillen]

+1

[xiaohenry]

+1

[marioluevanos]

++

[breadadams]

+1

[jschuur]

+1

[jamespwolpert]

+2

[leojh]

+1

[PrimozRome]

+1

[purplespider]

So, Foundation (for Sites) 6.2 was launched yesterday, and as all it's JS is now written in ES2015, it requires Babel to build. Would be good to have an ETA on this, so Foundation users can decide whether they need to look at using Gulp for Foundation.

[bdkjones]

The ETA is soon-ish.

[ml242]

Oh, I just said hi on twitter. nice to see this!

[whtsky]

+1

[nicholasrq]

+1

[dmcgrew]

I also just updated a project to Foundation 6.2.. now i'm stuck cause I can't minify javascript :( Hoping the update with babel is out soon.

[ties-s]

It's April now, any more news on the ETA?

[dmcgrew]

I've had to resort to learning gulp.. well trying to anyway. What a major pain that is compared to using CodeKit. Still can't use Foundation 6.2.

[robstown]

+1 my hook methods for babel integration are quirky and I have been resorting to manual transpiling.

[bdkjones]

Pay attention to the release notes coming later this week. Things are coming.

[robstown]

:)

On Mon, Apr 11, 2016 at 6:18 PM, Bryan Jones notifications@github.com wrote:

Pay attention to the release notes coming later this week. Things are coming.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/554#issuecomment-208590331

[glennpeters]

This is retroactively why I've been procrastinating on my ReactJS project.

[breadadams]

@glennpeters haha that's the excuse we're all using 😉

On a side note, there are some great React.js tutorials out there that teach you how to get it running with gulp (via terminal). Not trying to steer anyone away from Codekit, it's great, but this gives us (or atleast gave me) an opportunity to learn another way of building/compiling .jsx.

[glennpeters]

I should do that while I'm waiting / procrastinating. Useful job skill, at the very least.

[bfkss]

I sure hope you meant to say "Pay attention to the release notes coming later next week. Things are coming." Or did I miss something last week?

[bdkjones]

Well, I'm hoping for this week. But you never know. Updating the engines in 2.x, testing and shipping is more of a process than you'd think. But seriously, it's coming...

[guymeyer]

You are like the worst at keeping secrets

[glennpeters]

@bdkjones I appreciate your hard work, and especially how your hard works means I have to do less hard work.

[bdkjones]

We'll just Elon Musk it. "This isn't the final design." "This isn't the real steering wheel." "We're going to tweak things." "This is pretty much going to be a Chevy Suburban when we actually launch."