Adds Babel plugin babel-plugin-optimize-react

Created by: trueadm

This PR adds a Babel 7 plugin that aims to optimize certain React patterns that aren't as optimized as they might be. For example, with this plugin the following output is optimized as shown:

// 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 for React get transformed

// 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

// 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

// 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

+// 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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`React hook transforms 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[`React hook transforms 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[`React hook transforms 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[`React hook transforms 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[`React hook transforms 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[`React hook transforms 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[`React hook transforms should support hook CJS require with no default 1`] = `
+"const {
+  useState
+} = require(\\"react\\");"
+`;
+
+exports[`React hook transforms should support hook imports with aliasing 1`] = `
+"import React from \\"react\\";
+const {
+  useState: foo
+} = React;"
+`;
+
+exports[`React hook transforms should support hook imports with no default 1`] = `
+"import React from \\"react\\";
+const {
+  useState
+} = React;"
+`;
+
+exports[`React hook transforms should support mixed hook imports 1`] = `
+"import React from \\"react\\";
+import { memo } from \\"react\\";
+const {
+  useState
+} = React;"
+`;
+
+exports[`React hook transforms should support mixed hook imports with no default 1`] = `
+"import React from \\"react\\";
+const {
+  useState
+} = React;
+import { memo } from \\"react\\";"
+`;
+
+exports[`React hook transforms should support transform hook imports 1`] = `
+"import React from \\"react\\";
+const {
+  useState
+} = React;"
+`;

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

+'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

+'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 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();
+  });
+
+  it('should support hook imports with no default', () => {
+    const test = `
+      import {useState} from "react";
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support hook CJS require with no default', () => {
+    const test = `
+      const {useState} = require("react");
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support mixed hook imports', () => {
+    const test = `
+      import React from "react";
+      import {memo, useState} from "react";
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should support mixed hook imports with no default', () => {
+    const test = `
+      import {useState} from "react";
+      import {memo} from "react";
+    `;
+    const output = transform(test);
+    expect(output).toMatchSnapshot();
+  });
+});

packages/babel-plugin-optimize-react/LICENSE

+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.