diff --git a/packages/babel-plugin-transform-react-constant-elements/README.md b/packages/babel-plugin-transform-react-constant-elements/README.md index e2c7e2cb99..562f4d77cf 100644 --- a/packages/babel-plugin-transform-react-constant-elements/README.md +++ b/packages/babel-plugin-transform-react-constant-elements/README.md @@ -1,11 +1,54 @@ # babel-plugin-transform-react-constant-elements -Treat React JSX elements as value types and hoist them to the highest scope +Hoists element creation to the top level for subtrees that are fully static, which reduces both allocations and calls to `React.createElement`. More importantly, it tells React that the subtree hasn't changed so React can completely skip it when reconciling. + +This transform **should be enabled only in production** (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic. + +## Example + +**In** + +```js +const Hr = () => { + return
; +}; +``` + +**Out** + +```js +const _ref =
; + +const Hr = () => { + return _ref; +}; +``` + +**Deopts** + +- **Spread Operator** + + ```js +
+ ``` + +- **Refs** + + ```js +
+
this.node = node} /> + ``` + +- **Composite Components** + + ```js + const ComponentA = () =>
; + ``` ## Installation ```sh -$ npm install babel-plugin-transform-react-constant-elements +npm install babel-plugin-transform-react-constant-elements ``` ## Usage @@ -23,7 +66,7 @@ $ npm install babel-plugin-transform-react-constant-elements ### Via CLI ```sh -$ babel --plugins transform-react-constant-elements script.js +babel --plugins transform-react-constant-elements script.js ``` ### Via Node API @@ -33,3 +76,7 @@ require("babel-core").transform("code", { plugins: ["transform-react-constant-elements"] }); ``` + +## References + +* [[facebook/react#3226] Optimizing Compiler: Reuse Constant Value Types like ReactElement](https://github.com/facebook/react/issues/3226) diff --git a/packages/babel-plugin-transform-react-display-name/README.md b/packages/babel-plugin-transform-react-display-name/README.md index 1eeb49cda2..5bdd354bd2 100644 --- a/packages/babel-plugin-transform-react-display-name/README.md +++ b/packages/babel-plugin-transform-react-display-name/README.md @@ -5,7 +5,7 @@ Add displayName to React.createClass calls ## Installation ```sh -$ npm install babel-plugin-transform-react-display-name +npm install babel-plugin-transform-react-display-name ``` ## Usage @@ -23,7 +23,7 @@ $ npm install babel-plugin-transform-react-display-name ### Via CLI ```sh -$ babel --plugins transform-react-display-name script.js +babel --plugins transform-react-display-name script.js ``` ### Via Node API diff --git a/packages/babel-plugin-transform-react-inline-elements/README.md b/packages/babel-plugin-transform-react-inline-elements/README.md index 8d3834c3d4..17ec1d9214 100644 --- a/packages/babel-plugin-transform-react-inline-elements/README.md +++ b/packages/babel-plugin-transform-react-inline-elements/README.md @@ -1,11 +1,46 @@ # babel-plugin-transform-react-inline-elements -Turn JSX elements into exploded React objects +Replaces the `React.createElement` function with one that is more optimized for production: `babelHelpers.jsx`. + +This transform **should be enabled only in production** (e.g., just before minifying your code) because although it improves runtime performance, it makes warning messages more cryptic and skips important checks that happen in development mode, including propTypes. + +## Example + +**In** + +```javascript +; +``` + +**Out** + +```javascript +babelHelpers.jsx(Baz, { + foo: "bar" +}, "1"); + +/** + * Instead of + * + * React.createElement(Baz, { + * foo: "bar", + * key: "1", + * }); + */ +``` + +**Deopt** + +```js +// The plugin will still use React.createElement when `ref` or `object rest spread` is used + + +``` ## Installation ```sh -$ npm install babel-plugin-transform-react-inline-elements +npm install babel-plugin-transform-react-inline-elements ``` ## Usage @@ -23,7 +58,7 @@ $ npm install babel-plugin-transform-react-inline-elements ### Via CLI ```sh -$ babel --plugins transform-react-inline-elements script.js +babel --plugins transform-react-inline-elements script.js ``` ### Via Node API @@ -33,3 +68,7 @@ require("babel-core").transform("code", { plugins: ["transform-react-inline-elements"] }); ``` + +## References + +* [[facebook/react#3228] Optimizing Compiler: Inline React Elements](https://github.com/facebook/react/issues/3228) diff --git a/packages/babel-plugin-transform-react-jsx-compat/README.md b/packages/babel-plugin-transform-react-jsx-compat/README.md index dee9fd8fdb..78cf95c320 100644 --- a/packages/babel-plugin-transform-react-jsx-compat/README.md +++ b/packages/babel-plugin-transform-react-jsx-compat/README.md @@ -2,10 +2,30 @@ Turn JSX into React Pre-0.12 function calls +## Example + +**In** + +```javascript +var profile =
+ +

{[user.firstName, user.lastName].join(' ')}

+
; +``` + +**Out** + +```javascript +var profile = React.DOM.div(null, + React.DOM.img({ src: "avatar.png", "class": "profile" }), + React.DOM.h3(null, [user.firstName, user.lastName].join(" ")) +); +``` + ## Installation ```sh -$ npm install babel-plugin-transform-react-jsx-compat +npm install babel-plugin-transform-react-jsx-compat ``` ## Usage @@ -23,7 +43,7 @@ $ npm install babel-plugin-transform-react-jsx-compat ### Via CLI ```sh -$ babel --plugins transform-react-jsx-compat script.js +babel --plugins transform-react-jsx-compat script.js ``` ### Via Node API diff --git a/packages/babel-plugin-transform-react-jsx-self/README.md b/packages/babel-plugin-transform-react-jsx-self/README.md index 2a60a3b501..1d131d6f1c 100644 --- a/packages/babel-plugin-transform-react-jsx-self/README.md +++ b/packages/babel-plugin-transform-react-jsx-self/README.md @@ -5,12 +5,12 @@ should enable this transform in dev mode. ## Example -###In +### In ``` ``` -###Out +### Out ``` @@ -19,7 +19,7 @@ should enable this transform in dev mode. ## Installation ```sh -$ npm install babel-plugin-transform-react-jsx-self +npm install babel-plugin-transform-react-jsx-self ``` ## Usage @@ -37,7 +37,7 @@ $ npm install babel-plugin-transform-react-jsx-self ### Via CLI ```sh -$ babel --plugins transform-react-jsx-self script.js +babel --plugins transform-react-jsx-self script.js ``` ### Via Node API diff --git a/packages/babel-plugin-transform-react-jsx-source/README.md b/packages/babel-plugin-transform-react-jsx-source/README.md index 002c1adbd9..bb4096e3e4 100644 --- a/packages/babel-plugin-transform-react-jsx-source/README.md +++ b/packages/babel-plugin-transform-react-jsx-source/README.md @@ -4,12 +4,12 @@ Adds source file and line number to JSX elements. ## Example -###In +### In ``` ``` -###Out +### Out ``` @@ -18,7 +18,7 @@ Adds source file and line number to JSX elements. ## Installation ```sh -$ npm install babel-plugin-transform-react-jsx-source +npm install babel-plugin-transform-react-jsx-source ``` ## Usage @@ -36,7 +36,7 @@ $ npm install babel-plugin-transform-react-jsx-source ### Via CLI ```sh -$ babel --plugins transform-react-jsx-source script.js +babel --plugins transform-react-jsx-source script.js ``` ### Via Node API diff --git a/packages/babel-plugin-transform-react-jsx/README.md b/packages/babel-plugin-transform-react-jsx/README.md index 7534e19486..1a6ce1c1b4 100644 --- a/packages/babel-plugin-transform-react-jsx/README.md +++ b/packages/babel-plugin-transform-react-jsx/README.md @@ -2,10 +2,60 @@ Turn JSX into React function calls +## Example + +### React + +**In** + +```javascript +var profile =
+ +

{[user.firstName, user.lastName].join(' ')}

+
; +``` + +**Out** + +```javascript +var profile = React.createElement("div", null, + React.createElement("img", { src: "avatar.png", className: "profile" }), + React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) +); +``` + +### Custom + +**In** + +```javascript +/** @jsx dom */ + +var { dom } = require("deku"); + +var profile =
+ +

{[user.firstName, user.lastName].join(' ')}

+
; +``` + +**Out** + +```javascript +/** @jsx dom */ + +var dom = require("deku").dom; + +var profile = dom( "div", null, + dom("img", { src: "avatar.png", className: "profile" }), + dom("h3", null, [user.firstName, user.lastName].join(" ")) +); +``` + ## Installation ```sh -$ npm install babel-plugin-transform-react-jsx +npm install babel-plugin-transform-react-jsx ``` ## Usage @@ -32,7 +82,7 @@ $ npm install babel-plugin-transform-react-jsx ### Via CLI ```sh -$ babel --plugins transform-react-jsx script.js +babel --plugins transform-react-jsx script.js ``` ### Via Node API @@ -42,3 +92,9 @@ require("babel-core").transform("code", { plugins: ["transform-react-jsx"] }); ``` + +## Options + +* `pragma` - Replace the function used when compiling JSX expressions (Defaults to `React.createElement`). + - Note that the `@jsx React.DOM` pragma has been deprecated as of React v0.12 +* `useBuiltIns` - When spreading props, use Object.assign instead of Babel's extend helper (Disabled by default).