Vite WP React: Externalize @wordpress/* dependencies dynamically for production (#141)

* Vite WP React: Use externalize wp deps dynamically for production

* Add changelog

* Update wp-packages.ts

Author: irshadahmad21

.changeset/calm-hotels-explain.md

@@ -0,0 +1,5 @@
+---
+"@wpsocio/vite-wp-react": patch
+---
+
+Externalize WP deps dynamically to ensure new dependencies are not left out

tools/vite-wp-react/src/plugins/externalize-wp-packages.ts

@@ -1,7 +1,28 @@
 import rollupGlobals from 'rollup-plugin-external-globals';
 import type { PluginOption } from 'vite';
-import viteExternal from 'vite-plugin-external';
-import { WP_EXTERNAL_PACKAGES } from '../utils/index.js';
+import viteExternalPlugin from 'vite-plugin-external';
+import {
+	BUNDLED_WP_PACKAGES,
+	NON_WP_PACKAGES,
+	WP_EXTERNAL_PACKAGES,
+	dashToCamelCase,
+} from '../utils/index.js';
+
+const viteExternal =
+	// viteExternalPlugin is not typed well
+	viteExternalPlugin as unknown as (typeof viteExternalPlugin)['default'];
+
+function shouldExternalizePakage(name: string) {
+	if (BUNDLED_WP_PACKAGES.includes(name)) {
+		return false;
+	}
+
+	const isWpPackage = name.startsWith('@wordpress/');
+
+	const isNonWpPackage = name in NON_WP_PACKAGES;
+
+	return isWpPackage || isNonWpPackage;
+}
 
 /**
  * Updates the vite config to externalize all WordPress packages.
@@ -10,28 +31,59 @@ export const externalizeWpPackages = (): PluginOption => {
 	return [
 		{
 			name: 'vwpr:externalize-wp-packages',
-			config() {
+			config(config, { command }) {
+				// We need to run this only for the build command
+				if (command !== 'build') {
+					return {};
+				}
 				return {
 					build: {
 						rollupOptions: {
-							external: Object.keys(WP_EXTERNAL_PACKAGES),
+							external(source) {
+								return shouldExternalizePakage(source);
+							},
 							plugins: [
 								/**
 								 * Add the plugin to rollup to ensure react imports don't end up in the bundle
 								 * framer-motion causes the issue by using namespace imports
 								 *
 								 * @see https://github.com/vitejs/vite-plugin-react/issues/3
 								 */
-								rollupGlobals(WP_EXTERNAL_PACKAGES),
+								rollupGlobals((name) => {
+									if (!shouldExternalizePakage(name)) {
+										return '';
+									}
+
+									if (name in NON_WP_PACKAGES) {
+										return NON_WP_PACKAGES[name];
+									}
+
+									if (name.startsWith('@wordpress/')) {
+										const variable = dashToCamelCase(
+											name.replace('@wordpress/', ''),
+										);
+										return `wp.${variable}`;
+									}
+
+									return '';
+								}),
 							],
 						},
 					},
 				};
 			},
 		},
-		// @ts-ignore - viteExternal is not typed well
+		/**
+		 * We need this plugin only during development
+		 * To ensure that module aliases are created for external packages
+		 *
+		 * Change the externals list to dynamic if the below issue is resolved
+		 * @see https://github.com/fengxinming/vite-plugins/issues/44
+		 */
 		viteExternal({
-			externals: WP_EXTERNAL_PACKAGES,
+			development: {
+				externals: WP_EXTERNAL_PACKAGES,
+			},
 		}),
 	];
 };

tools/vite-wp-react/src/plugins/extract-wp-dependencies.ts

@@ -2,8 +2,10 @@ import fs from 'node:fs';
 import path from 'node:path';
 import type { Plugin, ResolvedConfig } from 'vite';
 import {
+	BUNDLED_WP_PACKAGES,
+	NON_WP_PACKAGES,
+	PACKAGE_HANDLES,
 	type ScanDependenciesOptions,
-	WP_EXTERNAL_PACKAGES,
 	scanDependencies,
 } from '../utils/index.js';
 
@@ -12,6 +14,10 @@ export type ExtractWpDependenciesOptions = {
 	fileName?: string;
 } & Pick<ScanDependenciesOptions, 'plugins' | 'normalizePath'>;
 
+const dependenciesToScan = new RegExp(
+	`^((${Object.keys(NON_WP_PACKAGES).join('|')})|@wordpress/.+)$`,
+);
+
 /**
  * Extract external dependencies from the bundle.
  */
@@ -29,9 +35,18 @@ export const extractWpDependencies = ({
 		async buildStart(options) {
 			scanDependencies({
 				absWorkingDir: config.root,
-				dependenciesToScan: Object.keys(WP_EXTERNAL_PACKAGES),
+				dependenciesToScan,
+				excludeDependencies: BUNDLED_WP_PACKAGES,
 				input: options.input,
-				normalizePath: (path) => path.replace(/^@wordpress\//, 'wp-'),
+				normalizePath: (path) => {
+					if (path in PACKAGE_HANDLES) {
+						return PACKAGE_HANDLES[path];
+					}
+
+					const _path = path.replace(/^@wordpress\//, 'wp-');
+
+					return _path;
+				},
 				onComplete: (source) => {
 					// this.emitFile is available only in build mode
 					config.command === 'build'

tools/vite-wp-react/src/utils/scan-dependencies.ts

@@ -9,22 +9,24 @@ export const IMPORTS_TO_IGNORE =
 export type ScanDependenciesOptions = {
 	absWorkingDir: string;
 	input?: InputOption;
-	dependenciesToScan: Array<string>;
+	dependenciesToScan: RegExp;
 	normalizePath?: (path: string) => string;
 	plugins?: Array<EsBuildPlugin>;
 	onComplete?: (data: string) => void;
+	excludeDependencies?: Array<string>;
 };
 
 /**
  * Scan dependencies
  */
 export async function scanDependencies({
 	absWorkingDir,
-	dependenciesToScan = [],
+	dependenciesToScan,
 	input,
 	normalizePath,
 	plugins = [],
 	onComplete,
+	excludeDependencies = [],
 }: ScanDependenciesOptions) {
 	const dependencies: Record<string, Array<string>> = {};
 	const entries: Array<string> = [];
@@ -42,9 +44,6 @@ export async function scanDependencies({
 		throw new Error('No entry points found');
 	}
 
-	// Create a filter for the dependencies we want to scan
-	const filter = new RegExp(`^(${dependenciesToScan.join('|')})$`);
-
 	try {
 		await Promise.all(
 			validEntries.map((absoluteEntry) => {
@@ -68,16 +67,22 @@ export async function scanDependencies({
 						{
 							name: 'scan-dependencies',
 							setup(build) {
-								build.onResolve({ filter }, (args) => ({
+								build.onResolve({ filter: dependenciesToScan }, (args) => ({
 									path: args.path,
 									namespace: 'scan-dependencies',
 								}));
+
 								build.onLoad(
 									{ filter: /.*/, namespace: 'scan-dependencies' },
 									(args) => {
-										dependencies[entry].push(
-											normalizePath ? normalizePath(args.path) : args.path,
-										);
+										if (!excludeDependencies.includes(args.path)) {
+											const dependency = normalizePath
+												? normalizePath(args.path)
+												: args.path;
+
+											dependencies[entry].push(dependency);
+										}
+
 										return {
 											contents: 'exports.ok = true;',
 											loader: 'js',

tools/vite-wp-react/src/utils/wp-packages.ts

@@ -67,8 +67,31 @@ export const NON_WP_PACKAGES: Record<string, string> = {
 	'react-dom': 'ReactDOM',
 	backbone: 'Backbone',
 	lodash: 'lodash',
+	'lodash-es': 'lodash',
+	'react/jsx-runtime': 'ReactJSXRuntime',
+	'react-refresh/runtime': 'ReactRefreshRuntime',
 };
 
+export const PACKAGE_HANDLES: Record<string, string> = {
+	'lodash-es': 'lodash',
+	'react/jsx-runtime': 'react-jsx-runtime',
+	'react-refresh/runtime': 'wp-react-refresh-runtime',
+};
+
+/**
+ * WordPress packages that are bundled.
+ *
+ * This list comes from Gutenberg
+ * @see https://github.com/WordPress/gutenberg/blob/313246a01f18e504dabd8313e7eacca728332bcd/packages/dependency-extraction-webpack-plugin/lib/util.js#L6
+ */
+export const BUNDLED_WP_PACKAGES = [
+	'@wordpress/dataviews',
+	'@wordpress/icons',
+	'@wordpress/interface',
+	'@wordpress/sync',
+	'@wordpress/undo-manager',
+];
+
 export const WP_EXTERNAL_PACKAGES: Record<string, string> = {
 	...NON_WP_PACKAGES,
 	...WP_PACKAGES,