diff --git a/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js b/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js
index 890bc6fa11f0..fa92006afe68 100644
--- a/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js
+++ b/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);
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index 4d434bdc3aea..2e486772bdd8 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/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);
},
},
};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js
new file mode 100644
index 000000000000..a07f84cb030f
--- /dev/null
+++ b/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 = () =>
+ return
+
+ function BComponent () {
+ return
+ }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js
new file mode 100644
index 000000000000..41bae7bbc50c
--- /dev/null
+++ b/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 =
);
+
+ return ;
+
+ function BComponent() {
+ return _CComponent || (_CComponent = );
+ }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs
index 5f4d4762cf4f..ddfb74c704e0 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs
+++ b/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 = child
;
+var _div, _div2;
const AppItem = () => {
- return _ref;
+ return _div || (_div = child
);
};
-var _ref2 = ;
-
export default class App extends React.Component {
render() {
- return _ref2;
+ return _div2 || (_div2 = );
}
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js
index 5b5fdfbf7731..fa1301272b02 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js
+++ b/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 = child
;
-
-var _ref3 = Parent
;
+var _p, _div2;
(function () {
+ var _div;
+
class App extends React.Component {
render() {
- return _ref;
+ return _div || (_div =
+ {_p || (_p =
Parent
)}
+
+
);
}
}
const AppItem = () => {
- return _ref2;
- },
- _ref = ;
+ return _div2 || (_div2 = child
);
+ };
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js
index 7088d18dca32..cfb17af7a127 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js
+++ b/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 = child
;
-
-var _ref3 = Parent
;
+var _div, _p;
(function () {
+ var _div2;
+
const AppItem = () => {
- return _ref;
+ return _div || (_div = child
);
};
- var _ref2 = ;
-
class App extends React.Component {
render() {
- return _ref2;
+ return _div2 || (_div2 =
+ {_p || (_p =
Parent
)}
+
+
);
}
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs
index e7f8ea322a44..9228f389c37e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs
+++ b/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 = );
}
}
-var _ref2 = child
;
-
const AppItem = () => {
- return _ref2;
-},
- _ref = ;
+ return _div2 || (_div2 = child
);
+};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js
index 9f725b28e808..5d9fb2f0242e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js
@@ -1,9 +1,9 @@
-var _ref = ;
+var _span;
var Foo = React.createClass({
render: function () {
return
- {_ref}
+ {_span || (_span = )}
;
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs
index cb11c5579d5b..2876e603f127 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs
@@ -1,6 +1,6 @@
-import React from 'react'; // Regression test for https://github.com/babel/babel/issues/5552
+var _div2;
-var _ref =
;
+import React from 'react'; // Regression test for https://github.com/babel/babel/issues/5552
class BugReport extends React.Component {
constructor(...args) {
@@ -8,8 +8,12 @@ class BugReport extends React.Component {
this.thisWontWork = ({
color
- }) => data => {
- return does not reference data
;
+ }) => {
+ var _div;
+
+ return data => {
+ return _div || (_div = does not reference data
);
+ };
};
this.thisWorks = ({
@@ -20,7 +24,7 @@ class BugReport extends React.Component {
}
render() {
- return _ref;
+ return _div2 || (_div2 =
);
}
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs
index ed30e4854564..9e61fb7c0db8 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs
@@ -1,9 +1,7 @@
+var _Loader, _Loader2;
+
import React from 'react';
import Loader from 'loader';
-var _ref = ;
-
-var _ref2 = ;
-
-const errorComesHere = () => _ref,
- thisWorksFine = () => _ref2;
+const errorComesHere = () => _Loader || (_Loader = ),
+ thisWorksFine = () => _Loader2 || (_Loader2 = );
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js
index e3e86ae68d6e..ffdc3b7b83c9 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js
@@ -1,7 +1,7 @@
-var Foo = require("Foo");
+var _Foo;
-var _ref = ;
+var Foo = require("Foo");
function render() {
- return _ref;
+ return _Foo || (_Foo = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js
index 325f0daf7c80..8433445bc998 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js
@@ -1,12 +1,10 @@
-var _ref = ;
-
-var _ref2 = ;
+var _b, _span;
function render() {
- var children = _ref;
+ var children = _b || (_b = );
if (someCondition) {
- children = _ref2;
+ children = _span || (_span = );
}
return {children}
;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs
index 83c8f677226e..a4e8fa17c05a 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs
@@ -1,3 +1,5 @@
+var _span;
+
let foo = 'hello';
const mutate = () => {
@@ -6,5 +8,5 @@ const mutate = () => {
export const Component = () => {
if (Math.random() > 0.5) mutate();
- return {foo} ;
+ return _span || (_span = {foo} );
};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs
index dd266a198d47..15241789ceae 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs
@@ -1,5 +1,7 @@
+var _span;
+
let foo = 'hello';
export const Component = () => {
foo = 'goodbye';
- return {foo} ;
+ return _span || (_span = {foo} );
};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs
index 060811816d12..741f92d9b64d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs
@@ -1,14 +1,13 @@
+var _div, _div2;
+
import React from "react";
-const Parent = ({}) => _ref;
+const Parent = ({}) => _div || (_div =
+
+
);
export default Parent;
-var _ref2 =
+let Child = () => _div2 || (_div2 =
ChildTextContent
-
;
-
-let Child = () => _ref2,
- _ref =
-
-
;
+
);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js
index 878e19404bce..f40c08b855a3 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js
@@ -1,16 +1,18 @@
function render() {
+ var _foo;
+
const bar = "bar",
- _ref = ,
- renderFoo = () => _ref;
+ renderFoo = () => _foo || (_foo = );
return renderFoo();
}
function render() {
+ var _foo2;
+
const bar = "bar",
- renderFoo = () => _ref2,
- baz = "baz",
- _ref2 = ;
+ renderFoo = () => _foo2 || (_foo2 = ),
+ baz = "baz";
return renderFoo();
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js
index 86a47eb10a31..eb63e3b7653d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js
@@ -1,7 +1,6 @@
function render() {
- var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
- var _ref = ;
+ var _Component;
- return () => _ref;
+ var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+ return () => _Component || (_Component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js
index 6780bc3d8930..9706218270f4 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js
@@ -1,8 +1,8 @@
function render(Component) {
- var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '',
- _ref = ;
+ var _Component;
+ var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
return function () {
- return _ref;
+ return _Component || (_Component = );
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs
index d1521a3baf4b..a4da896b7be5 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs
@@ -1,19 +1,17 @@
+var _div, _div2;
+
import React from "react";
const HOC = component => component;
-const Parent = ({}) => _ref;
+const Parent = ({}) => _div || (_div =
+
+
);
export default Parent;
-var _ref2 =
+let Child = () => _div2 || (_div2 =
ChildTextContent
-
;
-
-let Child = () => _ref2;
+
);
Child = HOC(Child);
-
-var _ref =
-
-
;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js
index 0e737624dad5..ee3ec4ef4f2a 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js
@@ -1,17 +1,17 @@
function render(text) {
- var _ref = {text} ;
+ var _foo;
return function () {
- return _ref;
+ return _foo || (_foo = {text} );
};
}
var Foo2 = require("Foo");
function createComponent(text) {
- var _ref2 = {text} ;
+ var _Foo;
return function render() {
- return _ref2;
+ return _Foo || (_Foo = {text} );
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js
index 2bfa9cf8e676..e7d32f1d64b6 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js
@@ -1,7 +1,7 @@
-var _ref =
;
+var _div;
var Foo = React.createClass({
render: function render() {
- return _ref;
+ return _div || (_div =
);
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js
index 7ec3220a51ab..150e87daf34c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js
@@ -1,11 +1,9 @@
-var _ref = ;
+var _foo, _div;
function render() {
- return _ref;
+ return _foo || (_foo = );
}
-var _ref2 =
;
-
function render() {
- return _ref2;
+ return _div || (_div =
);
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs
new file mode 100644
index 000000000000..47ef3a8badce
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs
@@ -0,0 +1,13 @@
+import React from "react";
+import OtherComponent from "./components/other-component";
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+
+const LazyComponent = React.lazy(() => import("./components/lazy-component"));
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs
new file mode 100644
index 000000000000..bc839b45a0ed
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs
@@ -0,0 +1,11 @@
+var _div;
+
+import React from "react";
+import OtherComponent from "./components/other-component";
+export default function App() {
+ return _div || (_div =
+
+
+
);
+}
+const LazyComponent = React.lazy(() => import("./components/lazy-component"));
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js
index 5be06a3e3d42..c32c94bcda98 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js
@@ -1,15 +1,14 @@
-var _ref = /*#__PURE__*/babelHelpers.jsx("foo", {});
+var _foo;
function render() {
- return _ref;
+ return _foo || (_foo = /*#__PURE__*/babelHelpers.jsx("foo", {}));
}
function render() {
- var text = getText();
-
- var _ref2 = /*#__PURE__*/babelHelpers.jsx("foo", {}, void 0, text);
+ var _foo2;
+ var text = getText();
return function () {
- return _ref2;
+ return _foo2 || (_foo2 = /*#__PURE__*/babelHelpers.jsx("foo", {}, void 0, text));
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js
index b0e2cde1adf9..5c99eb8a925c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js
@@ -1,9 +1,8 @@
function render() {
- var text = getText();
-
- var _ref = {text} ;
+ var _foo;
+ var text = getText();
return function () {
- return _ref;
+ return _foo || (_foo = {text} );
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs
new file mode 100644
index 000000000000..29533a6d766c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs
@@ -0,0 +1,16 @@
+function outer(arg) {
+ const valueB = null;
+ const valueA = {};
+
+ function inner() {
+ console.log(
+
+
+
+
+
+ );
+ }
+
+ inner();
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs
new file mode 100644
index 000000000000..96c3534c6e77
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs
@@ -0,0 +1,16 @@
+function outer(arg) {
+ var _A;
+
+ const valueB = null;
+ const valueA = {};
+
+ function inner() {
+ console.log(_A || (_A =
+
+
+
+ ));
+ }
+
+ inner();
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js
new file mode 100644
index 000000000000..2fd3245951bb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js
@@ -0,0 +1,3 @@
+function C(x) {
+ return
/>;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js
new file mode 100644
index 000000000000..2d78d95824f8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js
@@ -0,0 +1,5 @@
+var _span;
+
+function C(x) {
+ return
)} />;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js
new file mode 100644
index 000000000000..1ca5d8f12394
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js
@@ -0,0 +1,3 @@
+function C() {
+ return
/>;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js
new file mode 100644
index 000000000000..1b38cdbee920
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js
@@ -0,0 +1,5 @@
+var _div;
+
+function C() {
+ return _div || (_div =
/>);
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js
new file mode 100644
index 000000000000..6bbbeedd96a0
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js
@@ -0,0 +1,29 @@
+function thisExpr() {
+ return {this.Foo}
;
+}
+function thisJSX() {
+ return ;
+}
+
+class A extends B {
+ superExpr() {
+ return {super.Foo}
;
+ }
+ superJSX() {
+ return ;
+ }
+}
+
+function argumentsExpr() {
+ return {arguments.Foo}
;
+}
+function argumentsJSX() {
+ return ;
+}
+
+function newTargetExpr() {
+ return {new.target.Foo}
;
+}
+function newTargetJSX() {
+ return ;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js
new file mode 100644
index 000000000000..d34675c33953
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js
@@ -0,0 +1,34 @@
+function thisExpr() {
+ return {this.Foo}
;
+}
+
+function thisJSX() {
+ return ;
+}
+
+class A extends B {
+ superExpr() {
+ return {super.Foo}
;
+ }
+
+ superJSX() {
+ return ;
+ }
+
+}
+
+function argumentsExpr() {
+ return {arguments.Foo}
;
+}
+
+function argumentsJSX() {
+ return ;
+}
+
+function newTargetExpr() {
+ return {new.target.Foo}
;
+}
+
+function newTargetJSX() {
+ return ;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
index aa7a9994baeb..8740b7ab3d40 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
@@ -1,7 +1,6 @@
function render() {
- this.component = "div";
-
- var _ref = ;
+ var _this$component;
- return () => _ref;
+ this.component = "div";
+ return () => _this$component || (_this$component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
index b9e52e3a52ab..5b8ea9c932f9 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
@@ -1,14 +1,14 @@
-var _ref = Sub Component ;
+var _span;
class Component extends React.Component {
constructor(...args) {
- super(...args);
+ var _this$subComponent;
- this.subComponent = () => _ref;
+ super(...args);
- var _ref2 = ;
+ this.subComponent = () => _span || (_span = Sub Component );
- this.render = () => _ref2;
+ this.render = () => _this$subComponent || (_this$subComponent = );
}
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js
index 96fc93c58dee..8509a145f85a 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js
@@ -1,16 +1,14 @@
-var _ref = Sub Component ;
+var _span, _els$subComponent;
const els = {
- subComponent: () => _ref
+ subComponent: () => _span || (_span = Sub Component )
};
-var _ref2 = ;
-
class Component extends React.Component {
constructor(...args) {
super(...args);
- this.render = () => _ref2;
+ this.render = () => _els$subComponent || (_els$subComponent = );
}
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js
new file mode 100644
index 000000000000..7adc443ec2b5
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js
@@ -0,0 +1,7 @@
+function AComponent () {
+ return
+
+ function BComponent () {
+ return
+ }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js
new file mode 100644
index 000000000000..cb7a21986516
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js
@@ -0,0 +1,9 @@
+var _n$CComponent;
+
+function AComponent() {
+ return ;
+
+ function BComponent() {
+ return _n$CComponent || (_n$CComponent = );
+ }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js
index 599a2b929768..ba4339733d49 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js
@@ -1,6 +1,6 @@
function fn(Component, obj) {
- var data = obj.data,
- _ref = ;
+ var _Component;
- return () => _ref;
+ var data = obj.data;
+ return () => _Component || (_Component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js
index c039c14143f5..140c9e9a753c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js
@@ -1,9 +1,8 @@
function render(_ref) {
+ var _Component;
+
let text = _ref.text,
className = _ref.className,
id = _ref.id;
-
- var _ref2 = ;
-
- return () => _ref2;
+ return () => _Component || (_Component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js
index a00f73f6f44f..1d844d9eea6d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js
@@ -1,11 +1,10 @@
function render(_ref) {
+ var _Component;
+
let text = _ref.text,
className = _ref.className,
id = _ref.id,
props = babelHelpers.objectWithoutProperties(_ref, ["text", "className", "id"]);
-
- var _ref2 = ;
-
// intentionally ignoring props
- return () => _ref2;
+ return () => _Component || (_Component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js
index 272a607c98cc..b46ab74c8217 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js
@@ -1,7 +1,6 @@
function render(_ref) {
- let text = _ref.text;
-
- var _ref2 = ;
+ var _Component;
- return () => _ref2;
+ let text = _ref.text;
+ return () => _Component || (_Component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js
index bec3e3499344..5f084eb8af8d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js
@@ -1,8 +1,8 @@
function render(text) {
- var _ref = {text}
;
+ var _div;
return function () {
- return _ref;
+ return _div || (_div = {text}
);
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js
index 71dfc286ceb0..a19ef96b204c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js
@@ -1,7 +1,7 @@
function render(offset) {
- var _ref =
;
+ var _div;
return function () {
- return _ref;
+ return _div || (_div =
);
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js
index 79c8b1db9907..0881ed7c974e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js
@@ -1,9 +1,8 @@
-const OFFSET = 3;
-
-var _ref =
;
+var _div;
+const OFFSET = 3;
var Foo = React.createClass({
render: function () {
- return _ref;
+ return _div || (_div =
);
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs
index 1452baefa3a7..e141a9d071e8 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs
@@ -1,11 +1,10 @@
-import Intl from 'react-intl';
-
-var _ref = ;
+var _Intl$FormattedMessag;
+import Intl from 'react-intl';
var Foo = React.createClass({
render: function () {
- return _ref;
+ return _Intl$FormattedMessag || (_Intl$FormattedMessag = );
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js
index 9df27d0157b4..3c965470e497 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js
@@ -1,9 +1,9 @@
-var _ref = ;
+var _FormattedMessage;
var Foo = React.createClass({
render: function () {
- return _ref;
+ return _FormattedMessage || (_FormattedMessage = );
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js
index 957dc4a8a21b..a1d20c07c1c7 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js
@@ -1,7 +1,7 @@
-var _ref =
;
+var _div;
var Foo = React.createClass({
render: function () {
- return _ref;
+ return _div || (_div =
);
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js
index 9eb9d792f143..6611027b3429 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js
@@ -1,9 +1,8 @@
function render(text) {
- text += "yes";
-
- var _ref = {text}
;
+ var _div;
+ text += "yes";
return function () {
- return _ref;
+ return _div || (_div = {text}
);
};
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs
index d85957714c53..eab70ae8d614 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs
@@ -1,10 +1,10 @@
+var _B;
+
class A {
render() {
- return _ref;
+ return _B || (_B = /*#__PURE__*/React.createElement(B, null));
}
}
export default class B {}
-
-var _ref = /*#__PURE__*/React.createElement(B, null);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs
index 2240e0bc5c8f..2df3952bf4aa 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs
@@ -1,10 +1,10 @@
+var _B;
+
class A {
render() {
- return _ref;
+ return _B || (_B = /*#__PURE__*/React.createElement(B, null));
}
}
export class B {}
-
-var _ref = /*#__PURE__*/React.createElement(B, null);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js
index 43898f741313..14881d483fad 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js
@@ -1,9 +1,9 @@
-var _ref =
- Text
-
;
+var _div;
var Foo = React.createClass({
render: function () {
- return _ref;
+ return _div || (_div =
+ Text
+
);
}
});
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js
index a0bf6d783bed..7123cb01d3b3 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js
@@ -1,6 +1,6 @@
function fn(Component) {
- var data = "prop",
- _ref = ;
+ var _Component;
- return () => _ref;
+ var data = "prop";
+ return () => _Component || (_Component = );
}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs
new file mode 100644
index 000000000000..009e916dd701
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const namespace = {
+ MyComponent: (props) => props.name
+};
+
+const buildTest = (name) => {
+ const { MyComponent } = namespace;
+ return () => (
+
+ );
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json
new file mode 100644
index 000000000000..bc2da3765558
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json
@@ -0,0 +1,5 @@
+{
+ "BABEL_8_BREAKING": false,
+ "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+ "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js
new file mode 100644
index 000000000000..d7a47a8c79ae
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js
@@ -0,0 +1,20 @@
+"use strict";
+
+var _react = babelHelpers.interopRequireDefault(require("react"));
+
+var namespace = {
+ MyComponent: function MyComponent(props) {
+ return props.name;
+ }
+};
+
+var buildTest = function buildTest(name) {
+ var _MyComponent;
+
+ var MyComponent = namespace.MyComponent;
+ return function () {
+ return _MyComponent || (_MyComponent = /*#__PURE__*/_react["default"].createElement(MyComponent, {
+ name: name
+ }));
+ };
+};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs
new file mode 100644
index 000000000000..009e916dd701
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const namespace = {
+ MyComponent: (props) => props.name
+};
+
+const buildTest = (name) => {
+ const { MyComponent } = namespace;
+ return () => (
+
+ );
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
new file mode 100644
index 000000000000..5ca7f1f79be3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
@@ -0,0 +1,5 @@
+{
+ "BABEL_8_BREAKING": true,
+ "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+ "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
new file mode 100644
index 000000000000..c3335df084d1
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
@@ -0,0 +1,22 @@
+"use strict";
+
+var _react = babelHelpers.interopRequireDefault(require("react"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var namespace = {
+ MyComponent: function MyComponent(props) {
+ return props.name;
+ }
+};
+
+var buildTest = function buildTest(name) {
+ var _MyComponent;
+
+ var MyComponent = namespace.MyComponent;
+ return function () {
+ return _MyComponent || (_MyComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(MyComponent, {
+ name: name
+ }));
+ };
+};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs
new file mode 100644
index 000000000000..d060deb32ce8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs
@@ -0,0 +1,6 @@
+function Foo({outsetArrows, ...rest}) {
+ return useMemo(
+ () => ,
+ [outsetArrows]
+ );
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json
new file mode 100644
index 000000000000..7b8045a4f4f9
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json
@@ -0,0 +1,7 @@
+{
+ "plugins": [
+ "syntax-jsx",
+ "transform-react-constant-elements",
+ "proposal-object-rest-spread"
+ ]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs
new file mode 100644
index 000000000000..ea732bb287f4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs
@@ -0,0 +1,9 @@
+function Foo(_ref) {
+ var _div;
+
+ let {
+ outsetArrows
+ } = _ref,
+ rest = babelHelpers.objectWithoutProperties(_ref, ["outsetArrows"]);
+ return useMemo(() => _div || (_div =
), [outsetArrows]);
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs
new file mode 100644
index 000000000000..266269ea4172
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs
@@ -0,0 +1,10 @@
+import Parent from './Parent';
+import Child from './Child';
+
+function MyComponent({closeFn}) {
+ return (
+
} />
+ );
+}
+
+export default Parent;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json
new file mode 100644
index 000000000000..bc2da3765558
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json
@@ -0,0 +1,5 @@
+{
+ "BABEL_8_BREAKING": false,
+ "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+ "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js
new file mode 100644
index 000000000000..49273e64ca16
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports["default"] = void 0;
+
+var _Parent = babelHelpers.interopRequireDefault(require("./Parent"));
+
+var _Child2 = babelHelpers.interopRequireDefault(require("./Child"));
+
+function MyComponent(_ref) {
+ var _Child;
+
+ var closeFn = _ref.closeFn;
+ return /*#__PURE__*/React.createElement(_Parent["default"], {
+ render: function render() {
+ return _Child || (_Child = /*#__PURE__*/React.createElement(_Child2["default"], {
+ closeFn: closeFn
+ }));
+ }
+ });
+}
+
+var _default = _Parent["default"];
+exports["default"] = _default;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs
new file mode 100644
index 000000000000..266269ea4172
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs
@@ -0,0 +1,10 @@
+import Parent from './Parent';
+import Child from './Child';
+
+function MyComponent({closeFn}) {
+ return (
+ } />
+ );
+}
+
+export default Parent;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
new file mode 100644
index 000000000000..5ca7f1f79be3
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
@@ -0,0 +1,5 @@
+{
+ "BABEL_8_BREAKING": true,
+ "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+ "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
new file mode 100644
index 000000000000..9b8eb7bfc11e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports["default"] = void 0;
+
+var _Parent = babelHelpers.interopRequireDefault(require("./Parent"));
+
+var _Child2 = babelHelpers.interopRequireDefault(require("./Child"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function MyComponent(_ref) {
+ var _Child;
+
+ var closeFn = _ref.closeFn;
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Parent["default"], {
+ render: function render() {
+ return _Child || (_Child = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Child2["default"], {
+ closeFn: closeFn
+ }));
+ }
+ });
+}
+
+var _default = _Parent["default"];
+exports["default"] = _default;
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs
index 188cfa91ed06..9ef52b984626 100644
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs
@@ -1,8 +1,4 @@
-var _ref = ;
+var _div;
let App = /*#__PURE__*/function (_React$Component) {
babelHelpers.inherits(App, _React$Component);
@@ -17,7 +13,11 @@ let App = /*#__PURE__*/function (_React$Component) {
babelHelpers.createClass(App, [{
key: "render",
value: function render() {
- const navbarHeader = _ref;
+ const navbarHeader = _div || (_div = );
return
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js
index 92eda2c98a9e..1e46db01abe0 100644
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js
@@ -1,8 +1,4 @@
-var _ref =
;
+var _div;
let App = /*#__PURE__*/function (_React$Component) {
"use strict";
@@ -19,7 +15,11 @@ let App = /*#__PURE__*/function (_React$Component) {
babelHelpers.createClass(App, [{
key: "render",
value: function render() {
- const navbarHeader = _ref;
+ const navbarHeader = _div || (_div =
);
return