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

package/src/react-renderer.js

@@ -1,18 +1,18 @@
-import { IntegrationRenderer } from "@ecopages/core/route-renderer/integration-renderer";
-import { LocalsAccessError } from "@ecopages/core/errors/locals-access-error";
+import {
+  IntegrationRenderer
+} from "@ecopages/core/route-renderer/integration-renderer";
 import { RESOLVED_ASSETS_DIR } from "@ecopages/core/constants";
 import { getAppBuildExecutor } from "@ecopages/core/build/build-adapter";
-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 { createRequire } from "node:module";
 import path from "node:path";
-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 { ReactMdxConfigDependencyService } from "./services/react-mdx-config-dependency.service.js";
 import { ReactPageModuleService } from "./services/react-page-module.service.js";
+import { ReactPagePayloadService } from "./services/react-page-payload.service.js";
 import { getReactIslandComponentKey, ReactHydrationAssetService } from "./services/react-hydration-asset.service.js";
 class ReactRenderError extends Error {
   constructor(message) {
@@ -31,29 +31,40 @@ class BundleError extends Error {
 class ReactRenderer extends IntegrationRenderer {
   name = PLUGIN_NAME;
   componentDirectory = RESOLVED_ASSETS_DIR;
-  static routerAdapter;
-  static mdxCompilerOptions;
-  static mdxExtensions = [".mdx"];
-  static hmrPageMetadataCache;
+  reactRuntimeModules;
+  routerAdapter;
+  mdxCompilerOptions;
+  mdxExtensions;
+  hmrPageMetadataCache;
   /**
    * Enables explicit graph behavior for React page-entry bundling.
    *
    * When true, page-entry bundles disable AST server-only stripping and rely
    * on explicit dependency declarations for browser graph composition.
    */
-  static explicitGraphEnabled = false;
+  explicitGraphEnabled;
   /** @internal */
   bundleService;
   /** @internal */
   pageModuleService;
   /** @internal */
   hydrationAssetService;
+  /** @internal */
+  pagePayloadService;
+  /** @internal */
+  mdxConfigDependencyService;
   constructor(options) {
-    super(options);
+    const { reactConfig, ...rendererOptions } = options;
+    super(rendererOptions);
+    this.routerAdapter = reactConfig?.routerAdapter;
+    this.mdxCompilerOptions = reactConfig?.mdxCompilerOptions;
+    this.mdxExtensions = reactConfig?.mdxExtensions ?? [".mdx"];
+    this.hmrPageMetadataCache = reactConfig?.hmrPageMetadataCache;
+    this.explicitGraphEnabled = reactConfig?.explicitGraphEnabled ?? false;
     this.bundleService = new ReactBundleService({
       rootDir: this.appConfig.rootDir,
-      routerAdapter: ReactRenderer.routerAdapter,
-      mdxCompilerOptions: ReactRenderer.mdxCompilerOptions,
+      routerAdapter: this.routerAdapter,
+      mdxCompilerOptions: this.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)
     });
@@ -64,17 +75,23 @@ class ReactRenderer extends IntegrationRenderer {
       buildExecutor: getAppBuildExecutor(this.appConfig),
       layoutsDir: this.appConfig.absolutePaths.layoutsDir,
       componentsDir: this.appConfig.absolutePaths.componentsDir,
-      mdxCompilerOptions: ReactRenderer.mdxCompilerOptions,
-      mdxExtensions: ReactRenderer.mdxExtensions,
+      mdxCompilerOptions: this.mdxCompilerOptions,
+      mdxExtensions: this.mdxExtensions,
       integrationName: this.name,
-      hasRouterAdapter: Boolean(ReactRenderer.routerAdapter)
+      hasRouterAdapter: Boolean(this.routerAdapter)
     });
     this.hydrationAssetService = new ReactHydrationAssetService({
       srcDir: this.appConfig.srcDir,
-      routerAdapter: ReactRenderer.routerAdapter,
+      routerAdapter: this.routerAdapter,
       assetProcessingService: this.assetProcessingService,
       bundleService: this.bundleService,
-      hmrPageMetadataCache: ReactRenderer.hmrPageMetadataCache
+      hmrPageMetadataCache: this.hmrPageMetadataCache
+    });
+    this.pagePayloadService = new ReactPagePayloadService();
+    this.mdxConfigDependencyService = new ReactMdxConfigDependencyService({
+      integrationName: this.name,
+      pageModuleService: this.pageModuleService,
+      assetProcessingService: this.assetProcessingService
     });
   }
   shouldRenderPageComponent() {
@@ -101,19 +118,8 @@ class ReactRenderer extends IntegrationRenderer {
     const integration = this.getComponentIntegration(component);
     return integration === void 0 || integration === this.name;
   }
-  /**
-   * Creates the canonical page-props payload used by router hydration.
-   *
-   * 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 shared document payload consistently.
-   */
-  buildRouterPageDataScript(pageProps) {
-    const safeJson = JSON.stringify(pageProps || {}).replace(/</g, "\\u003c");
-    return `<script id="__ECO_PAGE_DATA__" type="application/json">${safeJson}<\/script>`;
-  }
   getRouterDocumentAttributes() {
-    if (!ReactRenderer.routerAdapter) {
+    if (!this.routerAdapter) {
       return void 0;
     }
     return {
@@ -141,20 +147,25 @@ class ReactRenderer extends IntegrationRenderer {
   asNonReactShellComponent(component) {
     return component;
   }
-  /**
-   * Builds the serialized page-props payload embedded into the final HTML.
-   *
-   * The document payload is intentionally narrower than the full server render
-   * input: only routing data, public page props, and explicitly allowed locals are
-   * exposed to the browser.
-   */
-  buildSerializedPageProps(options) {
-    return {
-      ...options.pageProps,
-      params: options.params,
-      query: options.query,
-      ...options.safeLocals && { locals: options.safeLocals }
-    };
+  resolveReactRuntimeModules() {
+    const appPackageJsonPath = path.resolve(this.appConfig.rootDir || process.cwd(), "package.json");
+    try {
+      const requireFromApp = createRequire(appPackageJsonPath);
+      return {
+        react: requireFromApp("react"),
+        reactDomServer: requireFromApp("react-dom/server")
+      };
+    } catch {
+      const requireFromIntegration = createRequire(import.meta.url);
+      return {
+        react: requireFromIntegration("react"),
+        reactDomServer: requireFromIntegration("react-dom/server")
+      };
+    }
+  }
+  getReactRuntimeModules() {
+    this.reactRuntimeModules ??= this.resolveReactRuntimeModules();
+    return this.reactRuntimeModules;
   }
   /**
    * Appends route hydration assets for a concrete page/view file to the current
@@ -195,9 +206,10 @@ class ReactRenderer extends IntegrationRenderer {
    * @returns Serialized component HTML with resolved child markup preserved.
    */
   renderComponentHtml(input, context, runtimeContext) {
+    const { react, reactDomServer } = this.getReactRuntimeModules();
     if (input.children === void 0) {
       return this.normalizeBoundaryArtifactHtml(
-        renderToString(createElement(this.asReactComponent(input.component), input.props))
+        reactDomServer.renderToString(react.createElement(this.asReactComponent(input.component), input.props))
       );
     }
     const resolvedChildHtml = typeof input.children === "string" ? input.children : String(input.children ?? "");
@@ -206,28 +218,54 @@ class ReactRenderer extends IntegrationRenderer {
       runtimeContext.rawChildrenToken = rawChildrenToken;
       runtimeContext.rawChildrenHtml = resolvedChildHtml;
     }
-    const html = renderToString(
-      createElement(this.asReactComponent(input.component), input.props, rawChildrenToken)
+    const html = reactDomServer.renderToString(
+      react.createElement(this.asReactComponent(input.component), input.props, rawChildrenToken)
     );
     return this.normalizeBoundaryArtifactHtml(html.split(rawChildrenToken).join(resolvedChildHtml));
   }
+  /**
+   * Restores raw child HTML that was temporarily replaced by a token during React SSR.
+   *
+   * Queued boundary resolution may render children through a fragment path before all
+   * nested integration tokens are resolved. When that happens, React must never see
+   * the resolved child HTML as a normal string child or it would escape it. The
+   * runtime context stores the placeholder token and the raw child HTML so the
+   * fragment render path can reinsert it before foreign boundary tokens are handled.
+   */
   restoreRuntimeChildHtml(html, runtimeContext) {
     if (!runtimeContext?.rawChildrenToken || runtimeContext.rawChildrenHtml === void 0) {
       return html;
     }
     return html.split(runtimeContext.rawChildrenToken).join(runtimeContext.rawChildrenHtml);
   }
+  /**
+   * Renders queued child content through React and then resolves nested boundary tokens.
+   *
+   * This path is only used for children that were deferred while React rendered the
+   * parent boundary. It first restores any raw child HTML placeholders owned by the
+   * current runtime context, then asks the shared queued-boundary resolver to swap
+   * foreign integration tokens with their resolved HTML.
+   */
   async renderQueuedChildrenToHtml(children, runtimeContext, queuedResolutionsByToken, resolveToken) {
     if (children === void 0) {
       return void 0;
     }
+    const { react, reactDomServer } = this.getReactRuntimeModules();
     let html = this.normalizeBoundaryArtifactHtml(
-      renderToString(createElement(Fragment, null, children))
+      reactDomServer.renderToString(react.createElement(react.Fragment, null, children))
     );
     html = this.restoreRuntimeChildHtml(html, runtimeContext);
     html = await this.resolveQueuedBoundaryTokens(html, queuedResolutionsByToken, resolveToken);
     return html;
   }
+  /**
+   * Resolves queued renderer-owned boundary tokens produced during React component rendering.
+   *
+   * React components can enqueue nested boundaries while the parent HTML is being
+   * rendered. This delegates to the shared renderer-owned queue resolver but keeps
+   * the React-specific child rendering behavior local so raw child HTML and React's
+   * fragment rendering semantics stay coordinated.
+   */
   async resolveQueuedBoundaryHtml(html, runtimeContext) {
     return this.resolveRendererOwnedQueuedBoundaryHtml({
       html,
@@ -255,58 +293,71 @@ class ReactRenderer extends IntegrationRenderer {
     return hydrationProps;
   }
   /**
-   * Renders a React component for component-level orchestration.
+   * Builds the extra document props needed when React renders through a non-React HTML shell.
    *
-   * Behavior:
-   * - SSR always returns the component's own root HTML (no synthetic wrapper).
-   * - 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.
+   * Router-backed React pages still need to publish the canonical page-data script
+   * even when the outer document shell belongs to another integration.
+   */
+  buildNonReactDocumentProps(htmlTemplate, pageProps) {
+    if (this.isReactManagedComponent(htmlTemplate) || !this.routerAdapter) {
+      return void 0;
+    }
+    return {
+      headContent: this.pagePayloadService.buildRouterPageDataScript(pageProps)
+    };
+  }
+  /**
+   * Renders a foreign integration component boundary that participates in React composition.
    *
-   * This preserves DOM shape for global CSS/layout selectors while keeping a
-   * deterministic mount target per component instance.
+   * Non-React components must resolve to serialized HTML so React can embed them as
+   * mixed-shell boundaries. Any component-owned dependencies still need to flow
+   * through the shared dependency resolver before queued boundary tokens are finalized.
    */
-  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
+  async renderForeignComponentBoundary(input, runtimeContext) {
+    let props = input.props;
+    if (input.children !== void 0) {
+      props = {
+        ...input.props,
+        children: typeof input.children === "string" ? input.children : String(input.children ?? "")
       };
     }
+    const html = await this.renderNonReactShellComponent(
+      this.asNonReactShellComponent(input.component),
+      props,
+      "Component"
+    );
+    const hasDependencies = Boolean(input.component.config?.dependencies);
+    const canResolveAssets = typeof this.assetProcessingService?.processDependencies === "function";
+    const assets = hasDependencies && canResolveAssets ? await this.processComponentDependencies([input.component]) : void 0;
+    const queuedBoundaryResolution = await this.resolveQueuedBoundaryHtml(html, runtimeContext);
+    const mergedAssets = this.htmlTransformer.dedupeProcessedAssets([
+      ...assets ?? [],
+      ...queuedBoundaryResolution.assets
+    ]);
+    return {
+      html: queuedBoundaryResolution.html,
+      canAttachAttributes: true,
+      rootTag: this.getRootTagName(queuedBoundaryResolution.html),
+      integrationName: this.name,
+      assets: mergedAssets.length > 0 ? mergedAssets : void 0
+    };
+  }
+  /**
+   * Renders a React-owned component boundary and attaches island hydration metadata when possible.
+   *
+   * This path keeps React-owned SSR, queued boundary resolution, and optional
+   * island hydration wiring together so the public `renderComponent()` method can
+   * read as orchestration rather than implementation detail.
+   */
+  async renderReactComponentBoundary(input, runtimeContext) {
     const componentConfig = input.component.config;
     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 canAttachAttributes = hasSingleRootElement(html);
+    const rootTag = this.getRootTagName(html);
     const componentFile = componentConfig?.__eco?.file;
     let rootAttributes;
     let assets;
@@ -332,6 +383,27 @@ class ReactRenderer extends IntegrationRenderer {
       assets: mergedAssets.length > 0 ? mergedAssets : void 0
     };
   }
+  /**
+   * Renders a React component for component-level orchestration.
+   *
+   * Behavior:
+   * - SSR always returns the component's own root HTML (no synthetic wrapper).
+   * - 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 runtimeContext = this.getQueuedBoundaryRuntime(input);
+    if (!this.isReactManagedComponent(input.component)) {
+      return this.renderForeignComponentBoundary(input, runtimeContext);
+    }
+    return this.renderReactComponentBoundary(input, runtimeContext);
+  }
   createComponentBoundaryRuntime(options) {
     return this.createQueuedBoundaryRuntime({
       boundaryInput: options.boundaryInput,
@@ -357,8 +429,8 @@ class ReactRenderer extends IntegrationRenderer {
   usesIntegrationPageImporter(file) {
     return this.pageModuleService.isMdxFile(file);
   }
-  async importIntegrationPageFile(file) {
-    return await this.pageModuleService.importMdxPageFile(file);
+  async importIntegrationPageFile(file, options) {
+    return await this.pageModuleService.importMdxPageFile(file, options);
   }
   normalizeImportedPageFile(file, pageModule) {
     const reactModule = pageModule;
@@ -373,112 +445,10 @@ class ReactRenderer extends IntegrationRenderer {
       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 pageModule = await this.importPageFile(pagePath);
-    const config = pageModule.config;
-    const resolvedLayout = config?.layout;
-    const components = [];
-    if (resolvedLayout?.config?.dependencies) {
-      const layoutConfig = this.pageModuleService.ensureConfigFileMetadata(resolvedLayout.config, pagePath);
-      components.push({ config: layoutConfig });
-    }
-    if (config?.dependencies) {
-      const configWithMeta = {
-        ...config,
-        __eco: { id: rapidhash(pagePath).toString(36), file: pagePath, integration: "react" }
-      };
-      components.push({ config: configWithMeta });
-    }
-    const processedDependencies = await this.processComponentDependencies(components);
-    const eagerSsrLazyDependencies = await this.processDeclaredMdxSsrLazyDependencies(components, pagePath);
-    return [...processedDependencies, ...eagerSsrLazyDependencies];
-  }
-  async processDeclaredMdxSsrLazyDependencies(components, pagePath) {
-    if (!this.assetProcessingService?.processDependencies) {
-      return [];
-    }
-    const dependencies = this.collectDeclaredMdxSsrLazyDependencies(components);
-    if (dependencies.length === 0) {
-      return [];
-    }
-    return this.assetProcessingService.processDependencies(dependencies, `react-mdx-ssr-lazy:${pagePath}`);
-  }
-  collectDeclaredMdxSsrLazyDependencies(components) {
-    const dependencies = [];
-    const visitedConfigs = /* @__PURE__ */ new Set();
-    const seenKeys = /* @__PURE__ */ new Set();
-    const normalizeAttributes = (attributes) => ({
-      type: "module",
-      defer: "",
-      ...attributes ?? {}
-    });
-    const collect = (config) => {
-      if (!config || visitedConfigs.has(config)) {
-        return;
-      }
-      visitedConfigs.add(config);
-      const componentFile = config.__eco?.file;
-      if (componentFile) {
-        const componentDir = path.dirname(componentFile);
-        for (const script of config.dependencies?.scripts ?? []) {
-          if (typeof script === "string" || !script.lazy || script.ssr !== true) {
-            continue;
-          }
-          const attributes = normalizeAttributes(script.attributes);
-          if (script.content) {
-            const key2 = `content:${script.content}:${JSON.stringify(attributes)}`;
-            if (seenKeys.has(key2)) {
-              continue;
-            }
-            seenKeys.add(key2);
-            dependencies.push(
-              AssetFactory.createContentScript({
-                position: "head",
-                content: script.content,
-                attributes
-              })
-            );
-            continue;
-          }
-          if (!script.src) {
-            continue;
-          }
-          const resolvedPath = path.resolve(componentDir, script.src);
-          const key = `file:${resolvedPath}:${JSON.stringify(attributes)}`;
-          if (seenKeys.has(key)) {
-            continue;
-          }
-          seenKeys.add(key);
-          dependencies.push(
-            AssetFactory.createFileScript({
-              filepath: resolvedPath,
-              position: "head",
-              attributes
-            })
-          );
-        }
-      }
-      if (config.layout?.config) {
-        collect(config.layout.config);
-      }
-      for (const nestedComponent of config.dependencies?.components ?? []) {
-        collect(nestedComponent?.config);
-      }
-    };
-    for (const component of components) {
-      collect(component.config);
-    }
-    return dependencies;
-  }
   async buildRouteRenderAssets(pagePath) {
     try {
       const pageModule = await this.importPageFile(pagePath);
-      const shouldHydrate = ReactRenderer.explicitGraphEnabled ? true : this.pageModuleService.shouldHydratePage(pageModule);
+      const shouldHydrate = this.explicitGraphEnabled ? true : this.pageModuleService.shouldHydratePage(pageModule);
       if (!shouldHydrate) {
         return [];
       }
@@ -490,7 +460,11 @@ class ReactRenderer extends IntegrationRenderer {
         declaredModules
       );
       if (isMdx) {
-        const mdxConfigAssets = await this.processMdxConfigDependencies(pagePath);
+        const mdxConfigAssets = await this.mdxConfigDependencyService.processMdxConfigDependencies({
+          pagePath,
+          config: pageModule.config,
+          processComponentDependencies: async (components) => await this.processComponentDependencies(components)
+        });
         return [...processedAssets, ...mdxConfigAssets];
       }
       return processedAssets;
@@ -524,8 +498,11 @@ class ReactRenderer extends IntegrationRenderer {
     pageProps
   }) {
     try {
-      const safeLocals = this.getSerializableLocals(locals, Page.requires);
-      const allPageProps = this.buildSerializedPageProps({
+      const safeLocals = this.pagePayloadService.getSerializableLocals(
+        locals,
+        Page.requires
+      );
+      const allPageProps = this.pagePayloadService.buildSerializedPageProps({
         pageProps,
         params,
         query,
@@ -543,7 +520,7 @@ class ReactRenderer extends IntegrationRenderer {
         htmlTemplate: HtmlTemplate,
         metadata,
         pageProps: allPageProps,
-        documentProps: !this.isReactManagedComponent(HtmlTemplate) && ReactRenderer.routerAdapter ? { headContent: this.buildRouterPageDataScript(allPageProps) } : void 0
+        documentProps: this.buildNonReactDocumentProps(HtmlTemplate, allPageProps)
       });
     } catch (error) {
       throw this.createRenderError("Failed to render component", error);
@@ -552,45 +529,6 @@ class ReactRenderer extends IntegrationRenderer {
   getDocumentAttributes() {
     return this.getRouterDocumentAttributes();
   }
-  /**
-   * Safely extracts the declared subset of locals for client-side hydration.
-   *
-   * On dynamic pages with `cache: 'dynamic'`, middleware populates `locals` with
-   * request-scoped data (e.g., session). Only keys explicitly declared via
-   * `Page.requires` are serialized to the client so sensitive request-only data
-   * is not leaked into hydration payloads by default.
-   *
-   * On static pages, `locals` is a Proxy that throws `LocalsAccessError` on access
-   * to prevent accidental use. This method safely detects that case and returns
-   * `undefined` instead of throwing.
-   *
-   * @param locals - The locals object from the render context
-   * @param requiredLocals - Keys explicitly requested for client hydration
-   * @returns The filtered locals object if serializable, undefined otherwise
-   */
-  getSerializableLocals(locals, requiredLocals) {
-    try {
-      if (!locals) {
-        return void 0;
-      }
-      const requiredKeys = requiredLocals ? Array.isArray(requiredLocals) ? requiredLocals : [requiredLocals] : [];
-      if (requiredKeys.length === 0) {
-        return void 0;
-      }
-      const serializedLocals = Object.fromEntries(
-        requiredKeys.filter((key) => Object.prototype.hasOwnProperty.call(locals, key)).map((key) => [key, locals[key]])
-      );
-      if (Object.keys(serializedLocals).length > 0) {
-        return serializedLocals;
-      }
-      return void 0;
-    } catch (e) {
-      if (e instanceof LocalsAccessError) {
-        return void 0;
-      }
-      throw e;
-    }
-  }
   /**
    * Renders an arbitrary React view through the application's HTML shell.
    *
@@ -601,6 +539,7 @@ class ReactRenderer extends IntegrationRenderer {
    */
   async renderToResponse(view, props, ctx) {
     try {
+      const { react, reactDomServer } = this.getReactRuntimeModules();
       const viewConfig = view.config;
       const Layout = viewConfig?.layout;
       const ViewComponent = this.asReactComponent(view);
@@ -610,7 +549,9 @@ class ReactRenderer extends IntegrationRenderer {
           view,
           props,
           ctx,
-          renderInline: async () => await renderToReadableStream(createElement(ViewComponent, normalizedProps))
+          renderInline: async () => await reactDomServer.renderToReadableStream(
+            react.createElement(ViewComponent, normalizedProps)
+          )
         });
       }
       const HtmlTemplate = await this.getHtmlTemplate();
@@ -631,7 +572,7 @@ class ReactRenderer extends IntegrationRenderer {
         props: {
           metadata,
           pageProps: normalizedProps,
-          ...!this.isReactManagedComponent(HtmlTemplate) && ReactRenderer.routerAdapter ? { headContent: this.buildRouterPageDataScript(normalizedProps) } : {}
+          ...this.buildNonReactDocumentProps(HtmlTemplate, normalizedProps) ?? {}
         },
         children: layoutRender?.html ?? viewRender.html
       });