npm - @ecopages/react - Versions diffs - 0.2.0-alpha.11 → 0.2.0-alpha.12 - Mend

@ecopages/react 0.2.0-alpha.11 → 0.2.0-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +3 -0
package/package.json +6 -6
package/src/react-hmr-strategy.d.ts +1 -0
package/src/react-hmr-strategy.js +15 -2
package/src/react-renderer.d.ts +4 -4
package/src/react-renderer.js +13 -10
package/src/react.plugin.js +1 -0
package/src/services/react-bundle.service.js +5 -3
package/src/services/react-hmr-page-metadata-cache.d.ts +9 -0
package/src/services/react-hmr-page-metadata-cache.js +18 -2
package/src/services/react-hydration-asset.service.d.ts +7 -6
package/src/services/react-hydration-asset.service.js +26 -14
package/src/services/react-page-module.service.js +1 -1
package/src/services/react-runtime-bundle.service.d.ts +2 -0
package/src/services/react-runtime-bundle.service.js +5 -0
package/src/utils/hydration-scripts.d.ts +1 -3
package/src/utils/hydration-scripts.js +14 -9
package/src/utils/foreign-jsx-override-plugin.d.ts +0 -19
package/src/utils/foreign-jsx-override-plugin.js +0 -43

package/CHANGELOG.md CHANGED Viewed

@@ -10,6 +10,9 @@ All notable changes to `@ecopages/react` are documented here.
 - Fixed development hydration, router HMR ownership, and page bootstraps across Bun, Vite, and Nitro flows.
 - Fixed React page and MDX module loading to use host-provided loaders on Vite or Nitro and a lightweight browser `eco` shim in preview and build output.
+- Fixed React Fast Refresh to keep React-owned island entrypoints on the React HMR path while ignoring non-React watched script entrypoints.
+- Fixed `renderDocument` to prepend `<!DOCTYPE html>` for both React-managed and non-React HTML templates, matching the behavior of all other integrations.
+- Fixed React island asset generation to share both bundled component modules and hydration bootstraps across repeated island instances of the same component.
 ### Features

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.11",
+  "version": "0.2.0-alpha.12",
   "description": "React integration for Ecopages",
   "keywords": [
     "ecopages",
@@ -53,19 +53,19 @@
     "directory": "packages/integrations/react"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.11",
+    "@ecopages/core": "0.2.0-alpha.12",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "react": "^19",
     "react-dom": "^19"
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-alpha.11",
-    "@ecopages/logger": "latest",
+    "@ecopages/file-system": "0.2.0-alpha.12",
+    "@ecopages/logger": "^0.2.3",
     "@mdx-js/esbuild": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",
-    "oxc-parser": "^0.114.0",
-    "oxc-transform": "^0.114.0",
+    "oxc-parser": "^0.124.0",
+    "oxc-transform": "^0.124.0",
     "source-map": "^0.7.6",
     "vfile": "^6.0.3"
   },

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

@@ -89,6 +89,7 @@ export declare class ReactHmrStrategy extends HmrStrategy {
      */
     private isRouteTemplate;
     private resolveTemplateExtension;
+    private ownsWatchedEntrypoint;
     /**
      * Determines if the file is a React/MDX entrypoint that's registered for HMR.
      *

package/src/react-hmr-strategy.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import path from "node:path";
 import { HmrStrategy, HmrStrategyType } from "@ecopages/core/hmr/hmr-strategy";
+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";
 import { Logger } from "@ecopages/logger";
@@ -49,8 +50,9 @@ class ReactHmrStrategy extends HmrStrategy {
    * (including `node:*`) from breaking the browser bundle.
    */
   getBuildPlugins(declaredModules) {
-    const allowSpecifiers = getReactClientGraphAllowSpecifiers(this.context.getSpecifierMap().keys());
-    const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(this.context.getSpecifierMap(), {
+    const runtimeSpecifierMap = this.context.getSpecifierMap();
+    const allowSpecifiers = getReactClientGraphAllowSpecifiers(runtimeSpecifierMap.keys());
+    const runtimeAliasPlugin = createRuntimeSpecifierAliasPlugin(runtimeSpecifierMap, {
       name: "react-hmr-runtime-specifier-alias"
     });
     return [
@@ -97,6 +99,9 @@ class ReactHmrStrategy extends HmrStrategy {
   resolveTemplateExtension(filePath) {
     return this.allTemplateExtensions.find((extension) => filePath.endsWith(extension));
   }
+  ownsWatchedEntrypoint(filePath) {
+    return this.pageMetadataCache.ownsEntrypoint(filePath);
+  }
   /**
    * Determines if the file is a React/MDX entrypoint that's registered for HMR.
    *
@@ -109,6 +114,9 @@ class ReactHmrStrategy extends HmrStrategy {
     if (watchedFiles.size === 0) {
       return false;
     }
+    if (watchedFiles.has(filePath)) {
+      return this.ownsWatchedEntrypoint(filePath);
+    }
     return this.isReactEntrypoint(filePath);
   }
   /**
@@ -148,6 +156,10 @@ class ReactHmrStrategy extends HmrStrategy {
       appLogger.debug(`Detected layout file change: ${_filePath}`);
     }
     const changedEntrypointOutput = watchedFiles.get(_filePath);
+    if (changedEntrypointOutput && !this.ownsWatchedEntrypoint(_filePath)) {
+      appLogger.debug(`Skipping non-React watched entrypoint: ${_filePath}`);
+      return { type: "none" };
+    }
     const entrypointsToBuild = changedEntrypointOutput ? [[_filePath, changedEntrypointOutput]] : watchedFiles.entries();
     const updates = [];
     for (const [entrypoint, outputUrl] of entrypointsToBuild) {
@@ -275,6 +287,7 @@ class ReactHmrStrategy extends HmrStrategy {
     }
     try {
       let code = await fileSystem.readFile(tempPath);
+      code = rewriteRuntimeSpecifierAliases(code, this.context.getSpecifierMap());
       code = injectHmrHandler(code);
       await fileSystem.writeAsync(finalPath, code);
       await fileSystem.removeAsync(tempPath).catch(() => {

package/src/react-renderer.d.ts CHANGED Viewed

@@ -130,14 +130,14 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
     /**
      * Renders one React component boundary for marker-graph orchestration.
      *
-     * When the marker resolver has already stitched child HTML for this boundary,
+     * When the marker resolver has already resolved child HTML for this boundary,
      * the child payload must remain raw SSR output rather than a React string
      * child, otherwise React would escape it. This helper renders a unique token
-     * through React and swaps that token back to the stitched HTML afterward.
+     * through React and swaps that token back to the resolved HTML afterward.
      *
      * @param input Component render input reconstructed from marker metadata.
      * @param context React-specific render context for stable token generation.
-     * @returns Serialized component HTML with stitched child markup preserved.
+     * @returns Serialized component HTML with resolved child markup preserved.
      */
     private renderComponentHtml;
     private buildHydrationProps;
@@ -165,7 +165,7 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * - When an explicit component instance id is provided, a stable
      *   `data-eco-component-id` attribute is attached so island hydration can target it.
      * - Without an explicit instance id, component renders remain plain SSR output.
-     * - When stitched child HTML is provided, that boundary is treated as a pure SSR
+     * - When resolved child HTML is provided, that boundary is treated as a pure SSR
      *   composition step and does not emit hydration assets for the parent wrapper.
      *
      * This preserves DOM shape for global CSS/layout selectors while keeping a

package/src/react-renderer.js CHANGED Viewed

@@ -13,7 +13,10 @@ import { hasSingleRootElement } from "./utils/html-boundary.js";
 import { ReactBundleService } from "./services/react-bundle.service.js";
 import { ReactHmrPageMetadataCache } from "./services/react-hmr-page-metadata-cache.js";
 import { ReactPageModuleService } from "./services/react-page-module.service.js";
-import { ReactHydrationAssetService } from "./services/react-hydration-asset.service.js";
+import {
+  getReactIslandComponentKey,
+  ReactHydrationAssetService
+} from "./services/react-hydration-asset.service.js";
 function decodeHtmlEntities(value) {
   let decoded = value;
   let previous;
@@ -217,14 +220,14 @@ class ReactRenderer extends IntegrationRenderer {
   /**
    * Renders one React component boundary for marker-graph orchestration.
    *
-   * When the marker resolver has already stitched child HTML for this boundary,
+   * When the marker resolver has already resolved child HTML for this boundary,
    * the child payload must remain raw SSR output rather than a React string
    * child, otherwise React would escape it. This helper renders a unique token
-   * through React and swaps that token back to the stitched HTML afterward.
+   * through React and swaps that token back to the resolved HTML afterward.
    *
    * @param input Component render input reconstructed from marker metadata.
    * @param context React-specific render context for stable token generation.
-   * @returns Serialized component HTML with stitched child markup preserved.
+   * @returns Serialized component HTML with resolved child markup preserved.
    */
   renderComponentHtml(input, context) {
     if (input.children === void 0) {
@@ -232,11 +235,12 @@ class ReactRenderer extends IntegrationRenderer {
         renderToString(createElement(this.asReactComponent(input.component), input.props))
       );
     }
+    const resolvedChildHtml = typeof input.children === "string" ? input.children : String(input.children ?? "");
     const rawChildrenToken = `__ECO_RAW_HTML_CHILD_${context.componentInstanceId ?? "component"}__`;
     const html = renderToString(
       createElement(this.asReactComponent(input.component), input.props, rawChildrenToken)
     );
-    return restoreEscapedComponentMarkers(html.split(rawChildrenToken).join(input.children));
+    return restoreEscapedComponentMarkers(html.split(rawChildrenToken).join(resolvedChildHtml));
   }
   buildHydrationProps(props) {
     if (!props || !Object.prototype.hasOwnProperty.call(props, "locals")) {
@@ -295,10 +299,10 @@ class ReactRenderer extends IntegrationRenderer {
           )
         )
       );
-      return html.split(rawChildrenToken).join(options.contentHtml);
+      return this.DOC_TYPE + html.split(rawChildrenToken).join(options.contentHtml);
     }
     const headContent = ReactRenderer.routerAdapter ? this.buildRouterPageDataScript(options.pageProps) : void 0;
-    return this.renderNonReactShellComponent(
+    return this.DOC_TYPE + await this.renderNonReactShellComponent(
       this.asNonReactShellComponent(options.HtmlTemplate),
       {
         metadata: options.metadata,
@@ -317,7 +321,7 @@ class ReactRenderer extends IntegrationRenderer {
    * - When an explicit component instance id is provided, a stable
    *   `data-eco-component-id` attribute is attached so island hydration can target it.
    * - Without an explicit instance id, component renders remain plain SSR output.
-   * - When stitched child HTML is provided, that boundary is treated as a pure SSR
+   * - When resolved child HTML is provided, that boundary is treated as a pure SSR
    *   composition step and does not emit hydration assets for the parent wrapper.
    *
    * This preserves DOM shape for global CSS/layout selectors while keeping a
@@ -337,12 +341,11 @@ class ReactRenderer extends IntegrationRenderer {
       const componentInstanceId = context.componentInstanceId;
       assets = await this.hydrationAssetService.buildComponentRenderAssets(
         componentFile,
-        componentInstanceId,
-        this.buildHydrationProps(input.props),
         componentConfig
       );
       rootAttributes = {
         "data-eco-component-id": componentInstanceId,
+        "data-eco-component-key": getReactIslandComponentKey(componentFile, componentConfig),
         "data-eco-props": btoa(JSON.stringify(this.buildHydrationProps(input.props)))
       };
     }

package/src/react.plugin.js CHANGED Viewed

@@ -71,6 +71,7 @@ class ReactPlugin extends IntegrationPlugin {
     if (this.runtimeDependenciesInitialized) {
       return;
     }
+    this.runtimeBundleService.setRootDir(this.appConfig?.rootDir);
     this.integrationDependencies.unshift(...this.runtimeBundleService.getDependencies());
     this.runtimeDependenciesInitialized = true;
   }

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

@@ -4,9 +4,9 @@ import {
   getReactClientGraphAllowSpecifiers,
   getReactRuntimeExternalSpecifiers
 } from "../utils/react-runtime-specifier-map.js";
-import { createForeignJsxOverridePlugin } from "../utils/foreign-jsx-override-plugin.js";
 import { createUseSyncExternalStoreShimPlugin } from "../utils/use-sync-external-store-shim-plugin.js";
 import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
+import { createForeignJsxOverridePlugin } from "@ecopages/core/plugins/foreign-jsx-override-plugin";
 import { ReactRuntimeBundleService } from "./react-runtime-bundle.service.js";
 class ReactBundleService {
   runtimeBundleService;
@@ -14,6 +14,7 @@ class ReactBundleService {
   constructor(config) {
     this.config = config;
     this.runtimeBundleService = new ReactRuntimeBundleService({
+      rootDir: config.rootDir,
       routerAdapter: config.routerAdapter
     });
   }
@@ -49,9 +50,10 @@ class ReactBundleService {
       declaredModules,
       alwaysAllowSpecifiers: getReactClientGraphAllowSpecifiers([], this.config.routerAdapter)
     });
-    const foreignJsxOverridePlugin = createForeignJsxOverridePlugin(this.config.nonReactExtensions ?? [], {
+    const foreignJsxOverridePlugin = createForeignJsxOverridePlugin({
       name: "react-renderer-foreign-jsx-override",
-      jsxImportSource: this.config.jsxImportSource ?? "react"
+      hostJsxImportSource: this.config.jsxImportSource ?? "react",
+      foreignExtensions: this.config.nonReactExtensions ?? []
     });
     const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeSpecifierMap);
     const useSyncExternalStoreShimPlugin = createUseSyncExternalStoreShimPlugin({

package/src/services/react-hmr-page-metadata-cache.d.ts CHANGED Viewed

@@ -6,6 +6,11 @@
  */
 export declare class ReactHmrPageMetadataCache {
     private readonly declaredModulesByEntrypoint;
+    private readonly ownedEntrypoints;
+    /**
+     * Marks an HMR entrypoint as React-owned.
+     */
+    markOwnedEntrypoint(entrypointPath: string): void;
     /**
      * Stores the declared browser modules for a page entrypoint.
      */
@@ -14,4 +19,8 @@ export declare class ReactHmrPageMetadataCache {
      * Returns the last known declared browser modules for a page entrypoint.
      */
     getDeclaredModules(entrypointPath: string): string[] | undefined;
+    /**
+     * Returns true when the watched entrypoint is owned by the React integration.
+     */
+    ownsEntrypoint(entrypointPath: string): boolean;
 }

package/src/services/react-hmr-page-metadata-cache.js CHANGED Viewed

@@ -1,18 +1,34 @@
+import path from "node:path";
 class ReactHmrPageMetadataCache {
   declaredModulesByEntrypoint = /* @__PURE__ */ new Map();
+  ownedEntrypoints = /* @__PURE__ */ new Set();
+  /**
+   * Marks an HMR entrypoint as React-owned.
+   */
+  markOwnedEntrypoint(entrypointPath) {
+    this.ownedEntrypoints.add(path.resolve(entrypointPath));
+  }
   /**
    * Stores the declared browser modules for a page entrypoint.
    */
   setDeclaredModules(entrypointPath, declaredModules) {
-    this.declaredModulesByEntrypoint.set(entrypointPath, [...declaredModules]);
+    const resolvedEntrypointPath = path.resolve(entrypointPath);
+    this.markOwnedEntrypoint(resolvedEntrypointPath);
+    this.declaredModulesByEntrypoint.set(resolvedEntrypointPath, [...declaredModules]);
   }
   /**
    * Returns the last known declared browser modules for a page entrypoint.
    */
   getDeclaredModules(entrypointPath) {
-    const declaredModules = this.declaredModulesByEntrypoint.get(entrypointPath);
+    const declaredModules = this.declaredModulesByEntrypoint.get(path.resolve(entrypointPath));
     return declaredModules ? [...declaredModules] : void 0;
   }
+  /**
+   * Returns true when the watched entrypoint is owned by the React integration.
+   */
+  ownsEntrypoint(entrypointPath) {
+    return this.ownedEntrypoints.has(path.resolve(entrypointPath));
+  }
 }
 export {
   ReactHmrPageMetadataCache

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -42,7 +42,7 @@ class ReactPageModuleService {
         entrypoints: [filePath],
         root: this.config.rootDir,
         outdir,
-        target: "node",
+        target: "es2022",
         format: "esm",
         sourcemap: "none",
         splitting: false,

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

@@ -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 CHANGED Viewed

@@ -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/hydration-scripts.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -252,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") {
@@ -272,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,

package/src/utils/foreign-jsx-override-plugin.d.ts DELETED Viewed

@@ -1,19 +0,0 @@
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-interface ForeignJsxOverrideOptions {
-    jsxImportSource: string;
-    name?: string;
-}
-/**
- * Esbuild plugin that overrides the JSX import source for non-host integration
- * files (`.lit.tsx`, `.kita.tsx`, etc.) when bundled into a host client bundle.
- *
- * Without this plugin, non-host component files inherit the project-level
- * `jsxImportSource` from tsconfig (typically `@kitajs/html`), which produces
- * HTML strings from JSX. When the host framework calls those functions during
- * hydration, it renders the string as a text node instead of a DOM element.
- *
- * This plugin prepends the host's `@jsxImportSource` pragma so esbuild compiles
- * their JSX to the host framework's element creation calls.
- */
-export declare function createForeignJsxOverridePlugin(nonReactExtensions: string[], options: ForeignJsxOverrideOptions): EcoBuildPlugin;
-export {};

package/src/utils/foreign-jsx-override-plugin.js DELETED Viewed

@@ -1,43 +0,0 @@
-import { readFileSync } from "node:fs";
-function createForeignJsxOverridePlugin(nonReactExtensions, options) {
-  const extensions = nonReactExtensions.filter((ext) => ext.endsWith(".tsx") || ext.endsWith(".jsx"));
-  if (extensions.length === 0) {
-    return {
-      name: options.name ?? "react-foreign-jsx-override",
-      setup() {
-      }
-    };
-  }
-  function matchesNonReactExtension(id) {
-    for (const ext of extensions) {
-      if (id.endsWith(ext)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  const pragma = `/** @jsxImportSource ${options.jsxImportSource} */
-`;
-  const filter = new RegExp(`(${extensions.map((e) => e.replace(".", "\\.")).join("|")})$`);
-  return {
-    name: options.name ?? "react-foreign-jsx-override",
-    setup(build) {
-      build.onLoad({ filter }, (args) => {
-        if (!matchesNonReactExtension(args.path)) {
-          return void 0;
-        }
-        const source = readFileSync(args.path, "utf-8");
-        if (source.includes("@jsxImportSource")) {
-          return void 0;
-        }
-        return {
-          contents: pragma + source,
-          loader: "tsx"
-        };
-      });
-    }
-  };
-}
-export {
-  createForeignJsxOverridePlugin
-};