[ Vite ] Regroup ignore-*-imports Vite plugin inside a vite-extension (#2999)

## Motivation for the change, related issues

Based on pull request
#2591

Intl dynamic extension added a third file where its import had to be
ignored : `icu.dat`. The pull request created a third
`ignore-data-imports` Vite plugin. This pull request aims to regroup
every `ignore-{extension}-imports` into a unique Vite extension.

## Implementation details

Regrouping repeatedly copy pasted vite plugins inside a vite extension
file named `vite-ignore-imports.ts`.

## Testing Instructions

CI - `test-built-npm-packages` should not fail

Author: mho22

packages/php-wasm/web/vite.config.ts

@@ -6,9 +6,11 @@ import dts from 'vite-plugin-dts';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { getExternalModules } from '../../vite-extensions/vite-external-modules';
+import { viteIgnoreImports } from '../../vite-extensions/vite-ignore-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import viteGlobalExtensions from '../../vite-extensions/vite-global-extensions';
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { getExternalModules } from '../../vite-extensions/vite-external-modules';
 
 export default defineConfig(({ command }) => {
 	return {
@@ -23,42 +25,9 @@ export default defineConfig(({ command }) => {
 				tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
 				pathsToAliases: false,
 			}),
-			{
-				name: 'ignore-wasm-imports',
-
-				load(id: string): any {
-					if (id?.endsWith('.wasm')) {
-						return {
-							code: 'export default {}',
-							map: null,
-						};
-					}
-				},
-			},
-			{
-				name: 'ignore-data-imports',
-
-				load(id: string): any {
-					if (id?.endsWith('.dat')) {
-						return {
-							code: 'export default {}',
-							map: null,
-						};
-					}
-				},
-			},
-			{
-				name: 'ignore-lib-imports',
-
-				load(id: string): any {
-					if (id?.endsWith('.so')) {
-						return {
-							code: 'export default {}',
-							map: null,
-						};
-					}
-				},
-			},
+			viteIgnoreImports({
+				extensions: ['wasm', 'so', 'dat'],
+			}),
 			/**
 			 * Vite can't extract static asset in the library mode:
 			 * https://github.com/vitejs/vite/issues/3295

packages/playground/client/vite.config.ts

@@ -3,14 +3,10 @@ import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import { join } from 'path';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreWasmImports from '../ignore-wasm-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreLibImports from '../ignore-lib-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreDataImports from '../ignore-data-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
 import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
+import { viteIgnoreImports } from '../../vite-extensions/vite-ignore-imports';
+// eslint-disable-next-line @nx/enforce-module-boundaries
 import { buildVersionPlugin } from '../../vite-extensions/vite-build-version';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import viteGlobalExtensions from '../../vite-extensions/vite-global-extensions';
@@ -44,9 +40,9 @@ export default defineConfig({
 			tsconfigPath: join(__dirname, 'tsconfig.lib.json'),
 			pathsToAliases: false,
 		}),
-		ignoreWasmImports(),
-		ignoreLibImports(),
-		ignoreDataImports(),
+		viteIgnoreImports({
+			extensions: ['wasm', 'so', 'dat'],
+		}),
 		...viteGlobalExtensions,
 		// @wp-playground/client doesn't actually use the remote-config virtual
 		// module, @wp-playground/remote package does. @wp-playground/client imports

packages/playground/ignore-data-imports.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreWasmImports from '../ignore-wasm-imports';
+import { viteIgnoreImports } from '../../vite-extensions/vite-ignore-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { getExternalModules } from '../../vite-extensions/vite-external-modules';
 // eslint-disable-next-line @nx/enforce-module-boundaries
@@ -24,8 +24,9 @@ export default defineConfig({
 		viteTsConfigPaths({
 			root: '../../../',
 		}),
-		ignoreWasmImports(),
-
+		viteIgnoreImports({
+			extensions: ['wasm'],
+		}),
 		...viteGlobalExtensions,
 	],
 

packages/playground/ignore-lib-imports.ts

@@ -2,9 +2,7 @@
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreWasmImports from '../ignore-wasm-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreDataImports from '../ignore-data-imports';
+import { viteIgnoreImports } from '../../vite-extensions/vite-ignore-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { getExternalModules } from '../../vite-extensions/vite-external-modules';
 // eslint-disable-next-line @nx/enforce-module-boundaries
@@ -25,8 +23,9 @@ export default {
 		viteTsConfigPaths({
 			root: '../../../',
 		}),
-		ignoreWasmImports(),
-		ignoreDataImports(),
+		viteIgnoreImports({
+			extensions: ['wasm', 'dat'],
+		}),
 
 		...viteGlobalExtensions,
 	],

packages/playground/ignore-wasm-imports.ts

@@ -4,9 +4,7 @@ import react from '@vitejs/plugin-react';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreWasmImports from '../ignore-wasm-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreDataImports from '../ignore-data-imports';
+import { viteIgnoreImports } from '../../vite-extensions/vite-ignore-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import {
 	websiteExtrasDevServerPort,
@@ -64,8 +62,9 @@ export default defineConfig(({ mode }) => {
 			viteTsConfigPaths({
 				root: '../../../',
 			}),
-			ignoreWasmImports(),
-			ignoreDataImports(),
+			viteIgnoreImports({
+				extensions: ['wasm', 'dat'],
+			}),
 			...viteGlobalExtensions,
 			buildVersionPlugin('website-config'),
 			virtualModule({

packages/playground/storage/vite.config.ts

@@ -5,11 +5,7 @@ import react from '@vitejs/plugin-react';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { viteTsConfigPaths } from '../../vite-extensions/vite-ts-config-paths';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreWasmImports from '../ignore-wasm-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreLibImports from '../ignore-lib-imports';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import ignoreDataImports from '../ignore-data-imports';
+import { viteIgnoreImports } from '../../vite-extensions/vite-ignore-imports';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import {
 	websiteDevServerHost,
@@ -100,9 +96,9 @@ export default defineConfig(({ command, mode }) => {
 			viteTsConfigPaths({
 				root: '../../../',
 			}),
-			ignoreWasmImports(),
-			ignoreLibImports(),
-			ignoreDataImports(),
+			viteIgnoreImports({
+				extensions: ['wasm', 'so', 'dat'],
+			}),
 			...viteGlobalExtensions,
 			buildVersionPlugin('website-config'),
 			virtualModule({

packages/playground/sync/vite.config.ts

@@ -0,0 +1,33 @@
+import type { Plugin } from 'vite';
+
+export interface IgnoreImportsOptions {
+	extensions: string[];
+}
+
+export function viteIgnoreImports(options: IgnoreImportsOptions): Plugin {
+	return {
+		/**
+		 * Due to the way vite works, specific extension files are resolved by
+		 * rollup even in modules that do not import them directly.
+		 * For example, importing `@wp-playground/client` that has a dependency
+		 * on `@php-wasm/web` will lead to the following error:
+		 *
+		 *	Could not load /{filename}.{extension}
+		 *
+		 * This plugin turns specified extension files into noop imports to fix
+		 * the bundling of dependent packages.
+		 */
+		name: 'vite-ignore-imports',
+
+		load(id) {
+			if (options.extensions.some((ext) => id.endsWith(`.${ext}`))) {
+				return {
+					code: 'export default {};',
+					map: null,
+				};
+			}
+
+			return null;
+		},
+	};
+}