@ecopages/react 0.2.0-alpha.9 → 0.2.1

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

@@ -23,21 +23,24 @@ export interface ReactHydrationAssetServiceConfig {
     bundleService: ReactBundleService;
     hmrPageMetadataCache?: ReactHmrPageMetadataCache;
 }
+export declare function getReactIslandComponentKey(componentFile: string, config?: EcoComponentConfig): string;
 /**
  * Manages the creation of client-side hydration assets for React pages and component islands.
  */
 export declare class ReactHydrationAssetService {
     private readonly config;
     constructor(config: ReactHydrationAssetServiceConfig);
+    private getIslandBundleName;
+    private getIslandHydrationName;
     /**
      * Resolves the import path for the bundled page component.
      * Uses HMR manager for development or constructs static path for production.
      *
      * @param pagePath - Absolute path to the page source file
-     * @param componentName - Generated unique component name
+     * @param assetName - Generated asset name
      * @returns The resolved import path for the bundled component
      */
-    resolveAssetImportPath(pagePath: string, componentName: string): Promise<string>;
+    resolveAssetImportPath(pagePath: string, assetName: string): Promise<string>;
     /**
      * Creates the asset dependencies for a page: the bundled component and hydration script.
      *
@@ -54,15 +57,13 @@ export declare class ReactHydrationAssetService {
     /**
      * Builds client-side assets for a React component island.
      *
-     * Includes the bundled component entry and an inline hydration bootstrap script.
+     * Includes the bundled component entry and a shared hydration bootstrap script.
      *
      * @param componentFile - Absolute path to the component source file
-     * @param componentInstanceId - Unique instance ID for DOM targeting
-     * @param props - Serialized props for client-side hydration
      * @param config - Optional component config with `__eco` metadata
      * @returns Processed assets ready for injection
      */
-    buildComponentRenderAssets(componentFile: string, componentInstanceId: string, props: Record<string, unknown>, config?: EcoComponentConfig): Promise<ProcessedAsset[]>;
+    buildComponentRenderAssets(componentFile: string, config?: EcoComponentConfig): Promise<ProcessedAsset[]>;
     /**
      * Builds all client-side route assets for a page.
      *

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

@@ -6,25 +6,34 @@ import {
 } from "@ecopages/core/services/asset-processing-service";
 import { createHydrationScript, createIslandHydrationScript } from "../utils/hydration-scripts.js";
 import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
+function getReactIslandComponentKey(componentFile, config) {
+  return rapidhash(`${componentFile}:${config?.__eco?.id ?? ""}`).toString();
+}
 class ReactHydrationAssetService {
   config;
   constructor(config) {
     this.config = config;
   }
+  getIslandBundleName(componentFile) {
+    return `ecopages-react-island-${rapidhash(componentFile)}`;
+  }
+  getIslandHydrationName(bundleName, componentKey) {
+    return `${bundleName}-hydration-${componentKey}`;
+  }
   /**
    * Resolves the import path for the bundled page component.
    * Uses HMR manager for development or constructs static path for production.
    *
    * @param pagePath - Absolute path to the page source file
-   * @param componentName - Generated unique component name
+   * @param assetName - Generated asset name
    * @returns The resolved import path for the bundled component
    */
-  async resolveAssetImportPath(pagePath, componentName) {
+  async resolveAssetImportPath(pagePath, assetName) {
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     if (hmrManager?.isEnabled()) {
       return hmrManager.registerEntrypoint(pagePath);
     }
-    return `/${path.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath)).replace(path.basename(pagePath), `${componentName}.js`).replace(/\\/g, "/")}`;
+    return `/${path.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath)).replace(path.basename(pagePath), `${assetName}.js`).replace(/\\/g, "/")}`;
   }
   /**
    * Creates the asset dependencies for a page: the bundled component and hydration script.
@@ -96,19 +105,22 @@ class ReactHydrationAssetService {
   /**
    * Builds client-side assets for a React component island.
    *
-   * Includes the bundled component entry and an inline hydration bootstrap script.
+   * Includes the bundled component entry and a shared hydration bootstrap script.
    *
    * @param componentFile - Absolute path to the component source file
-   * @param componentInstanceId - Unique instance ID for DOM targeting
-   * @param props - Serialized props for client-side hydration
    * @param config - Optional component config with `__eco` metadata
    * @returns Processed assets ready for injection
    */
-  async buildComponentRenderAssets(componentFile, componentInstanceId, props, config) {
-    const componentName = `ecopages-react-island-${rapidhash(`${componentFile}:${componentInstanceId}`)}`;
-    const importPath = await this.resolveAssetImportPath(componentFile, componentName);
+  async buildComponentRenderAssets(componentFile, config) {
+    const componentName = this.getIslandBundleName(componentFile);
+    const componentKey = getReactIslandComponentKey(componentFile, config);
+    const hydrationName = this.getIslandHydrationName(componentName, componentKey);
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     const isDevelopment = hmrManager?.isEnabled() ?? false;
+    if (isDevelopment) {
+      this.config.hmrPageMetadataCache?.markOwnedEntrypoint(componentFile);
+    }
+    const importPath = await this.resolveAssetImportPath(componentFile, componentName);
     const declaredModules = collectDeclaredModulesInConfig(config);
     const bundleOptions = await this.config.bundleService.createBundleOptions(
       componentName,
@@ -136,19 +148,18 @@ class ReactHydrationAssetService {
           importPath,
           reactImportPath: runtimeImports.react,
           reactDomClientImportPath: runtimeImports.reactDomClient,
-          targetSelector: `[data-eco-component-id="${componentInstanceId}"]`,
-          props,
+          targetSelector: `[data-eco-component-key="${componentKey}"]`,
           componentRef: config?.__eco?.id,
           componentFile,
           isDevelopment
         }),
-        name: `${componentName}-hydration`,
+        name: hydrationName,
         bundle: false,
         attributes: {
           type: "module",
           defer: "",
           "data-eco-rerun": "true",
-          "data-eco-script-id": `${componentName}-hydration`,
+          "data-eco-script-id": hydrationName,
           "data-eco-persist": "true"
         }
       })
@@ -194,5 +205,6 @@ class ReactHydrationAssetService {
   }
 }
 export {
-  ReactHydrationAssetService
+  ReactHydrationAssetService,
+  getReactIslandComponentKey
 };

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

@@ -42,7 +42,7 @@ class ReactPageModuleService {
         entrypoints: [filePath],
         root: this.config.rootDir,
         outdir,
-        target: "node",
+        target: "es2022",
         format: "esm",
         sourcemap: "none",
         splitting: false,
@@ -62,7 +62,10 @@ class ReactPageModuleService {
     if (!compiledOutput) {
       throw new Error(`No compiled MDX output generated for page: ${filePath}`);
     }
-    return await import(pathToFileURL(compiledOutput).href);
+    return await import(
+      /* @vite-ignore */
+      pathToFileURL(compiledOutput).href
+    );
   }
   /**
    * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.

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

@@ -19,11 +19,13 @@ export type ReactRuntimeImports = {
 };
 export interface ReactRuntimeBundleServiceConfig {
     routerAdapter?: ReactRouterAdapter;
+    rootDir?: string;
 }
 type RuntimeMode = 'development' | 'production';
 export declare class ReactRuntimeBundleService {
     private readonly config;
     constructor(config: ReactRuntimeBundleServiceConfig);
+    setRootDir(rootDir: string | undefined): void;
     private get isDevelopment();
     private getCurrentRuntimeMode;
     private createRuntimeDefines;

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

@@ -11,6 +11,9 @@ class ReactRuntimeBundleService {
   constructor(config) {
     this.config = config;
   }
+  setRootDir(rootDir) {
+    this.config.rootDir = rootDir;
+  }
   get isDevelopment() {
     return process.env.NODE_ENV === "development";
   }
@@ -79,6 +82,7 @@ class ReactRuntimeBundleService {
           name: "react",
           fileName: this.getReactVendorFileName(mode),
           cacheDirName: `ecopages-react-runtime-${mode}`,
+          rootDir: this.config.rootDir,
           bundleOptions: {
             define: this.createRuntimeDefines(mode)
           }
@@ -88,6 +92,7 @@ class ReactRuntimeBundleService {
           name: "react-dom",
           fileName: this.getReactDomVendorFileName(mode),
           cacheDirName: `ecopages-react-runtime-${mode}`,
+          rootDir: this.config.rootDir,
           bundleOptions: {
             define: this.createRuntimeDefines(mode),
             plugins: reactDomBundlePlugins

package/src/utils/client-graph-boundary-plugin.js

@@ -1,7 +1,7 @@
 import { existsSync, readFileSync } from "node:fs";
 import { dirname, extname, resolve } from "node:path";
 import { parseSync } from "oxc-parser";
-import { analyzeReachability } from "./reachability-analyzer";
+import { analyzeReachability } from "./reachability-analyzer.js";
 const SOURCE_FILE_FILTER = /\.(tsx?|jsx?)$/;
 const SERVER_ONLY_ECO_PAGE_OPTION_KEYS = /* @__PURE__ */ new Set([
   "cache",
@@ -484,7 +484,7 @@ function createClientGraphBoundaryPlugin(options) {
         }
         if (!modified) return void 0;
         const ext = extname(args.path).slice(1);
-        return { contents: transformed, loader: ext };
+        return { contents: transformed, loader: ext, resolveDir: dirname(args.path) };
       });
     }
   };

package/src/utils/declared-modules.js

@@ -41,7 +41,10 @@ function collectPageDeclaredModulesFromModule(pageModule) {
 }
 async function collectPageDeclaredModules(pagePath) {
   try {
-    const pageModule = await import(pagePath);
+    const pageModule = await import(
+      /* @vite-ignore */
+      pagePath
+    );
     return collectPageDeclaredModulesFromModule(pageModule);
   } catch {
     return [];

package/src/utils/hydration-scripts.d.ts

@@ -30,10 +30,8 @@ export type IslandHydrationScriptOptions = {
     reactImportPath: string;
     /** Browser import path for react-dom/client runtime. */
     reactDomClientImportPath: string;
-    /** Selector that resolves to the SSR root element for this island instance. */
+    /** Selector that resolves to all SSR root elements for this island component. */
     targetSelector: string;
-    /** Serialized component props emitted at render time. */
-    props: Record<string, unknown>;
     /** Optional stable component id used to resolve named exports reliably. */
     componentRef?: string;
     /** Optional source file hint used as fallback for component resolution. */

package/src/utils/hydration-scripts.js

@@ -31,16 +31,19 @@ function getProdPageRootCleanupScript() {
   return 'window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.react=window.__ECO_PAGES__.react||{};window.__ECO_PAGES__.react.cleanupPageRoot=()=>{const a=window.__ECO_PAGES__.react?.pageRoot||root;if(!a){window.__ECO_PAGES__.react.pageRoot=null;window.__ECO_PAGES__?.navigation?.releaseOwnership?.("react-router");delete window.__ECO_PAGES__.page;return}window.__ECO_PAGES__.react.pageRoot=null;window.__ECO_PAGES__?.navigation?.releaseOwnership?.("react-router");delete window.__ECO_PAGES__.page;root=null;a.unmount()};';
 }
 function getDevRouterBootstrapRegistrationScript() {
-  return `window.__ECO_PAGES__?.navigation?.register({
+  return `const currentOwnerState = window.__ECO_PAGES__?.navigation?.getOwnerState?.();
+if (!(currentOwnerState?.owner === "react-router" && currentOwnerState.canHandleSpaNavigation)) {
+window.__ECO_PAGES__?.navigation?.register({
   owner: "react-router",
   cleanupBeforeHandoff: async () => {
     window.__ECO_PAGES__?.react?.cleanupPageRoot?.();
   }
 });
-window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");`;
+window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");
+}`;
 }
 function getProdRouterBootstrapRegistrationScript() {
-  return 'window.__ECO_PAGES__?.navigation?.register({owner:"react-router",cleanupBeforeHandoff:async()=>{window.__ECO_PAGES__?.react?.cleanupPageRoot?.()}});window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router");';
+  return 'const o=window.__ECO_PAGES__?.navigation?.getOwnerState?.();if(!(o?.owner==="react-router"&&o.canHandleSpaNavigation)){window.__ECO_PAGES__?.navigation?.register({owner:"react-router",cleanupBeforeHandoff:async()=>{window.__ECO_PAGES__?.react?.cleanupPageRoot?.()}});window.__ECO_PAGES__?.navigation?.claimOwnership?.("react-router")}';
 }
 function createDevScriptWithRouter(options) {
   const { importPath, isMdx, router, reactImportPath, reactDomClientImportPath, routerImportPath } = options;
@@ -93,16 +96,20 @@ const mount = () => {
     window.__ECO_PAGES__.react.pageRoot = root;
   }
   window.__ECO_PAGES__.hmrHandlers["${importPath}"] = async (newUrl) => {
-    if (window.__ECO_PAGES__?.navigation?.getOwnerState().owner === "react-router") {
-      await window.__ECO_PAGES__?.navigation?.reloadCurrentPage?.({ clearCache: false, source: "react-router" });
-      console.log("[ecopages] ${getComponentType(isMdx)} component updated via router");
-      return;
-    }
     try {
       const newModule = await import(newUrl);
+      const nextProps = getPageData();
       ${getHmrImportStatement(isMdx)}
-      root.render(createTree(NewPage, props));
-      console.log("[ecopages] ${getComponentType(isMdx)} component updated");
+      window.__ECO_PAGES__.page = {
+        module: "${importPath}",
+        props: nextProps
+      };
+      root.render(createTree(NewPage, nextProps));
+      if (window.__ECO_PAGES__?.navigation?.getOwnerState().owner === "react-router") {
+        console.log("[ecopages] ${getComponentType(isMdx)} component updated via router");
+      } else {
+        console.log("[ecopages] ${getComponentType(isMdx)} component updated");
+      }
     } catch (e) {
       console.error("[ecopages] Failed to hot-reload ${getComponentType(isMdx)} component:", e);
     }
@@ -245,17 +252,22 @@ const resolveComponent = () => {
 };
 
 const mount = () => {
-  const target = document.querySelector(${targetSelector});
+  const targets = document.querySelectorAll(${targetSelector});
   const Component = resolveComponent();
-  if (!target || !Component) {
+  if (!Component || targets.length === 0) {
     return;
   }
-  const props = JSON.parse(atob(target.getAttribute("data-eco-props") || "e30="));
-  const container = document.createElement("eco-island");
-  container.style.display = "block";
-  target.replaceWith(container);
-  const root = createRoot(container);
-  root.render(createElement(Component, props));
+  targets.forEach((target) => {
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const props = JSON.parse(atob(target.getAttribute("data-eco-props") || "e30="));
+    const container = document.createElement("eco-island");
+    container.style.display = "block";
+    target.replaceWith(container);
+    const root = createRoot(container);
+    root.render(createElement(Component, props));
+  });
 };
 
 if (document.readyState === "loading") {
@@ -265,7 +277,7 @@ if (document.readyState === "loading") {
 }
 `.trim();
   }
-  return `import{createRoot as cr}from"${options.reactDomClientImportPath}";import{createElement as ce}from"${options.reactImportPath}";import*as M from"${options.importPath}";const r=${componentRef};const f=${componentFile};const mv=Object.values(M);const c=mv.find((e)=>{if(typeof e!=="function")return false;const ec=e.config?.__eco;if(!ec)return false;if(r&&ec.id===r)return true;if(f&&ec.file===f)return true;return false;})??(typeof M.default==="function"?M.default:mv.find((e)=>typeof e==="function")??null);const m=()=>{const t=document.querySelector(${targetSelector});if(!t||!c)return;const p=JSON.parse(atob(t.getAttribute("data-eco-props")||"e30="));const ct=document.createElement("eco-island");ct.style.display="block";t.replaceWith(ct);cr(ct).render(ce(c,p))};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m,{once:true}):m()`;
+  return `import{createRoot as cr}from"${options.reactDomClientImportPath}";import{createElement as ce}from"${options.reactImportPath}";import*as M from"${options.importPath}";const r=${componentRef};const f=${componentFile};const mv=Object.values(M);const c=mv.find((e)=>{if(typeof e!=="function")return false;const ec=e.config?.__eco;if(!ec)return false;if(r&&ec.id===r)return true;if(f&&ec.file===f)return true;return false;})??(typeof M.default==="function"?M.default:mv.find((e)=>typeof e==="function")??null);const m=()=>{const ts=document.querySelectorAll(${targetSelector});if(!c||ts.length===0)return;ts.forEach((t)=>{if(!(t instanceof HTMLElement))return;const p=JSON.parse(atob(t.getAttribute("data-eco-props")||"e30="));const ct=document.createElement("eco-island");ct.style.display="block";t.replaceWith(ct);cr(ct).render(ce(c,p))})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m,{once:true}):m()`;
 }
 export {
   createHydrationScript,