From f65b0b912b3974387ba94e96549edc6f794b0863 Mon Sep 17 00:00:00 2001 From: Nitin Date: Tue, 28 Feb 2017 21:41:05 +0530 Subject: [PATCH 1/4] added examples for transforms --- .../README.md | 18 +++++++++ .../README.md | 12 ++++++ .../README.md | 36 ++++++++++++++++++ .../README.md | 16 ++++++++ .../README.md | 16 ++++++++ .../README.md | 38 +++++++++++++++++++ .../README.md | 27 +++++++++++++ .../README.md | 14 +++++++ 8 files changed, 177 insertions(+) diff --git a/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md b/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md index 4119eb97583c..94e434c3bee5 100644 --- a/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md +++ b/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md @@ -2,6 +2,24 @@ > Babel plugin to ensure function declarations at the block level are block scoped. +## Examples + +**In** +```javascript +{ + function name (n) { + return n; + } +} + +name("Steve"); +``` + +**Out** +```javascript +repl: name is not defined +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-block-scoping/README.md b/packages/babel-plugin-transform-es2015-block-scoping/README.md index 2890f38d0942..bf1e7008a41a 100644 --- a/packages/babel-plugin-transform-es2015-block-scoping/README.md +++ b/packages/babel-plugin-transform-es2015-block-scoping/README.md @@ -2,6 +2,18 @@ > Compile ES2015 block scoping (const and let) to ES5 +## Examples + +**In** +```javascript +let msg = "Hello World!"; +``` + +**Out** +```javascript +var msg = "Hello World!"; +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-classes/README.md b/packages/babel-plugin-transform-es2015-classes/README.md index c189adf3f587..1f19f201187c 100644 --- a/packages/babel-plugin-transform-es2015-classes/README.md +++ b/packages/babel-plugin-transform-es2015-classes/README.md @@ -8,6 +8,42 @@ Built-in classes such as `Date`, `Array`, `DOM` etc cannot be properly subclasse due to limitations in ES5 (for the [es2015-classes](http://babeljs.io/docs/plugins/transform-es2015-classes) plugin). You can try to use [babel-plugin-transform-builtin-extend](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend) based on `Object.setPrototypeOf` and `Reflect.construct`, but it also has some limitations. +## Examples + +**In** +```javascript +class Test { + constructor(name) { + this.name = name; + } + + logger () { + console.log("Hello", this.name); + } +} +``` + +**Out** +```javascript +"use strict"; + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var Test = function () { + function Test(name) { + _classCallCheck(this, Test); + + this.name = name; + } + + Test.prototype.logger = function logger() { + console.log("Hello", this.name); + }; + + return Test; +}(); +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-destructuring/README.md b/packages/babel-plugin-transform-es2015-destructuring/README.md index b20732c4b0a3..f3216b951567 100644 --- a/packages/babel-plugin-transform-es2015-destructuring/README.md +++ b/packages/babel-plugin-transform-es2015-destructuring/README.md @@ -2,6 +2,22 @@ > Compile ES2015 destructuring to ES5 +## Examples + +**In** +```javascript +let arr = [1,2,3]; +let {x, y, z} = arr; +``` + +**Out** +```javascript +var arr = [1, 2, 3]; +var x = arr.x, + y = arr.y, + z = arr.z; +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-function-name/README.md b/packages/babel-plugin-transform-es2015-function-name/README.md index 815acc5be340..81ae1b716f5b 100644 --- a/packages/babel-plugin-transform-es2015-function-name/README.md +++ b/packages/babel-plugin-transform-es2015-function-name/README.md @@ -2,6 +2,22 @@ > Apply ES2015 function.name semantics to all functions +## Examples + +**In** + +```javascript +let number = (x) => x +``` + +**Out** + +```javascript +var number = function number(x) { + return x; +}; +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-object-super/README.md b/packages/babel-plugin-transform-es2015-object-super/README.md index be0d505fce39..755f8b241d7e 100644 --- a/packages/babel-plugin-transform-es2015-object-super/README.md +++ b/packages/babel-plugin-transform-es2015-object-super/README.md @@ -2,6 +2,44 @@ > Compile ES2015 object super to ES5 +## Examples + +**In** +```javascript +let obj = { + say () { + return "Hello" + } +} + +let obj2 = { + say () { + return super.say() + "World!" + } +} +``` + +**Out** +```javascript +"use strict"; + +var _obj; + +var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; + +var obj = { + say: function say() { + return "Hello"; + } +}; + +var obj2 = _obj = { + say: function say() { + return _get(_obj.__proto__ || Object.getPrototypeOf(_obj), "say", this).call(this) + "World!"; + } +}; +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-parameters/README.md b/packages/babel-plugin-transform-es2015-parameters/README.md index 5c52e0c0c887..e19b3d9740aa 100644 --- a/packages/babel-plugin-transform-es2015-parameters/README.md +++ b/packages/babel-plugin-transform-es2015-parameters/README.md @@ -8,6 +8,33 @@ This plugin transforms ES2015 parameters to ES5, this includes: - Default parameters - Rest parameters +## Examples + +**In** +```javascript +function test(x = "hello", { a, b }, ...args) { + console.log(x, a, b, args); +} +``` + +**Out** +```javascript +"use strict"; + +function test() { + var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "hello"; + var _ref = arguments[1]; + var a = _ref.a, + b = _ref.b; + + for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { + args[_key - 2] = arguments[_key]; + } + + console.log(x, a, b, args); +} +``` + ## Installation ```sh diff --git a/packages/babel-plugin-transform-es2015-sticky-regex/README.md b/packages/babel-plugin-transform-es2015-sticky-regex/README.md index aefaaf9749b8..a9b3945a9424 100644 --- a/packages/babel-plugin-transform-es2015-sticky-regex/README.md +++ b/packages/babel-plugin-transform-es2015-sticky-regex/README.md @@ -2,6 +2,20 @@ > Compile ES2015 sticky regex to an ES5 RegExp constructor +## Examples + +**In** +```javascript +const a = /o+/y; +``` + +**Out** +```javascript +"use strict"; + +var a = new RegExp("o+", "y"); +``` + ## Installation ```sh From 4779cc0e4db69306e3308df7dba33a47fadfab10 Mon Sep 17 00:00:00 2001 From: Nitin Date: Tue, 28 Feb 2017 22:21:57 +0530 Subject: [PATCH 2/4] some changes [skip ci] --- .../README.md | 2 ++ .../README.md | 18 ++++++++++++++++-- .../README.md | 4 ++-- .../README.md | 2 ++ .../README.md | 4 ++-- .../README.md | 4 ++-- .../README.md | 4 ++-- 7 files changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md b/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md index 94e434c3bee5..e2f3a75d6653 100644 --- a/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md +++ b/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md @@ -5,6 +5,7 @@ ## Examples **In** + ```javascript { function name (n) { @@ -16,6 +17,7 @@ name("Steve"); ``` **Out** + ```javascript repl: name is not defined ``` diff --git a/packages/babel-plugin-transform-es2015-block-scoping/README.md b/packages/babel-plugin-transform-es2015-block-scoping/README.md index bf1e7008a41a..bfa4f44855fb 100644 --- a/packages/babel-plugin-transform-es2015-block-scoping/README.md +++ b/packages/babel-plugin-transform-es2015-block-scoping/README.md @@ -5,13 +5,27 @@ ## Examples **In** + ```javascript -let msg = "Hello World!"; +for (let i=1; i<=10; i++) { + setTimeout( function logger(){ + console.log( i ); // block scope for closure + }, i*1000 ); +} ``` **Out** + ```javascript -var msg = "Hello World!"; +var _loop = function _loop(i) { + setTimeout(function logger() { + console.log(i); + }, i * 1000); +}; + +for (var i = 1; i <= 10; i++) { + _loop(i); +} ``` ## Installation diff --git a/packages/babel-plugin-transform-es2015-classes/README.md b/packages/babel-plugin-transform-es2015-classes/README.md index 1f19f201187c..400e57f72e62 100644 --- a/packages/babel-plugin-transform-es2015-classes/README.md +++ b/packages/babel-plugin-transform-es2015-classes/README.md @@ -11,6 +11,7 @@ You can try to use [babel-plugin-transform-builtin-extend](https://github.com/lo ## Examples **In** + ```javascript class Test { constructor(name) { @@ -24,9 +25,8 @@ class Test { ``` **Out** -```javascript -"use strict"; +```javascript function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Test = function () { diff --git a/packages/babel-plugin-transform-es2015-destructuring/README.md b/packages/babel-plugin-transform-es2015-destructuring/README.md index f3216b951567..ed6d5b05daec 100644 --- a/packages/babel-plugin-transform-es2015-destructuring/README.md +++ b/packages/babel-plugin-transform-es2015-destructuring/README.md @@ -5,12 +5,14 @@ ## Examples **In** + ```javascript let arr = [1,2,3]; let {x, y, z} = arr; ``` **Out** + ```javascript var arr = [1, 2, 3]; var x = arr.x, diff --git a/packages/babel-plugin-transform-es2015-object-super/README.md b/packages/babel-plugin-transform-es2015-object-super/README.md index 755f8b241d7e..a31673bf7aa8 100644 --- a/packages/babel-plugin-transform-es2015-object-super/README.md +++ b/packages/babel-plugin-transform-es2015-object-super/README.md @@ -5,6 +5,7 @@ ## Examples **In** + ```javascript let obj = { say () { @@ -20,9 +21,8 @@ let obj2 = { ``` **Out** -```javascript -"use strict"; +```javascript var _obj; var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; diff --git a/packages/babel-plugin-transform-es2015-parameters/README.md b/packages/babel-plugin-transform-es2015-parameters/README.md index e19b3d9740aa..1587fe5c5bb6 100644 --- a/packages/babel-plugin-transform-es2015-parameters/README.md +++ b/packages/babel-plugin-transform-es2015-parameters/README.md @@ -11,6 +11,7 @@ This plugin transforms ES2015 parameters to ES5, this includes: ## Examples **In** + ```javascript function test(x = "hello", { a, b }, ...args) { console.log(x, a, b, args); @@ -18,9 +19,8 @@ function test(x = "hello", { a, b }, ...args) { ``` **Out** -```javascript -"use strict"; +```javascript function test() { var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "hello"; var _ref = arguments[1]; diff --git a/packages/babel-plugin-transform-es2015-sticky-regex/README.md b/packages/babel-plugin-transform-es2015-sticky-regex/README.md index a9b3945a9424..a62594a3dd74 100644 --- a/packages/babel-plugin-transform-es2015-sticky-regex/README.md +++ b/packages/babel-plugin-transform-es2015-sticky-regex/README.md @@ -5,14 +5,14 @@ ## Examples **In** + ```javascript const a = /o+/y; ``` **Out** -```javascript -"use strict"; +```javascript var a = new RegExp("o+", "y"); ``` From 1c53932c21a22f3c9799e164cd67a92865d70070 Mon Sep 17 00:00:00 2001 From: Sven SAULEAU Date: Thu, 2 Mar 2017 22:23:13 +0100 Subject: [PATCH 3/4] [skip ci] --- .../README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md b/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md index e2f3a75d6653..b804ed583e7d 100644 --- a/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md +++ b/packages/babel-plugin-transform-es2015-block-scoped-functions/README.md @@ -19,7 +19,13 @@ name("Steve"); **Out** ```javascript -repl: name is not defined +{ + var _name = function _name(n) { + return n; + }; +} + +name("Steve"); ``` ## Installation From 2b07e312ac36eb2f0001f80d16b98ea62954ff32 Mon Sep 17 00:00:00 2001 From: Nitin Date: Sun, 5 Mar 2017 00:21:49 +0530 Subject: [PATCH 4/4] example changed [skip ci] --- .../README.md | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/babel-plugin-transform-es2015-block-scoping/README.md b/packages/babel-plugin-transform-es2015-block-scoping/README.md index bfa4f44855fb..182e7c5b76ef 100644 --- a/packages/babel-plugin-transform-es2015-block-scoping/README.md +++ b/packages/babel-plugin-transform-es2015-block-scoping/README.md @@ -7,25 +7,21 @@ **In** ```javascript -for (let i=1; i<=10; i++) { - setTimeout( function logger(){ - console.log( i ); // block scope for closure - }, i*1000 ); +{ + let a = 3 } + +let a = 3 ``` **Out** ```javascript -var _loop = function _loop(i) { - setTimeout(function logger() { - console.log(i); - }, i * 1000); -}; - -for (var i = 1; i <= 10; i++) { - _loop(i); +{ + var _a = 3; } + +var a = 3; ``` ## Installation