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

plugins/woocommerce-admin/client/wp-admin-scripts/README.md

@@ -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' ) );`

plugins/woocommerce-admin/webpack.config.js

@@ -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;
 };

plugins/woocommerce/changelog/dev-webpack-dynamic-wp-admin-scripts

@@ -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