Lazily initialize and cache constant JSX elements (#12967)
Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
This commit is contained in:
@@ -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;
|
||||
Reference in New Issue
Block a user