@ecopages/react 0.2.0-alpha.48 → 0.2.0-alpha.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.48",
+  "version": "0.2.0-alpha.49",
   "description": "React integration for Ecopages",
   "keywords": [
     "ecopages",

package/src/react-hmr-strategy.d.ts

@@ -114,6 +114,21 @@ export declare class ReactHmrStrategy extends HmrStrategy {
      * @returns True if the file is in the layouts directory
      */
     private isLayoutFile;
+    private isPageEntrypoint;
+    private getEntrypointOutput;
+    private getGroupedTempOutputPattern;
+    private collectReactPageBuildTargets;
+    private getRequestedTargets;
+    /**
+     * 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.
+     */
+    private resolveBuildTargets;
+    private partitionBuildTargets;
     /**
      * Processes a React file change by rebuilding all React entrypoints.
      *
@@ -134,12 +149,15 @@ export declare class ReactHmrStrategy extends HmrStrategy {
      * @returns True if bundling was successful
      */
     private bundleReactEntrypoint;
+    private bundleReactEntrypoints;
     private resolveTempOutputPath;
     /**
      * Encodes dynamic route segments (brackets) in file paths.
      * Converts `[slug]` to `_slug_` to avoid filesystem issues.
      */
     private encodeDynamicSegments;
+    private rewriteChunkImportUrls;
+    private isMissingTempOutputError;
     /**
      * Processes bundled output and injects the React HMR handler.
      * Writes to temp file first, then renames atomically to avoid conflicts.

package/src/react-hmr-strategy.js

@@ -1,5 +1,6 @@
 import path from "node:path";
 import { HmrStrategy, HmrStrategyType } from "@ecopages/core/hmr/hmr-strategy";
+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";
@@ -132,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.
    *
@@ -159,15 +250,35 @@ class ReactHmrStrategy extends HmrStrategy {
       appLogger.debug(`Skipping non-React watched entrypoint: ${_filePath}`);
       return { type: "none" };
     }
-    const entrypointsToBuild = changedEntrypointOutput ? [[_filePath, changedEntrypointOutput]] : watchedFiles.entries();
+    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);
       }
     }
@@ -206,11 +317,7 @@ 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);
@@ -247,6 +354,61 @@ class ReactHmrStrategy extends HmrStrategy {
       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;
@@ -269,6 +431,28 @@ 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 and injects the React HMR handler.
    * Writes to temp file first, then renames atomically to avoid conflicts.
@@ -286,6 +470,7 @@ class ReactHmrStrategy extends HmrStrategy {
     try {
       let code = await fileSystem.readFile(tempPath);
       code = rewriteRuntimeSpecifierAliases(code, this.runtimeAliasMap);
+      code = this.rewriteChunkImportUrls(code);
       code = injectHmrHandler(code);
       await fileSystem.writeAsync(finalPath, code);
       await fileSystem.removeAsync(tempPath).catch(() => {
@@ -293,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(() => {
         });

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

@@ -28,6 +28,10 @@ export interface ReactClientBundleOptions {
      * rewriting them to external runtime specifiers.
      */
     includeRuntime?: boolean;
+    /**
+     * When set, overrides the build adapter chunk splitting mode for this entry.
+     */
+    splitting?: boolean;
 }
 /**
  * Manages esbuild bundle configuration and plugin creation for React page/component builds.

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

@@ -40,14 +40,18 @@ class ReactBundleService {
       naming: `${componentName}.[ext]`,
       ...import.meta.env?.NODE_ENV === "production" && {
         minify: true,
-        splitting: false,
         treeshaking: true
-      }
+      },
+      ...bundleOptions.splitting === void 0 ? {} : { splitting: bundleOptions.splitting }
     };
     if (!bundleOptions.includeRuntime) {
+      const reactRuntimeSpecifiers = new Set(getReactRuntimeExternalSpecifiers());
       options.external = [
-        ...getReactRuntimeExternalSpecifiers(),
-        ...Object.values(runtimeImports).filter((specifier) => Boolean(specifier))
+        ...Object.values(runtimeImports).filter(
+          (specifier) => Boolean(specifier) && !reactRuntimeSpecifiers.has(
+            specifier
+          )
+        )
       ];
     }
     const graphBoundaryPlugin = createClientGraphBoundaryPlugin({

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

@@ -28,9 +28,11 @@ export declare function getReactIslandComponentKey(componentFile: string, config
  */
 export declare class ReactHydrationAssetService {
     private readonly config;
+    private static readonly ROUTER_PAGE_GROUPED_BUNDLE_ID;
     constructor(config: ReactHydrationAssetServiceConfig);
     private getIslandBundleName;
     private getIslandHydrationName;
+    private getRouterPageGroupedEntryName;
     /**
      * Resolves the browser import path used for a React-owned page or island module.
      * Uses HMR manager for development or constructs static path for production.

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

@@ -11,6 +11,7 @@ function getReactIslandComponentKey(componentFile, config) {
 }
 class ReactHydrationAssetService {
   config;
+  static ROUTER_PAGE_GROUPED_BUNDLE_ID = "ecopages-react-router-pages";
   constructor(config) {
     this.config = config;
   }
@@ -20,6 +21,10 @@ class ReactHydrationAssetService {
   getIslandHydrationName(bundleName, componentKey) {
     return `${bundleName}-hydration-${componentKey}`;
   }
+  getRouterPageGroupedEntryName(pagePath) {
+    const relativePath = path.relative(this.config.srcDir, pagePath);
+    return relativePath.replace(/\.(tsx?|jsx?|mdx?)$/, "").replace(/[\\/]+/g, "__").replace(/\[([^\]]+)\]/g, "_$1_");
+  }
   /**
    * Resolves the browser import path used for a React-owned page or island module.
    * Uses HMR manager for development or constructs static path for production.
@@ -48,6 +53,10 @@ class ReactHydrationAssetService {
    */
   createPageDependencies(pagePath, componentName, importPath, pageModuleUrlExpression, bundleOptions, isDevelopment, useBrowserRuntimeImports, isMdx) {
     const runtimeImports = this.config.bundleService.getRuntimeImports();
+    const groupedBundle = this.config.routerAdapter ? {
+      id: ReactHydrationAssetService.ROUTER_PAGE_GROUPED_BUNDLE_ID,
+      entryName: this.getRouterPageGroupedEntryName(pagePath)
+    } : void 0;
     return [
       AssetFactory.createContentScript({
         position: "head",
@@ -65,12 +74,14 @@ class ReactHydrationAssetService {
         name: componentName,
         packageRole: "page-script",
         bundle: !isDevelopment,
+        groupedBundle,
         bundleOptions,
         attributes: {
           type: "module",
           defer: "",
           "data-eco-rerun": "true",
           "data-eco-script-id": componentName,
+          ...this.config.routerAdapter ? { "data-eco-page-bootstrap": "react-router" } : {},
           "data-eco-persist": "true"
         }
       })
@@ -159,17 +170,18 @@ class ReactHydrationAssetService {
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     const isDevelopment = hmrManager?.isEnabled() ?? false;
     const isHostedDevelopment = !isDevelopment && process.env.NODE_ENV !== "production";
-    const useBrowserRuntimeImports = isDevelopment || isHostedDevelopment;
+    const usesRouterRuntime = Boolean(this.config.routerAdapter);
+    const useBrowserRuntimeImports = isDevelopment || isHostedDevelopment || usesRouterRuntime;
     if (isDevelopment) {
       this.config.hmrPageMetadataCache?.setDeclaredModules(pagePath, declaredModules);
     }
     const importPath = await this.resolveAssetImportPath(pagePath, componentName);
-    const pageModuleUrlExpression = "import.meta.url";
+    const pageModuleUrlExpression = isDevelopment ? JSON.stringify(importPath) : "import.meta.url";
     const bundleOptions = await this.config.bundleService.createBundleOptions(
       componentName,
       isMdx,
       declaredModules,
-      { includeRuntime: !useBrowserRuntimeImports }
+      { includeRuntime: !useBrowserRuntimeImports, splitting: usesRouterRuntime }
     );
     const dependencies = this.createPageDependencies(
       pagePath,