diff --git a/packages/babel-plugin-syntax-trailing-function-commas/README.md b/packages/babel-plugin-syntax-trailing-function-commas/README.md index 0f0bf69e78..f64894538d 100644 --- a/packages/babel-plugin-syntax-trailing-function-commas/README.md +++ b/packages/babel-plugin-syntax-trailing-function-commas/README.md @@ -2,6 +2,88 @@ Compile trailing function commas to ES5 + +```js +function clownPuppiesEverywhere( + param1, + param2, +) { /* ... */ } + +clownPuppiesEverywhere( + 'foo', + 'bar', +); +``` +[Try in REPL](/repl/#?evaluate=true&presets=es2015%2Cstage-0&code=function%20clownPuppiesEverywhere(%0A%20%20param1%2C%0A%20%20param2%2C%0A)%20%7B%20%2F*%20...%20*%2F%20%7D%0A%0AclownPuppiesEverywhere(%0A%20%20'foo'%2C%0A%20%20'bar'%2C%0A)%3B) + +## Example + +### Basic +This is an example from the [Proposal](https://github.com/jeffmo/es-trailing-function-commas). + +Let's say you have this function: + +```js +function clownPuppiesEverywhere( + param1, + param2 +) { /* ... */ } + +clownPuppiesEverywhere( + 'foo', + 'bar' +); +``` + +If you want to have a new parameter called `param3`, the diff output would be like that: + +```diff +function clownPuppiesEverywhere( + param1, +- param2 ++ param2, // Change this line to add a comma ++ param3 // Add param3 +) { /* ... */ } + +clownPuppiesEverywhere( + 'foo', +- 'bar' ++ 'bar', // Change this line to add a comma ++ 'baz' // Add param3 +); +``` +In total, you have to change 2 lines for the function declaration and 2 lines for each usage. + +If you had your function defined with trailing commas: + +```js +function clownPuppiesEverywhere( + param1, + param2, +) { /* ... */ } + +clownPuppiesEverywhere( + 'foo', + 'bar', +); +``` +Adding a new parameter would only change one line in the function declaration and one line for each usage: + +```diff +function clownPuppiesEverywhere( + param1, + param2, ++ param3, // Add param3 +) { /* ... */ } + +clownPuppiesEverywhere( + 'foo', + 'bar', ++ 'baz', // Add param3 +); +``` +In the end, your diff output will be cleaner and easier to read, it would be much quicker to add a new parameter to your functions, it also makes it easier to copy paste elements and move code around. + ## Installation ```sh @@ -33,3 +115,9 @@ require("babel-core").transform("code", { plugins: ["syntax-trailing-function-commas"] }); ``` + +## References + +* [Proposal](https://github.com/jeffmo/es-trailing-function-commas) +* [Spec](http://jeffmo.github.io/es-trailing-function-commas/) +* [Why you should enforce Dangling Commas for Multiline Statements](https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8) diff --git a/packages/babel-preset-es2015/README.md b/packages/babel-preset-es2015/README.md index 0ee29cc0d8..dacd924c73 100644 --- a/packages/babel-preset-es2015/README.md +++ b/packages/babel-preset-es2015/README.md @@ -37,18 +37,29 @@ require("babel-core").transform("code", { ## Options * `loose` - Enable "loose" transformations for any plugins in this preset that allow them (Disabled by default). -* `modules` - Enable transformation of ES6 module syntax to another module type (Enabled by default to "commonjs"). +* `modules` - Enable transformation of ES6 module syntax to another module type (Enabled by default to `"commonjs"`). * Can be `false` to not transform modules, or one of `["amd", "umd", "systemjs", "commonjs"]` +* `spec` - Enable "spec" transformations for any plugins in this preset that allow them (Disabled by default) -``` +```js { presets: [ - ["es2015", {"loose": true, "modules": "amd"}] + ["es2015", { "loose": true }] ] } { presets: [ - ["es2015", {"loose": true, "modules": false}] + ["es2015", { "modules": false }] + ] +} +{ + presets: [ + ["es2015", { "loose": true, "modules": false }] + ] +} +{ + presets: [ + ["es2015", { "spec": true }] ] } ``` diff --git a/packages/babel-preset-latest/README.md b/packages/babel-preset-latest/README.md index 7eb0f1368b..f46761d1aa 100644 --- a/packages/babel-preset-latest/README.md +++ b/packages/babel-preset-latest/README.md @@ -33,3 +33,33 @@ require("babel-core").transform("code", { presets: ["latest"] }); ``` + +### Options + +- `es2015`: Optionally not run any plugins from this preset (defaults to true) +- `es2016`: Optionally not run any plugins from this preset (defaults to true) +- `es2017`: Optionally not run any plugins from this preset (defaults to true) + +```js +{ + "presets": [ + ["latest", { + "es2015": false // defaults to true + }] + ] +} +``` + +You can also pass options down to the `es2015` preset. + +```js +{ + "presets": [ + ["latest", { + "es2015": { + "modules": false + } + }] + ] +} +```