Lazily initialize and cache constant JSX elements (#12967)
Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
This commit is contained in:
Nicolò Ribaudo
GitHub
parent
d04842a700
commit
8dacf85859
@ -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);
|
||||
}
|
||||
|
||||
@ -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(),
|
||||
};
|
||||
|
||||
if (state.isImmutable) path.hoist();
|
||||
// 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);
|
||||
}
|
||||
|
||||
path.replaceWith(replacement);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
function AComponent () {
|
||||
const CComponent = () => <div/>
|
||||
return <BComponent/>
|
||||
|
||||
function BComponent () {
|
||||
return <CComponent/>
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
var _div;
|
||||
|
||||
function AComponent() {
|
||||
var _CComponent;
|
||||
|
||||
const CComponent = () => _div || (_div = <div />);
|
||||
|
||||
return <BComponent />;
|
||||
|
||||
function BComponent() {
|
||||
return _CComponent || (_CComponent = <CComponent />);
|
||||
}
|
||||
}
|
||||
@ -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>);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
var _ref = <div>child</div>;
|
||||
|
||||
var _ref3 = <p>Parent</p>;
|
||||
var _div, _p;
|
||||
|
||||
(function () {
|
||||
const AppItem = () => {
|
||||
return _ref;
|
||||
};
|
||||
var _div2;
|
||||
|
||||
var _ref2 = <div>
|
||||
{_ref3}
|
||||
<AppItem />
|
||||
</div>;
|
||||
const AppItem = () => {
|
||||
return _div || (_div = <div>child</div>);
|
||||
};
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return _ref2;
|
||||
return _div2 || (_div2 = <div>
|
||||
{_p || (_p = <p>Parent</p>)}
|
||||
<AppItem />
|
||||
</div>);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>);
|
||||
};
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'; // Regression test for https://github.com/babel/babel/issues/5552
|
||||
var _div2;
|
||||
|
||||
var _ref = <div />;
|
||||
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 <div color={color}>does not reference data</div>;
|
||||
}) => {
|
||||
var _div;
|
||||
|
||||
return data => {
|
||||
return _div || (_div = <div color={color}>does not reference data</div>);
|
||||
};
|
||||
};
|
||||
|
||||
this.thisWorks = ({
|
||||
@ -20,7 +24,7 @@ class BugReport extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
return _ref;
|
||||
return _div2 || (_div2 = <div />);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
var _Loader, _Loader2;
|
||||
|
||||
import React from 'react';
|
||||
import Loader from 'loader';
|
||||
|
||||
var _ref = <Loader className="full-height" />;
|
||||
|
||||
var _ref2 = <Loader className="p-y-5" />;
|
||||
|
||||
const errorComesHere = () => _ref,
|
||||
thisWorksFine = () => _ref2;
|
||||
const errorComesHere = () => _Loader || (_Loader = <Loader className="full-height" />),
|
||||
thisWorksFine = () => _Loader2 || (_Loader2 = <Loader className="p-y-5" />);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var _Foo;
|
||||
|
||||
var Foo = require("Foo");
|
||||
|
||||
var _ref = <Foo />;
|
||||
|
||||
function render() {
|
||||
return _ref;
|
||||
return _Foo || (_Foo = <Foo />);
|
||||
}
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
var _ref = <b></b>;
|
||||
|
||||
var _ref2 = <span></span>;
|
||||
var _b, _span;
|
||||
|
||||
function render() {
|
||||
var children = _ref;
|
||||
var children = _b || (_b = <b></b>);
|
||||
|
||||
if (someCondition) {
|
||||
children = _ref2;
|
||||
children = _span || (_span = <span></span>);
|
||||
}
|
||||
|
||||
return <div>{children}</div>;
|
||||
|
||||
@ -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 <span>{foo}</span>;
|
||||
return _span || (_span = <span>{foo}</span>);
|
||||
};
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
var _span;
|
||||
|
||||
let foo = 'hello';
|
||||
export const Component = () => {
|
||||
foo = 'goodbye';
|
||||
return <span>{foo}</span>;
|
||||
return _span || (_span = <span>{foo}</span>);
|
||||
};
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
var _div, _div2;
|
||||
|
||||
import React from "react";
|
||||
|
||||
const Parent = ({}) => _ref;
|
||||
const Parent = ({}) => _div || (_div = <div className="parent">
|
||||
<Child />
|
||||
</div>);
|
||||
|
||||
export default Parent;
|
||||
|
||||
var _ref2 = <div className="child">
|
||||
let Child = () => _div2 || (_div2 = <div className="child">
|
||||
ChildTextContent
|
||||
</div>;
|
||||
|
||||
let Child = () => _ref2,
|
||||
_ref = <div className="parent">
|
||||
<Child />
|
||||
</div>;
|
||||
</div>);
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
function render() {
|
||||
var _foo;
|
||||
|
||||
const bar = "bar",
|
||||
_ref = <foo bar={bar} />,
|
||||
renderFoo = () => _ref;
|
||||
renderFoo = () => _foo || (_foo = <foo bar={bar} />);
|
||||
|
||||
return renderFoo();
|
||||
}
|
||||
|
||||
function render() {
|
||||
var _foo2;
|
||||
|
||||
const bar = "bar",
|
||||
renderFoo = () => _ref2,
|
||||
baz = "baz",
|
||||
_ref2 = <foo bar={bar} baz={baz} />;
|
||||
renderFoo = () => _foo2 || (_foo2 = <foo bar={bar} baz={baz} />),
|
||||
baz = "baz";
|
||||
|
||||
return renderFoo();
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
function render() {
|
||||
var _Component;
|
||||
|
||||
var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||||
|
||||
var _ref = <Component title={title} />;
|
||||
|
||||
return () => _ref;
|
||||
return () => _Component || (_Component = <Component title={title} />);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
function render(Component) {
|
||||
var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '',
|
||||
_ref = <Component text={text} />;
|
||||
var _Component;
|
||||
|
||||
var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
||||
return function () {
|
||||
return _ref;
|
||||
return _Component || (_Component = <Component text={text} />);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
var _div, _div2;
|
||||
|
||||
import React from "react";
|
||||
|
||||
const HOC = component => component;
|
||||
|
||||
const Parent = ({}) => _ref;
|
||||
const Parent = ({}) => _div || (_div = <div className="parent">
|
||||
<Child />
|
||||
</div>);
|
||||
|
||||
export default Parent;
|
||||
|
||||
var _ref2 = <div className="child">
|
||||
let Child = () => _div2 || (_div2 = <div className="child">
|
||||
ChildTextContent
|
||||
</div>;
|
||||
|
||||
let Child = () => _ref2;
|
||||
</div>);
|
||||
|
||||
Child = HOC(Child);
|
||||
|
||||
var _ref = <div className="parent">
|
||||
<Child />
|
||||
</div>;
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
function render(text) {
|
||||
var _ref = <foo>{text}</foo>;
|
||||
var _foo;
|
||||
|
||||
return function () {
|
||||
return _ref;
|
||||
return _foo || (_foo = <foo>{text}</foo>);
|
||||
};
|
||||
}
|
||||
|
||||
var Foo2 = require("Foo");
|
||||
|
||||
function createComponent(text) {
|
||||
var _ref2 = <Foo2>{text}</Foo2>;
|
||||
var _Foo;
|
||||
|
||||
return function render() {
|
||||
return _ref2;
|
||||
return _Foo || (_Foo = <Foo2>{text}</Foo2>);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var _ref = <div foo={notDeclared}></div>;
|
||||
var _div;
|
||||
|
||||
var Foo = React.createClass({
|
||||
render: function render() {
|
||||
return _ref;
|
||||
return _div || (_div = <div foo={notDeclared}></div>);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
var _ref = <foo />;
|
||||
var _foo, _div;
|
||||
|
||||
function render() {
|
||||
return _ref;
|
||||
return _foo || (_foo = <foo />);
|
||||
}
|
||||
|
||||
var _ref2 = <div className="foo"><input type="checkbox" checked={true} /></div>;
|
||||
|
||||
function render() {
|
||||
return _ref2;
|
||||
return _div || (_div = <div className="foo"><input type="checkbox" checked={true} /></div>);
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
import OtherComponent from "./components/other-component";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div>
|
||||
<LazyComponent />
|
||||
<OtherComponent />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const LazyComponent = React.lazy(() => import("./components/lazy-component"));
|
||||
@ -0,0 +1,11 @@
|
||||
var _div;
|
||||
|
||||
import React from "react";
|
||||
import OtherComponent from "./components/other-component";
|
||||
export default function App() {
|
||||
return _div || (_div = <div>
|
||||
<LazyComponent />
|
||||
<OtherComponent />
|
||||
</div>);
|
||||
}
|
||||
const LazyComponent = React.lazy(() => import("./components/lazy-component"));
|
||||
@ -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 _foo2;
|
||||
|
||||
var text = getText();
|
||||
|
||||
var _ref2 = /*#__PURE__*/babelHelpers.jsx("foo", {}, void 0, text);
|
||||
|
||||
return function () {
|
||||
return _ref2;
|
||||
return _foo2 || (_foo2 = /*#__PURE__*/babelHelpers.jsx("foo", {}, void 0, text));
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
function render() {
|
||||
var _foo;
|
||||
|
||||
var text = getText();
|
||||
|
||||
var _ref = <foo>{text}</foo>;
|
||||
|
||||
return function () {
|
||||
return _ref;
|
||||
return _foo || (_foo = <foo>{text}</foo>);
|
||||
};
|
||||
}
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
function outer(arg) {
|
||||
const valueB = null;
|
||||
const valueA = {};
|
||||
|
||||
function inner() {
|
||||
console.log(
|
||||
<A keyA={valueA}>
|
||||
<B keyB={valueB}>
|
||||
<C keyC={arg} />
|
||||
</B>
|
||||
</A>
|
||||
);
|
||||
}
|
||||
|
||||
inner();
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
function outer(arg) {
|
||||
var _A;
|
||||
|
||||
const valueB = null;
|
||||
const valueA = {};
|
||||
|
||||
function inner() {
|
||||
console.log(_A || (_A = <A keyA={valueA}>
|
||||
<B keyB={valueB}>
|
||||
<C keyC={arg} />
|
||||
</B>
|
||||
</A>));
|
||||
}
|
||||
|
||||
inner();
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
function C(x) {
|
||||
return <div x={x} attr=<span /> />;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
var _span;
|
||||
|
||||
function C(x) {
|
||||
return <div x={x} attr={_span || (_span = <span />)} />;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
function C() {
|
||||
return <div attr=<span /> />;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
var _div;
|
||||
|
||||
function C() {
|
||||
return _div || (_div = <div attr=<span /> />);
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
function thisExpr() {
|
||||
return <p>{this.Foo}</p>;
|
||||
}
|
||||
function thisJSX() {
|
||||
return <this.Foo />;
|
||||
}
|
||||
|
||||
class A extends B {
|
||||
superExpr() {
|
||||
return <p>{super.Foo}</p>;
|
||||
}
|
||||
superJSX() {
|
||||
return <super.Foo />;
|
||||
}
|
||||
}
|
||||
|
||||
function argumentsExpr() {
|
||||
return <p>{arguments.Foo}</p>;
|
||||
}
|
||||
function argumentsJSX() {
|
||||
return <arguments.Foo />;
|
||||
}
|
||||
|
||||
function newTargetExpr() {
|
||||
return <p>{new.target.Foo}</p>;
|
||||
}
|
||||
function newTargetJSX() {
|
||||
return <new.target.Foo />;
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
function thisExpr() {
|
||||
return <p>{this.Foo}</p>;
|
||||
}
|
||||
|
||||
function thisJSX() {
|
||||
return <this.Foo />;
|
||||
}
|
||||
|
||||
class A extends B {
|
||||
superExpr() {
|
||||
return <p>{super.Foo}</p>;
|
||||
}
|
||||
|
||||
superJSX() {
|
||||
return <super.Foo />;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function argumentsExpr() {
|
||||
return <p>{arguments.Foo}</p>;
|
||||
}
|
||||
|
||||
function argumentsJSX() {
|
||||
return <arguments.Foo />;
|
||||
}
|
||||
|
||||
function newTargetExpr() {
|
||||
return <p>{new.target.Foo}</p>;
|
||||
}
|
||||
|
||||
function newTargetJSX() {
|
||||
return <new.target.Foo />;
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
function render() {
|
||||
var _this$component;
|
||||
|
||||
this.component = "div";
|
||||
|
||||
var _ref = <this.component />;
|
||||
|
||||
return () => _ref;
|
||||
return () => _this$component || (_this$component = <this.component />);
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
var _ref = <span>Sub Component</span>;
|
||||
var _span;
|
||||
|
||||
class Component extends React.Component {
|
||||
constructor(...args) {
|
||||
var _this$subComponent;
|
||||
|
||||
super(...args);
|
||||
|
||||
this.subComponent = () => _ref;
|
||||
this.subComponent = () => _span || (_span = <span>Sub Component</span>);
|
||||
|
||||
var _ref2 = <this.subComponent />;
|
||||
|
||||
this.render = () => _ref2;
|
||||
this.render = () => _this$subComponent || (_this$subComponent = <this.subComponent />);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
var _ref = <span>Sub Component</span>;
|
||||
var _span, _els$subComponent;
|
||||
|
||||
const els = {
|
||||
subComponent: () => _ref
|
||||
subComponent: () => _span || (_span = <span>Sub Component</span>)
|
||||
};
|
||||
|
||||
var _ref2 = <els.subComponent />;
|
||||
|
||||
class Component extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
|
||||
this.render = () => _ref2;
|
||||
this.render = () => _els$subComponent || (_els$subComponent = <els.subComponent />);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
function AComponent () {
|
||||
return <BComponent/>
|
||||
|
||||
function BComponent () {
|
||||
return <n:CComponent />
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
var _n$CComponent;
|
||||
|
||||
function AComponent() {
|
||||
return <BComponent />;
|
||||
|
||||
function BComponent() {
|
||||
return _n$CComponent || (_n$CComponent = <n:CComponent />);
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
function fn(Component, obj) {
|
||||
var data = obj.data,
|
||||
_ref = <Component prop={data} />;
|
||||
var _Component;
|
||||
|
||||
return () => _ref;
|
||||
var data = obj.data;
|
||||
return () => _Component || (_Component = <Component prop={data} />);
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
function render(_ref) {
|
||||
var _Component;
|
||||
|
||||
let text = _ref.text,
|
||||
className = _ref.className,
|
||||
id = _ref.id;
|
||||
|
||||
var _ref2 = <Component text={text} className={className} id={id} />;
|
||||
|
||||
return () => _ref2;
|
||||
return () => _Component || (_Component = <Component text={text} className={className} id={id} />);
|
||||
}
|
||||
|
||||
@ -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 = <Component text={text} className={className} id={id} />;
|
||||
|
||||
// intentionally ignoring props
|
||||
return () => _ref2;
|
||||
return () => _Component || (_Component = <Component text={text} className={className} id={id} />);
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
function render(_ref) {
|
||||
var _Component;
|
||||
|
||||
let text = _ref.text;
|
||||
|
||||
var _ref2 = <Component text={text} />;
|
||||
|
||||
return () => _ref2;
|
||||
return () => _Component || (_Component = <Component text={text} />);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
function render(text) {
|
||||
var _ref = <div>{text}</div>;
|
||||
var _div;
|
||||
|
||||
return function () {
|
||||
return _ref;
|
||||
return _div || (_div = <div>{text}</div>);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
function render(offset) {
|
||||
var _ref = <div tabIndex={offset + 1} />;
|
||||
var _div;
|
||||
|
||||
return function () {
|
||||
return _ref;
|
||||
return _div || (_div = <div tabIndex={offset + 1} />);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
var _div;
|
||||
|
||||
const OFFSET = 3;
|
||||
|
||||
var _ref = <div tabIndex={OFFSET + 1} />;
|
||||
|
||||
var Foo = React.createClass({
|
||||
render: function () {
|
||||
return _ref;
|
||||
return _div || (_div = <div tabIndex={OFFSET + 1} />);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
var _Intl$FormattedMessag;
|
||||
|
||||
import Intl from 'react-intl';
|
||||
|
||||
var _ref = <Intl.FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
|
||||
someValue: "A value."
|
||||
}} />;
|
||||
|
||||
var Foo = React.createClass({
|
||||
render: function () {
|
||||
return _ref;
|
||||
return _Intl$FormattedMessag || (_Intl$FormattedMessag = <Intl.FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
|
||||
someValue: "A value."
|
||||
}} />);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
var _ref = <FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
|
||||
someValue: "A value."
|
||||
}} />;
|
||||
var _FormattedMessage;
|
||||
|
||||
var Foo = React.createClass({
|
||||
render: function () {
|
||||
return _ref;
|
||||
return _FormattedMessage || (_FormattedMessage = <FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
|
||||
someValue: "A value."
|
||||
}} />);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var _ref = <div data-text={"Some text, " + "and some more too."} />;
|
||||
var _div;
|
||||
|
||||
var Foo = React.createClass({
|
||||
render: function () {
|
||||
return _ref;
|
||||
return _div || (_div = <div data-text={"Some text, " + "and some more too."} />);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
function render(text) {
|
||||
var _div;
|
||||
|
||||
text += "yes";
|
||||
|
||||
var _ref = <div>{text}</div>;
|
||||
|
||||
return function () {
|
||||
return _ref;
|
||||
return _div || (_div = <div>{text}</div>);
|
||||
};
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
var _ref = <div className="class-name">
|
||||
Text
|
||||
</div>;
|
||||
var _div;
|
||||
|
||||
var Foo = React.createClass({
|
||||
render: function () {
|
||||
return _ref;
|
||||
return _div || (_div = <div className="class-name">
|
||||
Text
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function fn(Component) {
|
||||
var data = "prop",
|
||||
_ref = <Component prop={data} />;
|
||||
var _Component;
|
||||
|
||||
return () => _ref;
|
||||
var data = "prop";
|
||||
return () => _Component || (_Component = <Component prop={data} />);
|
||||
}
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
const namespace = {
|
||||
MyComponent: (props) => props.name
|
||||
};
|
||||
|
||||
const buildTest = (name) => {
|
||||
const { MyComponent } = namespace;
|
||||
return () => (
|
||||
<MyComponent name={name} />
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"BABEL_8_BREAKING": false,
|
||||
"plugins": ["transform-react-jsx", "transform-react-constant-elements"],
|
||||
"presets": ["env"]
|
||||
}
|
||||
@ -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
|
||||
}));
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
const namespace = {
|
||||
MyComponent: (props) => props.name
|
||||
};
|
||||
|
||||
const buildTest = (name) => {
|
||||
const { MyComponent } = namespace;
|
||||
return () => (
|
||||
<MyComponent name={name} />
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"BABEL_8_BREAKING": true,
|
||||
"plugins": ["transform-react-jsx", "transform-react-constant-elements"],
|
||||
"presets": ["env"]
|
||||
}
|
||||
@ -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
|
||||
}));
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
function Foo({outsetArrows, ...rest}) {
|
||||
return useMemo(
|
||||
() => <div outsetArrows={outsetArrows}/>,
|
||||
[outsetArrows]
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"plugins": [
|
||||
"syntax-jsx",
|
||||
"transform-react-constant-elements",
|
||||
"proposal-object-rest-spread"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
function Foo(_ref) {
|
||||
var _div;
|
||||
|
||||
let {
|
||||
outsetArrows
|
||||
} = _ref,
|
||||
rest = babelHelpers.objectWithoutProperties(_ref, ["outsetArrows"]);
|
||||
return useMemo(() => _div || (_div = <div outsetArrows={outsetArrows} />), [outsetArrows]);
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import Parent from './Parent';
|
||||
import Child from './Child';
|
||||
|
||||
function MyComponent({closeFn}) {
|
||||
return (
|
||||
<Parent render={() => <Child closeFn={closeFn} /> } />
|
||||
);
|
||||
}
|
||||
|
||||
export default Parent;
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"BABEL_8_BREAKING": false,
|
||||
"plugins": ["transform-react-jsx", "transform-react-constant-elements"],
|
||||
"presets": ["env"]
|
||||
}
|
||||
@ -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;
|
||||
@ -0,0 +1,10 @@
|
||||
import Parent from './Parent';
|
||||
import Child from './Child';
|
||||
|
||||
function MyComponent({closeFn}) {
|
||||
return (
|
||||
<Parent render={() => <Child closeFn={closeFn} /> } />
|
||||
);
|
||||
}
|
||||
|
||||
export default Parent;
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"BABEL_8_BREAKING": true,
|
||||
"plugins": ["transform-react-jsx", "transform-react-constant-elements"],
|
||||
"presets": ["env"]
|
||||
}
|
||||
@ -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;
|
||||
@ -1,8 +1,4 @@
|
||||
var _ref = <div className="navbar-header">
|
||||
<a className="navbar-brand" href="/">
|
||||
<img src="/img/logo/logo-96x36.png" />
|
||||
</a>
|
||||
</div>;
|
||||
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 = <div className="navbar-header">
|
||||
<a className="navbar-brand" href="/">
|
||||
<img src="/img/logo/logo-96x36.png" />
|
||||
</a>
|
||||
</div>);
|
||||
return <div>
|
||||
<nav className="navbar navbar-default">
|
||||
<div className="container">
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
var _ref = <div className="navbar-header">
|
||||
<a className="navbar-brand" href="/">
|
||||
<img src="/img/logo/logo-96x36.png" />
|
||||
</a>
|
||||
</div>;
|
||||
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 = <div className="navbar-header">
|
||||
<a className="navbar-brand" href="/">
|
||||
<img src="/img/logo/logo-96x36.png" />
|
||||
</a>
|
||||
</div>);
|
||||
return <div>
|
||||
<nav className="navbar navbar-default">
|
||||
<div className="container">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user