@wordpress/build 0.2.0 → 0.2.1-next.2f1c7c01b.0

package/src/dependency-graph.mjs

@@ -10,10 +10,15 @@
  */
 import toposort from 'toposort';
 
+/**
+ * Node dependencies
+ */
+import path from 'path';
+
 /**
  * Internal dependencies
  */
-import { getPackageInfo } from './package-utils.mjs';
+import { getPackageInfo, getPackageInfoFromFile } from './package-utils.mjs';
 
 /**
  * Check if a package is a script or script module.
@@ -31,12 +36,12 @@ function isScriptOrModule( packageName ) {
 }
 
 /**
- * Get WordPress package dependencies from a package.json file.
+ * Get package dependencies from a package.json file.
  *
  * @param {string} packageName The full package name (e.g., '@wordpress/blocks').
- * @return {string[]} Array of WordPress package names this package depends on.
+ * @return {string[]} Array of package names this package depends on.
  */
-function getWordPressDependencies( packageName ) {
+function getDependencies( packageName ) {
 	const packageJson = getPackageInfo( packageName );
 	if ( ! packageJson ) {
 		return [];
@@ -44,10 +49,7 @@ function getWordPressDependencies( packageName ) {
 
 	const deps = packageJson.dependencies || {};
 
-	// Extract @wordpress/* package names (keep full names)
-	return Object.keys( deps ).filter( ( dep ) =>
-		dep.startsWith( '@wordpress/' )
-	);
+	return Object.keys( deps );
 }
 
 /**
@@ -62,7 +64,7 @@ function buildDependencyGraph( packages ) {
 	const packagesSet = new Set( packages );
 
 	for ( const packageName of packages ) {
-		const deps = getWordPressDependencies( packageName );
+		const deps = getDependencies( packageName );
 
 		// Only include edges where both packages are in our list
 		for ( const dep of deps ) {
@@ -143,7 +145,7 @@ function groupByDepth( packages ) {
 
 		visited.add( packageName );
 
-		const deps = getWordPressDependencies( packageName );
+		const deps = getDependencies( packageName );
 		const relevantDeps = deps.filter( ( dep ) => packagesSet.has( dep ) );
 
 		if ( relevantDeps.length === 0 ) {
@@ -192,7 +194,7 @@ function getReverseDependencies( packageName, allPackages ) {
 	const dependents = [];
 
 	for ( const pkg of allPackages ) {
-		const deps = getWordPressDependencies( pkg );
+		const deps = getDependencies( pkg );
 		if ( deps.includes( packageName ) ) {
 			dependents.push( pkg );
 		}
@@ -260,12 +262,108 @@ function findScriptsToRebundle( changedPackage, allPackages ) {
 	return Array.from( scriptsToRebundle );
 }
 
+/**
+ * Get package dependencies from a route's package.json file.
+ *
+ * @param {string} rootDir   Root directory path.
+ * @param {string} routeName The route name (e.g., 'home').
+ * @return {string[]} Array of package names this route depends on.
+ */
+function getRouteDependencies( rootDir, routeName ) {
+	const packageJson = getPackageInfoFromFile(
+		path.join( rootDir, 'routes', routeName, 'package.json' )
+	);
+	if ( ! packageJson ) {
+		return [];
+	}
+
+	const deps = packageJson.dependencies || {};
+
+	return Object.keys( deps );
+}
+
+/**
+ * Find routes that need to be rebuilt when a bundled package changes.
+ * Uses BFS to traverse reverse dependencies, stopping at script/module boundaries.
+ *
+ * When a bundled package changes, we need to rebuild any routes that depend on it
+ * through a chain of bundled packages. Routes are leaf nodes like scripts/modules.
+ *
+ * Example:
+ * - A (bundled) changes
+ * - B (bundled) depends on A
+ * - C (script) depends on B
+ * - home (route) depends on B
+ * Result: Both C and home need rebuilding
+ *
+ * @param {string}   changedPackage The full package name that changed.
+ * @param {string[]} allPackages    Array of all full package names.
+ * @param {string}   rootDir        Root directory path.
+ * @param {string[]} allRoutes      Array of all route names.
+ * @return {string[]} Array of route names to rebuild.
+ */
+function findRoutesToRebuild(
+	changedPackage,
+	allPackages,
+	rootDir,
+	allRoutes
+) {
+	// If the changed package itself is a script/module, routes won't be affected
+	// (routes depend on bundled packages, not scripts/modules)
+	if ( isScriptOrModule( changedPackage ) ) {
+		return [];
+	}
+
+	const routesToRebuild = new Set();
+	const visited = new Set();
+	const queue = [ changedPackage ];
+
+	while ( queue.length > 0 ) {
+		const currentPackage = queue.shift();
+
+		if ( ! currentPackage || visited.has( currentPackage ) ) {
+			continue;
+		}
+		visited.add( currentPackage );
+
+		// Check if any routes depend on the current package
+		for ( const route of allRoutes ) {
+			const deps = getRouteDependencies( rootDir, route );
+			if ( deps.includes( currentPackage ) ) {
+				routesToRebuild.add( route );
+			}
+		}
+
+		// Get all packages that depend on the current package
+		const dependents = getReverseDependencies(
+			currentPackage,
+			allPackages
+		);
+
+		for ( const dependent of dependents ) {
+			// If this dependent is a script/module, don't traverse further
+			// (stop at script boundaries)
+			if (
+				! isScriptOrModule( dependent ) &&
+				! visited.has( dependent )
+			) {
+				// If it's a bundled package, continue traversing
+				queue.push( dependent );
+			}
+		}
+	}
+
+	return Array.from( routesToRebuild );
+}
+
 export {
-	getWordPressDependencies,
+	getDependencies,
 	buildDependencyGraph,
 	topologicalSort,
 	groupByDepth,
 	isScriptOrModule,
 	getReverseDependencies,
 	findScriptsToRebundle,
+	getRouteDependencies,
+	findRoutesToRebuild,
 };

package/src/package-utils.mjs

@@ -35,6 +35,11 @@ const packagePathCache = new Map();
  * @property {string[]}               [keywords]              Package keywords.
  */
 
+// Create a new type that extends PackageJson with an optional "route" property
+/**
+ * @typedef {PackageJson & { route: { path: string } }} RoutePackageJson
+ */
+
 /**
  * Get package.json info using Node's module resolution.
  * Resolves the package using import.meta.resolve and reads its package.json.

package/src/php-generator.mjs

@@ -9,6 +9,7 @@ import { fileURLToPath } from 'url';
  * Internal dependencies
  */
 import { getPackageInfoFromFile } from './package-utils.mjs';
+import { getAllRoutes, getRouteFiles } from './route-utils.mjs';
 
 const __dirname = path.dirname( fileURLToPath( import.meta.url ) );
 
@@ -70,3 +71,103 @@ export async function generatePhpFromTemplate(
 	await mkdir( path.dirname( outputPath ), { recursive: true } );
 	await writeFile( outputPath, content );
 }
+
+/**
+ * Generate routes/index.php file with route registry data.
+ *
+ * @param {string} rootDir  Root directory path.
+ * @param {string} buildDir Build directory path.
+ * @param {string} prefix   Package prefix.
+ */
+export async function generateRoutesRegistry( rootDir, buildDir, prefix ) {
+	const routeNames = getAllRoutes( rootDir );
+
+	if ( routeNames.length === 0 ) {
+		// No routes to register, skip generating routes registry
+		return;
+	}
+
+	// Build routes array
+	const routes = routeNames.map( ( routeName ) => {
+		// Read package.json to get route path
+		const routePackageJson =
+			/** @type {import('./package-utils.mjs').RoutePackageJson} */ (
+				getPackageInfoFromFile(
+					path.join( rootDir, 'routes', routeName, 'package.json' )
+				)
+			);
+		const routePath = routePackageJson.route.path;
+
+		// Check if route.js exists
+		const routeFiles = getRouteFiles(
+			path.join( rootDir, 'routes', routeName )
+		);
+
+		return {
+			name: routeName,
+			path: routePath,
+			has_route: routeFiles.hasRoute,
+		};
+	} );
+
+	// Generate PHP array entries
+	const routeEntries = routes
+		.map( ( route ) => {
+			const hasRouteStr = route.has_route ? 'true' : 'false';
+			return `\tarray(
+		'name'      => '${ route.name }',
+		'path'      => '${ route.path }',
+		'has_route' => ${ hasRouteStr },
+	)`;
+		} )
+		.join( ',\n' );
+
+	// Generate routes/index.php
+	const replacements = {
+		'{{PREFIX}}': prefix,
+		'{{ROUTES}}': routeEntries,
+	};
+
+	await generatePhpFromTemplate(
+		'route-registry.php.template',
+		path.join( buildDir, 'routes', 'index.php' ),
+		replacements
+	);
+}
+
+/**
+ * Generate routes.php file with route registration logic.
+ *
+ * @param {string} rootDir      Root directory path.
+ * @param {string} buildDir     Build directory path.
+ * @param {string} handlePrefix Handle prefix for script modules.
+ * @param {string} prefix       Package prefix.
+ */
+export async function generateRoutesPhp(
+	rootDir,
+	buildDir,
+	handlePrefix,
+	prefix
+) {
+	const routeNames = getAllRoutes( rootDir );
+
+	if ( routeNames.length === 0 ) {
+		// No routes to register, skip generating routes.php
+		return;
+	}
+
+	const namespace = handlePrefix.replace( /-/g, '_' );
+
+	// Generate routes.php
+	const replacements = {
+		'{{PREFIX}}': prefix,
+		'{{NAMESPACE}}': namespace,
+		'{{HANDLE_PREFIX}}': handlePrefix,
+	};
+
+	await generatePhpFromTemplate(
+		'routes.php.template',
+		path.join( buildDir, 'routes.php' ),
+		replacements
+	);
+}

package/src/route-utils.mjs

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { readdirSync } from 'fs';
+import path from 'path';
+
+/**
+ * Get all route names from the routes directory.
+ *
+ * @param {string} rootDir Root directory of the project.
+ * @return {string[]} Array of route names.
+ */
+export function getAllRoutes( rootDir ) {
+	const routesPath = path.join( rootDir, 'routes' );
+
+	try {
+		return readdirSync( routesPath, { withFileTypes: true } )
+			.filter( ( dirent ) => dirent.isDirectory() )
+			.map( ( dirent ) => dirent.name );
+	} catch ( error ) {
+		// Routes directory doesn't exist, return empty array
+		return [];
+	}
+}
+
+/**
+ * @typedef {Object} RouteFiles
+ * @property {boolean} hasRoute     Whether route file exists.
+ * @property {boolean} hasStage     Whether stage file exists.
+ * @property {boolean} hasInspector Whether inspector file exists.
+ * @property {boolean} hasStyle     Whether style file exists.
+ */
+
+/**
+ * Check if a route has specific files.
+ *
+ * @param {string} routeDirectory Route directory path.
+ * @return {RouteFiles} Object with boolean flags for route files.
+ */
+export function getRouteFiles( routeDirectory ) {
+	const extensions = [ 'tsx', 'ts', 'jsx', 'js' ];
+	const files = {
+		hasRoute: false,
+		hasStage: false,
+		hasInspector: false,
+		hasStyle: false,
+	};
+
+	const entries = readdirSync( routeDirectory );
+
+	for ( const ext of extensions ) {
+		if ( entries.includes( `route.${ ext }` ) ) {
+			files.hasRoute = true;
+		}
+		if ( entries.includes( `stage.${ ext }` ) ) {
+			files.hasStage = true;
+		}
+		if ( entries.includes( `inspector.${ ext }` ) ) {
+			files.hasInspector = true;
+		}
+	}
+
+	if ( entries.includes( 'route.scss' ) ) {
+		files.hasStyle = true;
+	}
+
+	return files;
+}
+
+/**
+ * Generate a synthetic content entry point for a route.
+ * This creates a module that imports and re-exports stage and inspector components.
+ *
+ * @param {RouteFiles} files Route files information.
+ * @return {string} Generated entry point code.
+ */
+export function generateContentEntryPoint( files ) {
+	const lines = [];
+
+	if ( files.hasStage ) {
+		lines.push( "export { stage } from './stage';" );
+	}
+
+	if ( files.hasInspector ) {
+		lines.push( "export { inspector } from './inspector';" );
+	}
+
+	// If neither stage nor inspector exists, export empty object
+	if ( lines.length === 0 ) {
+		lines.push( 'export {};' );
+	}
+
+	return lines.join( '\n' );
+}

package/src/wordpress-externals-plugin.mjs

@@ -15,10 +15,10 @@ import { getPackageInfo } from './package-utils.mjs';
  * This plugin handles WordPress package externals and vendor libraries,
  * treating them as external dependencies available via global variables.
  *
- * @param {string} packageNamespace Custom package namespace (e.g., 'wordpress', 'my-plugin').
- * @param {string|false} scriptGlobal Global variable name (e.g., 'wp', 'myPlugin') or false to disable globals.
- * @param {Object} externalNamespaces Additional namespaces to externalize (e.g., { 'woo': { global: 'woo', handlePrefix: 'woocommerce' } }).
- * @param {string} handlePrefix Handle prefix for main package (e.g., 'wp', 'mp'). Defaults to packageNamespace.
+ * @param {string}       packageNamespace   Custom package namespace (e.g., 'wordpress', 'my-plugin').
+ * @param {string|false} scriptGlobal       Global variable name (e.g., 'wp', 'myPlugin') or false to disable globals.
+ * @param {Object}       externalNamespaces Additional namespaces to externalize (e.g., { 'woo': { global: 'woo', handlePrefix: 'woocommerce' } }).
+ * @param {string}       handlePrefix       Handle prefix for main package (e.g., 'wp', 'mp'). Defaults to packageNamespace.
  * @return {Function} Function that creates the esbuild plugin instance.
  */
 export function createWordpressExternalsPlugin(
@@ -117,7 +117,11 @@ export function createWordpressExternalsPlugin(
 				];
 
 				// Add custom namespace if different from wordpress and scriptGlobal is not false
-				if ( packageNamespace && packageNamespace !== 'wordpress' && scriptGlobal !== false ) {
+				if (
+					packageNamespace &&
+					packageNamespace !== 'wordpress' &&
+					scriptGlobal !== false
+				) {
 					packageExternals.push( {
 						namespace: packageNamespace,
 						pattern: new RegExp( `^@${ packageNamespace }/` ),
@@ -127,7 +131,9 @@ export function createWordpressExternalsPlugin(
 				}
 
 				// Add additional external namespaces from configuration
-				for ( const [ namespace, config ] of Object.entries( externalNamespaces ) ) {
+				for ( const [ namespace, config ] of Object.entries(
+					externalNamespaces
+				) ) {
 					packageExternals.push( {
 						namespace,
 						pattern: new RegExp( `^@${ namespace }/` ),
@@ -198,11 +204,17 @@ export function createWordpressExternalsPlugin(
 
 							if ( isScriptModule ) {
 								if ( kind === 'static' ) {
-									moduleDependencies.set( args.path, 'static' );
+									moduleDependencies.set(
+										args.path,
+										'static'
+									);
 								} else if (
 									! moduleDependencies.has( args.path )
 								) {
-									moduleDependencies.set( args.path, 'dynamic' );
+									moduleDependencies.set(
+										args.path,
+										'dynamic'
+									);
 								}
 
 								return {
@@ -217,7 +229,9 @@ export function createWordpressExternalsPlugin(
 								return {
 									path: args.path,
 									namespace: 'package-external',
-									pluginData: { globalName: externalConfig.globalName },
+									pluginData: {
+										globalName: externalConfig.globalName,
+									},
 								};
 							}
 
@@ -246,7 +260,10 @@ export function createWordpressExternalsPlugin(
 						const globalName = args.pluginData.globalName;
 						// Extract package name after '@namespace/' prefix
 						// e.g., '@wordpress/blocks' or '@my-plugin/data'
-						const packagePath = args.path.split( '/' ).slice( 1 ).join( '/' );
+						const packagePath = args.path
+							.split( '/' )
+							.slice( 1 )
+							.join( '/' );
 						const camelCasedName = camelCase( packagePath );
 
 						return {

package/templates/index.php.template

@@ -29,3 +29,9 @@ $styles_file = __DIR__ . '/styles.php';
 if ( file_exists( $styles_file ) ) {
 	require_once $styles_file;
 }
+
+// Load routes registration.
+$routes_file = __DIR__ . '/routes.php';
+if ( file_exists( $routes_file ) ) {
+	require_once $routes_file;
+}

package/templates/route-registry.php.template

@@ -0,0 +1,11 @@
+<?php
+/**
+ * Route registry - Auto-generated by build process.
+ * Do not edit this file manually.
+ *
+ * @package {{PREFIX}}
+ */
+
+return array(
+{{ROUTES}}
+);

package/templates/routes.php.template

@@ -0,0 +1,66 @@
+<?php
+/**
+ * Routes registration - Auto-generated by build process.
+ * Do not edit this file manually.
+ *
+ * @package {{PREFIX}}
+ */
+
+if ( ! function_exists( '{{NAMESPACE}}_register_routes' ) ) {
+	/**
+	 * Register all routes with WordPress.
+	 */
+	function {{NAMESPACE}}_register_routes() {
+		$routes_dir  = __DIR__ . '/routes';
+		$routes_file = $routes_dir . '/index.php';
+
+		if ( ! file_exists( $routes_file ) ) {
+			return;
+		}
+
+		$routes    = require $routes_file;
+		$base_url  = plugins_url( 'build/routes/', dirname( __FILE__ ) );
+		$extension = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.js' : '.min.js';
+
+		foreach ( $routes as $route ) {
+			// Register content module
+			$content_asset_path = $routes_dir . '/' . $route['name'] . '/content.min.asset.php';
+			$content_asset      = file_exists( $content_asset_path ) ? require $content_asset_path : array();
+			$content_handle     = '{{HANDLE_PREFIX}}/routes/' . $route['name'] . '/content';
+
+			wp_register_script_module(
+				$content_handle,
+				$base_url . $route['name'] . '/content' . $extension,
+				$content_asset['module_dependencies'] ?? array(),
+				$content_asset['version'] ?? false
+			);
+
+			$route_handle = null;
+
+			// Register route module if it exists
+			if ( isset( $route['has_route'] ) && $route['has_route'] ) {
+				$route_asset_path = $routes_dir . '/' . $route['name'] . '/route.min.asset.php';
+				$route_asset      = file_exists( $route_asset_path ) ? require $route_asset_path : array();
+				$route_handle     = '{{HANDLE_PREFIX}}/routes/' . $route['name'] . '/route';
+
+				wp_register_script_module(
+					$route_handle,
+					$base_url . $route['name'] . '/route' . $extension,
+					$route_asset['module_dependencies'] ?? array(),
+					$route_asset['version'] ?? false
+				);
+			}
+
+			// Register the route with boot
+			if ( function_exists( 'gutenberg_register_boot_route' ) ) {
+				gutenberg_register_boot_route(
+					$route['path'],
+					$content_handle,
+					$route_handle
+				);
+			}
+		}
+	}
+
+	add_action( 'gutenberg_boot_init', '{{NAMESPACE}}_register_routes', 10 );
+}