From 553ce3661398d22677d80614a999bc99ef93a00b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 15 May 2024 19:28:33 +0100 Subject: [PATCH 01/12] React: Upgrade to the new JSX transform --- package-lock.json | 2 -- packages/babel-preset-default/index.js | 13 +------------ packages/babel-preset-default/package.json | 1 - .../lib/util.js | 4 ++-- packages/interactivity/src/directives.tsx | 4 +--- packages/interactivity/src/hooks.tsx | 2 -- 6 files changed, 4 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35ea50b60b7ada..a336fbe32f9bcb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53163,7 +53163,6 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", @@ -68510,7 +68509,6 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js index 40f7c31bb3c25b..45ec6473be3cbc 100644 --- a/packages/babel-preset-default/index.js +++ b/packages/babel-preset-default/index.js @@ -75,21 +75,10 @@ module.exports = ( api ) => { ], plugins: [ require.resolve( '@wordpress/warning/babel-plugin' ), - [ - require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ), - { - scopeVariable: 'createElement', - scopeVariableFrag: 'Fragment', - source: 'react', - isDefault: false, - }, - ], [ require.resolve( '@babel/plugin-transform-react-jsx' ), { - pragma: 'createElement', - pragmaFrag: 'Fragment', - useSpread: true, + runtime: 'automatic', }, ], maybeGetPluginTransformRuntime(), diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json index 4b12101565b45c..438cce0f47b96b 100644 --- a/packages/babel-preset-default/package.json +++ b/packages/babel-preset-default/package.json @@ -35,7 +35,6 @@ "@babel/preset-env": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@babel/runtime": "^7.16.0", - "@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma", "@wordpress/browserslist-config": "file:../browserslist-config", "@wordpress/warning": "file:../warning", "browserslist": "^4.21.10", diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index 92fdcff11612ea..2d2935c661df11 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -93,9 +93,9 @@ function defaultRequestToExternalModule( request ) { const isWordPressScript = Boolean( defaultRequestToExternal( request ) ); if ( isWordPressScript ) { - throw new Error( + /*throw new Error( `Attempted to use WordPress script in a module: ${ request }, which is not supported yet.` - ); + );*/ } } diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx index b0b78bb27efe50..f741c6fc007567 100644 --- a/packages/interactivity/src/directives.tsx +++ b/packages/interactivity/src/directives.tsx @@ -1,12 +1,10 @@ // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable react-hooks/exhaustive-deps */ -/* @jsx createElement */ - /** * External dependencies */ -import { h as createElement, type RefObject } from 'preact'; +import { type RefObject } from 'preact'; import { useContext, useMemo, useRef } from 'preact/hooks'; import { deepSignal, peek, type DeepSignal } from 'deepsignal'; diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx index 735ed26aabc8cc..6510b87ce03859 100644 --- a/packages/interactivity/src/hooks.tsx +++ b/packages/interactivity/src/hooks.tsx @@ -1,5 +1,3 @@ -/* @jsx createElement */ - // eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable react-hooks/exhaustive-deps */ From f2493fe97e8300522143649837e01f2a83cdcbb7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 15 May 2024 21:56:45 +0100 Subject: [PATCH 02/12] Extract the JSX Runtime into its own script --- lib/client-assets.php | 8 ++++++++ .../lib/util.js | 6 ++++++ tools/webpack/development.js | 18 ++++++++++++++++++ 3 files changed, 32 insertions(+) diff --git a/lib/client-assets.php b/lib/client-assets.php index 13884f90fb3ea5..db3bc8443eba50 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -590,6 +590,14 @@ function gutenberg_register_vendor_scripts( $scripts ) { array( 'react' ), '18' ); + + gutenberg_override_script( + $scripts, + 'react-jsx-runtime', + gutenberg_url( 'build/react-jsx-runtime/index.min.js' ), + array(), + '18' + ); } add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' ); diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index 2d2935c661df11..51b1799a34e22a 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -42,6 +42,9 @@ function defaultRequestToExternal( request ) { case 'react-dom': return 'ReactDOM'; + + case 'react/jsx-runtime': + return 'ReactJSXRuntime'; } if ( request.includes( 'react-refresh/runtime' ) ) { @@ -117,6 +120,9 @@ function defaultRequestToHandle( request ) { case 'lodash-es': return 'lodash'; + + case 'react/jsx-runtime': + return 'react-jsx-runtime'; } if ( request.includes( 'react-refresh/runtime' ) ) { diff --git a/tools/webpack/development.js b/tools/webpack/development.js index 88ac4fba42f202..d707a6d1afc2ea 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -46,4 +46,22 @@ module.exports = [ } ), ], }, + { + ...sharedConfig, + name: 'react-jsx-runtime', + entry: { + 'react-jsx-runtime': { + import: 'react/jsx-runtime', + library: { + name: 'ReactJSXRuntime', + type: 'window', + }, + }, + }, + plugins: [ + new DependencyExtractionWebpackPlugin( { + useDefaults: false, + } ), + ], + }, ]; From 2a1adda57699c56fe439850415bbc3275567c6c0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 15 May 2024 22:11:21 +0100 Subject: [PATCH 03/12] Do not bundle react in the jsx runtime --- lib/client-assets.php | 2 +- tools/webpack/development.js | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index db3bc8443eba50..ef8ce0383a4726 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -595,7 +595,7 @@ function gutenberg_register_vendor_scripts( $scripts ) { $scripts, 'react-jsx-runtime', gutenberg_url( 'build/react-jsx-runtime/index.min.js' ), - array(), + array( 'react' ), '18' ); } diff --git a/tools/webpack/development.js b/tools/webpack/development.js index d707a6d1afc2ea..310116def50322 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -60,7 +60,18 @@ module.exports = [ }, plugins: [ new DependencyExtractionWebpackPlugin( { + injectPolyfill: false, useDefaults: false, + requestToExternal: ( request ) => { + if ( request === 'react' ) { + return 'React'; + } + }, + requestToHandle: ( request ) => { + if ( request === 'react' ) { + return 'react'; + } + }, } ), ], }, From 2242ff9f9a99c4dd8ebfb984ebaa89e64d3ec92c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 15 May 2024 22:17:07 +0100 Subject: [PATCH 04/12] Fix interactivity --- .../lib/util.js | 4 ++-- packages/interactivity/src/directives.tsx | 23 +++++++++---------- packages/interactivity/src/hooks.tsx | 20 ++++++++-------- 3 files changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index 51b1799a34e22a..907f1db782a9f6 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -96,9 +96,9 @@ function defaultRequestToExternalModule( request ) { const isWordPressScript = Boolean( defaultRequestToExternal( request ) ); if ( isWordPressScript ) { - /*throw new Error( + throw new Error( `Attempted to use WordPress script in a module: ${ request }, which is not supported yet.` - );*/ + ); } } diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx index f741c6fc007567..d0619bb37d4c7f 100644 --- a/packages/interactivity/src/directives.tsx +++ b/packages/interactivity/src/directives.tsx @@ -4,7 +4,7 @@ /** * External dependencies */ -import { type RefObject } from 'preact'; +import { h as createElement, type RefObject } from 'preact'; import { useContext, useMemo, useRef } from 'preact/hooks'; import { deepSignal, peek, type DeepSignal } from 'deepsignal'; @@ -229,6 +229,7 @@ export default () => { // data-wp-context directive( 'context', + // @ts-ignore-next-line ( { directives: { context }, props: { children }, @@ -258,7 +259,7 @@ export default () => { return proxifyContext( currentValue.current, inheritedValue ); }, [ defaultEntry, inheritedValue ] ); - return { children }; + return createElement( Provider, { value: contextStack }, children ); }, { priority: 5 } ); @@ -479,12 +480,10 @@ export default () => { } ) => { // Preserve the initial inner HTML. const cached = useMemo( () => innerHTML, [] ); - return ( - - ); + return createElement( Type, { + dangerouslySetInnerHTML: { __html: cached }, + ...rest, + } ); } ); @@ -547,10 +546,10 @@ export default () => { ? getEvaluate( { scope } )( eachKey[ 0 ] ) : item; - return ( - - { element.props.content } - + return createElement( + Provider, + { value: mergedContext, key }, + element.props.content ); } ); }, diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx index 6510b87ce03859..4d4e2d6d6f6629 100644 --- a/packages/interactivity/src/hooks.tsx +++ b/packages/interactivity/src/hooks.tsx @@ -350,17 +350,15 @@ const Directives = ( { // Recursively render the wrapper for the next priority level. const children = - nextPriorityLevels.length > 0 ? ( - - ) : ( - element - ); + nextPriorityLevels.length > 0 + ? createElement( Directives, { + directives, + priorityLevels: nextPriorityLevels, + element, + originalProps, + previousScope: scope, + } ) + : element; const props = { ...originalProps, children }; const directiveArgs = { From f830d1791dc34d87ab16a1c7fb1fa16625fe8e90 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2024 08:08:00 +0100 Subject: [PATCH 05/12] Fix JSX warnings --- packages/components/src/custom-select-control/index.js | 2 +- packages/components/src/form-token-field/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 46bc4f4d9a4fb1..24b3d8bdb9bd3f 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -187,10 +187,10 @@ export default function CustomSelectControl( props ) { items.map( ( item, index ) => ( // eslint-disable-next-line react/jsx-key
  • = maxLength ) From ad12069f5b261ab3d0b9f4f1b5e9fb2120d64708 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2024 09:00:24 +0100 Subject: [PATCH 06/12] Fix production build --- packages/babel-preset-default/CHANGELOG.md | 4 ++++ packages/components/CHANGELOG.md | 4 ++++ packages/scripts/CHANGELOG.md | 4 ++++ tools/webpack/development.js | 4 ++++ 4 files changed, 16 insertions(+) diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md index 5735008dd472dc..15ced9c9dde12c 100644 --- a/packages/babel-preset-default/CHANGELOG.md +++ b/packages/babel-preset-default/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). + ## 7.42.0 (2024-05-16) ## 7.41.0 (2024-05-02) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7ada9626797d45..4e965c7960b8e3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). +### Internal + +- Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). + ## 27.6.0 (2024-05-16) ### Internal diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 8bc3319e52836c..8c5aa8c623ef09 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Breaking Changes + +- Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)). + ## 27.9.0 (2024-05-16) ### New Features diff --git a/tools/webpack/development.js b/tools/webpack/development.js index 310116def50322..716adaccbc1b92 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -48,6 +48,10 @@ module.exports = [ }, { ...sharedConfig, + mode: + process.env.NODE_ENV === 'production' + ? 'production' + : 'development', name: 'react-jsx-runtime', entry: { 'react-jsx-runtime': { From f964b8b007205442b649cd27951b6eb7093eb6ab Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2024 12:22:27 +0100 Subject: [PATCH 07/12] Fix another key spread --- .../src/components/global-styles/color-panel.js | 4 ++-- packages/block-editor/src/hooks/typography.js | 7 +------ packages/block-editor/src/utils/object.js | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index 7a20953af428cd..d222a07b0b59c5 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -28,7 +28,7 @@ import { __, sprintf } from '@wordpress/i18n'; import ColorGradientControl from '../colors-gradients/control'; import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; -import { setImmutably } from '../../utils/object'; +import { setImmutably, omit } from '../../utils/object'; import { unlock } from '../../lock-unlock'; export function useHasColorPanel( settings ) { @@ -715,7 +715,7 @@ export default function ColorPanel( { { items.map( ( item ) => ( ! keys.includes( key ) ) - ); -} +import { omit } from '../utils/object'; const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing'; const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform'; diff --git a/packages/block-editor/src/utils/object.js b/packages/block-editor/src/utils/object.js index c78fe0e656dfef..a69735b8c685a5 100644 --- a/packages/block-editor/src/utils/object.js +++ b/packages/block-editor/src/utils/object.js @@ -65,3 +65,17 @@ export function uniqByProperty( array, property ) { return seen.has( value ) ? false : seen.add( value ); } ); } + +/** + * Helper to omit keys from a given object. + * + * @param {Object} object Object. + * @param {string[]} keys Keys to omit. + * + * @return {Object} Object without the omitted keys. + */ +export function omit( object, keys ) { + return Object.fromEntries( + Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) ) + ); +} From 70d228b4c8f719aff92c10738d593cb22add4809 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2024 13:03:12 +0100 Subject: [PATCH 08/12] Refactor vendors webpack config --- lib/client-assets.php | 2 +- tools/webpack/development.js | 33 ------------- tools/webpack/packages.js | 31 +----------- tools/webpack/vendors.js | 96 ++++++++++++++++++++++++++++++++++++ webpack.config.js | 2 + 5 files changed, 100 insertions(+), 64 deletions(-) create mode 100644 tools/webpack/vendors.js diff --git a/lib/client-assets.php b/lib/client-assets.php index ef8ce0383a4726..a159bc53e6a591 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -594,7 +594,7 @@ function gutenberg_register_vendor_scripts( $scripts ) { gutenberg_override_script( $scripts, 'react-jsx-runtime', - gutenberg_url( 'build/react-jsx-runtime/index.min.js' ), + gutenberg_url( 'build/vendors/react-jsx-runtime' . $extension ), array( 'react' ), '18' ); diff --git a/tools/webpack/development.js b/tools/webpack/development.js index 716adaccbc1b92..88ac4fba42f202 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -46,37 +46,4 @@ module.exports = [ } ), ], }, - { - ...sharedConfig, - mode: - process.env.NODE_ENV === 'production' - ? 'production' - : 'development', - name: 'react-jsx-runtime', - entry: { - 'react-jsx-runtime': { - import: 'react/jsx-runtime', - library: { - name: 'ReactJSXRuntime', - type: 'window', - }, - }, - }, - plugins: [ - new DependencyExtractionWebpackPlugin( { - injectPolyfill: false, - useDefaults: false, - requestToExternal: ( request ) => { - if ( request === 'react' ) { - return 'React'; - } - }, - requestToHandle: ( request ) => { - if ( request === 'react' ) { - return 'react'; - } - }, - } ), - ], - }, ]; diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 0a4b8cef574464..899ee36ec93813 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -102,34 +102,6 @@ const exportDefaultPackages = [ 'warning', ]; -const vendors = { - react: [ - 'react/umd/react.development.js', - 'react/umd/react.production.min.js', - ], - 'react-dom': [ - 'react-dom/umd/react-dom.development.js', - 'react-dom/umd/react-dom.production.min.js', - ], - 'inert-polyfill': [ - 'wicg-inert/dist/inert.js', - 'wicg-inert/dist/inert.min.js', - ], -}; -const vendorsCopyConfig = Object.entries( vendors ).flatMap( - ( [ key, [ devFilename, prodFilename ] ] ) => { - return [ - { - from: `node_modules/${ devFilename }`, - to: `build/vendors/${ key }.js`, - }, - { - from: `node_modules/${ prodFilename }`, - to: `build/vendors/${ key }.min.js`, - }, - ]; - } -); module.exports = { ...baseConfig, name: 'packages', @@ -176,8 +148,7 @@ module.exports = { transform: stylesTransform, noErrorOnMissing: true, } ) ) - .concat( bundledPackagesPhpConfig ) - .concat( vendorsCopyConfig ), + .concat( bundledPackagesPhpConfig ), } ), new MomentTimezoneDataPlugin( { startYear: 2000, diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js new file mode 100644 index 00000000000000..c757f66d6e65ee --- /dev/null +++ b/tools/webpack/vendors.js @@ -0,0 +1,96 @@ +/** + * External dependencies + */ +const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); +const { join } = require( 'path' ); + +/** + * WordPress dependencies + */ +const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); + +const copiedVendors = { + 'inert-polyfill': [ + 'wicg-inert/dist/inert.js', + 'wicg-inert/dist/inert.min.js', + ], +}; +const importedVendors = { + react: { import: 'react', global: 'React' }, + 'react-dom': { import: 'react-dom', global: 'ReactDOM' }, + 'react-jsx-runtime': { + import: 'react/jsx-runtime', + global: 'ReactJSXRuntime', + }, +}; + +module.exports = [ + ...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => { + return [ 'production', 'development' ].map( ( mode ) => { + return { + mode, + target: 'browserslist', + output: { + filename: + mode === 'development' + ? `vendors/[name].js` + : `vendors/[name].min.js`, + path: join( __dirname, '..', '..', 'build' ), + }, + entry: { + [ name ]: { + import: config.import, + library: { + name: config.global, + type: 'window', + }, + }, + }, + + plugins: [ + new DependencyExtractionWebpackPlugin( { + injectPolyfill: false, + useDefaults: false, + requestToExternal: ( request ) => { + if ( name !== 'react' && request === 'react' ) { + return 'React'; + } + }, + requestToHandle: ( request ) => { + if ( name !== 'react' && request === 'react' ) { + return 'react'; + } + }, + } ), + ].concat( + // This is just a way to add this copy plugin only once to the webpack config. + mode === 'production' && name === 'react' + ? [ + new CopyWebpackPlugin( { + patterns: Object.entries( + copiedVendors + ).flatMap( + ( [ + key, + [ devFilename, prodFilename ], + ] ) => { + return [ + { + from: `node_modules/${ devFilename }`, + to: `vendors/${ key }.js`, + }, + { + from: `node_modules/${ prodFilename }`, + to: `vendors/${ key }.min.js`, + }, + ]; + } + ), + } ), + ] + : [] + ), + }; + } ); + } ), +]; diff --git a/webpack.config.js b/webpack.config.js index 8558707f4bc9fa..45b22cc5354dcf 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,10 +5,12 @@ const blocksConfig = require( './tools/webpack/blocks' ); const developmentConfigs = require( './tools/webpack/development' ); const interactivity = require( './tools/webpack/interactivity' ); const packagesConfig = require( './tools/webpack/packages' ); +const vendorsConfig = require( './tools/webpack/vendors' ); module.exports = [ ...blocksConfig, interactivity, packagesConfig, ...developmentConfigs, + ...vendorsConfig, ]; From 356a7be27b7f0a8c14dbf8c7d6ac86740eddd59e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 16 May 2024 15:01:51 +0100 Subject: [PATCH 09/12] Fix dev build --- packages/dependency-extraction-webpack-plugin/lib/util.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js index 907f1db782a9f6..55a908c31a7ab9 100644 --- a/packages/dependency-extraction-webpack-plugin/lib/util.js +++ b/packages/dependency-extraction-webpack-plugin/lib/util.js @@ -44,6 +44,7 @@ function defaultRequestToExternal( request ) { return 'ReactDOM'; case 'react/jsx-runtime': + case 'react/jsx-dev-runtime': return 'ReactJSXRuntime'; } From b09dfaf410b0ec9ea048bae34ae250b0b1d7dc0a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 May 2024 12:30:12 +0100 Subject: [PATCH 10/12] Remove inert polyfill --- package-lock.json | 13 +------------ package.json | 3 +-- tools/webpack/vendors.js | 36 +----------------------------------- 3 files changed, 3 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index a336fbe32f9bcb..c178dd55e5be54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,8 +80,7 @@ "@wordpress/warning": "file:packages/warning", "@wordpress/widgets": "file:packages/widgets", "@wordpress/wordcount": "file:packages/wordcount", - "es-module-shims": "^1.8.2", - "wicg-inert": "3.1.2" + "es-module-shims": "^1.8.2" }, "devDependencies": { "@actions/core": "1.9.1", @@ -52371,11 +52370,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/wicg-inert": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz", - "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==" - }, "node_modules/wide-align": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", @@ -96250,11 +96244,6 @@ "has-tostringtag": "^1.0.0" } }, - "wicg-inert": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz", - "integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==" - }, "wide-align": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", diff --git a/package.json b/package.json index 7995d6a9755a7e..422b9678b238b8 100644 --- a/package.json +++ b/package.json @@ -92,8 +92,7 @@ "@wordpress/warning": "file:packages/warning", "@wordpress/widgets": "file:packages/widgets", "@wordpress/wordcount": "file:packages/wordcount", - "es-module-shims": "^1.8.2", - "wicg-inert": "3.1.2" + "es-module-shims": "^1.8.2" }, "devDependencies": { "@actions/core": "1.9.1", diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js index c757f66d6e65ee..b06df0d8ee6c02 100644 --- a/tools/webpack/vendors.js +++ b/tools/webpack/vendors.js @@ -1,7 +1,6 @@ /** * External dependencies */ -const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); const { join } = require( 'path' ); /** @@ -9,12 +8,6 @@ const { join } = require( 'path' ); */ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); -const copiedVendors = { - 'inert-polyfill': [ - 'wicg-inert/dist/inert.js', - 'wicg-inert/dist/inert.min.js', - ], -}; const importedVendors = { react: { import: 'react', global: 'React' }, 'react-dom': { import: 'react-dom', global: 'ReactDOM' }, @@ -62,34 +55,7 @@ module.exports = [ } }, } ), - ].concat( - // This is just a way to add this copy plugin only once to the webpack config. - mode === 'production' && name === 'react' - ? [ - new CopyWebpackPlugin( { - patterns: Object.entries( - copiedVendors - ).flatMap( - ( [ - key, - [ devFilename, prodFilename ], - ] ) => { - return [ - { - from: `node_modules/${ devFilename }`, - to: `vendors/${ key }.js`, - }, - { - from: `node_modules/${ prodFilename }`, - to: `vendors/${ key }.min.js`, - }, - ]; - } - ), - } ), - ] - : [] - ), + ], }; } ); } ), From f252697074749f861644e05a525e9bc2dbe4b9f1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 20 May 2024 09:37:20 +0100 Subject: [PATCH 11/12] Switch to externals --- tools/webpack/vendors.js | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js index b06df0d8ee6c02..d21c029f6c3971 100644 --- a/tools/webpack/vendors.js +++ b/tools/webpack/vendors.js @@ -3,11 +3,6 @@ */ const { join } = require( 'path' ); -/** - * WordPress dependencies - */ -const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); - const importedVendors = { react: { import: 'react', global: 'React' }, 'react-dom': { import: 'react-dom', global: 'ReactDOM' }, @@ -40,22 +35,12 @@ module.exports = [ }, }, - plugins: [ - new DependencyExtractionWebpackPlugin( { - injectPolyfill: false, - useDefaults: false, - requestToExternal: ( request ) => { - if ( name !== 'react' && request === 'react' ) { - return 'React'; - } - }, - requestToHandle: ( request ) => { - if ( name !== 'react' && request === 'react' ) { - return 'react'; - } - }, - } ), - ], + externals: + name === 'react' + ? {} + : { + react: 'React', + }, }; } ); } ), From 7cffbfe16eecef7d0b8aeeb4347eb52db09133fa Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 20 May 2024 09:43:15 +0100 Subject: [PATCH 12/12] Avoid omit utility --- .../components/global-styles/color-panel.js | 31 ++++++++++--------- packages/block-editor/src/hooks/typography.js | 7 ++++- packages/block-editor/src/utils/object.js | 14 --------- .../src/custom-select-control/index.js | 1 - 4 files changed, 23 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js index d222a07b0b59c5..55c6dfbe4cc977 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.js +++ b/packages/block-editor/src/components/global-styles/color-panel.js @@ -28,7 +28,7 @@ import { __, sprintf } from '@wordpress/i18n'; import ColorGradientControl from '../colors-gradients/control'; import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks'; import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils'; -import { setImmutably, omit } from '../../utils/object'; +import { setImmutably } from '../../utils/object'; import { unlock } from '../../lock-unlock'; export function useHasColorPanel( settings ) { @@ -712,19 +712,22 @@ export default function ColorPanel( { onChange={ onChange } panelId={ panelId } > - { items.map( ( item ) => ( - - ) ) } + { items.map( ( item ) => { + const { key, ...restItem } = item; + return ( + + ); + } ) } { children } ); diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index a44d828d89b18e..cf3f4327c8f034 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -20,7 +20,12 @@ import { FONT_SIZE_SUPPORT_KEY } from './font-size'; import { TEXT_ALIGN_SUPPORT_KEY } from './text-align'; import { cleanEmptyObject } from './utils'; import { store as blockEditorStore } from '../store'; -import { omit } from '../utils/object'; + +function omit( object, keys ) { + return Object.fromEntries( + Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) ) + ); +} const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing'; const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform'; diff --git a/packages/block-editor/src/utils/object.js b/packages/block-editor/src/utils/object.js index a69735b8c685a5..c78fe0e656dfef 100644 --- a/packages/block-editor/src/utils/object.js +++ b/packages/block-editor/src/utils/object.js @@ -65,17 +65,3 @@ export function uniqByProperty( array, property ) { return seen.has( value ) ? false : seen.add( value ); } ); } - -/** - * Helper to omit keys from a given object. - * - * @param {Object} object Object. - * @param {string[]} keys Keys to omit. - * - * @return {Object} Object without the omitted keys. - */ -export function omit( object, keys ) { - return Object.fromEntries( - Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) ) - ); -} diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js index 24b3d8bdb9bd3f..979aa0f7bdff8d 100644 --- a/packages/components/src/custom-select-control/index.js +++ b/packages/components/src/custom-select-control/index.js @@ -185,7 +185,6 @@ export default function CustomSelectControl( props ) {
      { isOpen && items.map( ( item, index ) => ( - // eslint-disable-next-line react/jsx-key