└── README.md /README.md: -------------------------------------------------------------------------------- 1 | The aim of this page is to provide information (at least the ES proposal) around babel plugins, all in one page to avoid going back and forth in Babel documentation and ES propoals and specs. It's grouped by stages so you know what you have when you use babel stages. 2 | 3 | I usually don't use Babel stages as I don't use all the features of all stages, I include the plugins of the features I want, it makes my npm install quicker and small and it helps tracking which feature I have. 4 | 5 | It's interesting as I think that most people don't need stage 0 and there are some stage 0 proposals like [function bind](https://github.com/zenparsing/es-function-bind) that I've never heard of and I've never seen a tutorial about them. 6 | 7 | If you have useful links about each feature, open a PR or an issue. 8 | 9 | # [Stage 0](https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/index.js) 10 | 11 | ### [Do expressions](https://babeljs.io/docs/plugins/syntax-do-expressions/) ([`babel-plugin-transform-do-expressions`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-do-expressions)) 12 | ```js 13 | // from https://gist.github.com/DmitrySoshnikov/de4727f57c5acc17e9469d1a91743125 14 | 15 | let x = 10; 16 | 17 | let a = do { 18 | if (x == 10) { 19 | 100; 20 | } else if (x > 10) { 21 | 200; 22 | } else { 23 | 300; 24 | } 25 | }; 26 | 27 | console.log(a); // Prints '100' 28 | ``` 29 | - [Proposal](http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions) 30 | - [More info](https://gist.github.com/DmitrySoshnikov/de4727f57c5acc17e9469d1a91743125) 31 | - Very handy for conditions inside JSX: https://github.com/reactjs/react-future/issues/35#issuecomment-120009203 32 | 33 | ### [Function bind](https://babeljs.io/docs/plugins/syntax-function-bind/) ([`babel-plugin-transform-function-bind`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-function-bind)) 34 | ```js 35 | // from https://babeljs.io/blog/2015/05/14/function-bind 36 | 37 | import { map, takeWhile, forEach } from "iterlib"; 38 | 39 | getPlayers() 40 | ::map(x => x.character()) 41 | ::takeWhile(x => x.strength > 100) 42 | ::forEach(x => console.log(x)); 43 | 44 | // equivalent 45 | 46 | import { map, takeWhile, forEach } from "iterlib"; 47 | 48 | let _val; 49 | _val = getPlayers(); 50 | _val = map.call(_val, x => x.character()); 51 | _val = takeWhile.call(_val, x => x.strength > 100); 52 | _val = forEach.call(_val, x => console.log(x)); 53 | ``` 54 | - [Proposal](https://github.com/zenparsing/es-function-bind) 55 | - [Babel blog post](https://babeljs.io/blog/2015/05/14/function-bind) 56 | 57 | 58 | # [Stage 1](https://github.com/babel/babel/blob/master/packages/babel-preset-stage-1/index.js) 59 | 60 | ### [Class constructor call](https://babeljs.io/docs/plugins/transform-class-constructor-call/) ([`babel-plugin-transform-class-constructor-call`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-class-constructor-call)) 61 | ```js 62 | // from http://www.2ality.com/2015/10/call-constructor-esprop.html 63 | 64 | class Point { 65 | constructor(x, y) { 66 | this.x = x; 67 | this.y = y; 68 | } 69 | call constructor(x, y) { 70 | return new Point(x, y); 71 | } 72 | } 73 | 74 | let p1 = new Point(1, 2); // OK 75 | let p2 = Point(3, 4); // OK 76 | ``` 77 | - [Proposal](https://github.com/tc39/ecma262/blob/master/workingdocs/callconstructor.md) 78 | - [ECMAScript proposal: function-callable classes](http://www.2ality.com/2015/10/call-constructor-esprop.html) 79 | 80 | ### [Class properties](https://babeljs.io/docs/plugins/transform-class-properties/) ([`babel-plugin-transform-class-properties`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-class-properties)) 81 | ```js 82 | // from https://github.com/jeffmo/es-class-fields-and-static-properties 83 | 84 | class MyClass { 85 | myProp = 42; 86 | static myStaticProp = 21; 87 | 88 | constructor() { 89 | console.log(this.myProp); // Prints '42' 90 | console.log(MyClass.myStaticProp); // Prints '21' 91 | } 92 | } 93 | ``` 94 | - [Proposal](https://github.com/jeffmo/es-class-fields-and-static-properties) 95 | 96 | ### [Decorators](https://babeljs.io/docs/plugins/transform-decorators/) ([`babel-plugin-transform-decorators`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-decorators)) 97 | ```js 98 | // from https://github.com/wycats/javascript-decorators/blob/master/README.md 99 | 100 | // Simple class decorator 101 | @annotation 102 | class MyClass { } 103 | 104 | function annotation(target) { 105 | target.annotated = true; 106 | } 107 | 108 | // Class decorator 109 | @isTestable(true) 110 | class MyClass { } 111 | 112 | function isTestable(value) { 113 | return function decorator(target) { 114 | target.isTestable = value; 115 | } 116 | } 117 | 118 | // Function decorator 119 | class C { 120 | @enumerable(false) 121 | method() { } 122 | } 123 | 124 | function enumerable(value) { 125 | return function (target, key, descriptor) { 126 | descriptor.enumerable = value; 127 | return descriptor; 128 | } 129 | } 130 | ``` 131 | - [Proposal](https://github.com/wycats/javascript-decorators/blob/master/README.md) 132 | - [Bug](https://phabricator.babeljs.io/T2645) 133 | - Apparently not supported, you have to include [`babel-plugin-transform-decorators-legacy`](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy) 134 | 135 | ### [Export extensions](https://babeljs.io/docs/plugins/transform-export-extensions/) ([`babel-plugin-transform-export-extensions`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-export-extensions)) 136 | ```js 137 | // from https://github.com/leebyron/ecmascript-more-export-from 138 | 139 | export * as ns from "mod"; 140 | export v from "mod"; 141 | ``` 142 | - [Proposal](https://github.com/leebyron/ecmascript-more-export-from) 143 | 144 | # [Stage 2](https://github.com/babel/babel/blob/master/packages/babel-preset-stage-2/index.js) 145 | 146 | ### [Trailing function commas](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/) ([`babel-plugin-syntax-trailing-function-commas`](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-trailing-function-commas)) 147 | ```js 148 | // from https://github.com/jeffmo/es-trailing-function-commas 149 | 150 | function clownPuppiesEverywhere( 151 | param1, 152 | param2, // Next parameter that's added only has to add a new line, not modify this line 153 | ) { /* ... */ } 154 | 155 | clownPuppiesEverywhere( 156 | 'foo', 157 | 'bar', 158 | ); 159 | ``` 160 | - [Proposal](https://github.com/jeffmo/es-trailing-function-commas) 161 | - [Spec](http://jeffmo.github.io/es-trailing-function-commas/) 162 | 163 | ### [Object rest spread](https://babeljs.io/docs/plugins/transform-object-rest-spread/) ([`babel-plugin-transform-object-rest-spread`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-object-rest-spread)) 164 | ```js 165 | // from https://github.com/sebmarkbage/ecmascript-rest-spread 166 | 167 | // Rest properties 168 | let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; 169 | x; // 1 170 | y; // 2 171 | z; // { a: 3, b: 4 } 172 | 173 | // Spread properties 174 | let n = { x, y, ...z }; 175 | n; // { x: 1, y: 2, a: 3, b: 4 } 176 | ``` 177 | - [Proposal](https://github.com/sebmarkbage/ecmascript-rest-spread) 178 | - [Spec](https://github.com/sebmarkbage/ecmascript-rest-spread/blob/master/Spec.md) 179 | 180 | # [Stage 3](https://github.com/babel/babel/blob/master/packages/babel-preset-stage-3/index.js) 181 | 182 | ### [Async to generator](https://babeljs.io/docs/plugins/transform-async-to-generator/) ([`babel-plugin-transform-async-to-generator`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-async-to-generator)) 183 | ```js 184 | // from http://babeljs.io/docs/plugins/transform-async-to-generator/ 185 | 186 | async function foo() { 187 | await bar(); 188 | } 189 | 190 | // equivalent 191 | var _asyncToGenerator = function (fn) { 192 | ... 193 | }; 194 | var foo = _asyncToGenerator(function* () { 195 | yield bar(); 196 | }); 197 | ``` 198 | - [Proposal](https://github.com/tc39/ecmascript-asyncawait) 199 | 200 | ### [Exponentiation operator](https://babeljs.io/docs/plugins/transform-exponentiation-operator/) ([`babel-plugin-transform-exponentiation-operator`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-exponentiation-operator)) 201 | ```js 202 | // from https://github.com/rwaldron/exponentiation-operator 203 | 204 | // x ** y 205 | 206 | let squared = 2 ** 2; 207 | // same as: 2 * 2 208 | 209 | let cubed = 2 ** 3; 210 | // same as: 2 * 2 * 2 211 | 212 | 213 | // x **= y 214 | 215 | let a = 2; 216 | a **= 2; 217 | // same as: a = a * a; 218 | 219 | let b = 3; 220 | b **= 3; 221 | // same as: b = b * b * b; 222 | ``` 223 | - [Proposal](https://github.com/rwaldron/exponentiation-operator) 224 | - [Spec](http://rwaldron.github.io/exponentiation-operator/) 225 | - [The Exponentiation Operator in Babel](https://blog.mariusschulz.com/2015/11/24/the-exponentiation-operator-in-javascript#the-exponentiation-operator-in-babel) 226 | --------------------------------------------------------------------------------