@ecopages/react 0.2.0-alpha.9 → 0.2.1

package/src/react-renderer.js

@@ -6,14 +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";
+import { getReactIslandComponentKey, ReactHydrationAssetService } from "./services/react-hydration-asset.service.js";
 class ReactRenderError extends Error {
   constructor(message) {
     super(message);
@@ -53,7 +53,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,
@@ -104,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");
@@ -163,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
@@ -198,64 +182,77 @@ class ReactRenderer extends IntegrationRenderer {
     throw new ReactRenderError(`${label} must return a string when used as a mixed shell for React pages.`);
   }
   /**
-   * Produces the page body before the final HTML template is applied.
+   * Renders one React component boundary while preserving already-resolved child HTML.
    *
-   * 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.
+   * 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 for the current boundary.
+   * @param context React-specific render context for stable token generation.
+   * @returns Serialized component HTML with resolved child markup preserved.
    */
-  async composePageContent(options) {
-    const pageElement = createElement(options.Page, options.pageProps);
-    const pageHtml = renderToString(pageElement);
-    const layoutProps = options.locals ? { locals: options.locals } : {};
-    if (!options.Layout) {
-      return { contentNode: pageElement, contentHtml: pageHtml };
+  renderComponentHtml(input, context, runtimeContext) {
+    if (input.children === void 0) {
+      return this.normalizeBoundaryArtifactHtml(
+        renderToString(createElement(this.asReactComponent(input.component), input.props))
+      );
     }
-    if (this.isReactManagedComponent(options.Layout)) {
-      const layoutElement = createElement(this.asReactComponent(options.Layout), layoutProps, pageElement);
-      return {
-        contentNode: layoutElement,
-        contentHtml: renderToString(layoutElement)
-      };
+    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 layoutHtml = await this.renderNonReactShellComponent(
-      this.asNonReactShellComponent(options.Layout),
-      { ...layoutProps, children: pageHtml },
-      "Layout"
+    const html = renderToString(
+      createElement(this.asReactComponent(input.component), input.props, rawChildrenToken)
     );
-    return { contentNode: layoutHtml, contentHtml: layoutHtml };
+    return this.normalizeBoundaryArtifactHtml(html.split(rawChildrenToken).join(resolvedChildHtml));
   }
-  /**
-   * 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)) {
-      return renderToReadableStream(
-        createElement(
-          this.asReactComponent(options.HtmlTemplate),
-          {
-            metadata: options.metadata,
-            pageProps: options.pageProps
-          },
-          options.contentNode
-        )
-      );
+  restoreRuntimeChildHtml(html, runtimeContext) {
+    if (!runtimeContext?.rawChildrenToken || runtimeContext.rawChildrenHtml === void 0) {
+      return html;
+    }
+    return html.split(runtimeContext.rawChildrenToken).join(runtimeContext.rawChildrenHtml);
+  }
+  async renderQueuedChildrenToHtml(children, runtimeContext, queuedResolutionsByToken, resolveToken) {
+    if (children === void 0) {
+      return void 0;
     }
-    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"
+    let html = this.normalizeBoundaryArtifactHtml(
+      renderToString(createElement(Fragment, null, children))
     );
+    html = this.restoreRuntimeChildHtml(html, runtimeContext);
+    html = await this.resolveQueuedBoundaryTokens(html, queuedResolutionsByToken, resolveToken);
+    return html;
+  }
+  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 { locals: _locals, ...hydrationProps } = props;
+    return hydrationProps;
   }
   /**
    * Renders a React component for component-level orchestration.
@@ -265,43 +262,90 @@ 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 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 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, 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;
-    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
-      );
+      assets = await this.hydrationAssetService.buildComponentRenderAssets(componentFile, 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)))
       };
     }
+    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
@@ -310,13 +354,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 +503,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.
    *
@@ -487,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);
@@ -561,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

@@ -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;
   }
@@ -133,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.d.ts

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

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

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