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

package/CHANGELOG.md

@@ -8,8 +8,7 @@ All notable changes to `@ecopages/react` are documented here.
 
 ### Bug Fixes
 
-- 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 hydration, Fast Refresh, module loading, doctype handling, island asset reuse, and mixed-renderer boundary resolution across Bun, Vite, and Nitro flows.
 
 ### Features
 
@@ -19,10 +18,12 @@ All notable changes to `@ecopages/react` are documented here.
 
 - Consolidated React bundling, hydration, and runtime state behind shared service boundaries and `window.__ECO_PAGES__`.
 
+### Documentation
+
+- Updated the README to document React-owned mixed boundaries and React MDX setup.
+
 ---
 
 ## Migration Notes
 
-- The React integration now requires explicit client boundary declarations for client-rendered components.
 - React MDX support is built in and no longer requires installing `@ecopages/mdx` just to enable React MDX routes.
-- The internal service layer is not part of the public API and may change between releases.

package/README.md

@@ -60,6 +60,16 @@ const config = await new ConfigBuilder()
 export default config;
 ```
 
+## Mixed Rendering
+
+The React integration can participate in mixed-renderer apps in three ways:
+
+- React can own the page or view directly.
+- React can render nested component boundaries inside pages owned by another integration.
+- React can render through non-React page, layout, or document shells when those shell components return strings.
+
+When a non-React render pass enters a React-owned boundary, Ecopages hands that boundary back to the React renderer. When React renders through a non-React shell, that shell must serialize to HTML so React can insert the result into the final response without escaping it.
+
 ## Server and Client Graph Contract
 
 The React integration supports Node.js modules and server-only code **only on the server execution graph**.

package/package.json

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

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

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

@@ -77,7 +77,7 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      *
      * React pages embedded in a non-React HTML shell still need to expose the same
      * page-data contract as fully React-owned documents so navigation and hydration
-     * can read one marker consistently.
+     * can read one shared document payload consistently.
      */
     private buildRouterPageDataScript;
     private getRouterDocumentAttributes;
@@ -111,14 +111,6 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * HTML transformer state.
      */
     private appendHydrationAssetsForFile;
-    /**
-     * Resolves metadata for direct `renderToResponse()` calls.
-     *
-     * View rendering bypasses the normal route-file pipeline, so metadata has to be
-     * evaluated here from either the component-level generator or the application
-     * default.
-     */
-    private resolveViewMetadata;
     /**
      * Renders a non-React layout or HTML template and enforces that mixed shells
      * return serialized HTML.
@@ -128,35 +120,23 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      */
     private renderNonReactShellComponent;
     /**
-     * Renders one React component boundary for marker-graph orchestration.
+     * Renders one React component boundary while preserving already-resolved child HTML.
      *
-     * When the marker resolver has already stitched 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.
+     * When nested boundary resolution has already produced 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 input Component render input for the current boundary.
      * @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 restoreRuntimeChildHtml;
+    private renderQueuedChildrenToHtml;
+    private resolveQueuedBoundaryHtml;
     private buildHydrationProps;
-    /**
-     * Produces the page body before the final HTML template is applied.
-     *
-     * This method owns the React/non-React layout split. React-managed layouts stay
-     * as React elements so they can stream normally; non-React layouts are rendered
-     * to HTML first and then passed through as serialized content.
-     */
-    private composePageContent;
-    /**
-     * Wraps composed page content in the final document template.
-     *
-     * React-owned HTML templates stream directly. Non-React templates receive
-     * pre-rendered page HTML plus the canonical React page-data payload so the
-     * client runtime can recover page data after cross-integration handoff.
-     */
-    private renderDocument;
     /**
      * Renders a React component for component-level orchestration.
      *
@@ -165,13 +145,17 @@ 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
      * deterministic mount target per component instance.
      */
     renderComponent(input: ComponentRenderInput): Promise<ComponentRenderResult>;
+    protected createComponentBoundaryRuntime(options: {
+        boundaryInput: ComponentRenderInput;
+        rendererCache: Map<string, IntegrationRenderer<any>>;
+    }): import("@ecopages/core").ComponentBoundaryRuntime;
     /**
      * Checks if the given file path corresponds to an MDX file based on configured extensions.
      * @param filePath - The file path to check

package/src/react-renderer.js

@@ -6,29 +6,14 @@ import { rapidhash } from "@ecopages/core/hash";
 import { AssetFactory } from "@ecopages/core/services/asset-processing-service";
 import { ECO_DOCUMENT_OWNER_ATTRIBUTE } from "@ecopages/core/router/navigation-coordinator";
 import path from "node:path";
-import { createElement } from "react";
+import { createElement, Fragment } from "react";
 import { renderToReadableStream, renderToString } from "react-dom/server";
 import { PLUGIN_NAME } from "./react.plugin.js";
 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";
-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)
-  );
-}
+import { getReactIslandComponentKey, ReactHydrationAssetService } from "./services/react-hydration-asset.service.js";
 class ReactRenderError extends Error {
   constructor(message) {
     super(message);
@@ -121,7 +106,7 @@ class ReactRenderer extends IntegrationRenderer {
    *
    * React pages embedded in a non-React HTML shell still need to expose the same
    * page-data contract as fully React-owned documents so navigation and hydration
-   * can read one marker consistently.
+   * can read one shared document payload consistently.
    */
   buildRouterPageDataScript(pageProps) {
     const safeJson = JSON.stringify(pageProps || {}).replace(/</g, "\\u003c");
@@ -180,25 +165,7 @@ class ReactRenderer extends IntegrationRenderer {
       return;
     }
     const hydrationAssets = await this.buildRouteRenderAssets(filePath);
-    this.htmlTransformer.setProcessedDependencies([
-      ...this.htmlTransformer.getProcessedDependencies(),
-      ...hydrationAssets
-    ]);
-  }
-  /**
-   * Resolves metadata for direct `renderToResponse()` calls.
-   *
-   * View rendering bypasses the normal route-file pipeline, so metadata has to be
-   * evaluated here from either the component-level generator or the application
-   * default.
-   */
-  async resolveViewMetadata(view, props) {
-    return view.metadata ? await view.metadata({
-      params: {},
-      query: {},
-      props,
-      appConfig: this.appConfig
-    }) : this.appConfig.defaultMetadata;
+    this.appendProcessedDependencies(hydrationAssets);
   }
   /**
    * Renders a non-React layout or HTML template and enforces that mixed shells
@@ -215,99 +182,77 @@ 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.
+   * Renders one React component boundary while preserving already-resolved child HTML.
    *
-   * When the marker resolver has already stitched 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.
+   * When nested boundary resolution has already produced 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 input Component render input for the current boundary.
    * @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) {
+  renderComponentHtml(input, context, runtimeContext) {
     if (input.children === void 0) {
-      return restoreEscapedComponentMarkers(
+      return this.normalizeBoundaryArtifactHtml(
         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"}__`;
+    if (runtimeContext) {
+      runtimeContext.rawChildrenToken = rawChildrenToken;
+      runtimeContext.rawChildrenHtml = resolvedChildHtml;
+    }
     const html = renderToString(
       createElement(this.asReactComponent(input.component), input.props, rawChildrenToken)
     );
-    return restoreEscapedComponentMarkers(html.split(rawChildrenToken).join(input.children));
+    return this.normalizeBoundaryArtifactHtml(html.split(rawChildrenToken).join(resolvedChildHtml));
   }
-  buildHydrationProps(props) {
-    if (!props || !Object.prototype.hasOwnProperty.call(props, "locals")) {
-      return props ?? {};
+  restoreRuntimeChildHtml(html, runtimeContext) {
+    if (!runtimeContext?.rawChildrenToken || runtimeContext.rawChildrenHtml === void 0) {
+      return html;
     }
-    const { locals: _locals, ...hydrationProps } = props;
-    return hydrationProps;
+    return html.split(runtimeContext.rawChildrenToken).join(runtimeContext.rawChildrenHtml);
   }
-  /**
-   * Produces the page body before the final HTML template is applied.
-   *
-   * This method owns the React/non-React layout split. React-managed layouts stay
-   * as React elements so they can stream normally; non-React layouts are rendered
-   * to HTML first and then passed through as serialized content.
-   */
-  async composePageContent(options) {
-    const pageElement = createElement(options.Page, options.pageProps);
-    const pageHtml = restoreEscapedComponentMarkers(renderToString(pageElement));
-    const layoutProps = options.locals ? { locals: options.locals } : {};
-    if (!options.Layout) {
-      return { contentNode: pageElement, contentHtml: pageHtml };
-    }
-    if (this.isReactManagedComponent(options.Layout)) {
-      const layoutElement = createElement(this.asReactComponent(options.Layout), layoutProps, pageElement);
-      return {
-        contentNode: layoutElement,
-        contentHtml: restoreEscapedComponentMarkers(renderToString(layoutElement))
-      };
+  async renderQueuedChildrenToHtml(children, runtimeContext, queuedResolutionsByToken, resolveToken) {
+    if (children === void 0) {
+      return void 0;
     }
-    const layoutHtml = await this.renderNonReactShellComponent(
-      this.asNonReactShellComponent(options.Layout),
-      { ...layoutProps, children: pageHtml },
-      "Layout"
+    let html = this.normalizeBoundaryArtifactHtml(
+      renderToString(createElement(Fragment, null, children))
     );
-    return { contentNode: layoutHtml, contentHtml: layoutHtml };
+    html = this.restoreRuntimeChildHtml(html, runtimeContext);
+    html = await this.resolveQueuedBoundaryTokens(html, queuedResolutionsByToken, resolveToken);
+    return html;
   }
-  /**
-   * Wraps composed page content in the final document template.
-   *
-   * React-owned HTML templates stream directly. Non-React templates receive
-   * pre-rendered page HTML plus the canonical React page-data payload so the
-   * client runtime can recover page data after cross-integration handoff.
-   */
-  async renderDocument(options) {
-    if (this.isReactManagedComponent(options.HtmlTemplate)) {
-      const rawChildrenToken = "__ECO_RAW_HTML_DOCUMENT_CHILD__";
-      const html = restoreEscapedComponentMarkers(
-        renderToString(
-          createElement(
-            this.asReactComponent(options.HtmlTemplate),
-            {
-              metadata: options.metadata,
-              pageProps: options.pageProps
-            },
-            rawChildrenToken
-          )
-        )
-      );
-      return html.split(rawChildrenToken).join(options.contentHtml);
+  async resolveQueuedBoundaryHtml(html, runtimeContext) {
+    return this.resolveRendererOwnedQueuedBoundaryHtml({
+      html,
+      runtimeContext,
+      queueLabel: "React",
+      renderQueuedChildren: async (children, currentRuntimeContext, queuedResolutionsByToken, resolveToken) => {
+        const renderedHtml = await this.renderQueuedChildrenToHtml(
+          children,
+          currentRuntimeContext,
+          queuedResolutionsByToken,
+          resolveToken
+        );
+        return {
+          assets: [],
+          html: renderedHtml
+        };
+      }
+    });
+  }
+  buildHydrationProps(props) {
+    if (!props || !Object.prototype.hasOwnProperty.call(props, "locals")) {
+      return props ?? {};
     }
-    const headContent = ReactRenderer.routerAdapter ? this.buildRouterPageDataScript(options.pageProps) : void 0;
-    return this.renderNonReactShellComponent(
-      this.asNonReactShellComponent(options.HtmlTemplate),
-      {
-        metadata: options.metadata,
-        pageProps: options.pageProps,
-        children: options.contentHtml,
-        headContent
-      },
-      "HtmlTemplate"
-    );
+    const { locals: _locals, ...hydrationProps } = props;
+    return hydrationProps;
   }
   /**
    * Renders a React component for component-level orchestration.
@@ -317,17 +262,49 @@ 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
    * deterministic mount target per component instance.
    */
   async renderComponent(input) {
+    const runtimeContext = this.getQueuedBoundaryRuntime(input);
+    if (!this.isReactManagedComponent(input.component)) {
+      let props = input.props;
+      if (input.children !== void 0) {
+        props = {
+          ...input.props,
+          children: typeof input.children === "string" ? input.children : String(input.children ?? "")
+        };
+      }
+      const html2 = await this.renderNonReactShellComponent(
+        this.asNonReactShellComponent(input.component),
+        props,
+        "Component"
+      );
+      const hasDependencies = Boolean(input.component.config?.dependencies);
+      const canResolveAssets = typeof this.assetProcessingService?.processDependencies === "function";
+      const assets2 = hasDependencies && canResolveAssets ? await this.processComponentDependencies([input.component]) : void 0;
+      const queuedBoundaryResolution2 = await this.resolveQueuedBoundaryHtml(html2, runtimeContext);
+      const mergedAssets2 = this.htmlTransformer.dedupeProcessedAssets([
+        ...assets2 ?? [],
+        ...queuedBoundaryResolution2.assets
+      ]);
+      return {
+        html: queuedBoundaryResolution2.html,
+        canAttachAttributes: true,
+        rootTag: this.getRootTagName(queuedBoundaryResolution2.html),
+        integrationName: this.name,
+        assets: mergedAssets2.length > 0 ? mergedAssets2 : void 0
+      };
+    }
     const componentConfig = input.component.config;
     const context = input.integrationContext ?? {};
     const hasResolvedChildHtml = input.children !== void 0;
-    let html = this.renderComponentHtml(input, context);
+    let html = this.renderComponentHtml(input, context, runtimeContext);
+    const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(html, runtimeContext);
+    html = queuedBoundaryResolution.html;
     let canAttachAttributes = hasSingleRootElement(html);
     let rootTag = this.getRootTagName(html);
     const componentFile = componentConfig?.__eco?.file;
@@ -335,26 +312,40 @@ class ReactRenderer extends IntegrationRenderer {
     let assets;
     if (canAttachAttributes && componentFile && context.componentInstanceId && this.assetProcessingService && !hasResolvedChildHtml) {
       const componentInstanceId = context.componentInstanceId;
-      assets = await this.hydrationAssetService.buildComponentRenderAssets(
-        componentFile,
-        componentInstanceId,
-        this.buildHydrationProps(input.props),
-        componentConfig
-      );
+      assets = await this.hydrationAssetService.buildComponentRenderAssets(componentFile, componentConfig);
       rootAttributes = {
         "data-eco-component-id": componentInstanceId,
+        "data-eco-component-key": getReactIslandComponentKey(componentFile, componentConfig),
         "data-eco-props": btoa(JSON.stringify(this.buildHydrationProps(input.props)))
       };
     }
+    const mergedAssets = this.htmlTransformer.dedupeProcessedAssets([
+      ...assets ?? [],
+      ...queuedBoundaryResolution.assets
+    ]);
     return {
       html,
       canAttachAttributes,
       rootTag,
       integrationName: this.name,
       rootAttributes,
-      assets
+      assets: mergedAssets.length > 0 ? mergedAssets : void 0
     };
   }
+  createComponentBoundaryRuntime(options) {
+    return this.createQueuedBoundaryRuntime({
+      boundaryInput: options.boundaryInput,
+      rendererCache: options.rendererCache,
+      createRuntimeContext: (integrationContext, rendererCache) => ({
+        rendererCache,
+        componentInstanceScope: integrationContext.componentInstanceId,
+        nextBoundaryId: 0,
+        queuedResolutions: [],
+        rawChildrenToken: void 0,
+        rawChildrenHtml: void 0
+      })
+    });
+  }
   /**
    * Checks if the given file path corresponds to an MDX file based on configured extensions.
    * @param filePath - The file path to check
@@ -540,18 +531,19 @@ class ReactRenderer extends IntegrationRenderer {
         query,
         safeLocals
       });
-      const { contentNode, contentHtml } = await this.composePageContent({
-        Page: this.asReactComponent(Page),
-        Layout,
-        pageProps: { params, query, ...props, locals: pageLocals },
-        locals
-      });
-      return await this.renderDocument({
-        HtmlTemplate,
+      return await this.renderPageWithDocumentShell({
+        page: {
+          component: Page,
+          props: { params, query, ...props, locals: pageLocals }
+        },
+        layout: Layout ? {
+          component: Layout,
+          props: locals ? { locals } : {}
+        } : void 0,
+        htmlTemplate: HtmlTemplate,
         metadata,
         pageProps: allPageProps,
-        contentNode,
-        contentHtml
+        documentProps: !this.isReactManagedComponent(HtmlTemplate) && ReactRenderer.routerAdapter ? { headContent: this.buildRouterPageDataScript(allPageProps) } : void 0
       });
     } catch (error) {
       throw this.createRenderError("Failed to render component", error);
@@ -614,38 +606,41 @@ class ReactRenderer extends IntegrationRenderer {
       const ViewComponent = this.asReactComponent(view);
       const normalizedProps = props ?? {};
       if (ctx.partial) {
-        const stream = await renderToReadableStream(createElement(ViewComponent, normalizedProps));
-        return this.createHtmlResponse(stream, ctx);
+        return this.renderPartialViewResponse({
+          view,
+          props,
+          ctx,
+          renderInline: async () => await renderToReadableStream(createElement(ViewComponent, normalizedProps))
+        });
       }
       const HtmlTemplate = await this.getHtmlTemplate();
       const metadata = await this.resolveViewMetadata(view, props);
       await this.prepareViewDependencies(view, Layout);
       await this.appendHydrationAssetsForFile(viewConfig?.__eco?.file);
-      const { contentNode, contentHtml } = await this.composePageContent({
-        Page: ViewComponent,
-        Layout,
-        pageProps: normalizedProps
+      const viewRender = await this.renderComponentBoundary({
+        component: view,
+        props: normalizedProps
       });
-      const body = await this.renderDocument({
-        HtmlTemplate,
-        metadata,
-        pageProps: normalizedProps,
-        contentNode,
-        contentHtml
+      const layoutRender = Layout ? await this.renderComponentBoundary({
+        component: Layout,
+        props: {},
+        children: viewRender.html
+      }) : void 0;
+      const documentRender = await this.renderComponentBoundary({
+        component: HtmlTemplate,
+        props: {
+          metadata,
+          pageProps: normalizedProps,
+          ...!this.isReactManagedComponent(HtmlTemplate) && ReactRenderer.routerAdapter ? { headContent: this.buildRouterPageDataScript(normalizedProps) } : {}
+        },
+        children: layoutRender?.html ?? viewRender.html
+      });
+      this.appendProcessedDependencies(viewRender.assets, layoutRender?.assets, documentRender.assets);
+      const transformedHtml = await this.finalizeResolvedHtml({
+        html: `${this.DOC_TYPE}${documentRender.html}`,
+        partial: false,
+        documentAttributes: this.getRouterDocumentAttributes()
       });
-      const transformedResponse = await this.htmlTransformer.transform(
-        new Response(body, {
-          headers: { "Content-Type": "text/html" }
-        })
-      );
-      let transformedHtml = await transformedResponse.text();
-      const documentAttributes = this.getRouterDocumentAttributes();
-      if (documentAttributes) {
-        transformedHtml = this.htmlTransformer.applyAttributesToHtmlElement(
-          transformedHtml,
-          documentAttributes
-        );
-      }
       return this.createHtmlResponse(transformedHtml, ctx);
     } catch (error) {
       throw this.createRenderError("Failed to render view", error);

package/src/react.plugin.d.ts

@@ -10,7 +10,6 @@ import type { CompileOptions } from '@mdx-js/mdx';
 import type React from 'react';
 import { ReactRenderer } from './react-renderer.js';
 import type { ReactRouterAdapter } from './router-adapter.js';
-import type { ComponentBoundaryPolicyInput } from '@ecopages/core/plugins/integration-plugin';
 /**
  * MDX configuration options for the React plugin
  */
@@ -139,17 +138,6 @@ export declare class ReactPlugin extends IntegrationPlugin<React.JSX.Element> {
      */
     getHmrStrategy(): HmrStrategy | undefined;
     getRuntimeSpecifierMap(): Record<string, string>;
-    /**
-     * Declares React's boundary deferral rule for cross-integration rendering.
-     *
-     * React defers when a render pass owned by another integration enters a React
-     * component boundary. That boundary is then resolved later through the marker
-     * graph stage using the React renderer.
-     *
-     * @param input Boundary metadata for the active render pass.
-     * @returns `true` when the boundary should be deferred into the marker pass.
-     */
-    shouldDeferComponentBoundary(input: ComponentBoundaryPolicyInput): boolean;
 }
 /**
  * Factory function to create a React plugin instance

package/src/react.plugin.js

@@ -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;
   }
@@ -134,19 +135,6 @@ class ReactPlugin extends IntegrationPlugin {
   getRuntimeSpecifierMap() {
     return this.runtimeBundleService.getSpecifierMap();
   }
-  /**
-   * Declares React's boundary deferral rule for cross-integration rendering.
-   *
-   * React defers when a render pass owned by another integration enters a React
-   * component boundary. That boundary is then resolved later through the marker
-   * graph stage using the React renderer.
-   *
-   * @param input Boundary metadata for the active render pass.
-   * @returns `true` when the boundary should be deferred into the marker pass.
-   */
-  shouldDeferComponentBoundary(input) {
-    return input.targetIntegration === this.name && input.currentIntegration !== this.name;
-  }
 }
 function reactPlugin(options) {
   return new ReactPlugin(options);

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

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

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

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

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

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

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

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

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