Load vips library with new wordpress/worker-threads

.gitignore

@@ -5,6 +5,7 @@ build-style
 build-types
 build-wp
 node_modules
+.wasm-vips-build
 gutenberg.zip
 .content-entry.js
 coverage

bin/build.mjs

@@ -97,6 +97,13 @@ async function build() {
 			{ silent: true }
 		);
 
+		// Step 2.5: Generate worker placeholders
+		// This must happen before TypeScript compilation because some packages
+		// (like vips) have source files that import from generated worker-code.ts
+		await exec( 'node', [
+			'./bin/packages/generate-worker-placeholders.mjs',
+		] );
+
 		if ( ! skipTypes ) {
 			// Step 3: Validate TypeScript version
 			console.log( '\n🔍 Validating TypeScript version...' );

bin/packages/generate-worker-placeholders.mjs

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+import { readFile, writeFile, access, mkdir } from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import glob from 'fast-glob';
+
+const __dirname = path.dirname( fileURLToPath( import.meta.url ) );
+const ROOT_DIR = path.resolve( __dirname, '../..' );
+const PACKAGES_DIR = path.join( ROOT_DIR, 'packages' );
+
+/**
+ * Generate placeholder files for worker code in packages that define wpWorkers.
+ * This must run before TypeScript compilation because some packages
+ * (like vips) have source files that import from generated worker-code.ts.
+ */
+async function generateWorkerPlaceholders() {
+	console.log( '🔧 Generating worker placeholders...\n' );
+
+	const startTime = Date.now();
+
+	const packageJsonPaths = await glob(
+		path.join( PACKAGES_DIR, '*', 'package.json' ).replace( /\\/g, '/' )
+	);
+
+	let placeholdersCreated = 0;
+
+	for ( const packageJsonPath of packageJsonPaths ) {
+		try {
+			const packageJsonContent = await readFile(
+				packageJsonPath,
+				'utf8'
+			);
+			const packageJson = JSON.parse( packageJsonContent );
+
+			if ( packageJson.wpWorkers ) {
+				const packageDir = path.dirname( packageJsonPath );
+				const workerCodeFile = path.join(
+					packageDir,
+					'src',
+					'worker-code.ts'
+				);
+
+				try {
+					await access( workerCodeFile );
+					// File exists, no need to create placeholder.
+				} 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 mkdir( path.dirname( workerCodeFile ), {
+						recursive: true,
+					} );
+					await writeFile( workerCodeFile, placeholderContent );
+					placeholdersCreated++;
+					console.log(
+						`   ✔ Created placeholder: ${ path.relative(
+							ROOT_DIR,
+							workerCodeFile
+						) }`
+					);
+				}
+			}
+		} catch {
+			// Skip packages with invalid package.json.
+		}
+	}
+
+	const totalTime = Date.now() - startTime;
+
+	if ( placeholdersCreated === 0 ) {
+		console.log( '   ✔ All worker placeholders already exist' );
+	}
+
+	console.log(
+		`\n🎉 Worker placeholder generation complete! (${ totalTime }ms)`
+	);
+}
+
+generateWorkerPlaceholders().catch( ( error ) => {
+	console.error( '❌ Worker placeholder generation failed:', error );
+	process.exit( 1 );
+} );

packages/vips/.gitignore

@@ -0,0 +1,3 @@
+# Auto-generated worker code for inline Blob URL creation.
+# The build process generates a placeholder if needed, then overwrites it with real content.
+src/worker-code.ts

packages/vips/CHANGELOG.md

@@ -4,4 +4,6 @@
 
 ### New Features
 
--   Initial public release.
+-   Initial release of `@wordpress/vips` package for client-side image processing using `wasm-vips` ([#74785](https://github.com/WordPress/gutenberg/pull/74785)).
+-   Uses `@wordpress/worker-threads` for type-safe Web Worker communication.
+-   ESM-only package with inlined WASM bundling.

packages/vips/README.md

@@ -85,14 +85,4 @@ _Returns_
 
 -   `Promise< { buffer: ArrayBuffer | ArrayBufferLike; width: number; height: number; originalWidth: number; originalHeight: number; } >`: Processed file data plus the old and new dimensions.
 
-### setLocation
-
-Dynamically sets the location / public path to use for loading the WASM files.
-
-This is required when loading this module in an inline worker, where globals such as **webpack_public_path** are not available.
-
-_Parameters_
-
--   _newLocation_ `string`: Location, typically a base URL such as "<https://example.com/path/to/js/...">.
-
 <!-- END TOKEN(Autogenerated API docs) -->

packages/vips/package.json

@@ -25,23 +25,29 @@
 	},
 	"files": [
 		"src",
-		"build",
 		"build-module",
 		"build-types",
 		"*.md"
 	],
-	"main": "build/index.cjs",
+	"type": "module",
 	"module": "build-module/index.mjs",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
-			"import": "./build-module/index.mjs",
-			"default": "./build/index.cjs"
+			"import": "./build-module/index.mjs"
+		},
+		"./worker": {
+			"types": "./build-types/vips-worker.d.ts",
+			"import": "./build-module/vips-worker.mjs"
 		},
 		"./package.json": "./package.json"
 	},
 	"types": "build-types",
+	"wpWorkers": {
+		"./worker": "./src/worker.ts"
+	},
 	"dependencies": {
+		"@wordpress/worker-threads": "file:../worker-threads",
 		"wasm-vips": "^0.0.10"
 	},
 	"publishConfig": {

packages/vips/src/index.ts

@@ -3,13 +3,10 @@
  */
 import Vips from 'wasm-vips';
 
-// @ts-expect-error
+// @ts-expect-error - WASM files are inlined as base64 data URLs at build time
 import VipsModule from 'wasm-vips/vips.wasm';
 
-// @ts-expect-error
-import VipsHeifModule from 'wasm-vips/vips-heif.wasm';
-
-// @ts-expect-error
+// @ts-expect-error - WASM files are inlined as base64 data URLs at build time
 import VipsJxlModule from 'wasm-vips/vips-jxl.wasm';
 
 /**
@@ -29,20 +26,6 @@ interface EmscriptenModule {
 	setDelayFunction: ( fn: ( fn: () => void ) => void ) => void;
 }
 
-let location = '';
-
-/**
- * Dynamically sets the location / public path to use for loading the WASM files.
- *
- * This is required when loading this module in an inline worker,
- * where globals such as __webpack_public_path__ are not available.
- *
- * @param newLocation Location, typically a base URL such as "https://example.com/path/to/js/...".
- */
-export function setLocation( newLocation: string ) {
-	location = newLocation;
-}
-
 let cleanup: () => void;
 
 let vipsInstance: typeof Vips;
@@ -59,15 +42,16 @@ async function getVips(): Promise< typeof Vips > {
 
 	vipsInstance = await Vips( {
 		locateFile: ( fileName: string ) => {
+			// WASM files are inlined as base64 data URLs at build time,
+			// eliminating the need for separate file downloads and avoiding
+			// issues with hosts not serving WASM files with correct MIME types.
 			if ( fileName.endsWith( 'vips.wasm' ) ) {
-				fileName = VipsModule;
-			} else if ( fileName.endsWith( 'vips-heif.wasm' ) ) {
-				fileName = VipsHeifModule;
+				return VipsModule;
 			} else if ( fileName.endsWith( 'vips-jxl.wasm' ) ) {
-				fileName = VipsJxlModule;
+				return VipsJxlModule;
 			}
 
-			return location + fileName;
+			return fileName;
 		},
 		preRun: ( module: EmscriptenModule ) => {
 			// https://github.com/kleisauke/wasm-vips/issues/13#issuecomment-1073246828