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

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 {};

package/src/services/react-runtime-bundle.service.js

@@ -1,205 +1,123 @@
-import fs from "node:fs";
-import path from "node:path";
-import { createRequire } from "node:module";
-import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
+import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
+import {
+  buildBrowserRuntimeAssetUrl,
+  createBrowserRuntimeModuleAsset,
+  createBrowserRuntimeScriptAsset
+} from "@ecopages/core/services/asset-processing-service";
+import { createReactDomRuntimeInteropPlugin } from "../utils/react-dom-runtime-interop-plugin.js";
+import { buildReactRuntimeSpecifierMap } from "../utils/react-runtime-specifier-map.js";
 class ReactRuntimeBundleService {
+  config;
   constructor(config) {
     this.config = config;
   }
-  getRuntimeImports() {
+  get isDevelopment() {
+    return process.env.NODE_ENV === "development";
+  }
+  getCurrentRuntimeMode() {
+    return this.isDevelopment ? "development" : "production";
+  }
+  createRuntimeDefines(mode) {
+    const nodeEnv = JSON.stringify(mode);
+    return {
+      "process.env.NODE_ENV": nodeEnv,
+      "import.meta.env.NODE_ENV": nodeEnv
+    };
+  }
+  getReactVendorFileName(mode) {
+    return mode === "development" ? "react.development.js" : "react.js";
+  }
+  getReactDomVendorFileName(mode) {
+    return mode === "development" ? "react-dom.development.js" : "react-dom.js";
+  }
+  getRouterVendorFileName(mode) {
+    if (!this.config.routerAdapter) {
+      return "";
+    }
+    return mode === "development" ? `${this.config.routerAdapter.bundle.outputName}.development.js` : `${this.config.routerAdapter.bundle.outputName}.js`;
+  }
+  getRuntimeImports(mode = this.getCurrentRuntimeMode()) {
+    const reactVendorFileName = this.getReactVendorFileName(mode);
+    const reactDomVendorFileName = this.getReactDomVendorFileName(mode);
     const runtimeImports = {
-      react: this.buildImportMapSourceUrl("react.js"),
-      reactDomClient: this.buildImportMapSourceUrl("react-dom.js"),
-      reactJsxRuntime: this.buildImportMapSourceUrl("react.js"),
-      reactJsxDevRuntime: this.buildImportMapSourceUrl("react.js"),
-      reactDom: this.buildImportMapSourceUrl("react-dom.js")
+      react: buildBrowserRuntimeAssetUrl(reactVendorFileName),
+      reactDomClient: buildBrowserRuntimeAssetUrl(reactDomVendorFileName),
+      reactJsxRuntime: buildBrowserRuntimeAssetUrl(reactVendorFileName),
+      reactJsxDevRuntime: buildBrowserRuntimeAssetUrl(reactVendorFileName),
+      reactDom: buildBrowserRuntimeAssetUrl(reactDomVendorFileName)
     };
     if (this.config.routerAdapter) {
-      runtimeImports.router = this.buildImportMapSourceUrl(`${this.config.routerAdapter.bundle.outputName}.js`);
+      runtimeImports.router = buildBrowserRuntimeAssetUrl(this.getRouterVendorFileName(mode));
     }
     return runtimeImports;
   }
-  getSpecifierMap() {
-    const runtimeImports = this.getRuntimeImports();
-    const map = {
-      react: runtimeImports.react,
-      "react/jsx-runtime": runtimeImports.reactJsxRuntime,
-      "react/jsx-dev-runtime": runtimeImports.reactJsxDevRuntime,
-      "react-dom": runtimeImports.reactDom,
-      "react-dom/client": runtimeImports.reactDomClient
-    };
-    if (this.config.routerAdapter && runtimeImports.router) {
-      map[this.config.routerAdapter.importMapKey] = runtimeImports.router;
-    }
-    return map;
+  getSpecifierMap(mode = this.getCurrentRuntimeMode()) {
+    return buildReactRuntimeSpecifierMap(this.getRuntimeImports(mode), this.config.routerAdapter);
   }
   getDependencies() {
-    const runtimeAttrs = { type: "module", defer: "" };
-    const runtimeImports = this.getRuntimeImports();
-    const reactRuntimeAliasPlugin = this.createRuntimeSpecifierAliasPlugin({
-      react: runtimeImports.react
-    });
-    const reactDomRuntimeInteropPlugin = this.createReactDomRuntimeInteropPlugin();
-    const reactEntry = this.createRuntimeEntry(
-      [
-        { specifier: "react", defaultExport: true },
-        { specifier: "react/jsx-runtime" },
-        { specifier: "react/jsx-dev-runtime" }
-      ],
-      "react-entry.mjs"
-    );
-    const reactDomEntry = this.createRuntimeEntry(
-      [{ specifier: "react-dom", defaultExport: true }, { specifier: "react-dom/client" }],
-      "react-dom-entry.mjs"
-    );
-    const dependencies = [
-      AssetFactory.createNodeModuleScript({
-        position: "head",
-        importPath: reactEntry,
-        name: "react",
-        excludeFromHtml: true,
-        bundleOptions: { naming: "react.js" },
-        attributes: runtimeAttrs
-      }),
-      AssetFactory.createNodeModuleScript({
-        position: "head",
-        importPath: reactDomEntry,
-        name: "react-dom",
-        excludeFromHtml: true,
-        bundleOptions: {
-          naming: "react-dom.js",
-          plugins: [reactRuntimeAliasPlugin, reactDomRuntimeInteropPlugin]
+    const reactDomRuntimeInteropPlugin = createReactDomRuntimeInteropPlugin();
+    const dependencies = [];
+    for (const mode of ["production", "development"]) {
+      const reactRuntimeAliasPlugin = createRuntimeSpecifierAliasPlugin(
+        {
+          react: buildBrowserRuntimeAssetUrl(this.getReactVendorFileName(mode))
         },
-        attributes: runtimeAttrs
-      })
-    ];
-    if (this.config.routerAdapter) {
-      const runtimeAliasPlugin = this.createRuntimeAliasPlugin();
-      const mappedSpecifiers = new Set(Object.keys(this.getSpecifierMap()));
-      const unresolvedExternals = this.config.routerAdapter.bundle.externals.filter(
-        (external) => !mappedSpecifiers.has(external)
+        { name: `react-plugin-runtime-specifier-alias-${mode}` }
       );
+      const reactDomBundlePlugins = [reactRuntimeAliasPlugin, reactDomRuntimeInteropPlugin].filter(
+        (plugin) => plugin !== null
+      );
+      const runtimeAliasPlugin = this.createRuntimeAliasPlugin(mode);
+      const mappedSpecifiers = new Set(Object.keys(this.getSpecifierMap(mode)));
       dependencies.push(
-        AssetFactory.createNodeModuleScript({
-          position: "head",
-          importPath: this.config.routerAdapter.bundle.importPath,
-          name: this.config.routerAdapter.bundle.outputName,
-          excludeFromHtml: true,
+        createBrowserRuntimeModuleAsset({
+          modules: [
+            { specifier: "react", defaultExport: true },
+            { specifier: "react/jsx-runtime" },
+            { specifier: "react/jsx-dev-runtime" }
+          ],
+          name: "react",
+          fileName: this.getReactVendorFileName(mode),
+          cacheDirName: `ecopages-react-runtime-${mode}`,
           bundleOptions: {
-            naming: `${this.config.routerAdapter.bundle.outputName}.js`,
-            external: unresolvedExternals,
-            plugins: [runtimeAliasPlugin]
-          },
-          attributes: runtimeAttrs
-        })
-      );
-    }
-    return dependencies;
-  }
-  createRuntimeAliasPlugin() {
-    const specifierMap = this.getSpecifierMap();
-    const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const filter = new RegExp(
-      `^(${Object.keys(specifierMap).map((key) => escapeRegExp(key)).join("|")})$`
-    );
-    return {
-      name: "react-plugin-runtime-alias",
-      setup(build) {
-        build.onResolve({ filter }, (args) => {
-          const mappedPath = specifierMap[args.path];
-          if (!mappedPath) {
-            return void 0;
+            define: this.createRuntimeDefines(mode)
           }
-          return {
-            path: mappedPath,
-            external: true
-          };
-        });
-      }
-    };
-  }
-  buildImportMapSourceUrl(fileName) {
-    return `/${AssetFactory.RESOLVED_ASSETS_VENDORS_DIR}/${fileName}`;
-  }
-  createRuntimeSpecifierAliasPlugin(specifierMap, external = true) {
-    const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const filter = new RegExp(
-      `^(${Object.keys(specifierMap).map((key) => escapeRegExp(key)).join("|")})$`
-    );
-    return {
-      name: "react-plugin-runtime-specifier-alias",
-      setup(build) {
-        build.onResolve({ filter }, (args) => {
-          const mappedPath = specifierMap[args.path];
-          if (!mappedPath) {
-            return void 0;
-          }
-          return {
-            path: mappedPath,
-            external
-          };
-        });
-      }
-    };
-  }
-  createReactDomRuntimeInteropPlugin() {
-    const reactDomFileFilter = /[\\/]react-dom[\\/].*\.js$/;
-    const reactRequirePattern = /\brequire\((['"])react\1\)/g;
-    return {
-      name: "react-dom-runtime-interop",
-      setup(build) {
-        build.onLoad({ filter: reactDomFileFilter }, (args) => {
-          const content = fs.readFileSync(args.path, "utf-8");
-          if (!reactRequirePattern.test(content)) {
-            return void 0;
+        }),
+        createBrowserRuntimeModuleAsset({
+          modules: [{ specifier: "react-dom", defaultExport: true }, { specifier: "react-dom/client" }],
+          name: "react-dom",
+          fileName: this.getReactDomVendorFileName(mode),
+          cacheDirName: `ecopages-react-runtime-${mode}`,
+          bundleOptions: {
+            define: this.createRuntimeDefines(mode),
+            plugins: reactDomBundlePlugins
           }
-          reactRequirePattern.lastIndex = 0;
-          const rewritten = content.replace(reactRequirePattern, "__ecopages_react_runtime");
-          return {
-            contents: `import * as __ecopages_react_runtime from 'react';
-${rewritten}`,
-            loader: "js",
-            resolveDir: path.dirname(args.path)
-          };
-        });
-      }
-    };
-  }
-  getRuntimeArtifactsDir() {
-    const tmpDir = path.join(process.cwd(), "node_modules", ".cache", "ecopages-react-runtime");
-    fs.mkdirSync(tmpDir, { recursive: true });
-    return tmpDir;
-  }
-  createRuntimeEntry(modules, fileName) {
-    const tmpDir = this.getRuntimeArtifactsDir();
-    const requireFromRoot = createRequire(path.join(process.cwd(), "package.json"));
-    const seenExports = /* @__PURE__ */ new Set();
-    const statements = [];
-    for (const module of modules) {
-      if (module.defaultExport) {
-        statements.push(`import __ecopages_default_export__ from '${module.specifier}';`);
-        statements.push("export default __ecopages_default_export__;");
-      }
-      const exportNames = this.getModuleExportNames(module.specifier, requireFromRoot).filter(
-        (name) => !seenExports.has(name)
+        })
       );
-      if (exportNames.length > 0) {
-        statements.push(`export { ${exportNames.join(", ")} } from '${module.specifier}';`);
-        for (const exportName of exportNames) {
-          seenExports.add(exportName);
-        }
+      if (this.config.routerAdapter) {
+        const unresolvedExternals = this.config.routerAdapter.bundle.externals.filter(
+          (external) => !mappedSpecifiers.has(external)
+        );
+        dependencies.push(
+          createBrowserRuntimeScriptAsset({
+            importPath: this.config.routerAdapter.bundle.importPath,
+            name: this.config.routerAdapter.bundle.outputName,
+            fileName: this.getRouterVendorFileName(mode),
+            bundleOptions: {
+              define: this.createRuntimeDefines(mode),
+              external: unresolvedExternals,
+              plugins: [runtimeAliasPlugin]
+            }
+          })
+        );
       }
     }
-    const filePath = path.join(tmpDir, fileName);
-    fs.writeFileSync(filePath, statements.join("\n"), "utf-8");
-    return filePath;
-  }
-  getModuleExportNames(specifier, requireFromRoot) {
-    const moduleExports = requireFromRoot(specifier);
-    return Object.keys(moduleExports).filter((name) => name !== "__esModule" && name !== "default").filter((name) => this.isValidExportName(name)).sort();
+    return dependencies;
   }
-  isValidExportName(name) {
-    return /^[$A-Z_a-z][$\w]*$/.test(name);
+  createRuntimeAliasPlugin(mode = this.getCurrentRuntimeMode()) {
+    return createRuntimeSpecifierAliasPlugin(this.getSpecifierMap(mode), {
+      name: `react-plugin-runtime-alias-${mode}`
+    });
   }
 }
 export {