dev: update webpack build to dynamiclly fetch wp-admin-scripts (#51133)

* dev: update webpack build to dynamiclly fetch wp-admin-scripts

* Update README.md

* Update README.md
This commit is contained in:
RJ 2024-09-05 08:14:32 +08:00 committed by GitHub
parent aaae67f032
commit dcbc4dc588
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 39 deletions

View File

@ -1,5 +1,16 @@
Scripts located in this directory are meant to be loaded on wp-admin pages outside the context of WooCommerce Admin, such as the post editor. Adding the script name to `wpAdminScripts` in the Webpack config will automatically build these scripts.
# WP Admin Scripts
Scripts must be manually enqueued with any necessary dependencies. For example, `onboarding-homepage-notice` uses the WooCommerce navigation package:
Scripts located in this directory are meant to be loaded on wp-admin pages outside the context of WooCommerce Admin, such as the post editor.
Each subdirectory of this directory is automatically added as an entrypoint in the [webpack build script](../../../../plugins/woocommerce-admin/webpack.config.js#L71) of WooCommerce Admin. When they are built, each one results in a pair of `<subdirectory-name>.asset.php` and `<subdirectory-name>.js` file in the `build\wp-admin-scripts\` path, but they will not be automatically loaded on every PHP page.
The `<subdirectory-name>.asset.php` file contains a list of automatically detected dependencies generated by the Dependency Extraction Webpack Plugin, so JS dependencies are not required to be manually enqueued as long as the `WCAdminAssets::register_script()` function is used to enqueue the script.
As an example, the `payment-method-promotions` wp-admin-scripts has generated `payment-method-promotions.asset.php` with the contents below:
`<?php return array('dependencies' => array('react', 'wc-components', 'wc-experimental', 'wc-settings', 'wc-store-data', 'wc-tracks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'e64b1e69145febe07734');`
And is registered as a script like so: [`plugins/woocommerce/src/Internal/Admin/WCPayPromotion/Init.php`](../../../../plugins/woocommerce/src/Internal/Admin/WCPayPromotion/Init.php#L179),
`WCAdminAssets::register_script( 'wp-admin-scripts', 'payment-method-promotions', true );`
`wp_enqueue_script( 'onboarding-homepage-notice', Loader::get_url( 'wp-scripts/onboarding-homepage-notice.js' ), array( 'wc-navigation' ) );`

View File

@ -3,6 +3,7 @@
*/
const { get } = require( 'lodash' );
const path = require( 'path' );
const fs = require( 'fs' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
const BundleAnalyzerPlugin =
@ -25,7 +26,22 @@ const WC_ADMIN_PHASE = process.env.WC_ADMIN_PHASE || 'development';
const isHot = Boolean( process.env.HOT );
const isProduction = NODE_ENV === 'production';
const getSubdirectoriesAt = ( searchPath ) => {
const dir = path.resolve( searchPath );
return fs
.readdirSync( dir, { withFileTypes: true } )
.filter( ( entry ) => entry.isDirectory() )
.map( ( entry ) => entry.name );
};
const WC_ADMIN_PACKAGES_DIR = '../../packages/js';
const WP_ADMIN_SCRIPTS_DIR = './client/wp-admin-scripts';
// wpAdminScripts are loaded on wp-admin pages outside the context of WooCommerce Admin
// See ./client/wp-admin-scripts/README.md for more details
const wpAdminScripts = getSubdirectoriesAt( WP_ADMIN_SCRIPTS_DIR ); // automatically include all subdirs
const wcAdminPackages = [
// we use a whitelist for this instead of dynamically generating it because not all folders are packages meant for consumption
'admin-layout',
'components',
'csv-export',
@ -44,49 +60,16 @@ const wcAdminPackages = [
'product-editor',
'remote-logging',
];
// wpAdminScripts are loaded on wp-admin pages outside the context of WooCommerce Admin
// See ./client/wp-admin-scripts/README.md for more details
const wpAdminScripts = [
'marketing-coupons',
'onboarding-homepage-notice',
'onboarding-product-notice',
'onboarding-product-import-notice',
'onboarding-tax-notice',
'print-shipping-label-banner',
'beta-features-tracking-modal',
'payment-method-promotions',
'onboarding-load-sample-products-notice',
'product-tracking',
'add-term-tracking',
'attributes-tracking',
'category-tracking',
'tags-tracking',
'product-tour',
'wc-addons-tour',
'settings-tracking',
'order-tracking',
'product-import-tracking',
'variable-product-tour',
'product-category-metabox',
'shipping-settings-region-picker',
'command-palette',
'command-palette-analytics',
'woo-connect-notice',
'woo-plugin-update-connect-notice',
'woo-enable-autorenew',
'woo-renew-subscription',
'woo-subscriptions-notice',
'woo-product-usage-notice',
];
const getEntryPoints = () => {
const entryPoints = {
app: './client/index.js',
};
wcAdminPackages.forEach( ( name ) => {
entryPoints[ name ] = `../../packages/js/${ name }`;
entryPoints[ name ] = `${ WC_ADMIN_PACKAGES_DIR }/${ name }`;
} );
wpAdminScripts.forEach( ( name ) => {
entryPoints[ name ] = `./client/wp-admin-scripts/${ name }`;
entryPoints[ name ] = `${ WP_ADMIN_SCRIPTS_DIR }/${ name }`;
} );
return entryPoints;
};

View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Updated webpack build script for wc admin so that the wp-admin-scripts are dynamically fetched from the fs instead of a hard list