@wordpress/build 0.4.1-next.8fd3f8831.0 → 0.5.1-next.79a2f3cdd.0

package/build-module/build.mjs

@@ -0,0 +1,1454 @@
+#!/usr/bin/env node
+
+// packages/wp-build/src/build.mjs
+import { readFile, writeFile, copyFile, mkdir, unlink } from "fs/promises";
+import path from "path";
+import { parseArgs } from "node:util";
+import esbuild from "esbuild";
+import glob from "fast-glob";
+import chokidar from "chokidar";
+import browserslistToEsbuild from "browserslist-to-esbuild";
+import { sassPlugin, postcssModules } from "esbuild-sass-plugin";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import rtlcss from "rtlcss";
+import cssnano from "cssnano";
+import babel from "esbuild-plugin-babel";
+import { camelCase } from "change-case";
+import {
+  groupByDepth,
+  findScriptsToRebundle,
+  findRoutesToRebuild
+} from "./dependency-graph.mjs";
+import {
+  generatePhpFromTemplate,
+  getPhpReplacements
+} from "./php-generator.mjs";
+import { getPackageInfo, getPackageInfoFromFile } from "./package-utils.mjs";
+import { createWordpressExternalsPlugin } from "./wordpress-externals-plugin.mjs";
+import {
+  getAllRoutes,
+  getRouteFiles,
+  getRouteMetadata,
+  generateContentEntryPoint
+} from "./route-utils.mjs";
+var ROOT_DIR = process.cwd();
+var PACKAGES_DIR = path.join(ROOT_DIR, "packages");
+var BUILD_DIR = path.join(ROOT_DIR, "build");
+var SOURCE_EXTENSIONS = "{js,mjs,ts,tsx}";
+var ASSET_EXTENSIONS = "json";
+var IGNORE_PATTERNS = [
+  "**/benchmark/**",
+  "**/{__mocks__,__tests__,test}/**",
+  "**/{storybook,stories}/**",
+  "**/*.native.*",
+  "**/*.ios.*",
+  "**/*.android.*",
+  "**/*.{spec,test}.*"
+];
+var TEST_FILE_PATTERNS = [
+  /\/(benchmark|__mocks__|__tests__|test|storybook|stories)\/.+/,
+  /\.(spec|test)\.(js|ts|tsx)$/,
+  /\.(native|ios|android)\.(js|ts|tsx)$/
+];
+function getAllPackages() {
+  return glob.sync(normalizePath(path.join(PACKAGES_DIR, "*", "package.json"))).map(
+    (packageJsonPath) => path.basename(path.dirname(packageJsonPath))
+  );
+}
+var PACKAGES = getAllPackages();
+var ROOT_PACKAGE_JSON = getPackageInfoFromFile(
+  path.join(ROOT_DIR, "package.json")
+);
+var WP_PLUGIN_CONFIG = ROOT_PACKAGE_JSON.wpPlugin || {};
+var SCRIPT_GLOBAL = WP_PLUGIN_CONFIG.scriptGlobal;
+var PACKAGE_NAMESPACE = WP_PLUGIN_CONFIG.packageNamespace;
+var HANDLE_PREFIX = WP_PLUGIN_CONFIG.handlePrefix || PACKAGE_NAMESPACE;
+var EXTERNAL_NAMESPACES = WP_PLUGIN_CONFIG.externalNamespaces || {};
+var PAGES = WP_PLUGIN_CONFIG.pages || [];
+var baseDefine = {
+  "globalThis.IS_GUTENBERG_PLUGIN": JSON.stringify(
+    Boolean(process.env.npm_package_config_IS_GUTENBERG_PLUGIN)
+  ),
+  "globalThis.IS_WORDPRESS_CORE": JSON.stringify(
+    Boolean(process.env.npm_package_config_IS_WORDPRESS_CORE)
+  )
+};
+var getDefine = (scriptDebug) => ({
+  ...baseDefine,
+  "globalThis.SCRIPT_DEBUG": JSON.stringify(scriptDebug)
+});
+var wordpressExternalsPlugin = createWordpressExternalsPlugin(
+  PACKAGE_NAMESPACE,
+  SCRIPT_GLOBAL,
+  EXTERNAL_NAMESPACES,
+  HANDLE_PREFIX
+);
+var styleBundlingPlugins = [
+  // Handle CSS modules (.module.css and .module.scss)
+  sassPlugin({
+    embedded: true,
+    filter: /\.module\.(css|scss)$/,
+    transform: postcssModules({
+      generateScopedName: "[name]__[local]__[hash:base64:5]"
+    }),
+    type: "style",
+    loadPaths: ["node_modules", path.join(PACKAGES_DIR, "base-styles")]
+  }),
+  // Handle regular CSS/SCSS files
+  // Note: .module.css and .module.scss already handled by plugin above
+  sassPlugin({
+    embedded: true,
+    filter: /\.(css|scss)$/,
+    type: "style",
+    loadPaths: ["node_modules", path.join(PACKAGES_DIR, "base-styles")]
+  })
+];
+function normalizePath(p) {
+  return p.replace(/\\/g, "/");
+}
+function transformPhpContent(content, transforms) {
+  const {
+    functionPrefix = "",
+    classSuffix = "",
+    prefixFunctions = [],
+    suffixClasses = [],
+    addActionPriority
+  } = transforms;
+  content = content.toString();
+  if (prefixFunctions.length) {
+    content = content.replace(
+      new RegExp(prefixFunctions.join("|"), "g"),
+      (match) => `${functionPrefix}${match.replace(/^wp_/, "")}`
+    );
+  }
+  if (suffixClasses.length) {
+    content = content.replace(
+      new RegExp(suffixClasses.join("|"), "g"),
+      (match) => `${match}${classSuffix}`
+    );
+  }
+  if (functionPrefix) {
+    content = Array.from(
+      content.matchAll(/^\s*function ([^\(]+)/gm)
+    ).reduce((result, [, functionName]) => {
+      return result.replace(
+        new RegExp(functionName + "(?![a-zA-Z0-9_])", "g"),
+        (match) => functionPrefix + match.replace(/^wp_/, "")
+      );
+    }, content);
+  }
+  if (addActionPriority) {
+    content = content.replace(
+      /(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
+      `$1, ${addActionPriority}`
+    );
+  }
+  return content;
+}
+function momentTimezoneAliasPlugin() {
+  return {
+    name: "moment-timezone-alias",
+    async setup(build) {
+      const { createRequire } = await import("module");
+      const require2 = createRequire(import.meta.url);
+      let preBuiltBundlePath;
+      let momentTimezoneUtilsPath;
+      const resolvePaths = () => {
+        if (preBuiltBundlePath) {
+          return;
+        }
+        preBuiltBundlePath = require2.resolve(
+          "moment-timezone/builds/moment-timezone-with-data-1970-2030"
+        );
+        momentTimezoneUtilsPath = require2.resolve(
+          "moment-timezone/moment-timezone-utils.js"
+        );
+      };
+      build.onResolve(
+        { filter: /^moment-timezone\/moment-timezone$/ },
+        () => {
+          resolvePaths();
+          return { path: preBuiltBundlePath };
+        }
+      );
+      build.onResolve(
+        { filter: /^moment-timezone\/moment-timezone-utils$/ },
+        () => {
+          resolvePaths();
+          return { path: momentTimezoneUtilsPath };
+        }
+      );
+      build.onResolve({ filter: /^\.\/$/ }, (args) => {
+        if (args.importer && args.importer.includes("moment-timezone-utils")) {
+          resolvePaths();
+          return { path: preBuiltBundlePath };
+        }
+      });
+    }
+  };
+}
+function resolveEntryPoint(packageDir, packageJson) {
+  if (packageJson.exports) {
+    const rootExport = packageJson.exports["."];
+    if (rootExport) {
+      if (typeof rootExport === "object") {
+        const entryFile = rootExport.import || rootExport.default || rootExport.require;
+        if (entryFile) {
+          return path.join(packageDir, entryFile);
+        }
+      }
+      if (typeof rootExport === "string") {
+        return path.join(packageDir, rootExport);
+      }
+    }
+  }
+  if (packageJson.module) {
+    return path.join(packageDir, packageJson.module);
+  }
+  if (packageJson.main) {
+    return path.join(packageDir, packageJson.main);
+  }
+  return path.join(packageDir, "build-module", "index.js");
+}
+async function bundlePackage(packageName, options = {}) {
+  const {
+    sourceDir = PACKAGES_DIR,
+    handlePrefix = HANDLE_PREFIX,
+    scriptGlobal = SCRIPT_GLOBAL,
+    packageNamespace = PACKAGE_NAMESPACE
+  } = options;
+  const builtModules = [];
+  const builtScripts = [];
+  const builtStyles = [];
+  const packageDir = path.join(sourceDir, packageName);
+  const packageJson = getPackageInfoFromFile(
+    path.join(sourceDir, packageName, "package.json")
+  );
+  const builds = [];
+  if (packageJson.wpScript) {
+    const entryPoint = resolveEntryPoint(packageDir, packageJson);
+    const outputDir = path.join(BUILD_DIR, "scripts", packageName);
+    const target = browserslistToEsbuild();
+    const packageFullName = packageJson.name;
+    const matchesNamespace = packageFullName.startsWith(
+      `@${packageNamespace}/`
+    );
+    const shouldExposeGlobal = matchesNamespace && scriptGlobal !== false;
+    const globalName = shouldExposeGlobal ? `${scriptGlobal}.${camelCase(packageName)}` : void 0;
+    const baseConfig = {
+      entryPoints: [entryPoint],
+      bundle: true,
+      sourcemap: true,
+      format: "iife",
+      target,
+      platform: "browser",
+      globalName
+    };
+    if (packageJson.wpScriptDefaultExport && globalName) {
+      baseConfig.footer = {
+        js: `if (typeof ${globalName} === 'object' && ${globalName}.default) { ${globalName} = ${globalName}.default; }`
+      };
+    }
+    const baseBundlePlugins = [momentTimezoneAliasPlugin()];
+    builds.push(
+      esbuild.build({
+        ...baseConfig,
+        outfile: path.join(outputDir, "index.min.js"),
+        minify: true,
+        define: getDefine(false),
+        plugins: [
+          ...baseBundlePlugins,
+          wordpressExternalsPlugin(
+            "index.min",
+            "iife",
+            packageJson.wpScriptExtraDependencies || [],
+            true
+            // Generate asset file for minified build
+          )
+        ]
+      }),
+      esbuild.build({
+        ...baseConfig,
+        outfile: path.join(outputDir, "index.js"),
+        minify: false,
+        define: getDefine(true),
+        plugins: [
+          ...baseBundlePlugins,
+          wordpressExternalsPlugin(
+            "index.min",
+            "iife",
+            packageJson.wpScriptExtraDependencies || [],
+            false
+            // Skip asset file for non-minified build
+          )
+        ]
+      })
+    );
+    builtScripts.push({
+      handle: `${handlePrefix}-${packageName}`,
+      path: `${packageName}/index`,
+      asset: `${packageName}/index.min.asset.php`
+    });
+  }
+  if (packageJson.wpScriptModuleExports) {
+    const target = browserslistToEsbuild();
+    const rootBuildModuleDir = path.join(
+      BUILD_DIR,
+      "modules",
+      packageName
+    );
+    const exports = typeof packageJson.wpScriptModuleExports === "string" ? { ".": packageJson.wpScriptModuleExports } : packageJson.wpScriptModuleExports;
+    for (const [exportName, exportPath] of Object.entries(exports)) {
+      const fileName = exportName === "." ? "index" : exportName.replace(/^\.\//, "");
+      const entryPoint = path.join(packageDir, exportPath);
+      const baseFileName = path.basename(fileName);
+      builds.push(
+        esbuild.build({
+          entryPoints: [entryPoint],
+          outfile: path.join(
+            rootBuildModuleDir,
+            `${fileName}.min.js`
+          ),
+          bundle: true,
+          sourcemap: true,
+          format: "esm",
+          target,
+          platform: "browser",
+          minify: true,
+          define: getDefine(false),
+          plugins: [
+            wordpressExternalsPlugin(
+              `${baseFileName}.min`,
+              "esm",
+              [],
+              true
+              // Generate asset file for minified build
+            )
+          ]
+        }),
+        esbuild.build({
+          entryPoints: [entryPoint],
+          outfile: path.join(
+            rootBuildModuleDir,
+            `${fileName}.js`
+          ),
+          bundle: true,
+          sourcemap: true,
+          format: "esm",
+          target,
+          platform: "browser",
+          minify: false,
+          define: getDefine(true),
+          plugins: [
+            wordpressExternalsPlugin(
+              `${baseFileName}.min`,
+              "esm",
+              [],
+              false
+              // Skip asset file for non-minified build
+            )
+          ]
+        })
+      );
+      const scriptModuleId = exportName === "." ? `@${packageNamespace}/${packageName}` : `@${packageNamespace}/${packageName}/${fileName}`;
+      builtModules.push({
+        id: scriptModuleId,
+        path: `${packageName}/${fileName}`,
+        asset: `${packageName}/${fileName}.min.asset.php`
+      });
+    }
+  }
+  let hasMainStyle = false;
+  if (packageJson.wpScript) {
+    const buildStyleDir = path.join(packageDir, "build-style");
+    const outputDir = path.join(BUILD_DIR, "styles", packageName);
+    const cssFiles = await glob(
+      normalizePath(path.join(buildStyleDir, "**/*.css"))
+    );
+    for (const cssFile of cssFiles) {
+      const relativePath = path.relative(buildStyleDir, cssFile);
+      const destPath = path.join(outputDir, relativePath);
+      const destDir = path.dirname(destPath);
+      if (relativePath === "style.css") {
+        hasMainStyle = true;
+      }
+      const minifiedPath = destPath.replace(/\.css$/, ".min.css");
+      builds.push(
+        (async () => {
+          await mkdir(destDir, { recursive: true });
+          const content = await readFile(cssFile, "utf8");
+          await writeFile(destPath, content);
+          const result = await postcss([
+            cssnano({
+              preset: [
+                "default",
+                {
+                  discardComments: {
+                    removeAll: true
+                  }
+                }
+              ]
+            })
+          ]).process(content, {
+            from: cssFile,
+            to: minifiedPath
+          });
+          await writeFile(minifiedPath, result.css);
+        })()
+      );
+    }
+  }
+  if (packageJson.wpCopyFiles) {
+    const { files, transforms = {} } = packageJson.wpCopyFiles;
+    const packageSourceDir = path.join(packageDir, "src");
+    const outputDir = path.join(BUILD_DIR, "scripts", packageName);
+    for (const filePattern of files) {
+      const matchedFiles = await glob(
+        normalizePath(path.join(packageDir, filePattern))
+      );
+      for (const sourceFile of matchedFiles) {
+        const relativePath = path.relative(
+          packageSourceDir,
+          sourceFile
+        );
+        const destPath = path.join(outputDir, relativePath);
+        const destDir = path.dirname(destPath);
+        if (sourceFile.endsWith(".php") && transforms.php) {
+          builds.push(
+            (async () => {
+              let finalPath = destPath;
+              let finalDir = destDir;
+              const content = await readFile(
+                sourceFile,
+                "utf8"
+              );
+              const transformed = transformPhpContent(
+                content,
+                transforms.php
+              );
+              if (transforms.php.filenameSuffix) {
+                const ext = path.extname(destPath);
+                const base = path.basename(destPath, ext);
+                finalPath = path.join(
+                  destDir,
+                  `${base}${transforms.php.filenameSuffix}${ext}`
+                );
+              }
+              if (transforms.php.flattenIndexFiles && path.basename(sourceFile) === "index.php") {
+                const parentDir = path.dirname(finalPath);
+                const blockName = path.basename(parentDir);
+                finalPath = path.join(
+                  path.dirname(parentDir),
+                  `${blockName}.php`
+                );
+                finalDir = path.dirname(finalPath);
+              }
+              await mkdir(finalDir, { recursive: true });
+              await writeFile(finalPath, transformed);
+            })()
+          );
+        } else {
+          builds.push(
+            mkdir(destDir, { recursive: true }).then(
+              () => copyFile(sourceFile, destPath)
+            )
+          );
+        }
+      }
+    }
+  }
+  if (builds.length === 0) {
+    return false;
+  }
+  await Promise.all(builds);
+  if (hasMainStyle) {
+    const scriptAssetPath = path.join(
+      BUILD_DIR,
+      "scripts",
+      packageName,
+      "index.min.asset.php"
+    );
+    const assetContent = await readFile(scriptAssetPath, "utf8");
+    const depsMatch = assetContent.match(
+      /'dependencies' => array\((.*?)\)/s
+    );
+    let scriptDependencies = [];
+    if (depsMatch) {
+      const depsString = depsMatch[1];
+      scriptDependencies = depsString.match(/'([^']+)'/g)?.map((d) => d.replace(/'/g, "")) || [];
+    }
+    const styleDeps = await inferStyleDependencies(
+      scriptDependencies,
+      packageName
+    );
+    builtStyles.push({
+      handle: `${handlePrefix}-${packageName}`,
+      path: `${packageName}/style`,
+      dependencies: styleDeps
+    });
+  }
+  return {
+    modules: builtModules,
+    scripts: builtScripts,
+    styles: builtStyles
+  };
+}
+async function inferStyleDependencies(scriptDependencies, packageName) {
+  if (!scriptDependencies || scriptDependencies.length === 0) {
+    return [];
+  }
+  const styleDeps = [];
+  const resolveDir = path.join(PACKAGES_DIR, packageName);
+  for (const scriptHandle of scriptDependencies) {
+    if (!scriptHandle.startsWith("wp-")) {
+      continue;
+    }
+    const shortName = scriptHandle.replace("wp-", "");
+    const depPackageName = `@wordpress/${shortName}`;
+    try {
+      const depPackageJson = getPackageInfo(depPackageName, resolveDir);
+      if (!depPackageJson) {
+        continue;
+      }
+      if (depPackageJson.wpScript === true) {
+        const styleFile = path.join(
+          BUILD_DIR,
+          "styles",
+          shortName,
+          "style.css"
+        );
+        try {
+          await readFile(styleFile);
+          styleDeps.push(scriptHandle);
+        } catch {
+        }
+      }
+    } catch {
+      continue;
+    }
+  }
+  return styleDeps;
+}
+async function generateModuleRegistrationPhp(modules, replacements) {
+  const modulesArray = modules.map(
+    (module) => `	array(
+		'id' => '${module.id}',
+		'path' => '${module.path}',
+		'asset' => '${module.asset}',
+	),`
+  ).join("\n");
+  await Promise.all([
+    generatePhpFromTemplate(
+      "module-registry.php.template",
+      path.join(BUILD_DIR, "modules", "index.php"),
+      { ...replacements, "{{MODULES}}": modulesArray }
+    ),
+    generatePhpFromTemplate(
+      "module-registration.php.template",
+      path.join(BUILD_DIR, "modules.php"),
+      replacements
+    )
+  ]);
+}
+async function generateScriptRegistrationPhp(scripts, replacements) {
+  const scriptsArray = scripts.map(
+    (script) => `	array(
+		'handle' => '${script.handle}',
+		'path' => '${script.path}',
+		'asset' => '${script.asset}',
+	),`
+  ).join("\n");
+  await Promise.all([
+    generatePhpFromTemplate(
+      "script-registry.php.template",
+      path.join(BUILD_DIR, "scripts", "index.php"),
+      { ...replacements, "{{SCRIPTS}}": scriptsArray }
+    ),
+    generatePhpFromTemplate(
+      "script-registration.php.template",
+      path.join(BUILD_DIR, "scripts.php"),
+      replacements
+    )
+  ]);
+}
+async function generateConstantsPhp(replacements) {
+  await generatePhpFromTemplate(
+    "constants.php.template",
+    path.join(BUILD_DIR, "constants.php"),
+    replacements
+  );
+}
+async function generateStyleRegistrationPhp(styles, replacements) {
+  const stylesArray = styles.map(
+    (style) => `	array(
+		'handle' => '${style.handle}',
+		'path' => '${style.path}',
+		'dependencies' => array(${style.dependencies.map((dep) => `'${dep}'`).join(", ")}),
+	),`
+  ).join("\n");
+  await Promise.all([
+    generatePhpFromTemplate(
+      "style-registry.php.template",
+      path.join(BUILD_DIR, "styles", "index.php"),
+      { ...replacements, "{{STYLES}}": stylesArray }
+    ),
+    generatePhpFromTemplate(
+      "style-registration.php.template",
+      path.join(BUILD_DIR, "styles.php"),
+      replacements
+    )
+  ]);
+}
+async function generateMainIndexPhp(replacements) {
+  await generatePhpFromTemplate(
+    "index.php.template",
+    path.join(BUILD_DIR, "index.php"),
+    replacements
+  );
+}
+async function generateRoutesRegistry(routes, replacements) {
+  if (routes.length === 0) {
+    return;
+  }
+  const routeEntries = routes.map((route) => {
+    const hasRouteStr = route.hasRoute ? "true" : "false";
+    const hasContentStr = route.hasContent ? "true" : "false";
+    return `	array(
+		'name'        => '${route.name}',
+		'path'        => '${route.path}',
+		'page'        => '${route.page}',
+		'has_route'   => ${hasRouteStr},
+		'has_content' => ${hasContentStr},
+	)`;
+  }).join(",\n");
+  await generatePhpFromTemplate(
+    "route-registry.php.template",
+    path.join(BUILD_DIR, "routes", "index.php"),
+    { ...replacements, "{{ROUTES}}": routeEntries }
+  );
+}
+async function generateRoutesPhp(routes, replacements) {
+  if (routes.length === 0) {
+    return;
+  }
+  await generatePhpFromTemplate(
+    "routes-registration.php.template",
+    path.join(BUILD_DIR, "routes.php"),
+    { ...replacements, "{{HANDLE_PREFIX}}": HANDLE_PREFIX }
+  );
+}
+async function generatePagesPhp(pageData, replacements) {
+  if (pageData.length === 0) {
+    return;
+  }
+  const pageGenerationPromises = pageData.map(async (page) => {
+    if (page.routes.length === 0) {
+      return;
+    }
+    const pageSlugUnderscore = page.slug.replace(/-/g, "_");
+    const prefixUnderscore = replacements["{{PREFIX}}"].replace(
+      /-/g,
+      "_"
+    );
+    const initModulesPhp = page.initModules.length > 0 ? page.initModules.map(
+      (moduleId) => `			$boot_dependencies[] = array( 'import' => 'static', 'id' => '${moduleId}' );`
+    ).join("\n") : "			// No init modules configured";
+    const templateReplacements = {
+      ...replacements,
+      "{{PAGE_SLUG}}": page.slug,
+      "{{PAGE_SLUG_UNDERSCORE}}": pageSlugUnderscore,
+      "{{PREFIX}}": prefixUnderscore,
+      "{{INIT_MODULES_PHP_ARRAY}}": initModulesPhp,
+      "{{INIT_MODULES_JSON}}": JSON.stringify(page.initModules)
+    };
+    await Promise.all([
+      generatePhpFromTemplate(
+        "page.php.template",
+        path.join(BUILD_DIR, "pages", page.slug, "page.php"),
+        templateReplacements
+      ),
+      generatePhpFromTemplate(
+        "page-wp-admin.php.template",
+        path.join(BUILD_DIR, "pages", page.slug, "page-wp-admin.php"),
+        templateReplacements
+      )
+    ]);
+    await writeFile(
+      path.join(BUILD_DIR, "pages", page.slug, "loader.js"),
+      "// Empty module loader for page dependencies\n"
+    );
+  });
+  await Promise.all(pageGenerationPromises);
+  const pageIncludes = pageData.map((page) => {
+    return `require_once __DIR__ . '/pages/${page.slug}/page.php';
+require_once __DIR__ . '/pages/${page.slug}/page-wp-admin.php';`;
+  }).join("\n");
+  await generatePhpFromTemplate(
+    "pages.php.template",
+    path.join(BUILD_DIR, "pages.php"),
+    { ...replacements, "{{PAGE_INCLUDES}}": pageIncludes }
+  );
+}
+async function transpilePackage(packageName) {
+  const startTime = Date.now();
+  const packageDir = path.join(PACKAGES_DIR, packageName);
+  const packageJson = getPackageInfoFromFile(
+    path.join(PACKAGES_DIR, packageName, "package.json")
+  );
+  if (!packageJson) {
+    throw new Error(
+      `Could not find package.json for package: ${packageName}`
+    );
+  }
+  const srcFiles = await glob(
+    normalizePath(
+      path.join(packageDir, `src/**/*.${SOURCE_EXTENSIONS}`)
+    ),
+    {
+      ignore: IGNORE_PATTERNS
+    }
+  );
+  const assetFiles = await glob(
+    normalizePath(
+      path.join(packageDir, `src/**/*.${ASSET_EXTENSIONS}`)
+    ),
+    {
+      ignore: IGNORE_PATTERNS
+    }
+  );
+  const buildDir = path.join(packageDir, "build");
+  const buildModuleDir = path.join(packageDir, "build-module");
+  const srcDir = path.join(packageDir, "src");
+  const target = browserslistToEsbuild();
+  const builds = [];
+  const needsEmotionPlugin = packageName === "components";
+  const emotionPlugin = babel({
+    filter: /\.[jt]sx?$/,
+    config: {
+      plugins: ["@emotion/babel-plugin"]
+    }
+  });
+  const externalizeAllExceptCssPlugin = {
+    name: "externalize-except-css",
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, async (args) => {
+        if (args.pluginData?.__fromExternalize) {
+          return null;
+        }
+        if (args.kind === "entry-point") {
+          return null;
+        }
+        if (args.path.match(/\.(css|scss)$/)) {
+          return null;
+        }
+        if (args.path.startsWith(".")) {
+          const resolved = await build.resolve(args.path, {
+            namespace: args.namespace,
+            importer: args.importer,
+            kind: args.kind,
+            resolveDir: args.resolveDir,
+            with: args.with,
+            pluginData: {
+              ...args.pluginData,
+              __fromExternalize: true
+            }
+          });
+          if (resolved.errors.length > 0) {
+            return resolved;
+          }
+          let relativePath = normalizePath(
+            path.relative(args.resolveDir, resolved.path)
+          );
+          if (!relativePath.startsWith(".")) {
+            relativePath = "./" + relativePath;
+          }
+          const newExt = build.initialOptions.format === "cjs" ? ".cjs" : ".mjs";
+          relativePath = relativePath.replace(/\.[jt]sx?$/, newExt);
+          return {
+            path: relativePath,
+            external: true
+          };
+        }
+        return { path: args.path, external: true };
+      });
+    }
+  };
+  const plugins = [
+    needsEmotionPlugin && emotionPlugin,
+    externalizeAllExceptCssPlugin,
+    ...styleBundlingPlugins
+  ].filter(Boolean);
+  if (packageJson.main) {
+    builds.push(
+      esbuild.build({
+        entryPoints: srcFiles,
+        outdir: buildDir,
+        outbase: srcDir,
+        outExtension: { ".js": ".cjs" },
+        bundle: true,
+        platform: "node",
+        format: "cjs",
+        sourcemap: true,
+        target,
+        jsx: "automatic",
+        jsxImportSource: "react",
+        loader: { ".js": "jsx" },
+        plugins
+      })
+    );
+    for (const assetFile of assetFiles) {
+      const relativePath = path.relative(srcDir, assetFile);
+      const destPath = path.join(buildDir, relativePath);
+      const destDir = path.dirname(destPath);
+      builds.push(
+        mkdir(destDir, { recursive: true }).then(
+          () => copyFile(assetFile, destPath)
+        )
+      );
+    }
+  }
+  if (packageJson.module) {
+    builds.push(
+      esbuild.build({
+        entryPoints: srcFiles,
+        outdir: buildModuleDir,
+        outbase: srcDir,
+        outExtension: { ".js": ".mjs" },
+        bundle: true,
+        platform: "neutral",
+        format: "esm",
+        sourcemap: true,
+        target,
+        jsx: "automatic",
+        jsxImportSource: "react",
+        loader: { ".js": "jsx" },
+        plugins
+      })
+    );
+    for (const jsonFile of assetFiles) {
+      const relativePath = path.relative(srcDir, jsonFile);
+      const destPath = path.join(buildModuleDir, relativePath);
+      const destDir = path.dirname(destPath);
+      builds.push(
+        mkdir(destDir, { recursive: true }).then(
+          () => copyFile(jsonFile, destPath)
+        )
+      );
+    }
+  }
+  await Promise.all(builds);
+  await compileStyles(packageName);
+  return Date.now() - startTime;
+}
+async function compileStyles(packageName) {
+  const packageDir = path.join(PACKAGES_DIR, packageName);
+  const packageJson = getPackageInfoFromFile(
+    path.join(PACKAGES_DIR, packageName, "package.json")
+  );
+  const scssEntryPointPatterns = packageJson.wpStyleEntryPoints || [
+    "src/*.scss"
+  ];
+  const scssEntries = await glob(
+    scssEntryPointPatterns.map(
+      (pattern) => normalizePath(path.join(packageDir, pattern))
+    )
+  );
+  if (scssEntries.length === 0) {
+    return null;
+  }
+  const startTime = Date.now();
+  const buildStyleDir = path.join(packageDir, "build-style");
+  const srcDir = path.join(packageDir, "src");
+  await Promise.all(
+    scssEntries.map(async (styleEntryPath) => {
+      const relativePath = path.relative(srcDir, styleEntryPath);
+      const relativeDir = path.dirname(relativePath);
+      const entryName = path.basename(styleEntryPath, ".scss");
+      const outputDir = relativeDir === "." ? buildStyleDir : path.join(buildStyleDir, relativeDir);
+      await mkdir(outputDir, { recursive: true });
+      await esbuild.build({
+        entryPoints: [styleEntryPath],
+        outdir: outputDir,
+        bundle: true,
+        write: false,
+        loader: {
+          ".scss": "css"
+        },
+        plugins: [
+          sassPlugin({
+            embedded: true,
+            loadPaths: [
+              "node_modules",
+              path.join(PACKAGES_DIR, "base-styles")
+            ],
+            async transform(source) {
+              const ltrResult = await postcss([
+                autoprefixer({ grid: true })
+              ]).process(source, { from: void 0 });
+              const rtlResult = await postcss([
+                rtlcss()
+              ]).process(ltrResult.css, { from: void 0 });
+              await Promise.all([
+                writeFile(
+                  path.join(
+                    outputDir,
+                    `${entryName}.css`
+                  ),
+                  ltrResult.css
+                ),
+                writeFile(
+                  path.join(
+                    outputDir,
+                    `${entryName}-rtl.css`
+                  ),
+                  rtlResult.css
+                )
+              ]);
+              return "";
+            }
+          })
+        ]
+      });
+    })
+  );
+  return Date.now() - startTime;
+}
+function isPackageSourceFile(filename) {
+  const relativePath = normalizePath(
+    path.relative(process.cwd(), filename)
+  );
+  if (!/\/src\/.+/.test(relativePath)) {
+    return false;
+  }
+  if (TEST_FILE_PATTERNS.some((regex) => regex.test(relativePath))) {
+    return false;
+  }
+  return PACKAGES.some((packageName) => {
+    const packagePath = normalizePath(
+      path.join("packages", packageName)
+    );
+    return relativePath.startsWith(packagePath + "/");
+  });
+}
+function getPackageName(filename) {
+  const relativePath = normalizePath(
+    path.relative(process.cwd(), filename)
+  );
+  for (const packageName of PACKAGES) {
+    const packagePath = normalizePath(
+      path.join("packages", packageName)
+    );
+    if (relativePath.startsWith(packagePath + "/")) {
+      return packageName;
+    }
+  }
+  return null;
+}
+async function buildRoute(routeName) {
+  const startTime = Date.now();
+  const routeDir = path.join(ROOT_DIR, "routes", routeName);
+  const outputDir = path.join(BUILD_DIR, "routes", routeName);
+  await mkdir(outputDir, { recursive: true });
+  await copyFile(
+    path.join(routeDir, "package.json"),
+    path.join(outputDir, "package.json")
+  );
+  const files = getRouteFiles(routeDir);
+  if (files.hasRoute) {
+    const routeEntryPoints = await glob(`route.${SOURCE_EXTENSIONS}`, {
+      cwd: routeDir,
+      absolute: true
+    });
+    if (routeEntryPoints.length > 0) {
+      await Promise.all([
+        esbuild.build({
+          entryPoints: routeEntryPoints,
+          outfile: path.join(outputDir, "route.min.js"),
+          bundle: true,
+          format: "esm",
+          target: browserslistToEsbuild(),
+          minify: true,
+          define: getDefine(false),
+          plugins: [
+            wordpressExternalsPlugin(
+              "route.min",
+              "esm",
+              [],
+              true
+              // Generate asset file for minified build
+            )
+          ]
+        }),
+        esbuild.build({
+          entryPoints: routeEntryPoints,
+          outfile: path.join(outputDir, "route.js"),
+          bundle: true,
+          format: "esm",
+          target: browserslistToEsbuild(),
+          minify: false,
+          define: getDefine(true),
+          plugins: [
+            wordpressExternalsPlugin(
+              "route.min",
+              "esm",
+              [],
+              false
+              // Skip asset file for non-minified build
+            )
+          ]
+        })
+      ]);
+    }
+  }
+  if (files.hasStage || files.hasInspector || files.hasCanvas) {
+    const syntheticEntry = generateContentEntryPoint(files);
+    const tempEntryPath = path.join(routeDir, ".content-entry.js");
+    await writeFile(tempEntryPath, syntheticEntry);
+    await Promise.all([
+      esbuild.build({
+        entryPoints: [tempEntryPath],
+        outfile: path.join(outputDir, "content.min.js"),
+        bundle: true,
+        format: "esm",
+        target: browserslistToEsbuild(),
+        minify: true,
+        define: getDefine(false),
+        plugins: [
+          wordpressExternalsPlugin(
+            "content.min",
+            "esm",
+            [],
+            true
+            // Generate asset file for minified build
+          ),
+          ...styleBundlingPlugins
+        ]
+      }),
+      esbuild.build({
+        entryPoints: [tempEntryPath],
+        outfile: path.join(outputDir, "content.js"),
+        bundle: true,
+        format: "esm",
+        target: browserslistToEsbuild(),
+        minify: false,
+        define: getDefine(true),
+        plugins: [
+          wordpressExternalsPlugin(
+            "content.min",
+            "esm",
+            [],
+            false
+            // Skip asset file for non-minified build
+          ),
+          ...styleBundlingPlugins
+        ]
+      })
+    ]);
+    await unlink(tempEntryPath);
+  }
+  return Date.now() - startTime;
+}
+async function buildAllRoutes() {
+  console.log("\n\u{1F6A6} Phase 3: Building routes...\n");
+  const routes = getAllRoutes(ROOT_DIR);
+  if (routes.length === 0) {
+    console.log("   No routes found, skipping.\n");
+    return;
+  }
+  await Promise.all(
+    routes.map(async (routeName) => {
+      const buildTime = await buildRoute(routeName);
+      console.log(
+        `   \u2714 Built route ${routeName} (${buildTime}ms)`
+      );
+    })
+  );
+}
+async function buildAll(baseUrlExpression) {
+  console.log("\u{1F528} Building packages...\n");
+  const startTime = Date.now();
+  const shortToFull = /* @__PURE__ */ new Map();
+  const fullToShort = /* @__PURE__ */ new Map();
+  const fullToPackageJson = /* @__PURE__ */ new Map();
+  for (const pkg of PACKAGES) {
+    const packageJson = getPackageInfoFromFile(
+      path.join(PACKAGES_DIR, pkg, "package.json")
+    );
+    shortToFull.set(pkg, packageJson.name);
+    fullToShort.set(packageJson.name, pkg);
+    fullToPackageJson.set(packageJson.name, packageJson);
+  }
+  const levels = groupByDepth(fullToPackageJson);
+  console.log("\u{1F4DD} Phase 1: Transpiling packages...\n");
+  for (const level of levels) {
+    await Promise.all(
+      level.map(async (fullName) => {
+        const packageName = fullToShort.get(fullName);
+        const buildTime = await transpilePackage(packageName);
+        console.log(
+          `   \u2714 Transpiled ${packageName} (${buildTime}ms)`
+        );
+      })
+    );
+  }
+  console.log("\n\u{1F4E6} Phase 2: Bundling packages...\n");
+  const modules = [];
+  const scripts = [];
+  const styles = [];
+  await Promise.all(
+    PACKAGES.map(async (packageName) => {
+      const startBundleTime = Date.now();
+      const ret = await bundlePackage(packageName);
+      const buildTime = Date.now() - startBundleTime;
+      if (ret) {
+        console.log(
+          `   \u2714 Bundled ${packageName} (${buildTime}ms)`
+        );
+        if (ret.modules) {
+          modules.push(...ret.modules);
+        }
+        if (ret.scripts) {
+          scripts.push(...ret.scripts);
+        }
+        if (ret.styles) {
+          styles.push(...ret.styles);
+        }
+      }
+    })
+  );
+  await buildAllRoutes();
+  const routes = getAllRoutes(ROOT_DIR).flatMap((routeName) => {
+    const metadata = getRouteMetadata(ROOT_DIR, routeName);
+    if (!metadata || !metadata.pages || metadata.pages.length === 0) {
+      return [];
+    }
+    const routeFiles = getRouteFiles(
+      path.join(ROOT_DIR, "routes", routeName)
+    );
+    return metadata.pages.map((page) => {
+      return {
+        name: routeName,
+        path: metadata.path,
+        page,
+        hasRoute: routeFiles.hasRoute,
+        hasContent: routeFiles.hasStage || routeFiles.hasInspector
+      };
+    });
+  });
+  const normalizedPages = PAGES.map((page) => {
+    if (typeof page === "string") {
+      return { id: page, init: [], title: void 0 };
+    }
+    return {
+      id: page.id,
+      init: page.init || [],
+      title: page.title || void 0
+    };
+  });
+  const pageData = normalizedPages.map((page) => {
+    const pageRoutes = routes.filter((r) => r.page === page.id);
+    return {
+      slug: page.id,
+      routes: pageRoutes,
+      initModules: page.init,
+      title: page.title
+    };
+  });
+  if (pageData.length > 0) {
+    try {
+      const { createRequire } = await import("module");
+      const require2 = createRequire(import.meta.url);
+      const bootPackageJson = require2.resolve(
+        "@wordpress/boot/package.json",
+        { paths: [ROOT_DIR] }
+      );
+      const wordpressPackagesDir = path.dirname(
+        path.dirname(bootPackageJson)
+      );
+      const externalPackages = [
+        "boot",
+        "route",
+        "theme",
+        "private-apis"
+      ];
+      for (const pkgName of externalPackages) {
+        const result = await bundlePackage(pkgName, {
+          sourceDir: wordpressPackagesDir,
+          handlePrefix: "wp",
+          scriptGlobal: "wp",
+          packageNamespace: "wordpress"
+        });
+        if (result && result.modules) {
+          modules.push(...result.modules);
+        }
+        if (result && result.scripts) {
+          scripts.push(...result.scripts);
+        }
+      }
+    } catch (error) {
+      console.warn(
+        "\n\u26A0\uFE0F  Warning: Could not bundle WordPress packages for pages:",
+        error.message
+      );
+    }
+  }
+  console.log("\n\u{1F4C4} Generating PHP registration files...\n");
+  const phpReplacements = await getPhpReplacements(
+    ROOT_DIR,
+    baseUrlExpression
+  );
+  await Promise.all([
+    generateMainIndexPhp(phpReplacements),
+    generateModuleRegistrationPhp(modules, phpReplacements),
+    generateScriptRegistrationPhp(scripts, phpReplacements),
+    generateStyleRegistrationPhp(styles, phpReplacements),
+    generateConstantsPhp(phpReplacements),
+    generateRoutesRegistry(routes, phpReplacements),
+    generateRoutesPhp(routes, phpReplacements),
+    generatePagesPhp(pageData, phpReplacements)
+  ]);
+  console.log("   \u2714 Generated build/modules.php");
+  console.log("   \u2714 Generated build/modules/index.php");
+  console.log("   \u2714 Generated build/scripts.php");
+  console.log("   \u2714 Generated build/scripts/index.php");
+  console.log("   \u2714 Generated build/styles.php");
+  console.log("   \u2714 Generated build/styles/index.php");
+  console.log("   \u2714 Generated build/version.php");
+  console.log("   \u2714 Generated build/routes.php");
+  if (pageData.length > 0) {
+    console.log("   \u2714 Generated build/pages.php");
+    for (const page of pageData) {
+      console.log(
+        `   \u2714 Generated build/pages/${page.slug}/page.php`
+      );
+      console.log(
+        `   \u2714 Generated build/pages/${page.slug}/page-wp-admin.php`
+      );
+    }
+  }
+  console.log("   \u2714 Generated build/index.php");
+  const totalTime = Date.now() - startTime;
+  console.log(
+    `
+\u{1F389} All packages built successfully! (${totalTime}ms total)`
+  );
+}
+async function watchMode() {
+  let isRebuilding = false;
+  const needsRebuild = /* @__PURE__ */ new Set();
+  const shortToFull = /* @__PURE__ */ new Map();
+  const fullToShort = /* @__PURE__ */ new Map();
+  const fullToPackageJson = /* @__PURE__ */ new Map();
+  for (const pkg of PACKAGES) {
+    const packageJson = getPackageInfoFromFile(
+      path.join(PACKAGES_DIR, pkg, "package.json")
+    );
+    shortToFull.set(pkg, packageJson.name);
+    fullToShort.set(packageJson.name, pkg);
+    fullToPackageJson.set(packageJson.name, packageJson);
+  }
+  const allRoutes = getAllRoutes(ROOT_DIR);
+  async function rebuildPackage(packageName) {
+    try {
+      const startTime = Date.now();
+      await transpilePackage(packageName);
+      await bundlePackage(packageName);
+      const buildTime = Date.now() - startTime;
+      console.log(`\u2705 ${packageName} (${buildTime}ms)`);
+      const fullName = shortToFull.get(packageName);
+      const affectedScripts = findScriptsToRebundle(
+        fullName,
+        fullToPackageJson
+      );
+      for (const fullScript of affectedScripts) {
+        const script = fullToShort.get(fullScript);
+        try {
+          const rebundleStartTime = Date.now();
+          await compileStyles(script);
+          await bundlePackage(script);
+          const rebundleTime = Date.now() - rebundleStartTime;
+          console.log(
+            `\u2705 ${script} (rebundled) (${rebundleTime}ms)`
+          );
+        } catch (error) {
+          console.log(
+            `\u274C ${script} - Rebundle error: ${error.message}`
+          );
+        }
+      }
+      const affectedRoutes = findRoutesToRebuild(
+        fullName,
+        fullToPackageJson,
+        ROOT_DIR,
+        allRoutes
+      );
+      for (const route of affectedRoutes) {
+        try {
+          const rebuildStartTime = Date.now();
+          await buildRoute(route);
+          const rebuildTime = Date.now() - rebuildStartTime;
+          console.log(
+            `\u2705 routes/${route} (rebuilt) (${rebuildTime}ms)`
+          );
+        } catch (error) {
+          console.log(
+            `\u274C routes/${route} - Rebuild error: ${error.message}`
+          );
+        }
+      }
+    } catch (error) {
+      console.log(`\u274C ${packageName} - Error: ${error.message}`);
+    }
+  }
+  async function rebuildRoute(routeName) {
+    try {
+      const startTime = Date.now();
+      await buildRoute(routeName);
+      const buildTime = Date.now() - startTime;
+      console.log(`\u2705 routes/${routeName} (${buildTime}ms)`);
+    } catch (error) {
+      console.log(
+        `\u274C routes/${routeName} - Error: ${error.message}`
+      );
+    }
+  }
+  async function processNextRebuild() {
+    if (needsRebuild.size === 0) {
+      isRebuilding = false;
+      return;
+    }
+    const itemsToRebuild = Array.from(needsRebuild);
+    needsRebuild.clear();
+    for (const item of itemsToRebuild) {
+      if (item.startsWith("route:")) {
+        const routeName = item.slice(6);
+        await rebuildRoute(routeName);
+      } else {
+        await rebuildPackage(item);
+      }
+    }
+    await processNextRebuild();
+  }
+  const watchPaths = PACKAGES.map(
+    (packageName) => path.join(PACKAGES_DIR, packageName, "src")
+  );
+  const watcher = chokidar.watch(watchPaths, {
+    ignored: [
+      "**/{__mocks__,__tests__,test,storybook,stories}/**",
+      "**/*.{spec,test}.{js,ts,tsx}",
+      "**/*.native.*"
+    ],
+    persistent: true,
+    ignoreInitial: true,
+    // Reduce file descriptor usage on macOS
+    useFsEvents: true,
+    depth: 10,
+    awaitWriteFinish: {
+      stabilityThreshold: 100,
+      pollInterval: 50
+    }
+  });
+  watcher.on("error", (error) => {
+    if (error.code === "EMFILE") {
+      console.error(
+        "\n\u274C Too many open files. Try increasing the limit:\n   Run: ulimit -n 10240\n   Or add to ~/.zshrc: ulimit -n 10240\n"
+      );
+      process.exit(1);
+    }
+    console.error("\u274C Watcher error:", error);
+  });
+  const handleFileChange = async (filename) => {
+    if (!isPackageSourceFile(filename)) {
+      return;
+    }
+    const packageName = getPackageName(filename);
+    if (!packageName) {
+      return;
+    }
+    if (isRebuilding) {
+      needsRebuild.add(packageName);
+      return;
+    }
+    isRebuilding = true;
+    await rebuildPackage(packageName);
+    await processNextRebuild();
+  };
+  watcher.on("change", handleFileChange);
+  watcher.on("add", handleFileChange);
+  watcher.on("unlink", handleFileChange);
+  if (allRoutes.length > 0) {
+    const routeWatchPaths = allRoutes.map(
+      (routeName) => path.join(ROOT_DIR, "routes", routeName)
+    );
+    const routeWatcher = chokidar.watch(routeWatchPaths, {
+      persistent: true,
+      ignoreInitial: true,
+      ignored: (filepath) => {
+        const basename = path.basename(filepath);
+        if (basename === ".content-entry.js") {
+          return true;
+        }
+        if (filepath.includes("node_modules")) {
+          return true;
+        }
+        return false;
+      },
+      useFsEvents: true,
+      depth: 10,
+      awaitWriteFinish: {
+        stabilityThreshold: 100,
+        pollInterval: 50
+      }
+    });
+    routeWatcher.on("error", (error) => {
+      console.error("\u274C Route watcher error:", error);
+    });
+    const handleRouteFileChange = async (filename) => {
+      const routeMatch = filename.match(/routes[/\\]([^/\\]+)[/\\]/);
+      if (!routeMatch) {
+        return;
+      }
+      const routeName = routeMatch[1];
+      if (!allRoutes.includes(routeName)) {
+        return;
+      }
+      if (isRebuilding) {
+        needsRebuild.add(`route:${routeName}`);
+        return;
+      }
+      isRebuilding = true;
+      await rebuildRoute(routeName);
+      await processNextRebuild();
+    };
+    routeWatcher.on("change", handleRouteFileChange);
+    routeWatcher.on("add", handleRouteFileChange);
+    routeWatcher.on("unlink", handleRouteFileChange);
+  }
+}
+async function main() {
+  const { values } = parseArgs({
+    options: {
+      watch: {
+        type: "boolean",
+        short: "w",
+        default: false
+      },
+      "base-url": {
+        type: "string",
+        default: "plugin_dir_url( __FILE__ )"
+      }
+    }
+  });
+  const baseUrlExpression = values["base-url"];
+  await buildAll(baseUrlExpression);
+  if (values.watch) {
+    console.log("\n\u{1F440} Watching for changes...\n");
+    await watchMode();
+  }
+}
+main().catch((error) => {
+  console.error("\u274C Build failed:", error);
+  process.exit(1);
+});
+//# sourceMappingURL=build.mjs.map