@ecopages/react 0.2.0-alpha.9 → 0.2.0-beta.0

package/src/services/react-mdx-config-dependency.service.d.ts

@@ -0,0 +1,36 @@
+import type { EcoComponent, EcoComponentConfig } from '@ecopages/core';
+import { type AssetProcessingService, type ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import type { ReactPageModuleService } from './react-page-module.service.js';
+type MdxConfigDependencyProcessor = (components: Partial<EcoComponent>[]) => Promise<ProcessedAsset[]>;
+export interface ReactMdxConfigDependencyServiceConfig {
+    integrationName: string;
+    pageModuleService: Pick<ReactPageModuleService, 'ensureConfigFileMetadata'>;
+    assetProcessingService?: Pick<AssetProcessingService, 'processDependencies'>;
+}
+/**
+ * Resolves MDX-owned config dependencies that live outside the normal React component tree.
+ *
+ * React MDX pages can declare dependencies on the page config itself or on a
+ * resolved layout config. Those roots need to be materialized as synthetic
+ * component configs so the shared dependency pipeline can process them without
+ * growing more MDX-specific logic inside the renderer.
+ */
+export declare class ReactMdxConfigDependencyService {
+    private readonly config;
+    constructor(config: ReactMdxConfigDependencyServiceConfig);
+    /**
+     * Processes MDX-owned config dependencies and eagerly emits any SSR-marked lazy scripts.
+     */
+    processMdxConfigDependencies(options: {
+        pagePath: string;
+        config?: EcoComponentConfig;
+        processComponentDependencies: MdxConfigDependencyProcessor;
+    }): Promise<ProcessedAsset[]>;
+    private createOwnedConfigComponents;
+    private processDeclaredSsrLazyDependencies;
+    /**
+     * Collects `lazy` script dependencies that also opt into SSR from an MDX config graph.
+     */
+    private collectDeclaredSsrLazyDependencies;
+}
+export {};

package/src/services/react-mdx-config-dependency.service.js

@@ -0,0 +1,122 @@
+import path from "node:path";
+import { rapidhash } from "@ecopages/core/hash";
+import {
+  AssetFactory
+} from "@ecopages/core/services/asset-processing-service";
+import { collectFromConfigForest, getComponentConfigs } from "../utils/component-config-traversal.js";
+class ReactMdxConfigDependencyService {
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * Processes MDX-owned config dependencies and eagerly emits any SSR-marked lazy scripts.
+   */
+  async processMdxConfigDependencies(options) {
+    const components = this.createOwnedConfigComponents(options.pagePath, options.config);
+    if (components.length === 0) {
+      return [];
+    }
+    const processedDependencies = await options.processComponentDependencies(components);
+    const eagerSsrLazyDependencies = await this.processDeclaredSsrLazyDependencies(components, options.pagePath);
+    return [...processedDependencies, ...eagerSsrLazyDependencies];
+  }
+  createOwnedConfigComponents(pagePath, config) {
+    const components = [];
+    const resolvedLayout = config?.layout;
+    if (resolvedLayout?.config?.dependencies) {
+      const layoutConfig = this.config.pageModuleService.ensureConfigFileMetadata(
+        resolvedLayout.config,
+        pagePath
+      );
+      components.push({ config: layoutConfig });
+    }
+    if (config?.dependencies) {
+      components.push({
+        config: {
+          ...config,
+          __eco: {
+            id: rapidhash(pagePath).toString(36),
+            file: pagePath,
+            integration: this.config.integrationName
+          }
+        }
+      });
+    }
+    return components;
+  }
+  async processDeclaredSsrLazyDependencies(components, pagePath) {
+    if (!this.config.assetProcessingService?.processDependencies) {
+      return [];
+    }
+    const dependencies = this.collectDeclaredSsrLazyDependencies(components);
+    if (dependencies.length === 0) {
+      return [];
+    }
+    return this.config.assetProcessingService.processDependencies(
+      dependencies,
+      `${this.config.integrationName}-mdx-ssr-lazy:${pagePath}`
+    );
+  }
+  /**
+   * Collects `lazy` script dependencies that also opt into SSR from an MDX config graph.
+   */
+  collectDeclaredSsrLazyDependencies(components) {
+    const dependencies = [];
+    const seenKeys = /* @__PURE__ */ new Set();
+    const normalizeAttributes = (attributes) => ({
+      type: "module",
+      defer: "",
+      ...attributes ?? {}
+    });
+    collectFromConfigForest(getComponentConfigs(components), (config) => {
+      const componentFile = config.__eco?.file;
+      if (!componentFile) {
+        return [];
+      }
+      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
+          })
+        );
+      }
+      return [];
+    });
+    return dependencies;
+  }
+}
+export {
+  ReactMdxConfigDependencyService
+};

package/src/services/react-page-module.service.d.ts

@@ -7,7 +7,7 @@
  * @module
  */
 import type { EcoComponentConfig, EcoPageFile } from '@ecopages/core';
-import type { BuildExecutor } from '@ecopages/core/build/build-adapter';
+import { type BuildExecutor } from '@ecopages/core/build/build-adapter';
 import type { CompileOptions } from '@mdx-js/mdx';
 /**
  * Configuration for the ReactPageModuleService.
@@ -43,7 +43,12 @@ export declare class ReactPageModuleService {
      * @param filePath - Absolute path to the MDX file
      * @returns The imported module
      */
-    importMdxPageFile(filePath: string): Promise<unknown>;
+    importMdxPageFile(filePath: string, options?: {
+        bypassCache?: boolean;
+        cacheScope?: string;
+    }): Promise<EcoPageFile<{
+        config?: EcoComponentConfig;
+    }>>;
     /**
      * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.
      * Resolves the file path from dependency declarations when not already set.
@@ -57,7 +62,7 @@ export declare class ReactPageModuleService {
      * Recursively checks whether a component config tree declares any browser modules.
      * Used to determine if a page needs hydration.
      */
-    hasModulesInConfig(config: EcoComponentConfig | undefined, visited?: Set<EcoComponentConfig>): boolean;
+    hasModulesInConfig(config: EcoComponentConfig | undefined): boolean;
     /**
      * Determines whether a page needs client-side hydration.
      *

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

@@ -1,9 +1,12 @@
 import path from "node:path";
 import { pathToFileURL } from "node:url";
-import { rapidhash } from "@ecopages/core/hash";
 import { build } from "@ecopages/core/build/build-adapter";
+import { normalizeNodeRuntimeBuildOutputFile } from "@ecopages/core/build/runtime-build-output-normalizer";
+import { rapidhash } from "@ecopages/core/hash";
 import { fileSystem } from "@ecopages/file-system";
+import { someInConfigTree } from "../utils/component-config-traversal.js";
 import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
+import { createReactMdxLoaderPlugin } from "../utils/react-mdx-loader-plugin.js";
 class ReactPageModuleService {
   config;
   constructor(config) {
@@ -23,8 +26,7 @@ class ReactPageModuleService {
    * @param filePath - Absolute path to the MDX file
    * @returns The imported module
    */
-  async importMdxPageFile(filePath) {
-    const { createReactMdxLoaderPlugin } = await import("../utils/react-mdx-loader-plugin.js");
+  async importMdxPageFile(filePath, options) {
     const mdxPlugin = createReactMdxLoaderPlugin(
       this.config.mdxCompilerOptions ?? {
         jsxImportSource: "react",
@@ -35,20 +37,23 @@ class ReactPageModuleService {
     const outdir = path.join(this.config.workDir, ".server-modules-react-mdx");
     const fileBaseName = path.basename(filePath, path.extname(filePath));
     const fileHash = fileSystem.hash(filePath);
-    const cacheBuster = process?.env?.NODE_ENV === "development" ? `-${Date.now()}` : "";
-    const outputFileName = `${fileBaseName}-${fileHash}${cacheBuster}.js`;
+    const cacheScopeSuffix = options?.cacheScope ? `-${sanitizeCacheScope(options.cacheScope)}` : "";
+    const cacheBuster = options?.bypassCache || process?.env?.NODE_ENV === "development" ? `-${Date.now()}` : "";
+    const outputFileName = `${fileBaseName}-${fileHash}${cacheScopeSuffix}${cacheBuster}.mjs`;
+    const outputNamingTemplate = `${fileBaseName}-${fileHash}${cacheScopeSuffix}${cacheBuster}.[ext]`;
     const buildResult = await build(
       {
         entrypoints: [filePath],
         root: this.config.rootDir,
         outdir,
-        target: "node",
+        target: "es2022",
         format: "esm",
         sourcemap: "none",
         splitting: false,
         minify: false,
         treeshaking: false,
-        naming: outputFileName,
+        externalPackages: true,
+        naming: outputNamingTemplate,
         plugins: [mdxPlugin]
       },
       this.config.buildExecutor
@@ -58,11 +63,22 @@ 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}`);
     }
-    return await import(pathToFileURL(compiledOutput).href);
+    normalizeNodeRuntimeBuildOutputFile(compiledOutput, this.config.rootDir);
+    const compiledOutputUrl = pathToFileURL(compiledOutput);
+    if (process?.env?.NODE_ENV === "development" || options?.cacheScope) {
+      compiledOutputUrl.searchParams.set(
+        "update",
+        [fileHash, options?.cacheScope ? sanitizeCacheScope(options.cacheScope) : void 0].filter((value) => value !== void 0).join("-")
+      );
+    }
+    return await import(
+      /* @vite-ignore */
+      compiledOutputUrl.href
+    );
   }
   /**
    * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.
@@ -109,23 +125,11 @@ class ReactPageModuleService {
    * Recursively checks whether a component config tree declares any browser modules.
    * Used to determine if a page needs hydration.
    */
-  hasModulesInConfig(config, visited = /* @__PURE__ */ new Set()) {
-    if (!config || visited.has(config)) {
-      return false;
-    }
-    visited.add(config);
-    if (config.dependencies?.modules?.some((entry) => entry.trim().length > 0)) {
-      return true;
-    }
-    if (config.layout?.config && this.hasModulesInConfig(config.layout.config, visited)) {
-      return true;
-    }
-    for (const component of config.dependencies?.components ?? []) {
-      if (this.hasModulesInConfig(component.config, visited)) {
-        return true;
-      }
-    }
-    return false;
+  hasModulesInConfig(config) {
+    return someInConfigTree(
+      config,
+      (node) => node.dependencies?.modules?.some((entry) => entry.trim().length > 0) ?? false
+    );
   }
   /**
    * Determines whether a page needs client-side hydration.
@@ -154,6 +158,9 @@ class ReactPageModuleService {
     return Array.from(new Set(declarations));
   }
 }
+function sanitizeCacheScope(cacheScope) {
+  return cacheScope.replace(/[^a-zA-Z0-9_-]+/g, "-");
+}
 export {
   ReactPageModuleService
 };

package/src/services/react-page-payload.service.d.ts

@@ -0,0 +1,46 @@
+import type { HtmlTemplateProps, IntegrationRendererRenderOptions, RequestLocals } from '@ecopages/core';
+import type { ReactNode } from 'react';
+type PagePayloadOptions = {
+    pageProps?: HtmlTemplateProps['pageProps'];
+    params: IntegrationRendererRenderOptions<ReactNode>['params'];
+    query: IntegrationRendererRenderOptions<ReactNode>['query'];
+    safeLocals?: RequestLocals;
+};
+/**
+ * Builds the serialized page payload React exposes to document shells and the browser.
+ *
+ * This keeps hydration payload shaping away from the renderer so the renderer can
+ * stay focused on component orchestration instead of data serialization rules.
+ */
+export declare class ReactPagePayloadService {
+    /**
+     * 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: HtmlTemplateProps['pageProps'] | undefined): string;
+    /**
+     * 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: PagePayloadOptions): HtmlTemplateProps['pageProps'];
+    /**
+     * 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.
+     */
+    getSerializableLocals(locals: RequestLocals | undefined, requiredLocals?: string | readonly string[]): RequestLocals | undefined;
+}
+export {};

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

@@ -0,0 +1,67 @@
+import { LocalsAccessError } from "@ecopages/core/errors";
+class ReactPagePayloadService {
+  /**
+   * 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>`;
+  }
+  /**
+   * 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 }
+    };
+  }
+  /**
+   * 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.
+   */
+  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 (error) {
+      if (error instanceof LocalsAccessError) {
+        return void 0;
+      }
+      throw error;
+    }
+  }
+}
+export {
+  ReactPagePayloadService
+};

package/src/services/react-runtime-bundle.service.d.ts

@@ -6,32 +6,39 @@
  *
  * @module
  */
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
 import { type AssetDefinition } from '@ecopages/core/services/asset-processing-service';
 import type { ReactRouterAdapter } from '../router-adapter.js';
+import { type BrowserRuntimeManifest } from '@ecopages/core/build/browser-runtime-manifest';
 export type ReactRuntimeImports = {
     react: string;
     reactDomClient: string;
     reactJsxRuntime: string;
     reactJsxDevRuntime: string;
     reactDom: string;
+    useSyncExternalStoreWithSelector: string;
     router?: string;
 };
 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;
     private getReactVendorFileName;
     private getReactDomVendorFileName;
     private getRouterVendorFileName;
+    private getUseSyncExternalStoreWithSelectorVendorFileName;
+    private createReactVendorImportRewritePlugin;
     getRuntimeImports(mode?: RuntimeMode): ReactRuntimeImports;
-    getSpecifierMap(mode?: RuntimeMode): Record<string, string>;
+    getRuntimeAliasMap(mode?: RuntimeMode): Record<string, string>;
+    getRuntimeManifest(mode?: RuntimeMode): BrowserRuntimeManifest;
     getDependencies(): AssetDefinition[];
     createRuntimeAliasPlugin(mode?: RuntimeMode): EcoBuildPlugin;
 }

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

@@ -1,16 +1,23 @@
-import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
+import { createBrowserRuntimePlugin } from "@ecopages/core/build/browser-runtime-plugin";
+import { DEFAULT_BROWSER_RUNTIME_PLUGIN_NAME } from "@ecopages/core/build/browser-runtime-plugin";
 import {
   buildBrowserRuntimeAssetUrl,
   createBrowserRuntimeModuleAsset,
   createBrowserRuntimeScriptAsset
 } from "@ecopages/core/services/asset-processing-service";
 import { createReactDomRuntimeInteropPlugin } from "../utils/react-dom-runtime-interop-plugin.js";
-import { buildReactRuntimeSpecifierMap } from "../utils/react-runtime-specifier-map.js";
+import { buildReactRuntimeAliasMap, buildReactRuntimeManifest } from "../utils/react-runtime-alias-map.js";
+import {
+  createBrowserRuntimeManifest
+} from "@ecopages/core/build/browser-runtime-manifest";
 class ReactRuntimeBundleService {
   config;
   constructor(config) {
     this.config = config;
   }
+  setRootDir(rootDir) {
+    this.config.rootDir = rootDir;
+  }
   get isDevelopment() {
     return process.env.NODE_ENV === "development";
   }
@@ -36,6 +43,22 @@ class ReactRuntimeBundleService {
     }
     return mode === "development" ? `${this.config.routerAdapter.bundle.outputName}.development.js` : `${this.config.routerAdapter.bundle.outputName}.js`;
   }
+  getUseSyncExternalStoreWithSelectorVendorFileName(mode) {
+    return mode === "development" ? "use-sync-external-store-with-selector.development.js" : "use-sync-external-store-with-selector.js";
+  }
+  createReactVendorImportRewritePlugin(mode) {
+    return createBrowserRuntimePlugin({
+      name: `react-plugin-vendor-runtime-import-rewrite-${mode}`,
+      manifest: createBrowserRuntimeManifest([
+        {
+          specifier: "react",
+          owner: "@ecopages/react",
+          importPath: "react",
+          publicPath: buildBrowserRuntimeAssetUrl(this.getReactVendorFileName(mode))
+        }
+      ])
+    });
+  }
   getRuntimeImports(mode = this.getCurrentRuntimeMode()) {
     const reactVendorFileName = this.getReactVendorFileName(mode);
     const reactDomVendorFileName = this.getReactDomVendorFileName(mode);
@@ -44,31 +67,45 @@ class ReactRuntimeBundleService {
       reactDomClient: buildBrowserRuntimeAssetUrl(reactDomVendorFileName),
       reactJsxRuntime: buildBrowserRuntimeAssetUrl(reactVendorFileName),
       reactJsxDevRuntime: buildBrowserRuntimeAssetUrl(reactVendorFileName),
-      reactDom: buildBrowserRuntimeAssetUrl(reactDomVendorFileName)
+      reactDom: buildBrowserRuntimeAssetUrl(reactDomVendorFileName),
+      useSyncExternalStoreWithSelector: buildBrowserRuntimeAssetUrl(
+        this.getUseSyncExternalStoreWithSelectorVendorFileName(mode)
+      )
     };
     if (this.config.routerAdapter) {
       runtimeImports.router = buildBrowserRuntimeAssetUrl(this.getRouterVendorFileName(mode));
     }
     return runtimeImports;
   }
-  getSpecifierMap(mode = this.getCurrentRuntimeMode()) {
-    return buildReactRuntimeSpecifierMap(this.getRuntimeImports(mode), this.config.routerAdapter);
+  getRuntimeAliasMap(mode = this.getCurrentRuntimeMode()) {
+    return buildReactRuntimeAliasMap(this.getRuntimeImports(mode));
+  }
+  getRuntimeManifest(mode = this.getCurrentRuntimeMode()) {
+    return buildReactRuntimeManifest(this.getRuntimeImports(mode));
   }
   getDependencies() {
-    const reactDomRuntimeInteropPlugin = createReactDomRuntimeInteropPlugin();
     const dependencies = [];
     for (const mode of ["production", "development"]) {
-      const reactRuntimeAliasPlugin = createRuntimeSpecifierAliasPlugin(
-        {
-          react: buildBrowserRuntimeAssetUrl(this.getReactVendorFileName(mode))
-        },
-        { name: `react-plugin-runtime-specifier-alias-${mode}` }
-      );
+      const reactVendorImportRewritePlugin = this.createReactVendorImportRewritePlugin(mode);
+      const reactDomRuntimeInteropPlugin = createReactDomRuntimeInteropPlugin({
+        reactSpecifier: buildBrowserRuntimeAssetUrl(this.getReactVendorFileName(mode))
+      });
+      const reactRuntimeAliasPlugin = createBrowserRuntimePlugin({
+        name: `react-plugin-runtime-specifier-alias-${mode}`,
+        manifest: createBrowserRuntimeManifest([
+          {
+            specifier: "react",
+            owner: "",
+            importPath: "react",
+            publicPath: buildBrowserRuntimeAssetUrl(this.getReactVendorFileName(mode))
+          }
+        ])
+      });
       const reactDomBundlePlugins = [reactRuntimeAliasPlugin, reactDomRuntimeInteropPlugin].filter(
         (plugin) => plugin !== null
       );
       const runtimeAliasPlugin = this.createRuntimeAliasPlugin(mode);
-      const mappedSpecifiers = new Set(Object.keys(this.getSpecifierMap(mode)));
+      const mappedSpecifiers = new Set(Object.keys(this.getRuntimeAliasMap(mode)));
       dependencies.push(
         createBrowserRuntimeModuleAsset({
           modules: [
@@ -79,8 +116,10 @@ class ReactRuntimeBundleService {
           name: "react",
           fileName: this.getReactVendorFileName(mode),
           cacheDirName: `ecopages-react-runtime-${mode}`,
+          rootDir: this.config.rootDir,
           bundleOptions: {
-            define: this.createRuntimeDefines(mode)
+            define: this.createRuntimeDefines(mode),
+            excludeAppBuildPlugins: [DEFAULT_BROWSER_RUNTIME_PLUGIN_NAME]
           }
         }),
         createBrowserRuntimeModuleAsset({
@@ -88,10 +127,22 @@ class ReactRuntimeBundleService {
           name: "react-dom",
           fileName: this.getReactDomVendorFileName(mode),
           cacheDirName: `ecopages-react-runtime-${mode}`,
+          rootDir: this.config.rootDir,
           bundleOptions: {
             define: this.createRuntimeDefines(mode),
+            excludeAppBuildPlugins: [DEFAULT_BROWSER_RUNTIME_PLUGIN_NAME],
             plugins: reactDomBundlePlugins
           }
+        }),
+        createBrowserRuntimeScriptAsset({
+          importPath: "@ecopages/react/runtime/use-sync-external-store-with-selector",
+          name: "use-sync-external-store-with-selector",
+          fileName: this.getUseSyncExternalStoreWithSelectorVendorFileName(mode),
+          bundleOptions: {
+            define: this.createRuntimeDefines(mode),
+            excludeAppBuildPlugins: [DEFAULT_BROWSER_RUNTIME_PLUGIN_NAME],
+            plugins: [reactVendorImportRewritePlugin]
+          }
         })
       );
       if (this.config.routerAdapter) {
@@ -115,8 +166,18 @@ class ReactRuntimeBundleService {
     return dependencies;
   }
   createRuntimeAliasPlugin(mode = this.getCurrentRuntimeMode()) {
-    return createRuntimeSpecifierAliasPlugin(this.getSpecifierMap(mode), {
-      name: `react-plugin-runtime-alias-${mode}`
+    const aliasMap = this.getRuntimeAliasMap(mode);
+    const manifest = createBrowserRuntimeManifest(
+      Object.entries(aliasMap).map(([specifier, publicPath]) => ({
+        specifier,
+        owner: "",
+        importPath: specifier,
+        publicPath
+      }))
+    );
+    return createBrowserRuntimePlugin({
+      name: `react-plugin-runtime-alias-${mode}`,
+      manifest
     });
   }
 }