@ecopages/react 0.2.0-alpha.39 → 0.2.0-alpha.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/react",
-  "version": "0.2.0-alpha.39",
+  "version": "0.2.0-alpha.40",
   "description": "React integration for Ecopages",
   "keywords": [
     "ecopages",
@@ -76,9 +76,5 @@
     "oxc-transform": "^0.124.0",
     "source-map": "^0.7.6",
     "vfile": "^6.0.3"
-  },
-  "overrides": {
-    "react": "^19",
-    "react-dom": "^19"
   }
 }

package/src/react-renderer.d.ts

@@ -3,8 +3,8 @@
  * @module
  */
 import type { ComponentRenderInput, ComponentRenderResult, EcoComponent, EcoPageFile, IntegrationRendererRenderOptions, RouteRendererBody } from '@ecopages/core';
-import { IntegrationRenderer, type RenderToResponseContext, type RouteModuleLoadOptions } from '@ecopages/core/route-renderer/integration-renderer';
-import type { ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import { IntegrationRenderer, type HtmlDocumentContribution, type HtmlDocumentContributionContext, type PageBrowserGraphContributionContext, type RenderToResponseContext, type RouteModuleLoadOptions } from '@ecopages/core/route-renderer/integration-renderer';
+import type { AssetDefinition, ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
 import type { ReactNode } from 'react';
 import type { ReactRendererConfig } from './react.types.js';
 import { ReactBundleService } from './services/react-bundle.service.js';
@@ -158,12 +158,10 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
     private resolveQueuedForeignSubtreeHtml;
     private buildHydrationProps;
     /**
-     * Builds the extra document props needed when React renders through a non-React HTML shell.
-     *
-     * Router-backed React pages still need to publish the canonical page-data script
-     * even when the outer document shell belongs to another integration.
+     * Builds shared document html contributions for router-backed React pages rendered
+     * through a non-React HTML shell.
      */
-    private buildNonReactDocumentProps;
+    private buildNonReactDocumentContributions;
     /**
      * Renders a foreign integration component that participates in React composition.
      *
@@ -208,8 +206,9 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
     protected usesIntegrationPageImporter(file: string): boolean;
     protected importIntegrationPageFile(file: string, options?: RouteModuleLoadOptions): Promise<EcoPageFile>;
     protected normalizeImportedPageFile<TPageModule extends EcoPageFile>(file: string, pageModule: TPageModule): TPageModule;
-    buildPageBrowserGraph(pagePath: string): Promise<{
-        assets: ProcessedAsset[];
+    protected collectPageBrowserGraphContribution(context: PageBrowserGraphContributionContext): Promise<{
+        dependencies?: AssetDefinition[];
+        assets?: ProcessedAsset[];
     }>;
     /**
      * Renders a full route response for the filesystem page pipeline.
@@ -220,6 +219,7 @@ export declare class ReactRenderer extends IntegrationRenderer<ReactNode> {
      * React shell tree, and hand the result back as a document body.
      */
     render({ params, query, props, locals, pageLocals, metadata, Page, Layout, HtmlTemplate, pageProps, }: IntegrationRendererRenderOptions<ReactNode>): Promise<RouteRendererBody>;
+    protected getHtmlDocumentContributions(options: HtmlDocumentContributionContext<ReactNode>): HtmlDocumentContribution[] | undefined;
     protected getDocumentAttributes(): Record<string, string> | undefined;
     /**
      * Renders an arbitrary React view through the application's HTML shell.

package/src/react-renderer.js

@@ -178,8 +178,8 @@ class ReactRenderer extends IntegrationRenderer {
     if (!filePath) {
       return;
     }
-    const pageBrowserGraph = await this.buildPageBrowserGraph(filePath);
-    this.appendProcessedDependencies(pageBrowserGraph.assets);
+    const pageBrowserGraph = await this.resolvePageBrowserGraphForFile(filePath);
+    this.mergePageBrowserGraphIntoPagePackage(pageBrowserGraph);
   }
   /**
    * Renders a non-React layout or HTML template and enforces that mixed shells
@@ -304,18 +304,19 @@ class ReactRenderer extends IntegrationRenderer {
     return hydrationProps;
   }
   /**
-   * Builds the extra document props needed when React renders through a non-React HTML shell.
-   *
-   * Router-backed React pages still need to publish the canonical page-data script
-   * even when the outer document shell belongs to another integration.
+   * Builds shared document html contributions for router-backed React pages rendered
+   * through a non-React HTML shell.
    */
-  buildNonReactDocumentProps(htmlTemplate, pageProps) {
+  buildNonReactDocumentContributions(htmlTemplate, pageProps) {
     if (this.isReactManagedComponent(htmlTemplate) || !this.routerAdapter) {
       return void 0;
     }
-    return {
-      headContent: this.pagePayloadService.buildRouterPageDataScript(pageProps)
-    };
+    return [
+      {
+        placement: "head-append",
+        html: this.pagePayloadService.buildRouterPageDataScript(pageProps)
+      }
+    ];
   }
   /**
    * Renders a foreign integration component that participates in React composition.
@@ -458,29 +459,30 @@ class ReactRenderer extends IntegrationRenderer {
       config
     };
   }
-  async buildPageBrowserGraph(pagePath) {
+  async collectPageBrowserGraphContribution(context) {
     try {
-      const pageModule = await this.importPageFile(pagePath);
+      const { file: pagePath, pageModule } = context;
       const shouldHydrate = this.explicitGraphEnabled ? true : this.pageModuleService.shouldHydratePage(pageModule);
       if (!shouldHydrate) {
         return { assets: [] };
       }
       const isMdx = this.pageModuleService.isMdxFile(pagePath);
       const declaredModules = this.pageModuleService.collectPageDeclaredModules(pageModule);
-      const processedAssets = await this.hydrationAssetService.buildPageBrowserGraphAssets(
+      const dependencies = await this.hydrationAssetService.createPageBrowserGraphDependencies(
         pagePath,
         isMdx,
         declaredModules
       );
+      const assets = [];
       if (isMdx) {
         const mdxConfigAssets = await this.mdxConfigDependencyService.processMdxConfigDependencies({
           pagePath,
           config: pageModule.config,
           processComponentDependencies: async (components) => await this.processComponentDependencies(components)
         });
-        return { assets: [...processedAssets, ...mdxConfigAssets] };
+        assets.push(...mdxConfigAssets);
       }
-      return { assets: processedAssets };
+      return { dependencies, assets };
     } catch (error) {
       if (error instanceof BundleError) {
         console.error("[ecopages] Bundle errors:", error.logs);
@@ -529,13 +531,28 @@ class ReactRenderer extends IntegrationRenderer {
         } : void 0,
         htmlTemplate: HtmlTemplate,
         metadata,
-        pageProps: allPageProps,
-        documentProps: this.buildNonReactDocumentProps(HtmlTemplate, allPageProps)
+        pageProps: allPageProps
       });
     } catch (error) {
       throw this.createRenderError("Failed to render component", error);
     }
   }
+  getHtmlDocumentContributions(options) {
+    if (options.partial || !options.renderOptions) {
+      return void 0;
+    }
+    const safeLocals = this.pagePayloadService.getSerializableLocals(
+      options.renderOptions.locals,
+      this.getComponentRequires(options.renderOptions.Page)
+    );
+    const allPageProps = this.pagePayloadService.buildSerializedPageProps({
+      pageProps: options.renderOptions.pageProps,
+      params: options.renderOptions.params,
+      query: options.renderOptions.query,
+      safeLocals
+    });
+    return this.buildNonReactDocumentContributions(options.renderOptions.HtmlTemplate, allPageProps);
+  }
   getDocumentAttributes() {
     return this.getRouterDocumentAttributes();
   }
@@ -581,8 +598,7 @@ class ReactRenderer extends IntegrationRenderer {
         component: HtmlTemplate,
         props: {
           metadata,
-          pageProps: normalizedProps,
-          ...this.buildNonReactDocumentProps(HtmlTemplate, normalizedProps) ?? {}
+          pageProps: normalizedProps
         },
         children: layoutRender?.html ?? viewRender.html
       });
@@ -590,7 +606,8 @@ class ReactRenderer extends IntegrationRenderer {
       const transformedHtml = await this.finalizeResolvedHtml({
         html: `${this.DOC_TYPE}${documentRender.html}`,
         partial: false,
-        documentAttributes: this.getRouterDocumentAttributes()
+        documentAttributes: this.getRouterDocumentAttributes(),
+        htmlContributions: this.buildNonReactDocumentContributions(HtmlTemplate, normalizedProps)
       });
       return this.createHtmlResponse(transformedHtml, ctx);
     } catch (error) {

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

@@ -63,12 +63,20 @@ export declare class ReactHydrationAssetService {
      */
     buildComponentRenderAssets(componentFile: string, config?: EcoComponentConfig): Promise<ProcessedAsset[]>;
     /**
-     * Builds the Page Browser Graph assets for a React page.
+     * Creates the Page Browser Graph dependency declarations for a React page.
      *
      * @param pagePath - Absolute file path of the page
      * @param isMdx - Whether the page is an MDX file
      * @param declaredModules - Explicitly declared browser module specifiers
-     * @returns Processed assets for the route
+     * @returns Declarative assets for core-owned processing
+     */
+    createPageBrowserGraphDependencies(pagePath: string, isMdx: boolean, declaredModules: string[]): Promise<AssetDefinition[]>;
+    /**
+     * Builds the Page Browser Graph assets for a React page.
+     *
+     * @remarks
+     * Kept as a compatibility wrapper while callers migrate to core-owned page
+     * graph assembly.
      */
     buildPageBrowserGraphAssets(pagePath: string, isMdx: boolean, declaredModules: string[]): Promise<ProcessedAsset[]>;
 }

package/src/services/react-hydration-asset.service.js

@@ -146,14 +146,14 @@ class ReactHydrationAssetService {
     return this.config.assetProcessingService.processDependencies(dependencies, componentName);
   }
   /**
-   * Builds the Page Browser Graph assets for a React page.
+   * Creates the Page Browser Graph dependency declarations for a React page.
    *
    * @param pagePath - Absolute file path of the page
    * @param isMdx - Whether the page is an MDX file
    * @param declaredModules - Explicitly declared browser module specifiers
-   * @returns Processed assets for the route
+   * @returns Declarative assets for core-owned processing
    */
-  async buildPageBrowserGraphAssets(pagePath, isMdx, declaredModules) {
+  async createPageBrowserGraphDependencies(pagePath, isMdx, declaredModules) {
     const componentName = `ecopages-react-${rapidhash(pagePath)}`;
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     const isDevelopment = hmrManager?.isEnabled() ?? false;
@@ -180,6 +180,18 @@ class ReactHydrationAssetService {
       useBrowserRuntimeImports,
       isMdx
     );
+    return dependencies;
+  }
+  /**
+   * Builds the Page Browser Graph assets for a React page.
+   *
+   * @remarks
+   * Kept as a compatibility wrapper while callers migrate to core-owned page
+   * graph assembly.
+   */
+  async buildPageBrowserGraphAssets(pagePath, isMdx, declaredModules) {
+    const componentName = `ecopages-react-${rapidhash(pagePath)}`;
+    const dependencies = await this.createPageBrowserGraphDependencies(pagePath, isMdx, declaredModules);
     if (!this.config.assetProcessingService) {
       throw new Error("AssetProcessingService is not set");
     }

package/src/services/react-page-module.service.js

@@ -38,7 +38,8 @@ class ReactPageModuleService {
     const fileHash = fileSystem.hash(filePath);
     const cacheScopeSuffix = options?.cacheScope ? `-${sanitizeCacheScope(options.cacheScope)}` : "";
     const cacheBuster = options?.bypassCache || process?.env?.NODE_ENV === "development" ? `-${Date.now()}` : "";
-    const outputFileName = `${fileBaseName}-${fileHash}${cacheScopeSuffix}${cacheBuster}.js`;
+    const outputFileName = `${fileBaseName}-${fileHash}${cacheScopeSuffix}${cacheBuster}.mjs`;
+    const outputNamingTemplate = `${fileBaseName}-${fileHash}${cacheScopeSuffix}${cacheBuster}.[ext]`;
     const buildResult = await build(
       {
         entrypoints: [filePath],
@@ -50,7 +51,7 @@ class ReactPageModuleService {
         splitting: false,
         minify: false,
         treeshaking: false,
-        naming: outputFileName,
+        naming: outputNamingTemplate,
         plugins: [mdxPlugin]
       },
       this.config.buildExecutor
@@ -60,7 +61,7 @@ class ReactPageModuleService {
       throw new Error(`Failed to compile MDX page module: ${details}`);
     }
     const preferredOutputPath = path.join(outdir, outputFileName);
-    const compiledOutput = buildResult.outputs.find((output) => output.path === preferredOutputPath)?.path ?? buildResult.outputs.find((output) => output.path.endsWith(".js"))?.path;
+    const compiledOutput = buildResult.outputs.find((output) => output.path === preferredOutputPath)?.path ?? buildResult.outputs.find((output) => /\.(?:[cm]?js)$/u.test(output.path))?.path;
     if (!compiledOutput) {
       throw new Error(`No compiled MDX output generated for page: ${filePath}`);
     }