-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Build: Prepare build for more script modules (#65064)
- Rename the "interactivity" webpack build to "script modules". - Output script-modules builds to `build-module` folder (adjacent to the `build` folder currently used for scripts). - Add `wpScriptModulesExports` package.json field to packages with script modules and use it for script module builds. This follows the same basic syntax as [package.json `exports` fields](https://nodejs.org/api/packages.html#exports). Multiple module entrypoints can be exposed per package. However, it remains a custom field, so it is clear that these entrypoints are not intended for general consumption. In the future, module-only packages (interactivity, interactivity-router) can switch to using exports directly and likely add `type: module`. - There are some difficulties with webpack recognizing `wpScriptModulesExports` directly, so packages are inspected programmatically in order to generate webpack script modules entrypoints. - Adjust script module registration accordingly to find the generated script modules. --- Co-authored-by: sirreal <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: t-hamano <[email protected]>
- Loading branch information
4 people
committed
Sep 11, 2024
1 parent
b276647
commit f8a19eb
Showing
16 changed files
with
158 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| const { join } = require( 'path' ); | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| const { baseConfig, plugins } = require( './shared' ); | ||
|
|
||
| const WORDPRESS_NAMESPACE = '@wordpress/'; | ||
| const { createRequire } = require( 'node:module' ); | ||
|
|
||
| const rootURL = new URL( '..', `file://${ __dirname }` ); | ||
| const fromRootRequire = createRequire( rootURL ); | ||
|
|
||
| /** @type {Iterable<[string, string]>} */ | ||
| const iterableDeps = Object.entries( | ||
| fromRootRequire( './package.json' ).dependencies | ||
| ); | ||
|
|
||
| /** @type {Map<string, string>} */ | ||
| const gutenbergScriptModules = new Map(); | ||
| for ( const [ packageName, versionSpecifier ] of iterableDeps ) { | ||
| if ( | ||
| ! packageName.startsWith( WORDPRESS_NAMESPACE ) || | ||
| ! versionSpecifier.startsWith( 'file:' ) || | ||
| packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' ) | ||
| ) { | ||
| continue; | ||
| } | ||
|
|
||
| const packageRequire = createRequire( | ||
| // Remove the leading "file:" specifier to build a package URL. | ||
| new URL( `${ versionSpecifier.substring( 5 ) }/`, rootURL ) | ||
| ); | ||
|
|
||
| const depPackageJson = packageRequire( './package.json' ); | ||
| if ( ! Object.hasOwn( depPackageJson, 'wpScriptModuleExports' ) ) { | ||
| continue; | ||
| } | ||
|
|
||
| const moduleName = packageName.substring( WORDPRESS_NAMESPACE.length ); | ||
| let { wpScriptModuleExports } = depPackageJson; | ||
|
|
||
| // Special handling for { "wpScriptModuleExports": "./build-module/index.js" }. | ||
| if ( typeof wpScriptModuleExports === 'string' ) { | ||
| wpScriptModuleExports = { '.': wpScriptModuleExports }; | ||
| } | ||
|
|
||
| if ( Object.getPrototypeOf( wpScriptModuleExports ) !== Object.prototype ) { | ||
| throw new Error( 'wpScriptModuleExports must be an object' ); | ||
| } | ||
|
|
||
| for ( const [ exportName, exportPath ] of Object.entries( | ||
| wpScriptModuleExports | ||
| ) ) { | ||
| if ( typeof exportPath !== 'string' ) { | ||
| throw new Error( 'wpScriptModuleExports paths must be strings' ); | ||
| } | ||
|
|
||
| if ( ! exportPath.startsWith( './' ) ) { | ||
| throw new Error( | ||
| 'wpScriptModuleExports paths must start with "./"' | ||
| ); | ||
| } | ||
|
|
||
| const name = | ||
| exportName === '.' ? 'index' : exportName.replace( /^\.\/?/, '' ); | ||
|
|
||
| gutenbergScriptModules.set( | ||
| `${ moduleName }/${ name }`, | ||
| packageRequire.resolve( exportPath ) | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| module.exports = { | ||
| ...baseConfig, | ||
| name: 'script-modules', | ||
| entry: Object.fromEntries( gutenbergScriptModules.entries() ), | ||
| experiments: { | ||
| outputModule: true, | ||
| }, | ||
| output: { | ||
| devtoolNamespace: 'wp', | ||
| filename: './build-module/[name].min.js', | ||
| library: { | ||
| type: 'module', | ||
| }, | ||
| path: join( __dirname, '..', '..' ), | ||
| environment: { module: true }, | ||
| module: true, | ||
| chunkFormat: 'module', | ||
| asyncChunks: false, | ||
| }, | ||
| resolve: { | ||
| extensions: [ '.js', '.ts', '.tsx' ], | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.(j|t)sx?$/, | ||
| exclude: /node_modules/, | ||
| use: [ | ||
| { | ||
| loader: require.resolve( 'babel-loader' ), | ||
| options: { | ||
| cacheDirectory: | ||
| process.env.BABEL_CACHE_DIRECTORY || true, | ||
| babelrc: false, | ||
| configFile: false, | ||
| presets: [ | ||
| '@babel/preset-typescript', | ||
| '@babel/preset-react', | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| plugins: [ ...plugins, new DependencyExtractionWebpackPlugin() ], | ||
| watchOptions: { | ||
| ignored: [ '**/node_modules' ], | ||
| aggregateTimeout: 500, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters