Wednesday, 28 September, 2016 UTC
Summary
Happy Birthday Babel š !
Happy 2nd birthday @babeljsā Sebastian McKenzie (@sebmck) September 28, 2016
```.``` `````` `````` ````;```` ```:```` ```:```` ````:;````` ````;,```` ````;,```` `````::,````` ````:,:````` ````:,:````` ````:,,:````` ````:.,,```` ````:.,,```` ````:..,.```` ````,,..:````` ````,,..:````` ```.,.`,:```` ````:.`.,````` ````:.`.,````` ```.,.`.:```` ````:.`.,.```` ````:.`.,.```` ```.,...:```` ``.:...,.``` ``.:...,.``` ::,,,.,,,:` `:,,,.,,,:, `:,,,.,,,:: :,,.......,: :,.......,,, :,.......,,: :,........., ;++`............;++` ,.........,: :.````````.. '+'+'```````````,+'++` ..````````.: ;,````````.,.+'''',`````````.,''++' ,.````````,: ;,.` ``.,++'''',.`` ``.,''''+,,.`` `.,: :,.`` ```..+''''+,.``` ```.,'''++;,.``` ``.,: `:,.`` ```..+''''',.``` ```.,''''+',.``` ``.,: +,..`` ```..+++''+,.``` ```.,+''++;,.``` ``..:, ,:+,.``` ```..++++++,.``` ```.,+++++.,.``` ```.,+,` ,,.'',.``` ```.,`;+++',.``` ```.,+++'.`,.``` ```.,+.,: `,,.`++,.``` ```.,``...`,.``` ```.,...```,.``` ```.,+`..,: ,,..``'+,.``` ```.,``````,.``` ```.,``````,.``` ```.,+```.,: :,.```.,+,.``` ```.,``````,.``` ```.,``````,.``` ```.,'.```..,` :,.`````.,,.``` ```.,``````,.``` ```.,``````,.``` ```.,.``````., ,,.```````.,.``` ```.,``````,.``` ```.,``````,.``` ```.,```````..: ,.`````````,.``` ```.,``````,.``` ```.,``````,.``` ```.,````````.,: :,.```````` ,.``` ```.,``````,.``` ```.,``````,.``` ```., ````````., ,.```````.''+'``` ```., `````,.``` ```.,``````,.``` ``,''+'```````.,. ,.```````+'''';`` ```., `````,.``` ``..,``````,.``` ``+'''';```````,: ,.``````'+''''+``` ```.,``````,.``` ```..,``````,.``` ``'+''''+```````.: ,.``````+'''''':`````.., `````,..`````..,,``````,..`````+'''''',``````,: ,.``````+'''''+'.```..,````````,...``..,,````````,...``.+'''''+'`````.,, :.``````+'''''+'......```` ```.......``` `````......+'''''+'`````., :.`````.+++++'+:.....````.''+' ```....```.''+' ````.....+++++'+:`````., ,,.````.:+++++'``````````+'''';``````````+'''';`````````,+++++'..````., .,.````..,;';,.`````````'+''''+ ````````'+''''+ `````````.:';:..`````.: ,.``````....```````````+'''''', `````` +'''''',```````````...```````.: ,.`````````````````````+'''''+'``````` +'''''+'````````````````````.,, ,.`````````````````````+'''''+'````````+'''''+'````````````````````.,. :.`````````````````````+++++'+:``` ````+++++'+:````````````````````.,` :..````````````````````,+++++'```` ````,+++++'`````````````````````., ,,.`````````````````````.:';,.``` ````.:';,.`````````````````````., .,.``````````````````````````````` ````````````` ```````````````.: `,.```````````````````` ``````` `````` ` ````````````````..: ,..``````````````````` ````````````````````.,: ,...`````````````````````` ``` ```````````````````````````.,, :....````````````````````````````````````````````````````````````.,. :,.....`````````````````````````````````````````````````````````.., :,......`````````````````````````````````````````````````````.....: ,,........```````````````````````````````````````````````````.....: .,........```````````````````````````````````````````````````....,: ,..........```````````````````````````````````````````````......,: :...........`````````````````````````````````````````````.......,: :,...........````````````````````````````````````````````.......,, :,..........``````````````````````````````````````````..........,` :,............````````````````````````````````````````..........: :,............````````````````````````````````````````.........,: .,..............```````````````````````````````````............,: `,,..............``````````````````````````````````............,: :,...........`..````````````````````````````````..............,: :,..............````````````````````````````````..............:. ,,,.............```````````````````````````````..............,: :,.............````````````````````````````````............,:, `:,.............````````````````````````````..............,,: .:,............```````````````````````````..............,:: .:,,..........````````````````````````````............,:: :,,..........````````````````````````.............,,:, ,:,,.........``````````````````````............,,:; ::,,........``````````````````.............,,::` ,::,,........``````.```.``............,,,:;` :::,,,........`.```............,,,:::. ,:::,,,,..............,,,,,::::` `.::::::,,,,,,,::::::,`
Itās hard to believe itās been 2 years already! Thanks so much to Sebastian for creating this amazing project!
Weāve grown a lot:
- 200+ contributors
- Thereās been ~113 releases since 6.0.0 and 512 release total.
- ~4.5 million downloads of
babel-corein the last month - 1400+ results for
babel-pluginon npm - 700+ results for
babel-preseton npm - 4500+ users on our slack
Thanks so much for using and contributing to our community!
If you havenāt checked recently, weāve moved back to Github Issues! This is all thanks to @danez
Like most open source projects, Babel is maintained be just a few people working in their free time. Weāll be working on making it easier to contribute in various ways (not just to the main codebase).
What Evan Czaplicki says in Code is the Easy Part is really relevant to any project, big or small. A big part of contributing is just talking, using, writing about the project.
To that point, we should setup a curated, up-to-date Resources Page and maybe a newsletter to talk about the awesome stuff people are making with Babel (a new plugin, a new tool, or just an idea).
Hopefully, we can work more with TC-39 like we do with https://github.com/tc39/ecma262#current-proposals and our stage-x presets and plugins. We should look to run test262 with Babel.
Weāve also released Babili, our minifier and started work on babel-preset-env, āautoprefixerā for Babel.
The future of Babel is bright!
š Spec Compliancy #3473 via #4576 Implement support for async generator functions and for-await statements. (@zenparsing)
This change implements the async iteration proposal, currently at stage 2 (and is planned to be pushed to stage 3 at the current TC-39 meeting). It includes the following features:
- Transforms async generator functions (
async function* g() { }) to wrapped generator functions, similar to the current async-to-generator transform.
async function* agf() { await 1; yield 2; } - Transforms
for-awaitstatements into for loops containing yield expressions.
async function f() { for await (let x of y) { g(x); } } Example Usage
async function* genAnswers() { var stream = [ Promise.resolve(4), Promise.resolve(9), Promise.resolve(12) ]; var total = 0; for await (let val of stream) { total += await val; yield total; } } function forEach(ai, fn) { return ai.next().then(function (r) { if (!r.done) { fn(r); return forEach(ai, fn); } }); } var output = 0; return forEach(genAnswers(), function(val) { output += val.value }) .then(function () { assert.equal(output, 42); }); #4500 Support computed class properties. (@motiz88)
Parser support was added in [email protected] with babel/babylon#121
// Example class Foo { [x] ['y'] } class Bar { [p] [m] () {} } #3702 Flow: generate exact object type annotations. (@bhosmer)
Parser support was added in [email protected] with babel/babylon#104
// Example var a : {| x: number, y: string |} = { x: 0, y: 'foo' }; #3561
babel-core: add options for a different parser or generator. (@hzoo)Babel will now also take the options:
parserOpts and generatorOps (as objects).parserOpts will pass all properties down to the default babylon parser. You can also pass a parser option to substitute for a different parser.This will allow passing down any of
babylon's options:{ "parserOpts": { "allowImportExportEverywhere": true, "allowReturnOutsideFunction": true, "sourceType": "module", "plugins": ["flow"] } } You can also pass down
parserOpts.parser and generatorOps.generator. This will enable the use of recast with Babel.Recast is used in jscodeshift which is a tool to create codemods. You might know of these since the React team also publishes them to help convert between React releases.
{ "parserOpts": { "parser": "recast" }, "generatorOpts": { "generator": "recast" } } Babel as a compiler has 3 steps: parsing, transforming, and generation.
At a high level, the process is: - parsing: take a string (input code) and turn it into JSON. - transforming (plugins): take JSON and make a different JSON structure) - code generation: turn the JSON back into a string (output code).
The last step of babel is the code generator. Traditionally, the code generator doesnāt really need to care about the format of your code (spaces, quotes, etc). This is because the output code is your ācompiledā code and will probably go in the dist directory, you will eventually minify it, etc.
But what if you want to write a babel plugin that runs on your source code and outputs to source (
babel src -d src rather than babel src -d lib)? You would want your diff to be readable and for the plugin to only modify what is necessary by conforming to your style guide.This is because you want to write a plugin that transforms the source itself. One use case is a project called lebab which is actually just the opposite of babel (used to be called 5to6). Currently, it isnāt a babel plugin so we wanted to help support that usecase.
Once https://github.com/benjamn/recast/pull/299 and https://github.com/benjamn/ast-types/pull/162 are merged you should be able to make your own codemods with Babel as well!
#4542 Add support for preset organization shortcuts. (@nkt)
{ presets: ["@org/babel-preset-name"], // actual package presets: ["@org/name"] // shorthand name } #4491 Add object rest spread
useBuiltIns option. (@hzoo)useBuiltIns - Do not use Babelās helperās and just transform to use the built-in method (Disabled by default).{ "plugins": [ ["transform-object-rest-spread", { "useBuiltIns": true }] ] } // source z = { x, ...y }; // compiled z = Object.assign({ x }, y); #4561
babel-code-frame: add options for linesBefore, linesAfter. (@hzoo)babel-code-frame is a standalone package that we use in Babel when reporting errors.Now there is an option to specify the number of lines above and below the error
1 | class Foo { > 2 | constructor() | ^ 3 | } #3695 via #4566 Allow presets to be ES6 default exports (@johanssj)
We previously made presets with commonjs exports
module.exports = { plugins: [ require("babel-plugin-syntax-trailing-function-commas") ] }; Now you can use export default as well
import syntaxTrailingCommas from "..."; export default { plugins: [ syntaxTrailingCommas ] }; #4572, #4579 Improve syntax highlighting colors. (@lydell)
Before
After
š Notable Bug Fixes #3686 Fix
typeof Symbol.prototype. (@brainlock)// `typeof Symbol.prototype` should be 'object' typeof Symbol.prototype === 'object' #4507 Only set options in
babel-cli if different from default. (@danez)Fix an issue with defaults not being overidden. This was causing options like
comments: false not to work correctly.#4524 Fix default export with arrows and function naming. (@danharper)
// this wasn't exporting correctly before export default ({ onClick }) => { return <div onClick={() => onClick()}></div>; } #4518 Fix default exported classes without a name. (@danez)
export default class {}; // wasn't correctly transforming to exports["default"] = class {} // with the es3-tranforms #4521 Fix striping of
typeParameters from arrow functions. (@danez)// <X> wasn't stripped out const find = <X> (f: (x:X) => X, xs: Array<X>): ?X => ( xs.reduce(((b, x) => b ? b : f(x) ? x : null), null) ) #4552 Fix destructuring evaluation with call expressions. (@danez)
We noticed that we can not make this optimizations if there are function calls or member expressions on the right hand side of the assignment since the function call or the member expression (which might be a getter with side-effect) could potentially change the variables we are assigning to.
[x, y] = [a(), obj.x]; // was tranforming to x = a(); y = obj.x; // now transforms to var _ref = [a(), obj.x]; x = _ref[0]; y = _ref[1]; #4587 Prevent flow-strip-types/flow-comments from removing entire ClassProperty. (@danharper)
Check out Github for the rest of the changelog!