Lazily initialize and cache constant JSX elements (#12967)

Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
This commit is contained in:
Nicolò Ribaudo
2021-03-06 17:33:43 +01:00
committed by GitHub
parent d04842a700
commit 8dacf85859
72 changed files with 695 additions and 209 deletions

View File

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

View File

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

View File

@@ -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>);
}
}

View File

@@ -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>);
};
});

View File

@@ -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>);
}
}

View File

@@ -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>);
};

View File

@@ -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>;
}
});

View File

@@ -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 />);
}
}

View File

@@ -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" />);

View File

@@ -1,7 +1,7 @@
var _Foo;
var Foo = require("Foo");
var _ref = <Foo />;
function render() {
return _ref;
return _Foo || (_Foo = <Foo />);
}

View File

@@ -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>;

View File

@@ -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>);
};

View File

@@ -1,5 +1,7 @@
var _span;
let foo = 'hello';
export const Component = () => {
foo = 'goodbye';
return <span>{foo}</span>;
return _span || (_span = <span>{foo}</span>);
};

View File

@@ -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>);

View File

@@ -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();
}

View File

@@ -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} />);
}

View File

@@ -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} />);
};
}

View File

@@ -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>;

View File

@@ -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>);
};
}

View File

@@ -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>);
}
});

View File

@@ -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>);
}

View File

@@ -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"));

View File

@@ -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"));

View File

@@ -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));
};
}

View File

@@ -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>);
};
}

View File

@@ -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();
}

View File

@@ -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();
}

View File

@@ -0,0 +1,3 @@
function C(x) {
return <div x={x} attr=<span /> />;
}

View File

@@ -0,0 +1,5 @@
var _span;
function C(x) {
return <div x={x} attr={_span || (_span = <span />)} />;
}

View File

@@ -0,0 +1,3 @@
function C() {
return <div attr=<span /> />;
}

View File

@@ -0,0 +1,5 @@
var _div;
function C() {
return _div || (_div = <div attr=<span /> />);
}

View File

@@ -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 />;
}

View File

@@ -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 />;
}

View File

@@ -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 />);
}

View File

@@ -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 />);
}
}

View File

@@ -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 />);
}
}

View File

@@ -0,0 +1,7 @@
function AComponent () {
return <BComponent/>
function BComponent () {
return <n:CComponent />
}
}

View File

@@ -0,0 +1,9 @@
var _n$CComponent;
function AComponent() {
return <BComponent />;
function BComponent() {
return _n$CComponent || (_n$CComponent = <n:CComponent />);
}
}

View File

@@ -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} />);
}

View File

@@ -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} />);
}

View File

@@ -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} />);
}

View File

@@ -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} />);
}

View File

@@ -1,8 +1,8 @@
function render(text) {
var _ref = <div>{text}</div>;
var _div;
return function () {
return _ref;
return _div || (_div = <div>{text}</div>);
};
}

View File

@@ -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} />);
};
}

View File

@@ -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} />);
}
});

View File

@@ -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."
}} />);
}
});

View File

@@ -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."
}} />);
}
});

View File

@@ -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."} />);
}
});

View File

@@ -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>);
};
}

View File

@@ -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);

View File

@@ -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);

View File

@@ -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>);
}
});

View File

@@ -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} />);
}