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

@ecopages/react 0.2.0-alpha.10 → 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 (20) hide show

package/CHANGELOG.md +12 -8
package/package.json +6 -6
package/src/react-hmr-strategy.d.ts +4 -2
package/src/react-hmr-strategy.js +36 -3
package/src/react-renderer.d.ts +20 -16
package/src/react-renderer.js +98 -42
package/src/react.plugin.js +2 -0
package/src/services/react-bundle.service.d.ts +3 -1
package/src/services/react-bundle.service.js +20 -2
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 +5 -2
package/src/services/react-runtime-bundle.service.d.ts +2 -0
package/src/services/react-runtime-bundle.service.js +5 -0
package/src/utils/client-graph-boundary-plugin.js +2 -2
package/src/utils/declared-modules.js +4 -1
package/src/utils/hydration-scripts.d.ts +1 -3
package/src/utils/hydration-scripts.js +31 -19

package/CHANGELOG.md CHANGED Viewed

@@ -6,17 +6,21 @@ All notable changes to `@ecopages/react` are documented here.
 ## [UNRELEASED] — TBD
-### Features & Performance
+### Bug Fixes
-- **Performance Hydration**: Introduced static reachability analysis to enforce explicit hydration boundaries and optimized HMR via metadata caching.
-- **Service-Oriented Internals**: Refactored the integration into focused core-backed services for bundling, hydration, and page-module loading.
-- **React MDX**: Inlined MDX support directly into the React integration for a zero-config setup, including Node-native compatibility for experimental startup.
+- 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.
-### Bug Fixes & Refactoring
+### Features
-- **Handoff Stability**: Standardized router-backed page payloads and document owner markers for mixed-router stability during navigation.
-- **Hydration Hardening**: Fixed island remount races, prop collisions, and layout metadata resolution during development and route handoffs.
-- **Architecture**: Centralized runtime specifiers and consolidated browser-side integration state under `window.__ECO_PAGES__`.
+- Added built-in React MDX support and reachability-based hydration analysis for React page bundles.
+### Refactoring
+- Consolidated React bundling, hydration, and runtime state behind shared service boundaries and `window.__ECO_PAGES__`.
 ---

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.10",
+  "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.10",
+    "@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.10",
-    "@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

@@ -6,7 +6,7 @@
  *
  * @module
  */
-import { HmrStrategy, HmrStrategyType, type HmrAction } from '@ecopages/core/hmr/hmr-strategy';
+import { HmrStrategy, type HmrAction } from '@ecopages/core/hmr/hmr-strategy';
 import type { DefaultHmrContext } from '@ecopages/core';
 import type { CompileOptions } from '@mdx-js/mdx';
 import type { ReactHmrPageMetadataCache } from './services/react-hmr-page-metadata-cache.js';
@@ -49,7 +49,7 @@ import type { ReactHmrPageMetadataCache } from './services/react-hmr-page-metada
  * ```
  */
 export declare class ReactHmrStrategy extends HmrStrategy {
-    readonly type = HmrStrategyType.INTEGRATION;
+    readonly type: 100;
     private mdxCompilerOptions?;
     private readonly ownedTemplateExtensions;
     private readonly allTemplateExtensions;
@@ -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.
      *
@@ -128,6 +129,7 @@ export declare class ReactHmrStrategy extends HmrStrategy {
      * @returns True if bundling was successful
      */
     private bundleReactEntrypoint;
+    private resolveTempOutputPath;
     /**
      * Encodes dynamic route segments (brackets) in file paths.
      * Converts `[slug]` to `_slug_` to avoid filesystem issues.

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) {
@@ -225,13 +237,33 @@ class ReactHmrStrategy extends HmrStrategy {
         appLogger.error(`No output file generated for ${entrypointPath}`);
         return false;
       }
-      const processed = await this.processOutput(tempFile, outputPath, outputUrl);
+      const resolvedTempFile = await this.resolveTempOutputPath(tempFile);
+      if (!resolvedTempFile) {
+        appLogger.debug(`Skipping stale temp output for ${outputUrl}: ${tempFile}`);
+        return false;
+      }
+      const processed = await this.processOutput(resolvedTempFile, outputPath, outputUrl);
       return processed;
     } catch (error) {
       appLogger.error(`Error bundling ${entrypointPath}:`, error);
       return false;
     }
   }
+  async resolveTempOutputPath(tempPath) {
+    if (fileSystem.exists(tempPath)) {
+      return tempPath;
+    }
+    if (!tempPath.includes("[hash]")) {
+      return tempPath;
+    }
+    const directory = path.dirname(tempPath);
+    const pattern = path.basename(tempPath).replaceAll("[hash]", "*");
+    const matches = await fileSystem.glob([pattern], { cwd: directory });
+    if (matches.length === 0) {
+      return null;
+    }
+    return path.isAbsolute(matches[0]) ? matches[0] : path.join(directory, matches[0]);
+  }
   /**
    * Encodes dynamic route segments (brackets) in file paths.
    * Converts `[slug]` to `_slug_` to avoid filesystem issues.
@@ -255,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

@@ -2,7 +2,7 @@
  * This module contains the React renderer
  * @module
  */
-import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoComponentConfig, EcoPageFile, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
+import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoPageFile, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
 import { IntegrationRenderer, type RenderToResponseContext } from '@ecopages/core/route-renderer/integration-renderer';
 import type { ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
 import { type ReactNode } from 'react';
@@ -12,11 +12,6 @@ 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';
-type ReactPageModule = EcoPageFile<{
-    config?: EcoComponentConfig;
-}> & {
-    config?: EcoComponentConfig;
-};
 /**
  * Error thrown when an error occurs while rendering a React component.
  */
@@ -132,6 +127,20 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * if that shell yields a string that can be inserted into the final document.
      */
     private renderNonReactShellComponent;
+    /**
+     * Renders one React component boundary for marker-graph orchestration.
+     *
+     * 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 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 resolved child markup preserved.
+     */
+    private renderComponentHtml;
+    private buildHydrationProps;
     /**
      * Produces the page body before the final HTML template is applied.
      *
@@ -156,6 +165,8 @@ 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 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
      * deterministic mount target per component instance.
@@ -167,6 +178,9 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * @returns True if the file is an MDX file
      */
     isMdxFile(filePath: string): boolean;
+    protected usesIntegrationPageImporter(file: string): boolean;
+    protected importIntegrationPageFile(file: string): Promise<EcoPageFile>;
+    protected normalizeImportedPageFile<TPageModule extends EcoPageFile>(file: string, pageModule: TPageModule): TPageModule;
     /**
      * Processes MDX-specific configuration dependencies including layout dependencies.
      * @param pagePath - Absolute path to the MDX page file
@@ -176,15 +190,6 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
     private processDeclaredMdxSsrLazyDependencies;
     private collectDeclaredMdxSsrLazyDependencies;
     buildRouteRenderAssets(pagePath: string): Promise<ProcessedAsset[]>;
-    /**
-     * Imports a page module while normalizing React MDX modules to the same shape
-     * as ordinary React page files.
-     *
-     * MDX page imports can expose `config` separately from the default export. The
-     * React renderer reattaches that config to the page component so downstream
-     * layout, dependency, and hydration logic can treat MDX and TSX pages the same.
-     */
-    protected importPageFile(file: string): Promise<ReactPageModule>;
     /**
      * Renders a full route response for the filesystem page pipeline.
      *
@@ -222,4 +227,3 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      */
     renderToResponse<P = Record<string, unknown>>(view: EcoComponent<P>, props: P, ctx: RenderToResponseContext): Promise<Response>;
 }
-export {};

package/src/react-renderer.js CHANGED Viewed

@@ -13,7 +13,25 @@ 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;
+  do {
+    previous = decoded;
+    decoded = decoded.replaceAll("&quot;", '"').replaceAll("&#39;", "'").replaceAll("&#x27;", "'").replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&amp;", "&");
+  } while (decoded !== previous);
+  return decoded;
+}
+function restoreEscapedComponentMarkers(html) {
+  return html.replace(
+    /&(?:amp;)?lt;eco-marker\b[\s\S]*?&(?:amp;)?gt;&(?:amp;)?lt;\/eco-marker&(?:amp;)?gt;/g,
+    (marker) => decodeHtmlEntities(marker)
+  );
+}
 class ReactRenderError extends Error {
   constructor(message) {
     super(message);
@@ -53,7 +71,9 @@ class ReactRenderer extends IntegrationRenderer {
     this.bundleService = new ReactBundleService({
       rootDir: this.appConfig.rootDir,
       routerAdapter: ReactRenderer.routerAdapter,
-      mdxCompilerOptions: ReactRenderer.mdxCompilerOptions
+      mdxCompilerOptions: ReactRenderer.mdxCompilerOptions,
+      jsxImportSource: (this.appConfig.integrations ?? []).find((integration) => integration.name === this.name)?.jsxImportSource,
+      nonReactExtensions: (this.appConfig.integrations ?? []).filter((integration) => integration.name !== this.name).flatMap((integration) => integration.extensions)
     });
     this.pageModuleService = new ReactPageModuleService({
       rootDir: this.appConfig.rootDir,
@@ -197,6 +217,38 @@ class ReactRenderer extends IntegrationRenderer {
     }
     throw new ReactRenderError(`${label} must return a string when used as a mixed shell for React pages.`);
   }
+  /**
+   * Renders one React component boundary for marker-graph orchestration.
+   *
+   * 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 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 resolved child markup preserved.
+   */
+  renderComponentHtml(input, context) {
+    if (input.children === void 0) {
+      return restoreEscapedComponentMarkers(
+        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(resolvedChildHtml));
+  }
+  buildHydrationProps(props) {
+    if (!props || !Object.prototype.hasOwnProperty.call(props, "locals")) {
+      return props ?? {};
+    }
+    const { locals: _locals, ...hydrationProps } = props;
+    return hydrationProps;
+  }
   /**
    * Produces the page body before the final HTML template is applied.
    *
@@ -206,7 +258,7 @@ class ReactRenderer extends IntegrationRenderer {
    */
   async composePageContent(options) {
     const pageElement = createElement(options.Page, options.pageProps);
-    const pageHtml = renderToString(pageElement);
+    const pageHtml = restoreEscapedComponentMarkers(renderToString(pageElement));
     const layoutProps = options.locals ? { locals: options.locals } : {};
     if (!options.Layout) {
       return { contentNode: pageElement, contentHtml: pageHtml };
@@ -215,7 +267,7 @@ class ReactRenderer extends IntegrationRenderer {
       const layoutElement = createElement(this.asReactComponent(options.Layout), layoutProps, pageElement);
       return {
         contentNode: layoutElement,
-        contentHtml: renderToString(layoutElement)
+        contentHtml: restoreEscapedComponentMarkers(renderToString(layoutElement))
       };
     }
     const layoutHtml = await this.renderNonReactShellComponent(
@@ -234,19 +286,23 @@ class ReactRenderer extends IntegrationRenderer {
    */
   async renderDocument(options) {
     if (this.isReactManagedComponent(options.HtmlTemplate)) {
-      return renderToReadableStream(
-        createElement(
-          this.asReactComponent(options.HtmlTemplate),
-          {
-            metadata: options.metadata,
-            pageProps: options.pageProps
-          },
-          options.contentNode
+      const rawChildrenToken = "__ECO_RAW_HTML_DOCUMENT_CHILD__";
+      const html = restoreEscapedComponentMarkers(
+        renderToString(
+          createElement(
+            this.asReactComponent(options.HtmlTemplate),
+            {
+              metadata: options.metadata,
+              pageProps: options.pageProps
+            },
+            rawChildrenToken
+          )
         )
       );
+      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,
@@ -265,32 +321,32 @@ 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 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
    * deterministic mount target per component instance.
    */
   async renderComponent(input) {
-    const Component = this.asReactComponent(input.component);
     const componentConfig = input.component.config;
-    const element = input.children === void 0 ? createElement(Component, input.props) : createElement(Component, input.props, input.children);
-    let html = renderToString(element);
+    const context = input.integrationContext ?? {};
+    const hasResolvedChildHtml = input.children !== void 0;
+    let html = this.renderComponentHtml(input, context);
     let canAttachAttributes = hasSingleRootElement(html);
     let rootTag = this.getRootTagName(html);
     const componentFile = componentConfig?.__eco?.file;
-    const context = input.integrationContext ?? {};
     let rootAttributes;
     let assets;
-    if (canAttachAttributes && componentFile && context.componentInstanceId && this.assetProcessingService) {
+    if (canAttachAttributes && componentFile && context.componentInstanceId && this.assetProcessingService && !hasResolvedChildHtml) {
       const componentInstanceId = context.componentInstanceId;
       assets = await this.hydrationAssetService.buildComponentRenderAssets(
         componentFile,
-        componentInstanceId,
-        input.props,
         componentConfig
       );
       rootAttributes = {
         "data-eco-component-id": componentInstanceId,
-        "data-eco-props": btoa(JSON.stringify(input.props ?? {}))
+        "data-eco-component-key": getReactIslandComponentKey(componentFile, componentConfig),
+        "data-eco-props": btoa(JSON.stringify(this.buildHydrationProps(input.props)))
       };
     }
     return {
@@ -310,13 +366,33 @@ class ReactRenderer extends IntegrationRenderer {
   isMdxFile(filePath) {
     return this.pageModuleService.isMdxFile(filePath);
   }
+  usesIntegrationPageImporter(file) {
+    return this.pageModuleService.isMdxFile(file);
+  }
+  async importIntegrationPageFile(file) {
+    return await this.pageModuleService.importMdxPageFile(file);
+  }
+  normalizeImportedPageFile(file, pageModule) {
+    const reactModule = pageModule;
+    const { default: Page, getMetadata, config } = reactModule;
+    if (this.pageModuleService.isMdxFile(file) && config) {
+      Page.config = config;
+    }
+    return {
+      ...pageModule,
+      default: Page,
+      getMetadata,
+      config
+    };
+  }
   /**
    * Processes MDX-specific configuration dependencies including layout dependencies.
    * @param pagePath - Absolute path to the MDX page file
    * @returns Processed assets for MDX configuration dependencies
    */
   async processMdxConfigDependencies(pagePath) {
-    const { config } = await this.importPageFile(pagePath);
+    const pageModule = await this.importPageFile(pagePath);
+    const config = pageModule.config;
     const resolvedLayout = config?.layout;
     const components = [];
     if (resolvedLayout?.config?.dependencies) {
@@ -439,26 +515,6 @@ class ReactRenderer extends IntegrationRenderer {
       );
     }
   }
-  /**
-   * Imports a page module while normalizing React MDX modules to the same shape
-   * as ordinary React page files.
-   *
-   * MDX page imports can expose `config` separately from the default export. The
-   * React renderer reattaches that config to the page component so downstream
-   * layout, dependency, and hydration logic can treat MDX and TSX pages the same.
-   */
-  async importPageFile(file) {
-    const module = this.pageModuleService.isMdxFile(file) ? await this.pageModuleService.importMdxPageFile(file) : await super.importPageFile(file);
-    const { default: Page, getMetadata, config } = module;
-    if (this.pageModuleService.isMdxFile(file) && config) {
-      Page.config = config;
-    }
-    return {
-      default: Page,
-      getMetadata,
-      config
-    };
-  }
   /**
    * Renders a full route response for the filesystem page pipeline.
    *

package/src/react.plugin.js CHANGED Viewed

@@ -38,6 +38,7 @@ class ReactPlugin extends IntegrationPlugin {
     super({
       name: PLUGIN_NAME,
       extensions,
+      jsxImportSource: "react",
       ...restOptions
     });
     this.mdxEnabled = options?.mdx?.enabled ?? false;
@@ -70,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.d.ts CHANGED Viewed

@@ -16,6 +16,8 @@ export interface ReactBundleServiceConfig {
     rootDir: string;
     routerAdapter?: ReactRouterAdapter;
     mdxCompilerOptions?: CompileOptions;
+    nonReactExtensions?: string[];
+    jsxImportSource?: string;
 }
 /**
  * Manages esbuild bundle configuration and plugin creation for React page/component builds.
@@ -41,5 +43,5 @@ export declare class ReactBundleService {
      * Creates the esbuild plugin that rewrites bare React specifiers
      * to their runtime asset URLs.
      */
-    createRuntimeAliasPlugin(runtimeSpecifierMap: Record<string, string>): import("packages/core/src/build/build-types.ts").EcoBuildPlugin | null;
+    createRuntimeAliasPlugin(runtimeSpecifierMap: Record<string, string>): import("@ecopages/core/build/build-types").EcoBuildPlugin | null;
 }

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

@@ -6,6 +6,7 @@ import {
 } from "../utils/react-runtime-specifier-map.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;
@@ -13,6 +14,7 @@ class ReactBundleService {
   constructor(config) {
     this.config = config;
     this.runtimeBundleService = new ReactRuntimeBundleService({
+      rootDir: config.rootDir,
       routerAdapter: config.routerAdapter
     });
   }
@@ -48,6 +50,11 @@ class ReactBundleService {
       declaredModules,
       alwaysAllowSpecifiers: getReactClientGraphAllowSpecifiers([], this.config.routerAdapter)
     });
+    const foreignJsxOverridePlugin = createForeignJsxOverridePlugin({
+      name: "react-renderer-foreign-jsx-override",
+      hostJsxImportSource: this.config.jsxImportSource ?? "react",
+      foreignExtensions: this.config.nonReactExtensions ?? []
+    });
     const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeSpecifierMap);
     const useSyncExternalStoreShimPlugin = createUseSyncExternalStoreShimPlugin({
       name: "react-renderer-use-sync-external-store-shim",
@@ -56,9 +63,20 @@ class ReactBundleService {
     if (isMdx && this.config.mdxCompilerOptions) {
       const { createReactMdxLoaderPlugin } = await import("../utils/react-mdx-loader-plugin.js");
       const mdxPlugin = createReactMdxLoaderPlugin(this.config.mdxCompilerOptions);
-      options.plugins = [graphBoundaryPlugin, runtimeAliasPlugin, mdxPlugin, useSyncExternalStoreShimPlugin];
+      options.plugins = [
+        foreignJsxOverridePlugin,
+        graphBoundaryPlugin,
+        runtimeAliasPlugin,
+        mdxPlugin,
+        useSyncExternalStoreShimPlugin
+      ];
     } else {
-      options.plugins = [graphBoundaryPlugin, runtimeAliasPlugin, useSyncExternalStoreShimPlugin];
+      options.plugins = [
+        foreignJsxOverridePlugin,
+        graphBoundaryPlugin,
+        runtimeAliasPlugin,
+        useSyncExternalStoreShimPlugin
+      ];
     }
     return options;
   }

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,
@@ -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 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/client-graph-boundary-plugin.js CHANGED Viewed

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

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

@@ -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,