Adds Babel plugin babel-plugin-optimize-react

packages/babel-plugin-optimize-react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/babel-plugin-optimize-react/README.md

@@ -0,0 +1,58 @@
+# babel-plugin-optimize-react-hooks
+
+This Babel 7 plugin optimizes React hooks by transforming common patterns into more effecient output when using with tools such as [Create React App](https://github.com/facebook/create-react-app). For example, with this plugin the following output is optimized as shown:
+
+```js
+// Original
+var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1_["useState"])(Math.random()),
+    _State2 = Object(_Users_gaearon_p_create_rreact_app_node_modules_babel_runtime_helpers_esm_sliceToArray_WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 1),
+    value = _useState2[0];
+
+// With this plugin
+var useState = react__WEBPACK_IMPORTED_MODULE_1_.useState;
+var __ref__0 = useState(Math.random());
+var value = __ref__0[0];
+```
+
+## Named imports to hooks get transformed
+
+```js
+// Original
+import React, {useState} from 'react';
+
+// With this plugin
+import React from 'react';
+const {useState} = React;
+```
+
+## Array destructuring transform for React's built-in hooks
+
+```js
+// Original
+const [counter, setCounter] = useState(0);
+
+// With this plugin
+const __ref__0 = useState(0);
+const counter = __ref__0[0];
+const setCounter = __ref__0[1];
+```
+
+## React.createElement becomes a hoisted constant
+
+```js
+// Original
+import React from 'react';
+
+function MyComponent() {
+  return React.createElement('div', null, 'Hello world');
+}
+
+// With this plugin
+import React from 'react';
+const __reactCreateElement__ = React.createElement;
+
+function MyComponent() {
+  return __reactCreateElement__('div', null, 'Hello world');
+}
+```
+

packages/babel-plugin-optimize-react/__tests__/__snapshots__/createElement-test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`React createElement transforms should transform React.createElement calls #2 1`] = `
+"const React = require(\\"react\\");
+
+const __reactCreateElement__ = React.createElement;
+export function MyComponent() {
+  return __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\"));
+}"
+`;
+
+exports[`React createElement transforms should transform React.createElement calls #3 1`] = `
+"const React = require(\\"react\\");
+
+const __reactCreateElement__ = React.createElement;
+
+const node = __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\"));
+
+export function MyComponent() {
+  return node;
+}"
+`;
+
+exports[`React createElement transforms should transform React.createElement calls 1`] = `
+"import React from \\"react\\";
+const __reactCreateElement__ = React.createElement;
+export function MyComponent() {
+  return __reactCreateElement__(\\"div\\");
+}"
+`;

packages/babel-plugin-optimize-react/__tests__/__snapshots__/hooks-test.js.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #2 1`] = `
+"import React from \\"react\\";
+const __reactCreateElement__ = React.createElement;
+const {
+  useState
+} = React;
+export function MyComponent() {
+  const _ref_0 = useState(0);
+
+  const setCounter = _ref_0[1];
+  const counter = _ref_0[0];
+  return __reactCreateElement__(\\"div\\", null, counter);
+}"
+`;
+
+exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #3 1`] = `
+"import React from \\"react\\";
+const __reactCreateElement__ = React.createElement;
+const useState = React.useState;
+export function MyComponent() {
+  const _ref_0 = useState(0);
+
+  const setCounter = _ref_0[1];
+  const counter = _ref_0[0];
+  return __reactCreateElement__(\\"div\\", null, counter);
+}"
+`;
+
+exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #4 1`] = `
+"import React from \\"react\\";
+const __reactCreateElement__ = React.createElement;
+const foo = React.useState;
+export function MyComponent() {
+  const _ref_0 = foo(0);
+
+  const setCounter = _ref_0[1];
+  const counter = _ref_0[0];
+  return __reactCreateElement__(\\"div\\", null, counter);
+}"
+`;
+
+exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #5 1`] = `
+"import React from \\"react\\";
+const __reactCreateElement__ = React.createElement;
+const {
+  useState: foo
+} = React;
+export function MyComponent() {
+  const _ref_0 = foo(0);
+
+  const setCounter = _ref_0[1];
+  const counter = _ref_0[0];
+  return __reactCreateElement__(\\"div\\", null, counter);
+}"
+`;
+
+exports[`Babel plugin optimize React hooks should support destructuring hooks from imports 1`] = `
+"import React from \\"react\\";
+const __reactCreateElement__ = React.createElement;
+const {
+  useState
+} = React;
+export function MyComponent() {
+  const _ref_0 = useState(0);
+
+  const setCounter = _ref_0[1];
+  const counter = _ref_0[0];
+  return __reactCreateElement__(\\"div\\", null, counter);
+}"
+`;
+
+exports[`Babel plugin optimize React hooks should support destructuring hooks from require calls 1`] = `
+"const React = require(\\"react\\");
+
+const __reactCreateElement__ = React.createElement;
+const {
+  useState
+} = React;
+export function MyComponent() {
+  const _ref_0 = useState(0);
+
+  const setCounter = _ref_0[1];
+  const counter = _ref_0[0];
+  return __reactCreateElement__(\\"div\\", null, counter);
+}"
+`;
+
+exports[`Babel plugin optimize React hooks should support transform hook imports 1`] = `
+"import React from \\"react\\";
+const {
+  useState
+} = React;"
+`;
+
+exports[`Babel plugin optimize React hooks should support transform hook imports with aliasing 1`] = `
+"import React from \\"react\\";
+const {
+  useState: foo
+} = React;"
+`;

packages/babel-plugin-optimize-react/__tests__/createElement-test.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const plugin = require('../index.js');
+const babel = require('@babel/core');
+
+function transform(code) {
+  return babel.transform(code, {
+    plugins: [plugin],
+  }).code;
+}
+
+describe('React createElement transforms', () => {
+  it('should transform React.createElement calls', () => {
+    const test = `
+      import React from "react";
+
+      export function MyComponent() {
+        return React.createElement("div");
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should transform React.createElement calls #2', () => {
+    const test = `
+      const React = require("react");
+
+      export function MyComponent() {
+        return React.createElement("div", null, React.createElement("span", null, "Hello world!"));
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should transform React.createElement calls #3', () => {
+    const test = `
+      const React = require("react");
+
+      const node = React.createElement("div", null, React.createElement("span", null, "Hello world!"));
+
+      export function MyComponent() {
+        return node;
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+});

packages/babel-plugin-optimize-react/__tests__/hooks-test.js

@@ -0,0 +1,116 @@
+'use strict';
+
+const plugin = require('../index.js');
+const babel = require('@babel/core');
+
+function transform(code) {
+  return babel.transform(code, {
+    plugins: [plugin],
+  }).code;
+}
+
+describe('React hook transforms', () => {
+  it('should support transform hook imports', () => {
+    const test = `
+      import React, {useState} from "react";
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support transform hook imports with aliasing', () => {
+    const test = `
+      import React, {useState as foo} from "react";
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support destructuring hooks from imports', () => {
+    const test = `
+      import React, {useState} from "react";
+
+      export function MyComponent() {
+        const [counter, setCounter] = useState(0);
+
+        return React.createElement("div", null, counter);
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support destructuring hooks from imports #2', () => {
+    const test = `
+      import React from "react";
+      const {useState} = React;
+
+      export function MyComponent() {
+        const [counter, setCounter] = useState(0);
+
+        return React.createElement("div", null, counter);
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support destructuring hooks from imports #3', () => {
+    const test = `
+      import React from "react";
+      const useState = React.useState;
+
+      export function MyComponent() {
+        const [counter, setCounter] = useState(0);
+
+        return React.createElement("div", null, counter);
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support destructuring hooks from imports #4', () => {
+    const test = `
+      import React from "react";
+      const foo = React.useState;
+
+      export function MyComponent() {
+        const [counter, setCounter] = foo(0);
+
+        return React.createElement("div", null, counter);
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support destructuring hooks from imports #5', () => {
+    const test = `
+      import React, {useState as foo} from "react";
+
+      export function MyComponent() {
+        const [counter, setCounter] = foo(0);
+
+        return React.createElement("div", null, counter);
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support destructuring hooks from require calls', () => {
+    const test = `
+      const React = require("react");
+      const {useState} = React;
+
+      export function MyComponent() {
+        const [counter, setCounter] = useState(0);
+
+        return React.createElement("div", null, counter);
+      }
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+});