From 873033513f2cfcad1155e6c0bbf6783644b10317 Mon Sep 17 00:00:00 2001 From: Billy Janitsch Date: Wed, 15 May 2024 20:02:19 -0400 Subject: [PATCH] Add React compiler plugin --- __snapshots__/test.ts.snap | 456 ++++++++++++++++++++++++++++--------- index.js | 2 + package-lock.json | 199 +++++++++++++++- package.json | 3 +- 4 files changed, 539 insertions(+), 121 deletions(-) diff --git a/__snapshots__/test.ts.snap b/__snapshots__/test.ts.snap index b5ed49b..1c985bc 100644 --- a/__snapshots__/test.ts.snap +++ b/__snapshots__/test.ts.snap @@ -1902,6 +1902,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.default = MyComponent; +var _compilerRuntime = require("react/compiler-runtime"); var _react = require("react"); var _react2 = require("@emotion/react"); var _jsxRuntime = require("@emotion/react/jsx-runtime"); @@ -1919,29 +1920,54 @@ var _ref = process.env.NODE_ENV === "production" ? { name: "117wnve", styles: "color:blue" } : { - name: "fveiva-MyComponent", - styles: "color:blue;label:MyComponent;", - map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWMiLCJmaWxlIjoiZW1vdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHtjc3N9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBjc3NPYmogPSBjc3Moe2NvbG9yOiAncmVkJ30pXG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIE15Q29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IHthLCBiLCAuLi5yZXN0fSA9IHByb3BzXG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMClcbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGJ1dHRvbiBjc3M9e3tjb2xvcjogJ2JsdWUnfX0gb25DbGljaz17KCkgPT4gc2V0Q291bnQoKHByZXZTaXplKSA9PiBwcmV2U2l6ZSArIDEpfT5cbiAgICAgICAgSW5jcmVtZW50XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxkaXYgaGVpZ2h0PXtjb3VudH0gey4uLnJlc3R9IGNzcz17Y3NzT2JqfSAvPlxuICAgIDwvPlxuICApXG59XG4iXX0= */", + name: "16jqs9o-t0", + styles: "color:blue;label:t0;", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1CIiwiZmlsZSI6ImVtb3Rpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge3VzZVN0YXRlfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7Y3NzfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY3NzT2JqID0gY3NzKHtjb2xvcjogJ3JlZCd9KVxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBNeUNvbXBvbmVudChwcm9wcykge1xuICBjb25zdCB7YSwgYiwgLi4ucmVzdH0gPSBwcm9wc1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxidXR0b24gY3NzPXt7Y29sb3I6ICdibHVlJ319IG9uQ2xpY2s9eygpID0+IHNldENvdW50KChwcmV2U2l6ZSkgPT4gcHJldlNpemUgKyAxKX0+XG4gICAgICAgIEluY3JlbWVudFxuICAgICAgPC9idXR0b24+XG4gICAgICA8ZGl2IGhlaWdodD17Y291bnR9IHsuLi5yZXN0fSBjc3M9e2Nzc09ian0gLz5cbiAgICA8Lz5cbiAgKVxufVxuIl19 */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; function MyComponent(props) { - const { - a, - b, - ...rest - } = props; + const $ = (0, _compilerRuntime.c)(6); + let rest; + if ($[0] !== props) { + const { + a, + b, + ...t0 + } = props; + rest = t0; + $[0] = props; + $[1] = rest; + } else { + rest = $[1]; + } const [count, setCount] = (0, _react.useState)(0); - return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { - children: [(0, _jsxRuntime.jsx)("button", { + let t0; + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t0 = (0, _jsxRuntime.jsx)("button", { css: _ref, onClick: () => setCount(prevSize => prevSize + 1), children: "Increment" - }), (0, _jsxRuntime.jsx)("div", { - height: count, - ...rest, - css: cssObj - })] - }); + }); + $[2] = t0; + } else { + t0 = $[2]; + } + let t1; + if ($[3] !== count || $[4] !== rest) { + t1 = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, { + children: [t0, (0, _jsxRuntime.jsx)("div", { + height: count, + ...rest, + css: cssObj + })] + }); + $[3] = count; + $[4] = rest; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; }" `; @@ -1952,6 +1978,7 @@ var _excluded = ["a", "b"]; var _jsxFileName = "/emotion.js", _s = $RefreshSig$(); function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; } +import { c as _c } from "react/compiler-runtime"; import { useState } from 'react'; import { css } from '@emotion/react'; import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "@emotion/react/jsx-dev-runtime"; @@ -1968,22 +1995,32 @@ var _ref = process.env.NODE_ENV === "production" ? { name: "117wnve", styles: "color:blue" } : { - name: "fveiva-MyComponent", - styles: "color:blue;label:MyComponent;", - map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWMiLCJmaWxlIjoiZW1vdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHtjc3N9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBjc3NPYmogPSBjc3Moe2NvbG9yOiAncmVkJ30pXG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIE15Q29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IHthLCBiLCAuLi5yZXN0fSA9IHByb3BzXG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMClcbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGJ1dHRvbiBjc3M9e3tjb2xvcjogJ2JsdWUnfX0gb25DbGljaz17KCkgPT4gc2V0Q291bnQoKHByZXZTaXplKSA9PiBwcmV2U2l6ZSArIDEpfT5cbiAgICAgICAgSW5jcmVtZW50XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxkaXYgaGVpZ2h0PXtjb3VudH0gey4uLnJlc3R9IGNzcz17Y3NzT2JqfSAvPlxuICAgIDwvPlxuICApXG59XG4iXX0= */", + name: "16jqs9o-t0", + styles: "color:blue;label:t0;", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1CIiwiZmlsZSI6ImVtb3Rpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge3VzZVN0YXRlfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7Y3NzfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY3NzT2JqID0gY3NzKHtjb2xvcjogJ3JlZCd9KVxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBNeUNvbXBvbmVudChwcm9wcykge1xuICBjb25zdCB7YSwgYiwgLi4ucmVzdH0gPSBwcm9wc1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxidXR0b24gY3NzPXt7Y29sb3I6ICdibHVlJ319IG9uQ2xpY2s9eygpID0+IHNldENvdW50KChwcmV2U2l6ZSkgPT4gcHJldlNpemUgKyAxKX0+XG4gICAgICAgIEluY3JlbWVudFxuICAgICAgPC9idXR0b24+XG4gICAgICA8ZGl2IGhlaWdodD17Y291bnR9IHsuLi5yZXN0fSBjc3M9e2Nzc09ian0gLz5cbiAgICA8Lz5cbiAgKVxufVxuIl19 */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; export default function MyComponent(props) { _s(); - var a = props.a, - b = props.b, - rest = _objectWithoutPropertiesLoose(props, _excluded); + var $ = _c(6); + var rest; + if ($[0] !== props) { + var a = props.a, + b = props.b, + _t = _objectWithoutPropertiesLoose(props, _excluded); + rest = _t; + $[0] = props; + $[1] = rest; + } else { + rest = $[1]; + } var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), count = _useState2[0], setCount = _useState2[1]; - return _jsxDEV(_Fragment, { - children: [_jsxDEV("button", { + var t0; + if ($[2] === Symbol["for"]("react.memo_cache_sentinel")) { + t0 = _jsxDEV("button", { css: _ref, onClick: function onClick() { return setCount(function (prevSize) { @@ -1995,25 +2032,41 @@ export default function MyComponent(props) { fileName: _jsxFileName, lineNumber: 11, columnNumber: 7 - }, this), _jsxDEV("div", Object.assign({ - height: count - }, rest, { - css: cssObj - }), void 0, false, { - fileName: _jsxFileName, - lineNumber: 14, - columnNumber: 7 - }, this)] - }, void 0, true); + }, this); + $[2] = t0; + } else { + t0 = $[2]; + } + var t1; + if ($[3] !== count || $[4] !== rest) { + t1 = _jsxDEV(_Fragment, { + children: [t0, _jsxDEV("div", Object.assign({ + height: count + }, rest, { + css: cssObj + }), void 0, false, { + fileName: _jsxFileName, + lineNumber: 14, + columnNumber: 7 + }, this)] + }, void 0, true); + $[3] = count; + $[4] = rest; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; } -_s(MyComponent, "oDgYfYHkD9Wkv4hrAPCkI/ev3YU="); -_c = MyComponent; -var _c; -$RefreshReg$(_c, "MyComponent");" +_s(MyComponent, "7rNyFrw5FVpFFCFYkWAjQci0NUk="); +_c2 = MyComponent; +var _c2; +$RefreshReg$(_c2, "MyComponent");" `; exports[`transpiles Emotion given {"emotion":true}, {}: output (esm) 1`] = ` "function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; } +import { c as _c } from "react/compiler-runtime"; import { useState } from 'react'; import { css } from '@emotion/react'; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime"; @@ -2030,29 +2083,54 @@ var _ref = process.env.NODE_ENV === "production" ? { name: "117wnve", styles: "color:blue" } : { - name: "fveiva-MyComponent", - styles: "color:blue;label:MyComponent;", - map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWMiLCJmaWxlIjoiZW1vdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHtjc3N9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBjc3NPYmogPSBjc3Moe2NvbG9yOiAncmVkJ30pXG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIE15Q29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IHthLCBiLCAuLi5yZXN0fSA9IHByb3BzXG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMClcbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGJ1dHRvbiBjc3M9e3tjb2xvcjogJ2JsdWUnfX0gb25DbGljaz17KCkgPT4gc2V0Q291bnQoKHByZXZTaXplKSA9PiBwcmV2U2l6ZSArIDEpfT5cbiAgICAgICAgSW5jcmVtZW50XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxkaXYgaGVpZ2h0PXtjb3VudH0gey4uLnJlc3R9IGNzcz17Y3NzT2JqfSAvPlxuICAgIDwvPlxuICApXG59XG4iXX0= */", + name: "16jqs9o-t0", + styles: "color:blue;label:t0;", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1CIiwiZmlsZSI6ImVtb3Rpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge3VzZVN0YXRlfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7Y3NzfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY3NzT2JqID0gY3NzKHtjb2xvcjogJ3JlZCd9KVxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBNeUNvbXBvbmVudChwcm9wcykge1xuICBjb25zdCB7YSwgYiwgLi4ucmVzdH0gPSBwcm9wc1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxidXR0b24gY3NzPXt7Y29sb3I6ICdibHVlJ319IG9uQ2xpY2s9eygpID0+IHNldENvdW50KChwcmV2U2l6ZSkgPT4gcHJldlNpemUgKyAxKX0+XG4gICAgICAgIEluY3JlbWVudFxuICAgICAgPC9idXR0b24+XG4gICAgICA8ZGl2IGhlaWdodD17Y291bnR9IHsuLi5yZXN0fSBjc3M9e2Nzc09ian0gLz5cbiAgICA8Lz5cbiAgKVxufVxuIl19 */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; export default function MyComponent(props) { - const { - a, - b, - ...rest - } = props; + const $ = _c(6); + let rest; + if ($[0] !== props) { + const { + a, + b, + ...t0 + } = props; + rest = t0; + $[0] = props; + $[1] = rest; + } else { + rest = $[1]; + } const [count, setCount] = useState(0); - return _jsxs(_Fragment, { - children: [_jsx("button", { + let t0; + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t0 = _jsx("button", { css: _ref, onClick: () => setCount(prevSize => prevSize + 1), children: "Increment" - }), _jsx("div", { - height: count, - ...rest, - css: cssObj - })] - }); + }); + $[2] = t0; + } else { + t0 = $[2]; + } + let t1; + if ($[3] !== count || $[4] !== rest) { + t1 = _jsxs(_Fragment, { + children: [t0, _jsx("div", { + height: count, + ...rest, + css: cssObj + })] + }); + $[3] = count; + $[4] = rest; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; }" `; @@ -2061,6 +2139,7 @@ exports[`transpiles Emotion given {"emotion":true}, {}: output (production) 1`] import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose"; var _excluded = ["a", "b"]; function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."; } +import { c as _c } from "react/compiler-runtime"; import { useState } from 'react'; import { css } from '@emotion/react'; import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime"; @@ -2077,21 +2156,31 @@ var _ref = process.env.NODE_ENV === "production" ? { name: "117wnve", styles: "color:blue" } : { - name: "fveiva-MyComponent", - styles: "color:blue;label:MyComponent;", - map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVWMiLCJmaWxlIjoiZW1vdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHtjc3N9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBjc3NPYmogPSBjc3Moe2NvbG9yOiAncmVkJ30pXG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIE15Q29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IHthLCBiLCAuLi5yZXN0fSA9IHByb3BzXG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMClcbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGJ1dHRvbiBjc3M9e3tjb2xvcjogJ2JsdWUnfX0gb25DbGljaz17KCkgPT4gc2V0Q291bnQoKHByZXZTaXplKSA9PiBwcmV2U2l6ZSArIDEpfT5cbiAgICAgICAgSW5jcmVtZW50XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxkaXYgaGVpZ2h0PXtjb3VudH0gey4uLnJlc3R9IGNzcz17Y3NzT2JqfSAvPlxuICAgIDwvPlxuICApXG59XG4iXX0= */", + name: "16jqs9o-t0", + styles: "color:blue;label:t0;", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVtb3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1CIiwiZmlsZSI6ImVtb3Rpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge3VzZVN0YXRlfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7Y3NzfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgY3NzT2JqID0gY3NzKHtjb2xvcjogJ3JlZCd9KVxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBNeUNvbXBvbmVudChwcm9wcykge1xuICBjb25zdCB7YSwgYiwgLi4ucmVzdH0gPSBwcm9wc1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxidXR0b24gY3NzPXt7Y29sb3I6ICdibHVlJ319IG9uQ2xpY2s9eygpID0+IHNldENvdW50KChwcmV2U2l6ZSkgPT4gcHJldlNpemUgKyAxKX0+XG4gICAgICAgIEluY3JlbWVudFxuICAgICAgPC9idXR0b24+XG4gICAgICA8ZGl2IGhlaWdodD17Y291bnR9IHsuLi5yZXN0fSBjc3M9e2Nzc09ian0gLz5cbiAgICA8Lz5cbiAgKVxufVxuIl19 */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; export default function MyComponent(props) { - var a = props.a, - b = props.b, - rest = _objectWithoutPropertiesLoose(props, _excluded); + var $ = _c(6); + var rest; + if ($[0] !== props) { + var a = props.a, + b = props.b, + _t = _objectWithoutPropertiesLoose(props, _excluded); + rest = _t; + $[0] = props; + $[1] = rest; + } else { + rest = $[1]; + } var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), count = _useState2[0], setCount = _useState2[1]; - return _jsxs(_Fragment, { - children: [_jsx("button", { + var t0; + if ($[2] === Symbol["for"]("react.memo_cache_sentinel")) { + t0 = _jsx("button", { css: _ref, onClick: function onClick() { return setCount(function (prevSize) { @@ -2099,12 +2188,27 @@ export default function MyComponent(props) { }); }, children: "Increment" - }), _jsx("div", Object.assign({ - height: count - }, rest, { - css: cssObj - }))] - }); + }); + $[2] = t0; + } else { + t0 = $[2]; + } + var t1; + if ($[3] !== count || $[4] !== rest) { + t1 = _jsxs(_Fragment, { + children: [t0, _jsx("div", Object.assign({ + height: count + }, rest, { + css: cssObj + }))] + }); + $[3] = count; + $[4] = rest; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; }" `; @@ -2130,19 +2234,50 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.default = MyComponent; +var _compilerRuntime = require("react/compiler-runtime"); var _react = require("react"); var _jsxRuntime = require("react/jsx-runtime"); function MyComponent(props) { - const { - label, - ...rest - } = props; + const $ = (0, _compilerRuntime.c)(10); + let rest; + let label; + if ($[0] !== props) { + ({ + label, + ...rest + } = props); + $[0] = props; + $[1] = rest; + $[2] = label; + } else { + rest = $[1]; + label = $[2]; + } const [count, setCount] = (0, _react.useState)(0); - return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", { - onClick: () => setCount(count + 1), - ...rest, - children: [label, " ", count] - }); + let t0; + if ($[3] !== count) { + t0 = () => setCount(count + 1); + $[3] = count; + $[4] = t0; + } else { + t0 = $[4]; + } + let t1; + if ($[5] !== t0 || $[6] !== rest || $[7] !== label || $[8] !== count) { + t1 = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", { + onClick: t0, + ...rest, + children: [label, " ", count] + }); + $[5] = t0; + $[6] = rest; + $[7] = label; + $[8] = count; + $[9] = t1; + } else { + t1 = $[9]; + } + return t1; }" `; @@ -2152,48 +2287,112 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP var _excluded = ["label"]; var _jsxFileName = "/react.js", _s = $RefreshSig$(); +import { c as _c } from "react/compiler-runtime"; import { useState } from 'react'; import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime"; export default function MyComponent(props) { _s(); - var label = props.label, - rest = _objectWithoutPropertiesLoose(props, _excluded); + var $ = _c(10); + var rest; + var label; + if ($[0] !== props) { + var _props = props; + label = _props.label; + rest = _objectWithoutPropertiesLoose(_props, _excluded); + _props; + $[0] = props; + $[1] = rest; + $[2] = label; + } else { + rest = $[1]; + label = $[2]; + } var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), count = _useState2[0], setCount = _useState2[1]; - return /*#__PURE__*/_jsxDEV("button", Object.assign({ - onClick: function onClick() { + var t0; + if ($[3] !== count) { + t0 = function t0() { return setCount(count + 1); - } - }, rest, { - children: [label, " ", count] - }), void 0, true, { - fileName: _jsxFileName, - lineNumber: 7, - columnNumber: 5 - }, this); -} -_s(MyComponent, "oDgYfYHkD9Wkv4hrAPCkI/ev3YU="); -_c = MyComponent; -var _c; -$RefreshReg$(_c, "MyComponent");" + }; + $[3] = count; + $[4] = t0; + } else { + t0 = $[4]; + } + var t1; + if ($[5] !== t0 || $[6] !== rest || $[7] !== label || $[8] !== count) { + t1 = /*#__PURE__*/_jsxDEV("button", Object.assign({ + onClick: t0 + }, rest, { + children: [label, " ", count] + }), void 0, true, { + fileName: _jsxFileName, + lineNumber: 7, + columnNumber: 5 + }, this); + $[5] = t0; + $[6] = rest; + $[7] = label; + $[8] = count; + $[9] = t1; + } else { + t1 = $[9]; + } + return t1; +} +_s(MyComponent, "7rNyFrw5FVpFFCFYkWAjQci0NUk="); +_c2 = MyComponent; +var _c2; +$RefreshReg$(_c2, "MyComponent");" `; exports[`transpiles React given {}, {}: output (esm) 1`] = ` -"import { useState } from 'react'; +"import { c as _c } from "react/compiler-runtime"; +import { useState } from 'react'; import { jsxs as _jsxs } from "react/jsx-runtime"; export default function MyComponent(props) { - const { - label, - ...rest - } = props; + const $ = _c(10); + let rest; + let label; + if ($[0] !== props) { + ({ + label, + ...rest + } = props); + $[0] = props; + $[1] = rest; + $[2] = label; + } else { + rest = $[1]; + label = $[2]; + } const [count, setCount] = useState(0); - return /*#__PURE__*/_jsxs("button", { - onClick: () => setCount(count + 1), - ...rest, - children: [label, " ", count] - }); + let t0; + if ($[3] !== count) { + t0 = () => setCount(count + 1); + $[3] = count; + $[4] = t0; + } else { + t0 = $[4]; + } + let t1; + if ($[5] !== t0 || $[6] !== rest || $[7] !== label || $[8] !== count) { + t1 = /*#__PURE__*/_jsxs("button", { + onClick: t0, + ...rest, + children: [label, " ", count] + }); + $[5] = t0; + $[6] = rest; + $[7] = label; + $[8] = count; + $[9] = t1; + } else { + t1 = $[9]; + } + return t1; }" `; @@ -2201,22 +2400,55 @@ exports[`transpiles React given {}, {}: output (production) 1`] = ` "import _slicedToArray from "@babel/runtime/helpers/slicedToArray"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose"; var _excluded = ["label"]; +import { c as _c } from "react/compiler-runtime"; import { useState } from 'react'; import { jsxs as _jsxs } from "react/jsx-runtime"; export default function MyComponent(props) { - var label = props.label, - rest = _objectWithoutPropertiesLoose(props, _excluded); + var $ = _c(10); + var rest; + var label; + if ($[0] !== props) { + var _props = props; + label = _props.label; + rest = _objectWithoutPropertiesLoose(_props, _excluded); + _props; + $[0] = props; + $[1] = rest; + $[2] = label; + } else { + rest = $[1]; + label = $[2]; + } var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), count = _useState2[0], setCount = _useState2[1]; - return /*#__PURE__*/_jsxs("button", Object.assign({ - onClick: function onClick() { + var t0; + if ($[3] !== count) { + t0 = function t0() { return setCount(count + 1); - } - }, rest, { - children: [label, " ", count] - })); + }; + $[3] = count; + $[4] = t0; + } else { + t0 = $[4]; + } + var t1; + if ($[5] !== t0 || $[6] !== rest || $[7] !== label || $[8] !== count) { + t1 = /*#__PURE__*/_jsxs("button", Object.assign({ + onClick: t0 + }, rest, { + children: [label, " ", count] + })); + $[5] = t0; + $[6] = rest; + $[7] = label; + $[8] = count; + $[9] = t1; + } else { + t1 = $[9]; + } + return t1; }" `; diff --git a/index.js b/index.js index 8069bdb..4f6a8ea 100644 --- a/index.js +++ b/index.js @@ -50,6 +50,7 @@ module.exports = (babel, options) => { emotion = false, modules = env === 'test' || env === 'cjs' ? 'commonjs' : false, react = {}, + reactCompiler = {}, reactRefresh = env === 'development' && react && {}, runtime = true, targets = getDefaultTargets(env), @@ -83,6 +84,7 @@ module.exports = (babel, options) => { const nonNodeModules = { exclude: NODE_MODULES_REGEX, plugins: [ + reactCompiler && [require('babel-plugin-react-compiler'), {...reactCompiler}], reactRefresh && [require('react-refresh/babel'), {skipEnvCheck: true, ...reactRefresh}], emotion && [require('@emotion/babel-plugin').default, {...emotion}], ].filter(Boolean), diff --git a/package-lock.json b/package-lock.json index 6d9f6cb..39826b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "@babel/preset-env": "^7.24.5", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@emotion/babel-plugin": "^11.11.0" + "@emotion/babel-plugin": "^11.11.0", + "babel-plugin-react-compiler": "^0.0.0-experimental-4690415-20240515" }, "devDependencies": { "@jest/globals": "^29.7.0", @@ -2959,14 +2960,12 @@ "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", - "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==", - "dev": true + "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==" }, "node_modules/@types/istanbul-lib-report": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz", "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==", - "dev": true, "dependencies": { "@types/istanbul-lib-coverage": "*" } @@ -3033,8 +3032,7 @@ "node_modules/@types/yargs-parser": { "version": "21.0.3", "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz", - "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==", - "dev": true + "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==" }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "5.62.0", @@ -3810,6 +3808,153 @@ "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/babel-plugin-react-compiler": { + "version": "0.0.0-experimental-4690415-20240515", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-0.0.0-experimental-4690415-20240515.tgz", + "integrity": "sha512-unBK0w2vxrFa3CAeeEGXfMTdBHM9vWZpItUXea4L4FDrD4QpqcAVMtR4Zu0GC0PvXRwj6KuPzzBkVmgGGPFxnw==", + "dependencies": { + "@babel/generator": "7.2.0", + "@babel/types": "^7.19.0", + "chalk": "4", + "invariant": "^2.2.4", + "pretty-format": "^24", + "zod": "^3.22.4", + "zod-validation-error": "^2.1.0" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/@babel/generator": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.2.0.tgz", + "integrity": "sha512-BA75MVfRlFQG2EZgFYIwyT1r6xSkwfP2bdkY/kLZusEYWiJs4xCowab/alaEaT0wSvmVuXGqiefeBlP+7V1yKg==", + "dependencies": { + "@babel/types": "^7.2.0", + "jsesc": "^2.5.1", + "lodash": "^4.17.10", + "source-map": "^0.5.0", + "trim-right": "^1.0.1" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/@jest/types": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz", + "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==", + "dependencies": { + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^1.1.1", + "@types/yargs": "^13.0.0" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/@types/istanbul-reports": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz", + "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==", + "dependencies": { + "@types/istanbul-lib-coverage": "*", + "@types/istanbul-lib-report": "*" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/@types/yargs": { + "version": "13.0.12", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.12.tgz", + "integrity": "sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==", + "dependencies": { + "@types/yargs-parser": "*" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/ansi-regex": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz", + "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==", + "engines": { + "node": ">=6" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/babel-plugin-react-compiler/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/pretty-format": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz", + "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==", + "dependencies": { + "@jest/types": "^24.9.0", + "ansi-regex": "^4.0.0", + "ansi-styles": "^3.2.0", + "react-is": "^16.8.4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/babel-plugin-react-compiler/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/babel-plugin-react-compiler/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/babel-preset-current-node-syntax": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz", @@ -5857,6 +6002,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -8133,6 +8286,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -8148,8 +8306,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, - "peer": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -9493,6 +9649,14 @@ "node": ">=8.0" } }, + "node_modules/trim-right": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", + "integrity": "sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", @@ -10030,6 +10194,25 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/zod-validation-error": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-2.1.0.tgz", + "integrity": "sha512-VJh93e2wb4c3tWtGgTa0OF/dTt/zoPCPzXq4V11ZjxmEAFaPi/Zss1xIZdEB5RD8GD00U0/iVXgqkF77RV7pdQ==", + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "zod": "^3.18.0" + } } } } diff --git a/package.json b/package.json index a727829..d41492f 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "@babel/preset-env": "^7.24.5", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@emotion/babel-plugin": "^11.11.0" + "@emotion/babel-plugin": "^11.11.0", + "babel-plugin-react-compiler": "^0.0.0-experimental-4690415-20240515" }, "devDependencies": { "@jest/globals": "^29.7.0",