@ecopages/react 0.2.0-alpha.5 → 0.2.0-alpha.50

package/src/react-hmr-strategy.js

@@ -1,107 +1,45 @@
 import path from "node:path";
-import { pathToFileURL } from "node:url";
 import { HmrStrategy, HmrStrategyType } from "@ecopages/core/hmr/hmr-strategy";
-import { defaultBuildAdapter } from "@ecopages/core/build/build-adapter";
+import { RESOLVED_ASSETS_DIR } from "@ecopages/core/constants";
+import { rewriteRuntimeSpecifierAliases } from "@ecopages/core/build/runtime-specifier-aliases";
+import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
 import { FileNotFoundError, fileSystem } from "@ecopages/file-system";
 import { Logger } from "@ecopages/logger";
 import { injectHmrHandler } from "./utils/hmr-scripts.js";
 import { createClientGraphBoundaryPlugin } from "./utils/client-graph-boundary-plugin.js";
 import { collectPageDeclaredModules, collectPageDeclaredModulesFromModule } from "./utils/declared-modules.js";
+import { createReactMdxLoaderPlugin } from "./utils/react-mdx-loader-plugin.js";
+import { getReactClientGraphAllowSpecifiers } from "./utils/react-runtime-alias-map.js";
+import { createUseSyncExternalStoreShimPlugin } from "./utils/use-sync-external-store-shim-plugin.js";
 const appLogger = new Logger("[ReactHmrStrategy]");
 class ReactHmrStrategy extends HmrStrategy {
-  /**
-   * Creates a new React HMR strategy instance.
-   *
-   * @param context - The HMR context providing access to watched files, plugins, build directories,
-   *                  and the layouts directory for detecting layout file changes that require full
-   *                  page reloads instead of module-level HMR updates.
-   * @param pageMetadataCache - React-only cache of declared browser modules discovered during
-   *                            server rendering. This avoids re-importing unchanged page modules
-   *                            during save-time Fast Refresh rebuilds.
-   * @param mdxCompilerOptions - Optional MDX compiler options for processing .mdx files
-   * @param explicitGraphEnabled - Enables explicit graph mode for React HMR bundling.
-   * In explicit mode, HMR builds omit AST server-only stripping plugins in React paths.
-   */
-  constructor(context, pageMetadataCache, mdxCompilerOptions, explicitGraphEnabled = false) {
-    super();
-    this.context = context;
-    this.pageMetadataCache = pageMetadataCache;
-    this.explicitGraphEnabled = explicitGraphEnabled;
-    this.mdxCompilerOptions = mdxCompilerOptions;
-  }
   type = HmrStrategyType.INTEGRATION;
   mdxCompilerOptions;
-  knownEntrypoints = /* @__PURE__ */ new Set();
+  ownedTemplateExtensions;
+  allTemplateExtensions;
   async importNodePageModule(entrypointPath) {
-    const srcDir = this.context.getSrcDir();
-    const rootDir = path.dirname(srcDir);
-    const outdir = path.join(path.resolve(this.context.getDistDir(), "..", ".."), ".server-modules");
-    const fileBaseName = path.basename(entrypointPath, path.extname(entrypointPath));
-    const fileHash = fileSystem.hash(entrypointPath);
-    const outputFileName = `${fileBaseName}-${fileHash}.js`;
-    const buildResult = await defaultBuildAdapter.build({
-      entrypoints: [entrypointPath],
-      root: rootDir,
-      outdir,
-      target: "node",
-      format: "esm",
-      sourcemap: "none",
-      splitting: false,
-      minify: false,
-      naming: outputFileName
-    });
-    if (!buildResult.success) {
-      const details = buildResult.logs.map((log) => log.message).join(" | ");
-      throw new Error(`Error transpiling React HMR page module: ${details}`);
-    }
-    const preferredOutputPath = path.join(outdir, outputFileName);
-    const compiledOutput = buildResult.outputs.find((output) => output.path === preferredOutputPath)?.path ?? buildResult.outputs.find((output) => output.path.endsWith(".js"))?.path;
-    if (!compiledOutput) {
-      throw new Error(`No transpiled output generated for React HMR page module: ${entrypointPath}`);
-    }
-    return await import(pathToFileURL(compiledOutput).href);
+    return await this.context.importServerModule(entrypointPath);
   }
   /**
-   * Redirects `use-sync-external-store/shim` imports to React's built-in
-   * `useSyncExternalStore`.
+   * Creates a new React HMR strategy instance.
    *
-   * Libraries like React Aria still list `use-sync-external-store` as a
-   * dependency to support React 16/17. On React 18+ the `/shim` export is
-   * already a pass-through, but without this plugin esbuild would bundle
-   * the full CJS shim (including `process.env` branching) into the browser
-   * bundle. The plugin short-circuits the resolution so only a single clean
-   * ESM re-export is emitted.
+   * @param options - React HMR runtime services and behavior flags.
    */
-  createUseSyncExternalStoreShimPlugin() {
-    return {
-      name: "react-hmr-use-sync-external-store-shim",
-      setup(build) {
-        build.onResolve({ filter: /^use-sync-external-store\/shim(?:\/index\.js)?$/ }, () => ({
-          path: "use-sync-external-store/shim",
-          namespace: "ecopages-react-hmr-shim"
-        }));
-        build.onLoad(
-          { filter: /^use-sync-external-store\/shim$/, namespace: "ecopages-react-hmr-shim" },
-          () => ({
-            contents: "export { useSyncExternalStore } from 'react';",
-            loader: "js"
-          })
-        );
-        build.onLoad({ filter: /[\\/]use-sync-external-store[\\/]shim[\\/]index\.js$/ }, () => ({
-          contents: "export { useSyncExternalStore } from 'react';",
-          loader: "js"
-        }));
-        build.onLoad(
-          {
-            filter: /[\\/]use-sync-external-store[\\/]cjs[\\/]use-sync-external-store-shim\.development\.js$/
-          },
-          () => ({
-            contents: "export { useSyncExternalStore } from 'react';",
-            loader: "js"
-          })
-        );
-      }
-    };
+  context;
+  pageMetadataCache;
+  explicitGraphEnabled;
+  runtimeAliasMap;
+  constructor(options) {
+    super();
+    this.context = options.context;
+    this.pageMetadataCache = options.pageMetadataCache;
+    this.runtimeAliasMap = options.runtimeAliasMap;
+    this.explicitGraphEnabled = options.explicitGraphEnabled ?? false;
+    this.mdxCompilerOptions = options.mdxCompilerOptions;
+    this.ownedTemplateExtensions = new Set(options.ownedTemplateExtensions ?? [".tsx"]);
+    this.allTemplateExtensions = [...options.allTemplateExtensions ?? [".tsx"]].sort(
+      (a, b) => b.length - a.length
+    );
   }
   /**
    * Returns build plugins for React HMR bundling.
@@ -110,30 +48,59 @@ class ReactHmrStrategy extends HmrStrategy {
    * (including `node:*`) from breaking the browser bundle.
    */
   getBuildPlugins(declaredModules) {
-    const allowSpecifiers = [
-      "@ecopages/core",
-      "react",
-      "react-dom",
-      "react/jsx-runtime",
-      "react/jsx-dev-runtime",
-      "react-dom/client",
-      ...Array.from(this.context.getSpecifierMap().keys())
-    ];
+    const allowSpecifiers = getReactClientGraphAllowSpecifiers(this.runtimeAliasMap.keys());
+    const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(this.runtimeAliasMap, {
+      name: "react-hmr-runtime-specifier-alias"
+    });
     return [
       createClientGraphBoundaryPlugin({
         absWorkingDir: path.dirname(this.context.getSrcDir()),
         alwaysAllowSpecifiers: allowSpecifiers,
         declaredModules
       }),
+      ...runtimeAliasPlugin ? [runtimeAliasPlugin] : [],
       ...this.context.getPlugins(),
-      this.createUseSyncExternalStoreShimPlugin()
+      createUseSyncExternalStoreShimPlugin({
+        name: "react-hmr-use-sync-external-store-shim",
+        namespace: "ecopages-react-hmr-shim"
+      })
     ];
   }
   isReactEntrypoint(filePath) {
-    if (filePath.endsWith(".tsx")) {
+    if (filePath.endsWith(".mdx")) {
+      return this.mdxCompilerOptions !== void 0;
+    }
+    if (!filePath.endsWith(".tsx")) {
+      return false;
+    }
+    const templateExtension = this.resolveTemplateExtension(filePath);
+    if (templateExtension && templateExtension !== ".tsx") {
+      return this.ownedTemplateExtensions.has(templateExtension);
+    }
+    if (!this.isRouteTemplate(filePath)) {
       return true;
     }
-    return filePath.endsWith(".mdx") && this.mdxCompilerOptions !== void 0;
+    if (!templateExtension) {
+      return false;
+    }
+    return this.ownedTemplateExtensions.has(templateExtension);
+  }
+  /**
+   * Returns true when a route file uses a compound extension like `page.foo.tsx`.
+   *
+   * @remarks
+   * React integration owns plain `.tsx` route templates. Compound extensions in
+   * pages/layouts are integration-specific route templates and should not be
+   * claimed by React HMR strategy.
+   */
+  isRouteTemplate(filePath) {
+    return filePath.startsWith(this.context.getPagesDir()) || filePath.startsWith(this.context.getLayoutsDir());
+  }
+  resolveTemplateExtension(filePath) {
+    return this.allTemplateExtensions.find((extension) => filePath.endsWith(extension));
+  }
+  ownsWatchedEntrypoint(filePath) {
+    return this.pageMetadataCache.ownsEntrypoint(filePath);
   }
   /**
    * Determines if the file is a React/MDX entrypoint that's registered for HMR.
@@ -147,6 +114,9 @@ class ReactHmrStrategy extends HmrStrategy {
     if (watchedFiles.size === 0) {
       return false;
     }
+    if (watchedFiles.has(filePath)) {
+      return this.ownsWatchedEntrypoint(filePath);
+    }
     return this.isReactEntrypoint(filePath);
   }
   /**
@@ -163,6 +133,96 @@ class ReactHmrStrategy extends HmrStrategy {
   isLayoutFile(filePath) {
     return filePath.startsWith(this.context.getLayoutsDir());
   }
+  isPageEntrypoint(filePath) {
+    return filePath.startsWith(this.context.getPagesDir()) && this.isReactEntrypoint(filePath);
+  }
+  getEntrypointOutput(entrypointPath) {
+    const srcDir = this.context.getSrcDir();
+    const relativePath = path.relative(srcDir, entrypointPath);
+    const relativePathJs = relativePath.replace(/\.(tsx?|jsx?|mdx)$/, ".js");
+    const encodedPathJs = this.encodeDynamicSegments(relativePathJs);
+    const outputPath = path.join(this.context.getDistDir(), encodedPathJs);
+    const outputUrl = `/${path.join(RESOLVED_ASSETS_DIR, "_hmr", encodedPathJs).split(path.sep).join("/")}`;
+    return { outputPath, outputUrl };
+  }
+  getGroupedTempOutputPattern(entrypointPath) {
+    const srcDir = this.context.getSrcDir();
+    const relativePath = path.relative(srcDir, entrypointPath);
+    const relativePathJs = relativePath.replace(/\.(tsx?|jsx?|mdx)$/, ".js");
+    return {
+      outputDir: path.join(this.context.getDistDir(), path.dirname(relativePathJs)),
+      outputBaseName: path.basename(relativePathJs, ".js")
+    };
+  }
+  async collectReactPageBuildTargets() {
+    const pagesDir = this.context.getPagesDir();
+    const scannedFiles = await fileSystem.glob(
+      this.allTemplateExtensions.map((extension) => `**/*${extension}`),
+      { cwd: pagesDir }
+    );
+    const targets = /* @__PURE__ */ new Map();
+    for (const file of scannedFiles) {
+      if (file.includes(".ecopages-node.")) {
+        continue;
+      }
+      const entrypointPath = path.join(pagesDir, file);
+      if (!this.isPageEntrypoint(entrypointPath)) {
+        continue;
+      }
+      this.pageMetadataCache.markOwnedEntrypoint(entrypointPath);
+      targets.set(entrypointPath, {
+        entrypointPath,
+        outputUrl: this.getEntrypointOutput(entrypointPath).outputUrl
+      });
+    }
+    return Array.from(targets.values()).sort(
+      (left, right) => left.entrypointPath.localeCompare(right.entrypointPath)
+    );
+  }
+  getRequestedTargets(changedFilePath, changedEntrypointOutput, watchedFiles) {
+    const requestedEntries = changedEntrypointOutput ? [[changedFilePath, changedEntrypointOutput]] : Array.from(watchedFiles.entries());
+    return requestedEntries.map(([entrypointPath, outputUrl]) => ({
+      entrypointPath,
+      outputUrl
+    }));
+  }
+  /**
+   * Expands one HMR request into the full React page build cohort when needed.
+   *
+   * @remarks
+   * Page and layout changes need one shared rebuild pass so sibling routes keep
+   * a consistent client module graph. Non-page changes that do not touch a page
+   * cohort can stay scoped to the originally requested targets.
+   */
+  async resolveBuildTargets(requestedTargets, changedFilePath) {
+    const requestedPageTargets = requestedTargets.filter((target) => this.isPageEntrypoint(target.entrypointPath));
+    const shouldGroupPageBuilds = this.isLayoutFile(changedFilePath) || requestedPageTargets.length > 0;
+    if (!shouldGroupPageBuilds) {
+      return [];
+    }
+    const groupedTargets = new Map(requestedPageTargets.map((target) => [target.entrypointPath, target]));
+    for (const target of await this.collectReactPageBuildTargets()) {
+      groupedTargets.set(target.entrypointPath, target);
+    }
+    return Array.from(groupedTargets.values()).sort(
+      (left, right) => left.entrypointPath.localeCompare(right.entrypointPath)
+    );
+  }
+  partitionBuildTargets(requestedTargets, groupedPageTargets) {
+    if (groupedPageTargets.length === 0) {
+      return {
+        pageTargets: [],
+        nonPageTargets: requestedTargets
+      };
+    }
+    const groupedPageEntrypoints = new Set(groupedPageTargets.map((target) => target.entrypointPath));
+    return {
+      pageTargets: groupedPageTargets,
+      nonPageTargets: requestedTargets.filter(
+        (target) => !groupedPageEntrypoints.has(target.entrypointPath) && !this.isPageEntrypoint(target.entrypointPath)
+      )
+    };
+  }
   /**
    * Processes a React file change by rebuilding all React entrypoints.
    *
@@ -185,16 +245,40 @@ class ReactHmrStrategy extends HmrStrategy {
     if (isLayout) {
       appLogger.debug(`Detected layout file change: ${_filePath}`);
     }
-    const entrypointsToBuild = !this.knownEntrypoints.has(_filePath) && watchedFiles.has(_filePath) ? [[_filePath, watchedFiles.get(_filePath)]] : watchedFiles.entries();
-    this.knownEntrypoints.add(_filePath);
+    const changedEntrypointOutput = watchedFiles.get(_filePath);
+    if (changedEntrypointOutput && !this.ownsWatchedEntrypoint(_filePath)) {
+      appLogger.debug(`Skipping non-React watched entrypoint: ${_filePath}`);
+      return { type: "none" };
+    }
+    const requestedTargets = this.getRequestedTargets(_filePath, changedEntrypointOutput, watchedFiles);
+    const groupedPageTargets = await this.resolveBuildTargets(requestedTargets, _filePath);
+    const { pageTargets, nonPageTargets } = this.partitionBuildTargets(requestedTargets, groupedPageTargets);
     const updates = [];
-    for (const [entrypoint, outputUrl] of entrypointsToBuild) {
-      if (!this.isReactEntrypoint(entrypoint)) {
+    const requestedOutputUrls = new Set(requestedTargets.map((target) => target.outputUrl));
+    if (pageTargets.length > 1) {
+      appLogger.debug(`Bundling ${pageTargets.length} React page entrypoints together`);
+      const rebuiltOutputs = await this.bundleReactEntrypoints(pageTargets);
+      for (const outputUrl of rebuiltOutputs) {
+        if (requestedOutputUrls.has(outputUrl)) {
+          updates.push(outputUrl);
+        }
+      }
+    } else {
+      for (const { entrypointPath, outputUrl } of pageTargets) {
+        appLogger.debug(`Bundling ${entrypointPath}`);
+        const success = await this.bundleReactEntrypoint(entrypointPath, outputUrl);
+        if (success && requestedOutputUrls.has(outputUrl)) {
+          updates.push(outputUrl);
+        }
+      }
+    }
+    for (const { entrypointPath, outputUrl } of nonPageTargets) {
+      if (!this.isReactEntrypoint(entrypointPath)) {
         continue;
       }
-      appLogger.debug(`Bundling ${entrypoint}`);
-      const success = await this.bundleReactEntrypoint(entrypoint, outputUrl);
-      if (success) {
+      appLogger.debug(`Bundling ${entrypointPath}`);
+      const success = await this.bundleReactEntrypoint(entrypointPath, outputUrl);
+      if (success && requestedOutputUrls.has(outputUrl)) {
         updates.push(outputUrl);
       }
     }
@@ -233,29 +317,21 @@ class ReactHmrStrategy extends HmrStrategy {
   async bundleReactEntrypoint(entrypointPath, outputUrl) {
     try {
       const isMdx = entrypointPath.endsWith(".mdx");
-      const srcDir = this.context.getSrcDir();
-      const relativePath = path.relative(srcDir, entrypointPath);
-      const relativePathJs = relativePath.replace(/\.(tsx?|jsx?|mdx)$/, ".js");
-      const encodedPathJs = this.encodeDynamicSegments(relativePathJs);
-      const outputPath = path.join(this.context.getDistDir(), encodedPathJs);
+      const { outputPath } = this.getEntrypointOutput(entrypointPath);
       const tempDir = path.dirname(outputPath);
       const declaredModules = this.pageMetadataCache.getDeclaredModules(entrypointPath) ? this.pageMetadataCache.getDeclaredModules(entrypointPath) : isMdx ? await collectPageDeclaredModules(entrypointPath) : collectPageDeclaredModulesFromModule(await this.importNodePageModule(entrypointPath));
       const plugins = this.getBuildPlugins(declaredModules);
       if (isMdx && this.mdxCompilerOptions) {
-        const { createReactMdxLoaderPlugin } = await import("./utils/react-mdx-loader-plugin.js");
         const mdxPlugin = createReactMdxLoaderPlugin(this.mdxCompilerOptions);
         plugins.unshift(mdxPlugin);
       }
-      const result = await defaultBuildAdapter.build({
+      const result = await this.context.getBrowserBundleService().bundle({
+        profile: "hmr-entrypoint",
         entrypoints: [entrypointPath],
         outdir: tempDir,
         naming: `[name].[hash].tmp`,
-        target: "browser",
-        format: "esm",
-        sourcemap: "none",
         plugins,
-        minify: false,
-        external: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom/client"]
+        minify: false
       });
       if (!result.success) {
         appLogger.error(`Failed to build ${entrypointPath}:`, result.logs);
@@ -266,13 +342,88 @@ class ReactHmrStrategy extends HmrStrategy {
         appLogger.error(`No output file generated for ${entrypointPath}`);
         return false;
       }
-      const processed = await this.processOutput(tempFile, outputPath, outputUrl);
+      const resolvedTempFile = await this.resolveTempOutputPath(tempFile);
+      if (!resolvedTempFile) {
+        appLogger.debug(`Skipping stale temp output for ${outputUrl}: ${tempFile}`);
+        return false;
+      }
+      const processed = await this.processOutput(resolvedTempFile, outputPath, outputUrl);
       return processed;
     } catch (error) {
       appLogger.error(`Error bundling ${entrypointPath}:`, error);
       return false;
     }
   }
+  async bundleReactEntrypoints(entrypoints) {
+    try {
+      const declaredModules = /* @__PURE__ */ new Set();
+      let shouldEnableMdx = false;
+      for (const { entrypointPath } of entrypoints) {
+        const entrypointDeclaredModules = this.pageMetadataCache.getDeclaredModules(entrypointPath) ? this.pageMetadataCache.getDeclaredModules(entrypointPath) : entrypointPath.endsWith(".mdx") ? await collectPageDeclaredModules(entrypointPath) : collectPageDeclaredModulesFromModule(await this.importNodePageModule(entrypointPath));
+        this.pageMetadataCache.setDeclaredModules(entrypointPath, entrypointDeclaredModules);
+        for (const declaredModule of entrypointDeclaredModules) {
+          declaredModules.add(declaredModule);
+        }
+        if (entrypointPath.endsWith(".mdx")) {
+          shouldEnableMdx = true;
+        }
+      }
+      const plugins = this.getBuildPlugins([...declaredModules]);
+      if (shouldEnableMdx && this.mdxCompilerOptions) {
+        plugins.unshift(createReactMdxLoaderPlugin(this.mdxCompilerOptions));
+      }
+      const result = await this.context.getBrowserBundleService().bundle({
+        profile: "hmr-entrypoint",
+        entrypoints: entrypoints.map(({ entrypointPath }) => entrypointPath),
+        outdir: this.context.getDistDir(),
+        outbase: this.context.getSrcDir(),
+        naming: "[dir]/[name].[hash].tmp",
+        splitting: true,
+        plugins,
+        minify: false
+      });
+      if (!result.success) {
+        appLogger.error(`Failed to build grouped React entrypoints:`, result.logs);
+        return [];
+      }
+      const updatedOutputs = [];
+      for (const { entrypointPath, outputUrl } of entrypoints) {
+        const { outputPath } = this.getEntrypointOutput(entrypointPath);
+        const { outputDir, outputBaseName } = this.getGroupedTempOutputPattern(entrypointPath);
+        const tempOutput = result.outputs.find((output) => {
+          return path.dirname(output.path) === outputDir && path.basename(output.path).startsWith(`${outputBaseName}.`) && path.basename(output.path).includes(".tmp");
+        })?.path;
+        const resolvedTempOutput = tempOutput ? await this.resolveTempOutputPath(tempOutput) : await this.resolveTempOutputPath(path.join(outputDir, `${outputBaseName}.[hash].tmp.js`));
+        if (!resolvedTempOutput) {
+          appLogger.debug(`Missing grouped temp output for ${outputUrl}`);
+          continue;
+        }
+        const processed = await this.processOutput(resolvedTempOutput, outputPath, outputUrl);
+        if (processed) {
+          updatedOutputs.push(outputUrl);
+        }
+      }
+      return updatedOutputs;
+    } catch (error) {
+      appLogger.error(`Error bundling grouped React entrypoints:`, error);
+      return [];
+    }
+  }
+  async resolveTempOutputPath(tempPath) {
+    if (fileSystem.exists(tempPath)) {
+      return tempPath;
+    }
+    if (!tempPath.includes("[hash]")) {
+      return tempPath;
+    }
+    const directory = path.dirname(tempPath);
+    const pattern = path.basename(tempPath).replaceAll("[hash]", "*");
+    const matches = await fileSystem.glob([pattern], { cwd: directory });
+    if (matches.length === 0) {
+      return null;
+    }
+    return path.isAbsolute(matches[0]) ? matches[0] : path.join(directory, matches[0]);
+  }
   /**
    * Encodes dynamic route segments (brackets) in file paths.
    * Converts `[slug]` to `_slug_` to avoid filesystem issues.
@@ -280,8 +431,30 @@ class ReactHmrStrategy extends HmrStrategy {
   encodeDynamicSegments(filepath) {
     return filepath.replace(/\[([^\]]+)\]/g, "_$1_");
   }
+  rewriteChunkImportUrls(code) {
+    const hmrChunkBaseUrl = `/${path.join(RESOLVED_ASSETS_DIR, "_hmr").split(path.sep).join("/")}`;
+    return code.replace(/(['"])(?:\.\.\/)+(chunk-[^'"]+\.js)\1/g, (_match, quote, chunkFile) => {
+      return `${quote}${hmrChunkBaseUrl}/${chunkFile}${quote}`;
+    });
+  }
+  isMissingTempOutputError(error) {
+    if (error instanceof FileNotFoundError) {
+      return true;
+    }
+    if (!(error instanceof Error)) {
+      return false;
+    }
+    if (error.message.includes("not found") || error.message.includes("ENOENT")) {
+      return true;
+    }
+    const errorCause = error.cause;
+    if (errorCause instanceof FileNotFoundError) {
+      return true;
+    }
+    return typeof errorCause === "object" && errorCause !== null && "code" in errorCause && errorCause.code === "ENOENT";
+  }
   /**
-   * Processes bundled output by replacing specifiers and injecting HMR handler.
+   * Processes bundled output and injects the React HMR handler.
    * Writes to temp file first, then renames atomically to avoid conflicts.
    *
    * @param tempPath - Path to the temporary bundled file
@@ -296,7 +469,8 @@ class ReactHmrStrategy extends HmrStrategy {
     }
     try {
       let code = await fileSystem.readFile(tempPath);
-      code = this.replaceBareSpecifiers(code);
+      code = rewriteRuntimeSpecifierAliases(code, this.runtimeAliasMap);
+      code = this.rewriteChunkImportUrls(code);
       code = injectHmrHandler(code);
       await fileSystem.writeAsync(finalPath, code);
       await fileSystem.removeAsync(tempPath).catch(() => {
@@ -304,7 +478,7 @@ class ReactHmrStrategy extends HmrStrategy {
       appLogger.debug(`Processed ${url} with HMR handler`);
       return true;
     } catch (error) {
-      if (error instanceof FileNotFoundError || error instanceof Error && error.message.includes("not found") || error instanceof Error && "code" in error && error.code === "ENOENT") {
+      if (this.isMissingTempOutputError(error)) {
         appLogger.debug(`Skipping stale temp output for ${url}: ${tempPath}`);
         await fileSystem.removeAsync(tempPath).catch(() => {
         });
@@ -316,27 +490,6 @@ class ReactHmrStrategy extends HmrStrategy {
       return false;
     }
   }
-  /**
-   * Replaces bare specifiers with runtime URLs.
-   *
-   * Handles both static imports and dynamic imports.
-   *
-   * @param code - The bundled code to transform
-   * @returns The transformed code with runtime URLs
-   */
-  replaceBareSpecifiers(code) {
-    const specifierMap = this.context.getSpecifierMap();
-    if (specifierMap.size === 0) {
-      return code;
-    }
-    let result = code;
-    for (const [bareSpec, runtimeUrl] of specifierMap.entries()) {
-      const escaped = bareSpec.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      result = result.replace(new RegExp(`from\\s*["']${escaped}["']`, "g"), `from "${runtimeUrl}"`);
-      result = result.replace(new RegExp(`import\\(["']${escaped}["']\\)`, "g"), `import("${runtimeUrl}")`);
-    }
-    return result;
-  }
 }
 export {
   ReactHmrStrategy