diff --git a/packages/babel-preset-default/__tests__/__snapshots__/index.js.snap b/packages/babel-preset-default/__tests__/__snapshots__/index.js.snap index 2248e23e..40cd3b7a 100644 --- a/packages/babel-preset-default/__tests__/__snapshots__/index.js.snap +++ b/packages/babel-preset-default/__tests__/__snapshots__/index.js.snap @@ -78,6 +78,7 @@ Object.defineProperty(exports, \\"__esModule\\", { }); exports.default = void 0; var _react = require(\\"react\\"); +var _jsxRuntime = require(\\"react/jsx-runtime\\"); // eslint-disable-line import/no-extraneous-dependencies // eslint-disable-line import/no-extraneous-dependencies @@ -85,12 +86,18 @@ const FCComponent = ({ title, url, description -}) => /*#__PURE__*/React.createElement(\\"div\\", { - className: \\"component-test-babel\\" -}, /*#__PURE__*/React.createElement(\\"a\\", { - href: url, - title: title -}, /*#__PURE__*/React.createElement(\\"h1\\", null, title)), /*#__PURE__*/React.createElement(\\"p\\", null, description)); +}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(\\"div\\", { + className: \\"component-test-babel\\", + children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(\\"a\\", { + href: url, + title: title, + children: /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"h1\\", { + children: title + }) + }), /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"p\\", { + children: description + })] +}); FCComponent.defaultProps = { title: '', url: '', @@ -104,13 +111,15 @@ class ClassComponent extends _react.Component { const { title } = this.props; - return /*#__PURE__*/React.createElement(\\"div\\", { - className: \\"Class Component\\" - }, /*#__PURE__*/React.createElement(\\"h1\\", null, title)); + return /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"div\\", { + className: \\"Class Component\\", + children: /*#__PURE__*/(0, _jsxRuntime.jsx)(\\"h1\\", { + children: title + }) + }); } } -var _default = FCComponent; -exports.default = _default;" +var _default = exports.default = FCComponent;" `; exports[`Babel preset default transpiles without removing proptypes in dev mode 1`] = ` @@ -122,46 +131,42 @@ Object.defineProperty(exports, \\"__esModule\\", { exports.default = void 0; var _react = require(\\"react\\"); var _propTypes = _interopRequireDefault(require(\\"prop-types\\")); +var _jsxDevRuntime = require(\\"react/jsx-dev-runtime\\"); var _jsxFileName = \\"\\"; // eslint-disable-line import/no-extraneous-dependencies -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } // eslint-disable-line import/no-extraneous-dependencies - +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } const FCComponent = ({ title, url, description -}) => /*#__PURE__*/React.createElement(\\"div\\", { +}) => /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"div\\", { className: \\"component-test-babel\\", - __self: void 0, - __source: { - fileName: _jsxFileName, - lineNumber: 5, - columnNumber: 2 - } -}, /*#__PURE__*/React.createElement(\\"a\\", { - href: url, - title: title, - __self: void 0, - __source: { + children: [/*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"a\\", { + href: url, + title: title, + children: /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"h1\\", { + children: title + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 7, + columnNumber: 4 + }, void 0) + }, void 0, false, { fileName: _jsxFileName, lineNumber: 6, columnNumber: 3 - } -}, /*#__PURE__*/React.createElement(\\"h1\\", { - __self: void 0, - __source: { - fileName: _jsxFileName, - lineNumber: 7, - columnNumber: 4 - } -}, title)), /*#__PURE__*/React.createElement(\\"p\\", { - __self: void 0, - __source: { + }, void 0), /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"p\\", { + children: description + }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 3 - } -}, description)); + }, void 0)] +}, void 0, true, { + fileName: _jsxFileName, + lineNumber: 5, + columnNumber: 2 +}, void 0); FCComponent.propTypes = { title: _propTypes.default.string, url: _propTypes.default.string, @@ -180,29 +185,26 @@ class ClassComponent extends _react.Component { const { title } = this.props; - return /*#__PURE__*/React.createElement(\\"div\\", { + return /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"div\\", { className: \\"Class Component\\", - __self: this, - __source: { - fileName: _jsxFileName, - lineNumber: 33, - columnNumber: 4 - } - }, /*#__PURE__*/React.createElement(\\"h1\\", { - __self: this, - __source: { + children: /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(\\"h1\\", { + children: title + }, void 0, false, { fileName: _jsxFileName, lineNumber: 34, columnNumber: 5 - } - }, title)); + }, this) + }, void 0, false, { + fileName: _jsxFileName, + lineNumber: 33, + columnNumber: 4 + }, this); } } ClassComponent.propTypes = { title: _propTypes.default.string.isRequired }; -var _default = FCComponent; -exports.default = _default;" +var _default = exports.default = FCComponent;" `; exports[`Babel preset default transpiles without transforming es6 imports 1`] = ` @@ -278,95 +280,7 @@ class ClassComponent extends _react.Component { }, (0, _element.createElement)(\\"h1\\", null, title)); } } -var _default = FCComponent; -exports.default = _default;" -`; - -exports[`Babel preset default with automatic runtime transpiles react code properly with automatic runtime 1`] = ` -"\\"use strict\\"; - -Object.defineProperty(exports, \\"__esModule\\", { - value: true -}); -exports.default = void 0; -var _react = require(\\"react\\"); -// eslint-disable-line import/no-extraneous-dependencies -// eslint-disable-line import/no-extraneous-dependencies - -const FCComponent = ({ - title, - url, - description -}) => /*#__PURE__*/React.createElement(\\"div\\", { - className: \\"component-test-babel\\" -}, /*#__PURE__*/React.createElement(\\"a\\", { - href: url, - title: title -}, /*#__PURE__*/React.createElement(\\"h1\\", null, title)), /*#__PURE__*/React.createElement(\\"p\\", null, description)); -FCComponent.defaultProps = { - title: '', - url: '', - description: '' -}; -class ClassComponent extends _react.Component { - componentDidMount() { - // doing something - } - render() { - const { - title - } = this.props; - return /*#__PURE__*/React.createElement(\\"div\\", { - className: \\"Class Component\\" - }, /*#__PURE__*/React.createElement(\\"h1\\", null, title)); - } -} -var _default = FCComponent; -exports.default = _default;" -`; - -exports[`Babel preset default with automatic runtime transpiles wordpress code properly even when jsx-runtime.js is present 1`] = ` -"\\"use strict\\"; - -Object.defineProperty(exports, \\"__esModule\\", { - value: true -}); -exports.default = void 0; -var _element = require(\\"@wordpress/element\\"); -var _react = require(\\"react\\"); -// eslint-disable-line import/no-extraneous-dependencies -// eslint-disable-line import/no-extraneous-dependencies - -const FCComponent = ({ - title, - url, - description -}) => (0, _element.createElement)(\\"div\\", { - className: \\"component-test-babel\\" -}, (0, _element.createElement)(\\"a\\", { - href: url, - title: title -}, (0, _element.createElement)(\\"h1\\", null, title)), (0, _element.createElement)(\\"p\\", null, description)); -FCComponent.defaultProps = { - title: '', - url: '', - description: '' -}; -class ClassComponent extends _react.Component { - componentDidMount() { - // doing something - } - render() { - const { - title - } = this.props; - return (0, _element.createElement)(\\"div\\", { - className: \\"Class Component\\" - }, (0, _element.createElement)(\\"h1\\", null, title)); - } -} -var _default = FCComponent; -exports.default = _default;" +var _default = exports.default = FCComponent;" `; exports[`compiles typescript transpiles typescript code properly 1`] = ` diff --git a/packages/babel-preset-default/__tests__/index.js b/packages/babel-preset-default/__tests__/index.js index 36c49a8a..1248f211 100644 --- a/packages/babel-preset-default/__tests__/index.js +++ b/packages/babel-preset-default/__tests__/index.js @@ -90,36 +90,6 @@ describe('Babel preset default', () => { }); }); -describe('Babel preset default with automatic runtime', () => { - beforeEach(() => { - // fs.writeFileSync(path.join(reactPath, 'jsx-runtime.js'), 'export default () => {};'); - }); - - afterEach(() => { - // fs.unlinkSync(path.join(reactPath, 'jsx-runtime.js')); - }); - - test('transpiles react code properly with automatic runtime', () => { - const output = babel.transform(reactInput, { - configFile: false, - envName: 'production', - presets: [babelPresetDefault], - }); - - expect(output.code).toMatchSnapshot(); - }); - - test('transpiles wordpress code properly even when jsx-runtime.js is present', () => { - const output = babel.transform(reactInput, { - configFile: false, - envName: 'production', - presets: [[babelPresetDefault, { wordpress: true }]], - }); - - expect(output.code).toMatchSnapshot(); - }); -}); - describe('compiles typescript', () => { test('transpiles typescript code properly', () => { const output = babel.transform(tsInput, { diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap index 59a6a489..b67ef4e4 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-basic-config.js.snap @@ -383,7 +383,7 @@ Object { CopyPlugin: {}, StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets2","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true}, WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}, - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, CleanExtractedDeps: {}, WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"ignore":[],"remove":{}}, TenUpToolkitTscPlugin: {}, @@ -1599,7 +1599,7 @@ Object { NoBrowserSyncPlugin: {}, StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets2","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true,"configFile":"/config/stylelint.config.js"}, WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}, - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, CleanExtractedDeps: {}, WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"ignore":[],"remove":{}}, TenUpToolkitTscPlugin: {}, diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap index 3f7b8235..a2ec8b2d 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-cli-arguments.js.snap @@ -486,7 +486,7 @@ Object { NoBrowserSyncPlugin: {}, StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true}, WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}, - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, CleanExtractedDeps: {}, WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"ignore":[],"remove":{}}, TenUpToolkitTscPlugin: {}, @@ -695,7 +695,7 @@ Object { CopyPlugin: {}, StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true}, WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}, - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, CleanExtractedDeps: {}, WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"ignore":[],"remove":{}}, TenUpToolkitTscPlugin: {}, @@ -905,7 +905,7 @@ Object { CopyPlugin: {}, StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true}, WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null}, - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, CleanExtractedDeps: {}, WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"ignore":[],"remove":{}}, TenUpToolkitTscPlugin: {}, diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap index 14cb619d..e0043d18 100644 --- a/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap +++ b/packages/toolkit/config/__tests__/__snapshots__/webpack-fast-refresh.js.snap @@ -201,7 +201,7 @@ Object { MiniCssExtractPlugin: {"ignoreOrder":false,"runtime":true,"chunkFilename":"[id].css"}, CopyPlugin: {}, StylelintWebpackPlugin: {"cache":true,"cacheLocation":"node_modules/.cache/stylelint-webpack-plugin/.stylelintcache","extensions":["css","scss","sass"],"emitError":true,"emitWarning":true,"failOnError":false,"context":"/assets","files":"**/*.(s(c|a)ss|css)","allowEmptyInput":true,"lintDirtyModulesOnly":true}, - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, CleanExtractedDeps: {}, WebpackRemoveEmptyScriptsPlugin: {"enabled":true,"verbose":false,"extensions":{},"ignore":[],"remove":{}}, TenUpToolkitTscPlugin: {}, @@ -245,7 +245,7 @@ Array [ "path": "/dist/fast-refresh", }, "plugins": Array [ - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":true}, ], }, Object { @@ -265,7 +265,7 @@ Array [ "path": "/dist/fast-refresh", }, "plugins": Array [ - DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"__experimentalInjectInteractivityRuntime":false,"outputFormat":"php","outputFilename":null,"useDefaults":false}, + DependencyExtractionWebpackPlugin: {"combineAssets":false,"combinedOutputFile":null,"externalizedReport":false,"injectPolyfill":false,"outputFormat":"php","outputFilename":null,"useDefaults":false}, ], }, ]