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

package/src/services/react-bundle.service.ts

@@ -8,6 +8,13 @@
  */
 
 import { createClientGraphBoundaryPlugin } from '../utils/client-graph-boundary-plugin.ts';
+import {
+	buildReactRuntimeSpecifierMap,
+	getReactClientGraphAllowSpecifiers,
+	getReactRuntimeExternalSpecifiers,
+} from '../utils/react-runtime-specifier-map.ts';
+import { createUseSyncExternalStoreShimPlugin } from '../utils/use-sync-external-store-shim-plugin.ts';
+import { createRuntimeSpecifierAliasPlugin } from '@ecopages/core/build/runtime-specifier-alias-plugin';
 import type { ReactRouterAdapter } from '../router-adapter.ts';
 import type { CompileOptions } from '@mdx-js/mdx';
 import { ReactRuntimeBundleService, type ReactRuntimeImports } from './react-runtime-bundle.service.ts';
@@ -26,8 +33,10 @@ export interface ReactBundleServiceConfig {
  */
 export class ReactBundleService {
 	private readonly runtimeBundleService: ReactRuntimeBundleService;
+	private readonly config: ReactBundleServiceConfig;
 
-	constructor(private readonly config: ReactBundleServiceConfig) {
+	constructor(config: ReactBundleServiceConfig) {
+		this.config = config;
 		this.runtimeBundleService = new ReactRuntimeBundleService({
 			routerAdapter: config.routerAdapter,
 		});
@@ -54,8 +63,9 @@ export class ReactBundleService {
 		declaredModules: string[],
 	): Promise<Record<string, unknown>> {
 		const runtimeImports = this.getRuntimeImports();
+		const runtimeSpecifierMap = buildReactRuntimeSpecifierMap(runtimeImports, this.config.routerAdapter);
 		const options: Record<string, unknown> = {
-			external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom/client'],
+			external: getReactRuntimeExternalSpecifiers(),
 			mainFields: ['module', 'browser', 'main'],
 			naming: `${componentName}.[ext]`,
 			...(import.meta.env?.NODE_ENV === 'production' && {
@@ -68,26 +78,21 @@ export class ReactBundleService {
 		const graphBoundaryPlugin = createClientGraphBoundaryPlugin({
 			absWorkingDir: this.config.rootDir,
 			declaredModules,
-			alwaysAllowSpecifiers: [
-				'@ecopages/core',
-				'react',
-				'react-dom',
-				'react/jsx-runtime',
-				'react/jsx-dev-runtime',
-				'react-dom/client',
-				...(this.config.routerAdapter ? [this.config.routerAdapter.importMapKey] : []),
-			],
+			alwaysAllowSpecifiers: getReactClientGraphAllowSpecifiers([], this.config.routerAdapter),
 		});
 
-		const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeImports);
-		const useSyncExternalStoreShimPlugin = this.createSyncExternalStorePlugin();
+		const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeSpecifierMap);
+		const useSyncExternalStoreShimPlugin = createUseSyncExternalStoreShimPlugin({
+			name: 'react-renderer-use-sync-external-store-shim',
+			namespace: 'ecopages-react-renderer-shim',
+		});
 
 		if (isMdx && this.config.mdxCompilerOptions) {
 			const { createReactMdxLoaderPlugin } = await import('../utils/react-mdx-loader-plugin.ts');
 			const mdxPlugin = createReactMdxLoaderPlugin(this.config.mdxCompilerOptions);
-			options.plugins = [runtimeAliasPlugin, mdxPlugin, useSyncExternalStoreShimPlugin, graphBoundaryPlugin];
+			options.plugins = [graphBoundaryPlugin, runtimeAliasPlugin, mdxPlugin, useSyncExternalStoreShimPlugin];
 		} else {
-			options.plugins = [runtimeAliasPlugin, useSyncExternalStoreShimPlugin, graphBoundaryPlugin];
+			options.plugins = [graphBoundaryPlugin, runtimeAliasPlugin, useSyncExternalStoreShimPlugin];
 		}
 
 		return options;
@@ -97,116 +102,7 @@ export class ReactBundleService {
 	 * Creates the esbuild plugin that rewrites bare React specifiers
 	 * to their runtime asset URLs.
 	 */
-	createRuntimeAliasPlugin(runtimeImports: ReactRuntimeImports) {
-		const aliases = new Map<string, string>([
-			['react', runtimeImports.react],
-			['react-dom/client', runtimeImports.reactDomClient],
-			['react/jsx-runtime', runtimeImports.reactJsxRuntime],
-			['react/jsx-dev-runtime', runtimeImports.reactJsxDevRuntime],
-			['react-dom', runtimeImports.reactDom],
-		]);
-
-		if (this.config.routerAdapter && runtimeImports.router) {
-			aliases.set(this.config.routerAdapter.importMapKey, runtimeImports.router);
-		}
-
-		const escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-		const pattern = new RegExp(
-			`^(${Array.from(aliases.keys())
-				.map((key) => escapeRegExp(key))
-				.join('|')})$`,
-		);
-
-		return {
-			name: 'react-runtime-import-alias',
-			setup(build: {
-				onResolve: (
-					options: { filter: RegExp; namespace?: string },
-					callback: (args: {
-						path: string;
-						importer: string;
-						namespace: string;
-					}) => { path?: string; namespace?: string; external?: boolean } | undefined,
-				) => void;
-			}) {
-				build.onResolve({ filter: pattern }, (args) => {
-					const mappedPath = aliases.get(args.path);
-					if (!mappedPath) {
-						return undefined;
-					}
-					return {
-						path: mappedPath,
-						external: true,
-					};
-				});
-			},
-		};
-	}
-
-	/**
-	 * Creates the esbuild plugin that shims `use-sync-external-store/shim`
-	 * to re-export from React's built-in `useSyncExternalStore`.
-	 * This is needed because some packages use `use-sync-external-store/shim`
-	 * but React 18+ has built-in `useSyncExternalStore`.
-	 */
-	private createSyncExternalStorePlugin() {
-		return {
-			name: 'react-renderer-use-sync-external-store-shim',
-			setup(build: {
-				onResolve: (
-					options: { filter: RegExp; namespace?: string },
-					callback: (args: {
-						path: string;
-						importer: string;
-						namespace: string;
-					}) => { path?: string; namespace?: string } | undefined,
-				) => void;
-				onLoad: (
-					options: { filter: RegExp; namespace?: string },
-					callback: (args: {
-						path: string;
-						namespace: string;
-					}) => { contents?: string; loader?: 'js' } | undefined,
-				) => void;
-			}) {
-				build.onResolve({ filter: /^use-sync-external-store\/shim(?:\/index\.js)?$/ }, () => ({
-					path: 'use-sync-external-store/shim',
-					namespace: 'ecopages-react-renderer-shim',
-				}));
-
-				build.onLoad(
-					{ filter: /^use-sync-external-store\/shim$/, namespace: 'ecopages-react-renderer-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',
-					}),
-				);
-
-				build.onLoad(
-					{
-						filter: /[\\/]use-sync-external-store[\\/]cjs[\\/]use-sync-external-store-shim\.production\.js$/,
-					},
-					() => ({
-						contents: "export { useSyncExternalStore } from 'react';",
-						loader: 'js',
-					}),
-				);
-			},
-		};
+	createRuntimeAliasPlugin(runtimeSpecifierMap: Record<string, string>) {
+		return createRuntimeSpecifierAliasPlugin(runtimeSpecifierMap, { name: 'react-runtime-import-alias' });
 	}
 }

package/src/services/react-hydration-asset.service.js

@@ -4,10 +4,10 @@ import { RESOLVED_ASSETS_DIR } from "@ecopages/core/constants";
 import {
   AssetFactory
 } from "@ecopages/core/services/asset-processing-service";
-import { createHydrationScript } from "../utils/hydration-scripts.js";
-import { createIslandHydrationScript } from "../utils/hydration-scripts.js";
+import { createHydrationScript, createIslandHydrationScript } from "../utils/hydration-scripts.js";
 import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
 class ReactHydrationAssetService {
+  config;
   constructor(config) {
     this.config = config;
   }
@@ -59,7 +59,7 @@ class ReactHydrationAssetService {
       dependencies.push(
         AssetFactory.createContentScript({
           position: "head",
-          content: `window.__ECO_PAGE__={module:"${importPath}",props:${JSON.stringify(props)}};`,
+          content: `window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.page={module:"${importPath}",props:${JSON.stringify(props)}};`,
           name: `${componentName}-props`,
           bundle: false,
           attributes: {

package/src/services/react-hydration-asset.service.ts

@@ -18,8 +18,7 @@ import {
 	type ProcessedAsset,
 } from '@ecopages/core/services/asset-processing-service';
 import type { AssetProcessingService } from '@ecopages/core/services/asset-processing-service';
-import { createHydrationScript } from '../utils/hydration-scripts.ts';
-import { createIslandHydrationScript } from '../utils/hydration-scripts.ts';
+import { createHydrationScript, createIslandHydrationScript } from '../utils/hydration-scripts.ts';
 import { collectDeclaredModulesInConfig } from '../utils/declared-modules.ts';
 import type { ReactBundleService } from './react-bundle.service.ts';
 import type { ReactHmrPageMetadataCache } from './react-hmr-page-metadata-cache.ts';
@@ -40,7 +39,11 @@ export interface ReactHydrationAssetServiceConfig {
  * Manages the creation of client-side hydration assets for React pages and component islands.
  */
 export class ReactHydrationAssetService {
-	constructor(private readonly config: ReactHydrationAssetServiceConfig) {}
+	private readonly config: ReactHydrationAssetServiceConfig;
+
+	constructor(config: ReactHydrationAssetServiceConfig) {
+		this.config = config;
+	}
 
 	/**
 	 * Resolves the import path for the bundled page component.
@@ -105,7 +108,7 @@ export class ReactHydrationAssetService {
 			dependencies.push(
 				AssetFactory.createContentScript({
 					position: 'head',
-					content: `window.__ECO_PAGE__={module:"${importPath}",props:${JSON.stringify(props)}};`,
+					content: `window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.page={module:"${importPath}",props:${JSON.stringify(props)}};`,
 					name: `${componentName}-props`,
 					bundle: false,
 					attributes: {

package/src/services/react-page-module.service.d.ts

@@ -7,6 +7,7 @@
  * @module
  */
 import type { EcoComponentConfig, EcoPageFile } from '@ecopages/core';
+import type { BuildExecutor } from '@ecopages/core/build/build-adapter';
 import type { CompileOptions } from '@mdx-js/mdx';
 /**
  * Configuration for the ReactPageModuleService.
@@ -14,6 +15,8 @@ import type { CompileOptions } from '@mdx-js/mdx';
 export interface ReactPageModuleServiceConfig {
     rootDir: string;
     distDir: string;
+    workDir: string;
+    buildExecutor: BuildExecutor;
     layoutsDir?: string;
     componentsDir?: string;
     mdxCompilerOptions?: CompileOptions;

package/src/services/react-page-module.service.js

@@ -1,10 +1,11 @@
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { rapidhash } from "@ecopages/core/hash";
-import { defaultBuildAdapter } from "@ecopages/core/build/build-adapter";
+import { build } from "@ecopages/core/build/build-adapter";
 import { fileSystem } from "@ecopages/file-system";
 import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
 class ReactPageModuleService {
+  config;
   constructor(config) {
     this.config = config;
   }
@@ -31,24 +32,27 @@ class ReactPageModuleService {
         development: process?.env?.NODE_ENV === "development"
       }
     );
-    const outdir = path.join(this.config.distDir, ".server-modules-react-mdx");
+    const outdir = path.join(this.config.workDir, ".server-modules-react-mdx");
     const fileBaseName = path.basename(filePath, path.extname(filePath));
     const fileHash = fileSystem.hash(filePath);
     const cacheBuster = process?.env?.NODE_ENV === "development" ? `-${Date.now()}` : "";
     const outputFileName = `${fileBaseName}-${fileHash}${cacheBuster}.js`;
-    const buildResult = await defaultBuildAdapter.build({
-      entrypoints: [filePath],
-      root: this.config.rootDir,
-      outdir,
-      target: "node",
-      format: "esm",
-      sourcemap: "none",
-      splitting: false,
-      minify: false,
-      treeshaking: false,
-      naming: outputFileName,
-      plugins: [mdxPlugin]
-    });
+    const buildResult = await build(
+      {
+        entrypoints: [filePath],
+        root: this.config.rootDir,
+        outdir,
+        target: "node",
+        format: "esm",
+        sourcemap: "none",
+        splitting: false,
+        minify: false,
+        treeshaking: false,
+        naming: outputFileName,
+        plugins: [mdxPlugin]
+      },
+      this.config.buildExecutor
+    );
     if (!buildResult.success) {
       const details = buildResult.logs.map((log) => log.message).join(" | ");
       throw new Error(`Failed to compile MDX page module: ${details}`);
@@ -91,7 +95,7 @@ class ReactPageModuleService {
         if (fileSystem.exists(resolvedDependency)) {
           return {
             ...config,
-            __eco: buildEcoMeta(resolvedDependency)
+            __eco: buildEcoMeta(path.join(candidateDir, path.basename(pagePath)))
           };
         }
       }

package/src/services/react-page-module.service.ts

@@ -10,8 +10,9 @@
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
 import type { EcoComponentConfig, EcoPageFile } from '@ecopages/core';
+import type { BuildExecutor } from '@ecopages/core/build/build-adapter';
 import { rapidhash } from '@ecopages/core/hash';
-import { defaultBuildAdapter } from '@ecopages/core/build/build-adapter';
+import { build } from '@ecopages/core/build/build-adapter';
 import { fileSystem } from '@ecopages/file-system';
 import type { CompileOptions } from '@mdx-js/mdx';
 import { collectDeclaredModulesInConfig } from '../utils/declared-modules.ts';
@@ -22,6 +23,8 @@ import { collectDeclaredModulesInConfig } from '../utils/declared-modules.ts';
 export interface ReactPageModuleServiceConfig {
 	rootDir: string;
 	distDir: string;
+	workDir: string;
+	buildExecutor: BuildExecutor;
 	layoutsDir?: string;
 	componentsDir?: string;
 	mdxCompilerOptions?: CompileOptions;
@@ -35,7 +38,11 @@ export interface ReactPageModuleServiceConfig {
  * resolution, and hydration analysis for React pages.
  */
 export class ReactPageModuleService {
-	constructor(private readonly config: ReactPageModuleServiceConfig) {}
+	private readonly config: ReactPageModuleServiceConfig;
+
+	constructor(config: ReactPageModuleServiceConfig) {
+		this.config = config;
+	}
 
 	/**
 	 * Checks if the given file path corresponds to an MDX file based on configured extensions.
@@ -62,25 +69,28 @@ export class ReactPageModuleService {
 			},
 		);
 
-		const outdir = path.join(this.config.distDir, '.server-modules-react-mdx');
+		const outdir = path.join(this.config.workDir, '.server-modules-react-mdx');
 		const fileBaseName = path.basename(filePath, path.extname(filePath));
 		const fileHash = fileSystem.hash(filePath);
 		const cacheBuster = process?.env?.NODE_ENV === 'development' ? `-${Date.now()}` : '';
 		const outputFileName = `${fileBaseName}-${fileHash}${cacheBuster}.js`;
 
-		const buildResult = await defaultBuildAdapter.build({
-			entrypoints: [filePath],
-			root: this.config.rootDir,
-			outdir,
-			target: 'node',
-			format: 'esm',
-			sourcemap: 'none',
-			splitting: false,
-			minify: false,
-			treeshaking: false,
-			naming: outputFileName,
-			plugins: [mdxPlugin],
-		});
+		const buildResult = await build(
+			{
+				entrypoints: [filePath],
+				root: this.config.rootDir,
+				outdir,
+				target: 'node',
+				format: 'esm',
+				sourcemap: 'none',
+				splitting: false,
+				minify: false,
+				treeshaking: false,
+				naming: outputFileName,
+				plugins: [mdxPlugin],
+			},
+			this.config.buildExecutor,
+		);
 
 		if (!buildResult.success) {
 			const details = buildResult.logs.map((log) => log.message).join(' | ');
@@ -138,7 +148,7 @@ export class ReactPageModuleService {
 				if (fileSystem.exists(resolvedDependency)) {
 					return {
 						...config,
-						__eco: buildEcoMeta(resolvedDependency),
+						__eco: buildEcoMeta(path.join(candidateDir, path.basename(pagePath))),
 					};
 				}
 			}

package/src/services/react-runtime-bundle.service.d.ts

@@ -2,8 +2,7 @@
  * Runtime bundle service for React integration.
  *
  * Owns creation of the browser runtime assets for React and React DOM,
- * including temporary entry generation, specifier mapping, and React DOM
- * interop rewriting.
+ * including shared runtime entry generation and specifier mapping.
  *
  * @module
  */
@@ -21,18 +20,19 @@ export type ReactRuntimeImports = {
 export interface ReactRuntimeBundleServiceConfig {
     routerAdapter?: ReactRouterAdapter;
 }
+type RuntimeMode = 'development' | 'production';
 export declare class ReactRuntimeBundleService {
     private readonly config;
     constructor(config: ReactRuntimeBundleServiceConfig);
-    getRuntimeImports(): ReactRuntimeImports;
-    getSpecifierMap(): Record<string, string>;
+    private get isDevelopment();
+    private getCurrentRuntimeMode;
+    private createRuntimeDefines;
+    private getReactVendorFileName;
+    private getReactDomVendorFileName;
+    private getRouterVendorFileName;
+    getRuntimeImports(mode?: RuntimeMode): ReactRuntimeImports;
+    getSpecifierMap(mode?: RuntimeMode): Record<string, string>;
     getDependencies(): AssetDefinition[];
-    createRuntimeAliasPlugin(): EcoBuildPlugin;
-    private buildImportMapSourceUrl;
-    private createRuntimeSpecifierAliasPlugin;
-    private createReactDomRuntimeInteropPlugin;
-    private getRuntimeArtifactsDir;
-    private createRuntimeEntry;
-    private getModuleExportNames;
-    private isValidExportName;
+    createRuntimeAliasPlugin(mode?: RuntimeMode): EcoBuildPlugin;
 }
+export {};