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