Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Converted CoffeeScript and CJSX to ES6 and JSX #1

Merged
merged 10 commits into from Sep 11, 2015
Merged

Converted CoffeeScript and CJSX to ES6 and JSX #1

merged 10 commits into from Sep 11, 2015

Conversation

gesposito
Copy link
Contributor

Notes about conversion

Automation

I used
https://github.com/js2coffee/js2coffee
for CoffeeScript files and

https://github.com/jsdf/coffee-react
for CJSX ones.

Conversion

require are translated to imports, with optional destructuring assignment:
import { prune, include as includes } from 'underscore.string';

CSS are imported thanks to webpack:
import '../css/styles.css';

@props are converted to this.props thanks to React.autoBind.

JSX tags stay the same, style properties need commas.

Spread ... operators stay the same.

Multiline strings and template strings need backticks ``` instead of single/double quotes.
String substitution in template strings need the ${var} syntax instead of `#{var}`.

var should probably be replaced by either let or const.

ES6 Classes

I personally prefer ES6 Classes over React.createClasses but that would require some more changes in the gatsby codebase and they would be a bit opinionated right now.

@KyleAMathews
Copy link
Contributor

Nice!

I tested this (gatsby new blog https://github.com/gesposito/gatsby-starter-blog) and once I commited this gatsbyjs/gatsby@563604d everything worked perfectly.

Thanks!

KyleAMathews added a commit that referenced this pull request Sep 11, 2015
Converted CoffeeScript and CJSX to ES6 and JSX
@KyleAMathews KyleAMathews merged commit 2e5167e into gatsbyjs:master Sep 11, 2015
@Vadorequest
Copy link

@gesposito Hi. I'm just wondering why you changed your code from cjsx to jsx+es6. I'm about to start a cjsx project and I'm wondering if you have met any downside with cjsx.

Thanks.

@gesposito
Copy link
Contributor Author

@Vadorequest Gatsby and its starter projects were originally developed in CoffeeScript but I suggested @KyleAMathews to move the codebase to ES6 for contributions and adoption
gatsbyjs/gatsby#1 (comment)
mainly because the React ecosystem is mostly involved into ES6.

There were no problems with CoffeeScript or cjsx (at least that I knew about), but I understand that ES6 is giving JS most of what CoffeeScript was there for.

Not sure if it helped or it was just great timing, but Gatsby exploded in adoption since then.

@KyleAMathews
Copy link
Contributor

@Vadorequest I still use Coffeescript/CJSX on my sites. The three big advantages of ES6 are better tooling, larger community, and greater velocity. Coffeescript used to be far ahead of ES5 in ease-of-use but ES6 has adopted many of its innovations now so it's not as easy to justify.

@Vadorequest
Copy link

Thanks to both of you for inputs! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants