diff --git a/.npmpackagejsonlintignore b/.npmpackagejsonlintignore new file mode 100644 index 00000000000000..fbfa2717db011b --- /dev/null +++ b/.npmpackagejsonlintignore @@ -0,0 +1,2 @@ +packages/element/jsx-runtime/package.json +packages/element/jsx-dev-runtime/package.json diff --git a/package-lock.json b/package-lock.json index 629b31cb939cbf..39332df39088e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17949,17 +17949,94 @@ "dev": true, "requires": { "@babel/core": "^7.13.10", - "@babel/plugin-transform-react-jsx": "^7.12.7", "@babel/plugin-transform-runtime": "^7.13.10", "@babel/preset-env": "^7.13.10", + "@babel/preset-react": "^7.10.1", "@babel/preset-typescript": "^7.13.0", "@babel/runtime": "^7.13.10", - "@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:packages/browserslist-config", - "@wordpress/element": "file:packages/element", "@wordpress/warning": "file:packages/warning", "browserslist": "^4.16.6", "core-js": "^3.12.1" + }, + "dependencies": { + "@babel/helper-annotate-as-pure": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz", + "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==", + "requires": { + "@babel/types": "^7.14.5" + } + }, + "@babel/helper-module-imports": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz", + "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==", + "requires": { + "@babel/types": "^7.14.5" + } + }, + "@babel/helper-plugin-utils": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz", + "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==" + }, + "@babel/helper-validator-identifier": { + "version": "7.14.9", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz", + "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==" + }, + "@babel/plugin-syntax-jsx": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz", + "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==", + "requires": { + "@babel/helper-plugin-utils": "^7.14.5" + } + }, + "@babel/plugin-transform-react-jsx": { + "version": "7.14.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.9.tgz", + "integrity": "sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.14.5", + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-plugin-utils": "^7.14.5", + "@babel/plugin-syntax-jsx": "^7.14.5", + "@babel/types": "^7.14.9" + } + }, + "@babel/plugin-transform-react-jsx-development": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz", + "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==", + "requires": { + "@babel/plugin-transform-react-jsx": "^7.14.5" + }, + "dependencies": { + "@babel/plugin-transform-react-jsx": { + "version": "7.14.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.9.tgz", + "integrity": "sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.14.5", + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-plugin-utils": "^7.14.5", + "@babel/plugin-syntax-jsx": "^7.14.5", + "@babel/types": "^7.14.9" + } + } + } + }, + "@babel/types": { + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", + "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", + "requires": { + "@babel/helper-validator-identifier": "^7.14.9", + "to-fast-properties": "^2.0.0" + } + } } }, "@wordpress/base-styles": { diff --git a/package.json b/package.json index 6d3ff4a2f29773..a1f2e5bb0e4c70 100644 --- a/package.json +++ b/package.json @@ -225,7 +225,7 @@ "build:packages": "npm run build:package-types && node ./bin/packages/build.js", "build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build", "build:plugin-zip": "./bin/build-plugin-zip.sh", - "build": "npm run build:packages && wp-scripts build", + "build": "cross-env NODE_ENV=production npm run build:packages && wp-scripts build", "changelog": "./bin/plugin/cli.js changelog", "check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"", "precheck-local-changes": "npm run docs:build", diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index 55ceca2540d31d..840cd68279ce92 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Use `@babel/preset-react` with `@wordpress/element`'s automatic runtime to transform JSX ([#34221](https://github.com/WordPress/gutenberg/pull/34221)). + ## 6.2.0 (2021-05-31) ### New Feature diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js index 876074d2455015..519277088a66a0 100644 --- a/packages/babel-preset-default/index.js +++ b/packages/babel-preset-default/index.js @@ -11,6 +11,7 @@ module.exports = ( api ) => { ); const isTestEnv = api.env() === 'test'; + const isDevEnv = api.env() === 'development'; api.caller( ( caller ) => { if ( caller && isWPBuild( caller.name ) ) { @@ -67,26 +68,18 @@ module.exports = ( api ) => { return { presets: [ getPresetEnv(), - require.resolve( '@babel/preset-typescript' ), - ], - plugins: [ - require.resolve( '@wordpress/warning/babel-plugin' ), - [ - require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ), - { - scopeVariable: 'createElement', - scopeVariableFrag: 'Fragment', - source: '@wordpress/element', - isDefault: false, - }, - ], [ - require.resolve( '@babel/plugin-transform-react-jsx' ), + require.resolve( '@babel/preset-react' ), { - pragma: 'createElement', - pragmaFrag: 'Fragment', + runtime: 'automatic', + importSource: '@wordpress/element', + development: isDevEnv, }, ], + require.resolve( '@babel/preset-typescript' ), + ], + plugins: [ + require.resolve( '@wordpress/warning/babel-plugin' ), maybeGetPluginTransformRuntime(), ].filter( Boolean ), }; diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index f9d1497e4279af..41862b4ec7bbad 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -30,14 +30,12 @@ "main": "index.js", "dependencies": { "@babel/core": "^7.13.10", - "@babel/plugin-transform-react-jsx": "^7.12.7", "@babel/plugin-transform-runtime": "^7.13.10", "@babel/preset-env": "^7.13.10", + "@babel/preset-react": "^7.10.1", "@babel/preset-typescript": "^7.13.0", "@babel/runtime": "^7.13.10", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", - "@wordpress/element": "file:../element", "@wordpress/warning": "file:../warning", "browserslist": "^4.16.6", "core-js": "^3.12.1" diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index a1817f65c7781c..725195e6745664 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -32,6 +32,14 @@ function defaultRequestToExternal( request ) { case 'react-dom': return 'ReactDOM'; + + case 'object-assign': + return [ 'Object', 'assign' ]; + + case '@wordpress/element/jsx-runtime': + return [ 'wp', 'jsxRuntime' ]; + case '@wordpress/element/jsx-dev-runtime': + return [ 'wp', 'jsxDevRuntime' ]; } if ( BUNDLED_PACKAGES.includes( request ) ) { @@ -64,6 +72,15 @@ function defaultRequestToHandle( request ) { case 'lodash-es': return 'lodash'; + + // Ignore object-assign ponyfill, which is used by jsx-(dev)-runtime. + case 'object-assign': + return 'wp-polyfill'; + + case '@wordpress/element/jsx-runtime': + return 'wp-jsx-runtime'; + case '@wordpress/element/jsx-dev-runtime': + return 'wp-jsx-dev-runtime'; } if ( request.startsWith( WORDPRESS_NAMESPACE ) ) { diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index e51df33a56fff4..b47a7e2157128b 100644 --- a/packages/element/CHANGELOG.md +++ b/packages/element/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### New Features + +- Added `jsx-runtime` and `jsx-dev-runtime` modules to support the new automatic JSX transform ([#34221](https://github.com/WordPress/gutenberg/pull/34221)). + ## 4.0.0 (2021-07-29) ### Breaking Change diff --git a/packages/element/jsx-dev-runtime/jsx-dev-runtime.d.ts b/packages/element/jsx-dev-runtime/jsx-dev-runtime.d.ts new file mode 100644 index 00000000000000..e82c13d64357be --- /dev/null +++ b/packages/element/jsx-dev-runtime/jsx-dev-runtime.d.ts @@ -0,0 +1 @@ +import 'react/jsx-dev-runtime'; diff --git a/packages/element/jsx-dev-runtime/package.json b/packages/element/jsx-dev-runtime/package.json new file mode 100644 index 00000000000000..e6cdc5353d249e --- /dev/null +++ b/packages/element/jsx-dev-runtime/package.json @@ -0,0 +1,7 @@ +{ + "main": "../build/jsx-dev-runtime.js", + "module": "../build-module/jsx-dev-runtime.js", + "react-native": "../src/jsx-dev-runtime.js", + "types": "./jsx-dev-runtime.d.ts", + "sideEffects": false +} diff --git a/packages/element/jsx-runtime/jsx-runtime.d.ts b/packages/element/jsx-runtime/jsx-runtime.d.ts new file mode 100644 index 00000000000000..5aeb586bc6359a --- /dev/null +++ b/packages/element/jsx-runtime/jsx-runtime.d.ts @@ -0,0 +1 @@ +import 'react/jsx-runtime'; diff --git a/packages/element/jsx-runtime/package.json b/packages/element/jsx-runtime/package.json new file mode 100644 index 00000000000000..916aa94b8974d2 --- /dev/null +++ b/packages/element/jsx-runtime/package.json @@ -0,0 +1,7 @@ +{ + "main": "../build/jsx-runtime.js", + "module": "../build-module/jsx-runtime.js", + "react-native": "../src/jsx-runtime.js", + "types": "./jsx-runtime.d.ts", + "sideEffects": false +} diff --git a/packages/element/src/jsx-dev-runtime.js b/packages/element/src/jsx-dev-runtime.js new file mode 100644 index 00000000000000..6a4e9f9bf6b626 --- /dev/null +++ b/packages/element/src/jsx-dev-runtime.js @@ -0,0 +1 @@ +export * from 'react/jsx-dev-runtime'; diff --git a/packages/element/src/jsx-runtime.js b/packages/element/src/jsx-runtime.js new file mode 100644 index 00000000000000..c63410246331eb --- /dev/null +++ b/packages/element/src/jsx-runtime.js @@ -0,0 +1 @@ +export * from 'react/jsx-runtime'; diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js index 0b92c014c4e336..1686147d1f120e 100644 --- a/test/unit/jest.config.js +++ b/test/unit/jest.config.js @@ -14,6 +14,8 @@ module.exports = { [ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]: 'packages/$1/src', + '@wordpress\\/element\\/(jsx\\-runtime|jsx\\-dev\\-runtime)$': + 'packages/element/src/$1', }, preset: '@wordpress/jest-preset-default', setupFiles: [ diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 5903eea5c70c19..e0f9a198e6347b 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -43,21 +43,39 @@ const exportDefaultPackages = [ module.exports = { ...baseConfig, name: 'packages', - entry: gutenbergPackages.reduce( ( memo, packageName ) => { - return { - ...memo, - [ packageName ]: { - import: `./packages/${ packageName }`, + entry: gutenbergPackages.reduce( + ( memo, packageName ) => { + return { + ...memo, + [ packageName ]: { + import: `./packages/${ packageName }`, + library: { + name: [ 'wp', camelCaseDash( packageName ) ], + type: 'window', + export: exportDefaultPackages.includes( packageName ) + ? 'default' + : undefined, + }, + }, + }; + }, + { + 'jsx-runtime': { + import: './packages/element/jsx-runtime', + library: { + name: [ 'wp', 'jsxRuntime' ], + type: 'window', + }, + }, + 'jsx-dev-runtime': { + import: './packages/element/jsx-dev-runtime', library: { - name: [ 'wp', camelCaseDash( packageName ) ], + name: [ 'wp', 'jsxDevRuntime' ], type: 'window', - export: exportDefaultPackages.includes( packageName ) - ? 'default' - : undefined, }, }, - }; - }, {} ), + } + ), output: { devtoolNamespace: 'wp', filename: './build/[name]/index.min.js', diff --git a/tsconfig.base.json b/tsconfig.base.json index 201304f455a131..95cacb6399d9b3 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -3,7 +3,8 @@ "allowJs": true, "checkJs": true, "allowSyntheticDefaultImports": true, - "jsx": "preserve", + "jsx": "react-jsx", + "jsxImportSource": "@wordpress/element", "target": "esnext", "module": "esnext", "lib": [ "dom", "esnext" ],