Lazily initialize and cache constant JSX elements

packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js

@@ -1,16 +1,16 @@
+var _Contact;
+
 const title = "Neem contact op";
 
 function action() {
   return _action.apply(this, arguments);
 }
 
-var _ref = /*#__PURE__*/React.createElement(Contact, {
-  title: title
-});
-
 function _action() {
   _action = babelHelpers.asyncToGenerator(function* () {
-    return _ref;
+    return _Contact || (_Contact = /*#__PURE__*/React.createElement(Contact, {
+      title: title
+    }));
   });
   return _action.apply(this, arguments);
 }

packages/babel-plugin-transform-react-constant-elements/src/index.js

@@ -1,5 +1,5 @@
 import { declare } from "@babel/helper-plugin-utils";
-import { types as t } from "@babel/core";
+import { types as t, template } from "@babel/core";
 
 export default declare((api, options) => {
   api.assertVersion(7);
@@ -15,9 +15,33 @@ export default declare((api, options) => {
     );
   }
 
-  const HOISTED = new WeakSet();
+  // Element -> Target scope
+  const HOISTED = new WeakMap();
 
-  const immutabilityVisitor = {
+  function declares(node: t.Identifier | t.JSXIdentifier, scope) {
+    if (
+      t.isJSXIdentifier(node, { name: "this" }) ||
+      t.isJSXIdentifier(node, { name: "arguments" }) ||
+      t.isJSXIdentifier(node, { name: "super" }) ||
+      t.isJSXIdentifier(node, { name: "new" })
+    ) {
+      const { path } = scope;
+      return path.isFunctionParent() && !path.isArrowFunctionExpression();
+    }
+
+    return scope.hasOwnBinding(node.name);
+  }
+
+  function isHoistingScope({ path }) {
+    return path.isFunctionParent() || path.isLoop() || path.isProgram();
+  }
+
+  function getHoistingScope(scope) {
+    while (!isHoistingScope(scope)) scope = scope.parent;
+    return scope;
+  }
+
+  const analyzer = {
     enter(path, state) {
       const stop = () => {
         state.isImmutable = false;
@@ -41,7 +65,8 @@ export default declare((api, options) => {
       if (
         path.isJSXIdentifier() ||
         path.isIdentifier() ||
-        path.isJSXMemberExpression()
+        path.isJSXMemberExpression() ||
+        path.isJSXNamespacedName()
       ) {
         return;
       }
@@ -75,6 +100,90 @@ export default declare((api, options) => {
         stop();
       }
     },
+
+    ReferencedIdentifier(path, state) {
+      const { node } = path;
+      let { scope } = path;
+
+      while (scope) {
+        // We cannot hoist outside of the previous hoisting target
+        // scope, so we return early and we don't update it.
+        if (scope === state.targetScope) return;
+
+        // If the scope declares this identifier (or we're at the function
+        // providing the lexical env binding), we can't hoist the var any
+        // higher.
+        if (declares(node, scope)) break;
+
+        scope = scope.parent;
+      }
+
+      state.targetScope = getHoistingScope(scope);
+    },
+
+    /*
+    See the discussion at https://github.com/babel/babel/pull/12967#discussion_r587948958
+    to uncomment this code.
+
+    ReferencedIdentifier(path, state) {
+      const { node } = path;
+      let { scope } = path;
+      let targetScope;
+
+      let isNestedScope = true;
+      let needsHoisting = true;
+
+      while (scope) {
+        // We cannot hoist outside of the previous hoisting target
+        // scope, so we return early and we don't update it.
+        if (scope === state.targetScope) return;
+
+        // When we hit the scope of our JSX element, we must start
+        // checking if they declare the binding of the current
+        // ReferencedIdentifier.
+        // We don't case about bindings declared in nested scopes,
+        // because the whole nested scope is hoisted alongside the
+        // JSX element so it doesn't impose any extra constraint.
+        if (scope === state.jsxScope) {
+          isNestedScope = false;
+        }
+
+        // If we are in an upper scope and hoisting to this scope has
+        // any benefit, we update the possible targetScope to the
+        // current one.
+        if (!isNestedScope && needsHoisting) {
+          targetScope = scope;
+        }
+
+        // When we start walking in upper scopes, avoid hoisting JSX
+        // elements until we hit a scope introduced by a function or
+        // loop.
+        // This is because hoisting from the inside to the outside
+        // of block or if statements doesn't give any performance
+        // benefit, and it just unnecessarily increases the code size.
+        if (scope === state.jsxScope) {
+          needsHoisting = false;
+        }
+        if (!needsHoisting && isHoistingScope(scope)) {
+          needsHoisting = true;
+        }
+
+        // If the current scope declares the ReferencedIdentifier we
+        // are checking, we break out of this loop. There are two
+        // possible scenarios:
+        //  1. We are in a nested scope, this this declaration means
+        //     that this reference doesn't affect the target scope.
+        //     The targetScope variable is still undefined.
+        //  2. We are in an upper scope, so this declaration defines
+        //     a new hoisting constraint. The targetScope variable
+        //     refers to the current scope.
+        if (declares(node, scope)) break;
+
+        scope = scope.parent;
+      }
+
+      if (targetScope) state.targetScope = targetScope;
+    },*/
   };
 
   return {
@@ -83,30 +192,70 @@ export default declare((api, options) => {
     visitor: {
       JSXElement(path) {
         if (HOISTED.has(path.node)) return;
-        HOISTED.add(path.node);
+        HOISTED.set(path.node, path.scope);
 
-        const state = { isImmutable: true };
+        const name = path.node.openingElement.name;
 
         // This transform takes the option `allowMutablePropsOnTags`, which is an array
         // of JSX tags to allow mutable props (such as objects, functions) on. Use sparingly
         // and only on tags you know will never modify their own props.
+        let mutablePropsAllowed = false;
         if (allowMutablePropsOnTags != null) {
           // Get the element's name. If it's a member expression, we use the last part of the path.
           // So the option ["FormattedMessage"] would match "Intl.FormattedMessage".
-          let namePath = path.get("openingElement.name");
-          while (namePath.isJSXMemberExpression()) {
-            namePath = namePath.get("property");
+          let lastSegment = name;
+          while (t.isJSXMemberExpression(lastSegment)) {
+            lastSegment = lastSegment.property;
           }
 
-          const elementName = namePath.node.name;
-          state.mutablePropsAllowed =
-            allowMutablePropsOnTags.indexOf(elementName) > -1;
+          const elementName = lastSegment.name;
+          mutablePropsAllowed = allowMutablePropsOnTags.includes(elementName);
         }
 
-        // Traverse all props passed to this element for immutability.
-        path.traverse(immutabilityVisitor, state);
+        const state = {
+          isImmutable: true,
+          mutablePropsAllowed,
+          targetScope: path.scope.getProgramParent(),
+        };
+
+        // Traverse all props passed to this element for immutability,
+        // and compute the target hoisting scope
+        path.traverse(analyzer, state);
+
+        if (!state.isImmutable) return;
+
+        const { targetScope } = state;
+        HOISTED.set(path.node, targetScope);
+
+        // In order to avoid hoisting unnecessarily, we need to know which is
+        // the scope containing the current JSX element. If a parent of the
+        // current element has already been hoisted, we can consider its target
+        // scope as the base scope for the current element.
+        let jsxScope;
+        let current = path;
+        while (!jsxScope && current.parentPath.isJSX()) {
+          current = current.parentPath;
+          jsxScope = HOISTED.get(current.node);
+        }
+        jsxScope ??= getHoistingScope(path.scope);
+
+        // Only hoist if it would give us an advantage.
+        if (targetScope === jsxScope) return;
+
+        const id = path.scope.generateUidBasedOnNode(name);
+        targetScope.push({ id: t.identifier(id) });
+
+        let replacement = template.expression.ast`
+          ${t.identifier(id)} || (${t.identifier(id)} = ${path.node})
+        `;
+        if (
+          path.parentPath.isJSXElement() ||
+          path.parentPath.isJSXAttribute()
+        ) {
+          replacement = t.jsxExpressionContainer(replacement);
+        }
 
-        if (state.isImmutable) path.hoist();
+        path.replaceWith(replacement);
       },
     },
   };

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js

@@ -0,0 +1,8 @@
+function AComponent () {
+  const CComponent = () => <div/>
+  return <BComponent/>
+
+  function BComponent () {
+    return <CComponent/>
+  }
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js

@@ -0,0 +1,13 @@
+var _div;
+
+function AComponent() {
+  var _CComponent;
+
+  const CComponent = () => _div || (_div = <div />);
+
+  return <BComponent />;
+
+  function BComponent() {
+    return _CComponent || (_CComponent = <CComponent />);
+  }
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs

@@ -1,17 +1,15 @@
-var _ref = <div>child</div>;
+var _div, _div2;
 
 const AppItem = () => {
-  return _ref;
+  return _div || (_div = <div>child</div>);
 };
 
-var _ref2 = <div>
-        <p>Parent</p>
-        <AppItem />
-      </div>;
-
 export default class App extends React.Component {
   render() {
-    return _ref2;
+    return _div2 || (_div2 = <div>
+        <p>Parent</p>
+        <AppItem />
+      </div>);
   }
 
 }

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js

@@ -1,20 +1,19 @@
-var _ref2 = <div>child</div>;
-
-var _ref3 = <p>Parent</p>;
+var _p, _div2;
 
 (function () {
+  var _div;
+
   class App extends React.Component {
     render() {
-      return _ref;
+      return _div || (_div = <div>
+          {_p || (_p = <p>Parent</p>)}
+          <AppItem />
+        </div>);
     }
 
   }
 
   const AppItem = () => {
-    return _ref2;
-  },
-        _ref = <div>
-          {_ref3}
-          <AppItem />
-        </div>;
+    return _div2 || (_div2 = <div>child</div>);
+  };
 });

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js

@@ -1,20 +1,18 @@
-var _ref = <div>child</div>;
-
-var _ref3 = <p>Parent</p>;
+var _div, _p;
 
 (function () {
+  var _div2;
+
   const AppItem = () => {
-    return _ref;
+    return _div || (_div = <div>child</div>);
   };
 
-  var _ref2 = <div>
-          {_ref3}
-          <AppItem />
-        </div>;
-
   class App extends React.Component {
     render() {
-      return _ref2;
+      return _div2 || (_div2 = <div>
+          {_p || (_p = <p>Parent</p>)}
+          <AppItem />
+        </div>);
     }
 
   }

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs

@@ -1,16 +1,15 @@
+var _div, _div2;
+
 export default class App extends React.Component {
   render() {
-    return _ref;
+    return _div || (_div = <div>
+        <p>Parent</p>
+        <AppItem />
+      </div>);
   }
 
 }
 
-var _ref2 = <div>child</div>;
-
 const AppItem = () => {
-  return _ref2;
-},
-      _ref = <div>
-        <p>Parent</p>
-        <AppItem />
-      </div>;
+  return _div2 || (_div2 = <div>child</div>);
+};

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js

@@ -1,9 +1,9 @@
-var _ref = <span />;
+var _span;
 
 var Foo = React.createClass({
   render: function () {
     return <div className={this.props.className}>
-      {_ref}
+      {_span || (_span = <span />)}
     </div>;
   }
 });