@wordpress/build 0.7.1-next.v.0 → 0.7.1-next.v.202602091733.0

package/CHANGELOG.md

@@ -5,6 +5,8 @@
 ## 0.7.0 (2026-01-29)
 
 - Update documentation to describe `wpPlugin.name`
+- Add `wpWorkers` field support for automatic worker bundling ([#74785](https://github.com/WordPress/gutenberg/pull/74785)).
+- Add WASM inlining plugin for bundling WebAssembly modules.
 
 ## 0.6.0 (2026-01-16)
 

package/lib/build.mjs

@@ -42,6 +42,11 @@ import {
 	getRouteMetadata,
 	generateContentEntryPoint,
 } from './route-utils.mjs';
+import {
+	generateWorkerPlaceholder,
+	buildWorkers,
+	generateWorkerCode,
+} from './worker-build.mjs';
 
 const ROOT_DIR = process.cwd();
 const PACKAGES_DIR = path.join( ROOT_DIR, 'packages' );
@@ -219,6 +224,53 @@ function createStyleBundlingPlugins( workingDir ) {
 	];
 }
 
+/**
+ * Plugin to inline WASM files as base64 data URLs.
+ * This eliminates the need for separate WASM file downloads and avoids
+ * issues with hosts not serving WASM files with the correct MIME type.
+ *
+ * @return {Object} esbuild plugin.
+ */
+const wasmInlinePlugin = {
+	name: 'wasm-inline',
+	setup( build ) {
+		// Resolve .wasm imports from node_modules.
+		build.onResolve( { filter: /\.wasm$/ }, async ( args ) => {
+			// Handle imports like 'wasm-vips/vips.wasm'.
+			if ( ! args.path.startsWith( '.' ) ) {
+				const { createRequire } = await import( 'module' );
+				const require = createRequire( args.resolveDir + '/index.js' );
+				try {
+					const resolved = require.resolve( args.path );
+					return {
+						path: resolved,
+						namespace: 'wasm-inline',
+					};
+				} catch {
+					// If resolution fails, let other plugins handle it.
+					return null;
+				}
+			}
+			return null;
+		} );
+
+		// Load WASM files and convert to base64 data URLs.
+		build.onLoad(
+			{ filter: /.*/, namespace: 'wasm-inline' },
+			async ( args ) => {
+				const wasmBuffer = await readFile( args.path );
+				const base64 = wasmBuffer.toString( 'base64' );
+				const dataUrl = `data:application/wasm;base64,${ base64 }`;
+
+				return {
+					contents: `export default "${ dataUrl }";`,
+					loader: 'js',
+				};
+			}
+		);
+	},
+};
+
 /**
  * Normalize path separators for cross-platform compatibility.
  *
@@ -1112,6 +1164,11 @@ async function transpilePackage( packageName ) {
 
 	const builds = [];
 
+	// Generate placeholder worker-code.ts if this package has wpWorkers defined
+	// and the file doesn't exist yet. This is needed because transpilation happens
+	// before worker bundling, but vips-worker.ts imports from worker-code.ts.
+	await generateWorkerPlaceholder( packageDir, packageJson );
+
 	// Check if this is the components package that needs emotion babel plugin.
 	// Ideally we should remove this exception and move away from emotion.
 	const needsEmotionPlugin = packageName === 'components';
@@ -1186,6 +1243,7 @@ async function transpilePackage( packageName ) {
 	};
 	const plugins = [
 		needsEmotionPlugin && emotionPlugin,
+		wasmInlinePlugin,
 		externalizeAllExceptCssPlugin,
 		...createStyleBundlingPlugins( packageDir ),
 	].filter( Boolean );
@@ -1254,6 +1312,24 @@ async function transpilePackage( packageName ) {
 
 	await Promise.all( builds );
 
+	// Build workers if wpWorkers is defined in package.json.
+	// Workers are bundled as self-contained files with all dependencies included.
+	await buildWorkers( packageDir, packageJson, {
+		buildDir,
+		buildModuleDir,
+		target,
+		wasmInlinePlugin,
+	} );
+
+	// Generate inline worker code exports and re-transpile worker-code.ts.
+	await generateWorkerCode( packageDir, packageName, packageJson, {
+		srcDir,
+		buildDir,
+		buildModuleDir,
+		target,
+		plugins,
+	} );
+
 	await compileStyles( packageName );
 
 	return Date.now() - startTime;

package/lib/worker-build.mjs

@@ -0,0 +1,265 @@
+/**
+ * Worker build utilities for wp-build.
+ *
+ * Handles building worker bundles and generating inline worker code
+ * for packages that define wpWorkers in their package.json.
+ *
+ * @package
+ */
+
+/**
+ * External dependencies
+ */
+import { readFile, writeFile, access } from 'fs/promises';
+import path from 'path';
+import esbuild from 'esbuild';
+
+/**
+ * Generate placeholder worker-code.ts for packages with wpWorkers.
+ *
+ * This must run before transpilation since worker files import worker-code.ts.
+ * The placeholder is later replaced with actual bundled worker content.
+ *
+ * @param {string} packageDir  Path to the package directory.
+ * @param {Object} packageJson Parsed package.json contents.
+ */
+export async function generateWorkerPlaceholder( packageDir, packageJson ) {
+	if ( ! packageJson.wpWorkers ) {
+		return;
+	}
+
+	const workerCodeFile = path.join( packageDir, 'src', 'worker-code.ts' );
+	try {
+		await access( workerCodeFile );
+	} catch {
+		// File doesn't exist, create placeholder
+		const placeholderContent = `/**
+ * Worker code for inline Blob URL creation.
+ *
+ * This file is a placeholder that gets overwritten by the build process.
+ * If you see this placeholder content at runtime, run \`npm run build\` first.
+ *
+ * @package gutenberg
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const workerCode = '/* Placeholder - run npm run build to generate actual worker code */';
+`;
+		await writeFile( workerCodeFile, placeholderContent );
+	}
+}
+
+/**
+ * Build worker bundles (ESM and CJS) for packages with wpWorkers.
+ *
+ * Workers are bundled as self-contained files with all dependencies included.
+ *
+ * @param {string}   packageDir               Path to the package directory.
+ * @param {Object}   packageJson              Parsed package.json contents.
+ * @param {Object}   options                  Build options.
+ * @param {string}   options.buildDir         Path to the CJS build directory.
+ * @param {string}   options.buildModuleDir   Path to the ESM build-module directory.
+ * @param {string[]} options.target           esbuild target configuration.
+ * @param {Object}   options.wasmInlinePlugin The WASM inline plugin for esbuild.
+ */
+export async function buildWorkers(
+	packageDir,
+	packageJson,
+	{ buildDir, buildModuleDir, target, wasmInlinePlugin }
+) {
+	if ( ! packageJson.wpWorkers ) {
+		return;
+	}
+
+	const workerBuilds = [];
+	const workerEntries =
+		typeof packageJson.wpWorkers === 'object' &&
+		packageJson.wpWorkers !== null
+			? Object.entries( packageJson.wpWorkers )
+			: [];
+
+	for ( const [ outputName, entryPath ] of workerEntries ) {
+		const workerEntryPoint = path.join( packageDir, entryPath );
+		const workerOutputName = outputName.replace( /^\.\//, '' );
+
+		// Build ESM worker for build-module (primary for browser use).
+		if ( packageJson.module ) {
+			workerBuilds.push(
+				esbuild.build( {
+					entryPoints: [ workerEntryPoint ],
+					outfile: path.join(
+						buildModuleDir,
+						`${ workerOutputName }.mjs`
+					),
+					bundle: true,
+					format: 'esm',
+					platform: 'browser',
+					target,
+					sourcemap: true,
+					// Bundle everything - workers need to be self-contained.
+					external: [],
+					plugins: [ wasmInlinePlugin ],
+					define: {
+						'process.env.NODE_ENV': JSON.stringify(
+							process.env.NODE_ENV || 'production'
+						),
+					},
+				} )
+			);
+		}
+
+		// Build CJS worker for the `build` directory (Node.js compatibility).
+		//
+		// Note: We only generate CJS worker bundles when the package exposes a
+		// CommonJS entry point via `packageJson.main`. Packages that are ESM-only
+		// or browser-focused (for example, packages that have removed their
+		// `main` field like `@wordpress/vips`) will not produce CJS worker
+		// outputs, and will instead rely solely on the ESM worker built into
+		// `build-module`. This conditional is intentional to avoid creating
+		// unused or misleading CJS artifacts.
+		if ( packageJson.main ) {
+			workerBuilds.push(
+				esbuild.build( {
+					entryPoints: [ workerEntryPoint ],
+					outfile: path.join( buildDir, `${ workerOutputName }.cjs` ),
+					bundle: true,
+					format: 'cjs',
+					platform: 'node',
+					target,
+					sourcemap: true,
+					external: [],
+					plugins: [ wasmInlinePlugin ],
+					define: {
+						'process.env.NODE_ENV': JSON.stringify(
+							process.env.NODE_ENV || 'production'
+						),
+					},
+				} )
+			);
+		}
+	}
+
+	await Promise.all( workerBuilds );
+}
+
+/**
+ * Generate inline worker code exports and re-transpile worker-code.ts.
+ *
+ * Creates worker-code.ts with bundled content for Blob URL loading,
+ * then re-transpiles it to the output directories.
+ *
+ * @param {string}   packageDir             Path to the package directory.
+ * @param {string}   packageName            Name of the package.
+ * @param {Object}   packageJson            Parsed package.json contents.
+ * @param {Object}   options                Build options.
+ * @param {string}   options.srcDir         Path to the source directory.
+ * @param {string}   options.buildDir       Path to the CJS build directory.
+ * @param {string}   options.buildModuleDir Path to the ESM build-module directory.
+ * @param {string[]} options.target         esbuild target configuration.
+ * @param {Array}    options.plugins        esbuild plugins for transpilation.
+ */
+export async function generateWorkerCode(
+	packageDir,
+	packageName,
+	packageJson,
+	{ srcDir, buildDir, buildModuleDir, target, plugins }
+) {
+	if ( ! packageJson.wpWorkers ) {
+		return;
+	}
+
+	const workerEntries =
+		typeof packageJson.wpWorkers === 'object' &&
+		packageJson.wpWorkers !== null
+			? Object.entries( packageJson.wpWorkers )
+			: [];
+
+	// Generate inline worker code exports for each worker.
+	// This allows the worker code to be bundled inline and loaded via Blob URL,
+	// which works even when import.meta.url is not available (e.g., webpack bundles).
+	for ( const [ outputName ] of workerEntries ) {
+		const workerOutputName = outputName.replace( /^\.\//, '' );
+		const workerOutputPath = path.join(
+			buildModuleDir,
+			`${ workerOutputName }.mjs`
+		);
+
+		try {
+			const workerContent = await readFile( workerOutputPath, 'utf8' );
+			const workerCodeFile = path.join(
+				packageDir,
+				'src',
+				'worker-code.ts'
+			);
+			const workerCodeContent = `/**
+ * Worker code for inline Blob URL creation.
+ *
+ * This file is auto-generated by the build process.
+ * Do not edit manually - run \`npm run build\` to regenerate.
+ *
+ * @package gutenberg
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const workerCode = ${ JSON.stringify( workerContent ) };
+`;
+			await writeFile( workerCodeFile, workerCodeContent );
+		} catch ( error ) {
+			console.warn(
+				`Warning: Could not generate worker-code.ts for ${ packageName }:`,
+				error.message
+			);
+		}
+	}
+
+	// Re-transpile worker-code.ts to output directories.
+	// The initial transpilation used placeholder content because worker
+	// bundling hadn't completed yet. Now that src/worker-code.ts contains
+	// the real bundled worker code, re-transpile it so that
+	// build-module/worker-code.mjs (and build/worker-code.cjs if applicable)
+	// reflect the actual worker code in a single build run.
+	const workerCodeSrcFile = path.join( packageDir, 'src', 'worker-code.ts' );
+	const retranspileBuilds = [];
+
+	if ( packageJson.module ) {
+		retranspileBuilds.push(
+			esbuild.build( {
+				entryPoints: [ workerCodeSrcFile ],
+				outdir: buildModuleDir,
+				outbase: srcDir,
+				outExtension: { '.js': '.mjs' },
+				bundle: true,
+				platform: 'neutral',
+				format: 'esm',
+				sourcemap: true,
+				target,
+				jsx: 'automatic',
+				jsxImportSource: 'react',
+				loader: { '.js': 'jsx' },
+				plugins,
+			} )
+		);
+	}
+
+	if ( packageJson.main ) {
+		retranspileBuilds.push(
+			esbuild.build( {
+				entryPoints: [ workerCodeSrcFile ],
+				outdir: buildDir,
+				outbase: srcDir,
+				outExtension: { '.js': '.cjs' },
+				bundle: true,
+				platform: 'node',
+				format: 'cjs',
+				sourcemap: true,
+				target,
+				jsx: 'automatic',
+				jsxImportSource: 'react',
+				loader: { '.js': 'jsx' },
+				plugins,
+			} )
+		);
+	}
+
+	await Promise.all( retranspileBuilds );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/build",
-	"version": "0.7.1-next.v.0+5aba098fc",
+	"version": "0.7.1-next.v.202602091733.0+daa0b19c4",
 	"description": "Build tool for WordPress plugins.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,7 +35,7 @@
 		"wp-build": "./lib/build.mjs"
 	},
 	"dependencies": {
-		"@emotion/babel-plugin": "11.11.0",
+		"@emotion/babel-plugin": "11.13.5",
 		"autoprefixer": "10.4.21",
 		"browserslist-to-esbuild": "2.1.1",
 		"change-case": "4.1.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d730f9e00f5462d1b9d2660632850f5f43ccff44"
+	"gitHead": "74f59922b25e30904319373dda91bf8e81f3544e"
 }

package/tsconfig.json

@@ -22,6 +22,7 @@
 	"exclude": [
 		// Excluded to maintain consistency with bin/tsconfig.json
 		// where packages/build.mjs was also excluded
-		"lib/build.mjs"
+		"lib/build.mjs",
+		"lib/worker-build.mjs"
 	]
 }