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

package/src/react-hmr-strategy.js

@@ -1,14 +1,22 @@
 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 { 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 { getReactClientGraphAllowSpecifiers } from "./utils/react-runtime-specifier-map.js";
+import { createUseSyncExternalStoreShimPlugin } from "./utils/use-sync-external-store-shim-plugin.js";
 const appLogger = new Logger("[ReactHmrStrategy]");
 class ReactHmrStrategy extends HmrStrategy {
+  type = HmrStrategyType.INTEGRATION;
+  mdxCompilerOptions;
+  ownedTemplateExtensions;
+  allTemplateExtensions;
+  async importNodePageModule(entrypointPath) {
+    return await this.context.importServerModule(entrypointPath);
+  }
   /**
    * Creates a new React HMR strategy instance.
    *
@@ -22,86 +30,17 @@ class ReactHmrStrategy extends HmrStrategy {
    * @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) {
+  context;
+  pageMetadataCache;
+  explicitGraphEnabled;
+  constructor(context, pageMetadataCache, mdxCompilerOptions, ownedTemplateExtensions = [".tsx"], allTemplateExtensions = [".tsx"], explicitGraphEnabled = false) {
     super();
     this.context = context;
     this.pageMetadataCache = pageMetadataCache;
     this.explicitGraphEnabled = explicitGraphEnabled;
     this.mdxCompilerOptions = mdxCompilerOptions;
-  }
-  type = HmrStrategyType.INTEGRATION;
-  mdxCompilerOptions;
-  knownEntrypoints = /* @__PURE__ */ new Set();
-  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);
-  }
-  /**
-   * Redirects `use-sync-external-store/shim` imports to React's built-in
-   * `useSyncExternalStore`.
-   *
-   * 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.
-   */
-  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"
-          })
-        );
-      }
-    };
+    this.ownedTemplateExtensions = new Set(ownedTemplateExtensions);
+    this.allTemplateExtensions = [...allTemplateExtensions].sort((a, b) => b.length - a.length);
   }
   /**
    * Returns build plugins for React HMR bundling.
@@ -110,30 +49,53 @@ 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.context.getSpecifierMap().keys());
+    const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(this.context.getSpecifierMap(), {
+      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;
+    }
+    if (!this.isRouteTemplate(filePath)) {
       return true;
     }
-    return filePath.endsWith(".mdx") && this.mdxCompilerOptions !== void 0;
+    const templateExtension = this.resolveTemplateExtension(filePath);
+    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));
   }
   /**
    * Determines if the file is a React/MDX entrypoint that's registered for HMR.
@@ -185,8 +147,8 @@ 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);
+    const entrypointsToBuild = changedEntrypointOutput ? [[_filePath, changedEntrypointOutput]] : watchedFiles.entries();
     const updates = [];
     for (const [entrypoint, outputUrl] of entrypointsToBuild) {
       if (!this.isReactEntrypoint(entrypoint)) {
@@ -246,16 +208,13 @@ class ReactHmrStrategy extends HmrStrategy {
         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);
@@ -281,7 +240,7 @@ class ReactHmrStrategy extends HmrStrategy {
     return filepath.replace(/\[([^\]]+)\]/g, "_$1_");
   }
   /**
-   * 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 +255,6 @@ class ReactHmrStrategy extends HmrStrategy {
     }
     try {
       let code = await fileSystem.readFile(tempPath);
-      code = this.replaceBareSpecifiers(code);
       code = injectHmrHandler(code);
       await fileSystem.writeAsync(finalPath, code);
       await fileSystem.removeAsync(tempPath).catch(() => {
@@ -316,27 +274,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

package/src/react-hmr-strategy.ts

@@ -8,18 +8,19 @@
  */
 
 import path from 'node:path';
-import { pathToFileURL } from 'node:url';
 
 import { HmrStrategy, HmrStrategyType, type HmrAction } from '@ecopages/core/hmr/hmr-strategy';
-import { defaultBuildAdapter } from '@ecopages/core/build/build-adapter';
 import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import { createRuntimeSpecifierAliasPlugin } from '@ecopages/core/build/runtime-specifier-alias-plugin';
 import { FileNotFoundError, fileSystem } from '@ecopages/file-system';
 import { Logger } from '@ecopages/logger';
-import type { DefaultHmrContext, EcoComponentConfig } from '@ecopages/core';
+import type { DefaultHmrContext } from '@ecopages/core';
 import type { CompileOptions } from '@mdx-js/mdx';
 import { injectHmrHandler } from './utils/hmr-scripts.ts';
 import { createClientGraphBoundaryPlugin } from './utils/client-graph-boundary-plugin.ts';
 import { collectPageDeclaredModules, collectPageDeclaredModulesFromModule } from './utils/declared-modules.ts';
+import { getReactClientGraphAllowSpecifiers } from './utils/react-runtime-specifier-map.ts';
+import { createUseSyncExternalStoreShimPlugin } from './utils/use-sync-external-store-shim-plugin.ts';
 import type { ReactHmrPageMetadataCache } from './services/react-hmr-page-metadata-cache.ts';
 
 const appLogger = new Logger('[ReactHmrStrategy]');
@@ -33,9 +34,11 @@ const appLogger = new Logger('[ReactHmrStrategy]');
  * The processing steps are:
  * 1. Check if any React entrypoints are registered
  * 2. Rebuild all React entrypoints (the changed file could be a dependency)
- * 3. Replace bare specifiers with runtime URLs
- * 4. Inject HMR acceptance handler
- * 5. Broadcast update events for each rebuilt entrypoint
+ * 3. Rebuild browser output through the shared browser bundle service while
+ *    preserving React-specific runtime aliases and graph policy
+ * 4. Read page config metadata through the shared server-module loading path
+ * 5. Inject HMR acceptance handler
+ * 6. Broadcast update events for each rebuilt entrypoint
  *
  * @remarks
  * This strategy has higher priority than generic JsHmrStrategy, allowing it
@@ -63,95 +66,13 @@ const appLogger = new Logger('[ReactHmrStrategy]');
 export class ReactHmrStrategy extends HmrStrategy {
 	readonly type = HmrStrategyType.INTEGRATION;
 	private mdxCompilerOptions?: CompileOptions;
-	private readonly knownEntrypoints = new Set<string>();
-
+	private readonly ownedTemplateExtensions: Set<string>;
+	private readonly allTemplateExtensions: string[];
 	private async importNodePageModule(entrypointPath: string): Promise<{
-		default?: { config?: EcoComponentConfig };
-		config?: EcoComponentConfig;
+		default?: { config?: Record<string, unknown> };
+		config?: Record<string, unknown>;
 	}> {
-		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)) as {
-			default?: { config?: EcoComponentConfig };
-			config?: EcoComponentConfig;
-		};
-	}
-
-	/**
-	 * Redirects `use-sync-external-store/shim` imports to React's built-in
-	 * `useSyncExternalStore`.
-	 *
-	 * 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.
-	 */
-	private createUseSyncExternalStoreShimPlugin(): EcoBuildPlugin {
-		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',
-					}),
-				);
-			},
-		};
+		return await this.context.importServerModule(entrypointPath);
 	}
 
 	/**
@@ -167,14 +88,25 @@ export class ReactHmrStrategy extends HmrStrategy {
 	 * @param explicitGraphEnabled - Enables explicit graph mode for React HMR bundling.
 	 * In explicit mode, HMR builds omit AST server-only stripping plugins in React paths.
 	 */
+	private context: DefaultHmrContext;
+	private pageMetadataCache: ReactHmrPageMetadataCache;
+	private explicitGraphEnabled: boolean;
+
 	constructor(
-		private context: DefaultHmrContext,
-		private pageMetadataCache: ReactHmrPageMetadataCache,
+		context: DefaultHmrContext,
+		pageMetadataCache: ReactHmrPageMetadataCache,
 		mdxCompilerOptions?: CompileOptions,
-		private explicitGraphEnabled = false,
+		ownedTemplateExtensions: string[] = ['.tsx'],
+		allTemplateExtensions: string[] = ['.tsx'],
+		explicitGraphEnabled = false,
 	) {
 		super();
+		this.context = context;
+		this.pageMetadataCache = pageMetadataCache;
+		this.explicitGraphEnabled = explicitGraphEnabled;
 		this.mdxCompilerOptions = mdxCompilerOptions;
+		this.ownedTemplateExtensions = new Set(ownedTemplateExtensions);
+		this.allTemplateExtensions = [...allTemplateExtensions].sort((a, b) => b.length - a.length);
 	}
 
 	/**
@@ -184,15 +116,11 @@ export class ReactHmrStrategy extends HmrStrategy {
 	 * (including `node:*`) from breaking the browser bundle.
 	 */
 	private getBuildPlugins(declaredModules?: string[]): EcoBuildPlugin[] {
-		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.context.getSpecifierMap().keys());
+
+		const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(this.context.getSpecifierMap(), {
+			name: 'react-hmr-runtime-specifier-alias',
+		});
 
 		return [
 			createClientGraphBoundaryPlugin({
@@ -200,17 +128,50 @@ export class ReactHmrStrategy extends HmrStrategy {
 				alwaysAllowSpecifiers: allowSpecifiers,
 				declaredModules,
 			}),
+			...(runtimeAliasPlugin ? [runtimeAliasPlugin] : []),
 			...this.context.getPlugins(),
-			this.createUseSyncExternalStoreShimPlugin(),
+			createUseSyncExternalStoreShimPlugin({
+				name: 'react-hmr-use-sync-external-store-shim',
+				namespace: 'ecopages-react-hmr-shim',
+			}),
 		];
 	}
 
 	private isReactEntrypoint(filePath: string): boolean {
-		if (filePath.endsWith('.tsx')) {
+		if (filePath.endsWith('.mdx')) {
+			return this.mdxCompilerOptions !== undefined;
+		}
+
+		if (!filePath.endsWith('.tsx')) {
+			return false;
+		}
+
+		if (!this.isRouteTemplate(filePath)) {
 			return true;
 		}
 
-		return filePath.endsWith('.mdx') && this.mdxCompilerOptions !== undefined;
+		const templateExtension = this.resolveTemplateExtension(filePath);
+		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.
+	 */
+	private isRouteTemplate(filePath: string): boolean {
+		return filePath.startsWith(this.context.getPagesDir()) || filePath.startsWith(this.context.getLayoutsDir());
+	}
+
+	private resolveTemplateExtension(filePath: string): string | undefined {
+		return this.allTemplateExtensions.find((extension) => filePath.endsWith(extension));
 	}
 
 	/**
@@ -269,11 +230,10 @@ export class ReactHmrStrategy extends HmrStrategy {
 			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);
+		const entrypointsToBuild = changedEntrypointOutput
+			? [[_filePath, changedEntrypointOutput]]
+			: watchedFiles.entries();
 
 		const updates: string[] = [];
 		for (const [entrypoint, outputUrl] of entrypointsToBuild) {
@@ -346,16 +306,13 @@ export class ReactHmrStrategy extends HmrStrategy {
 				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'],
 			});
 
 			if (!result.success) {
@@ -386,7 +343,7 @@ export class ReactHmrStrategy extends HmrStrategy {
 	}
 
 	/**
-	 * 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
@@ -403,7 +360,6 @@ export class ReactHmrStrategy extends HmrStrategy {
 		try {
 			let code = await fileSystem.readFile(tempPath);
 
-			code = this.replaceBareSpecifiers(code);
 			code = injectHmrHandler(code);
 
 			await fileSystem.writeAsync(finalPath, code);
@@ -427,29 +383,4 @@ export 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
-	 */
-	private replaceBareSpecifiers(code: string): string {
-		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;
-	}
 }