@modern-js/runtime 2.69.7 → 3.0.0-alpha.1

package/dist/esm/cli/ssr/loadable-bundler-plugin.mjs

@@ -0,0 +1,75 @@
+import path_0 from "path";
+import { fs } from "@modern-js/utils";
+class LoadablePlugin {
+    apply(compiler) {
+        this.compiler = compiler;
+        compiler.options.output.chunkLoadingGlobal = this.opts.chunkLoadingGlobal;
+        if (this.opts.outputAsset || this.opts.writeToDisk) compiler.hooks.make.tap(LoadablePlugin.name, (compilation)=>{
+            compilation.hooks.processAssets.tap({
+                name: LoadablePlugin.name,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
+            }, ()=>{
+                const asset = this.handleEmit(compilation);
+                if (asset) compilation.emitAsset(this.opts.filename, asset);
+            });
+        });
+    }
+    handleEmit(compilation) {
+        const stats = compilation.getStats().toJson({
+            all: false,
+            assets: true,
+            cachedAssets: true,
+            chunks: true,
+            chunkGroups: true,
+            entrypoints: true,
+            chunkGroupChildren: true,
+            hash: true,
+            ids: true,
+            outputPath: true,
+            publicPath: true
+        });
+        const output = {
+            ...stats,
+            generator: 'loadable-components',
+            chunks: [
+                ...stats.chunks || []
+            ].map((chunk)=>({
+                    id: chunk.id,
+                    files: [
+                        ...chunk.files || []
+                    ]
+                }))
+        };
+        const result = JSON.stringify(output, null, 2);
+        if (this.opts.writeToDisk) this.writeAssetsFile(result);
+        if (this.opts.outputAsset) return {
+            source () {
+                return result;
+            },
+            size () {
+                return result.length;
+            }
+        };
+        return null;
+    }
+    writeAssetsFile(manifest) {
+        const outputFolder = this.compiler?.options.output.path;
+        const outputFile = path_0.resolve(outputFolder || '', this.opts.filename);
+        fs.outputFileSync(outputFile, manifest);
+    }
+    constructor({ filename = 'loadable-stats.json', path, writeToDisk, outputAsset = true, chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__' } = {
+        filename: 'loadable-stats.json',
+        outputAsset: true,
+        chunkLoadingGlobal: '__LOADABLE_LOADED_CHUNKS__'
+    }){
+        this.opts = {
+            filename,
+            path,
+            writeToDisk,
+            outputAsset,
+            chunkLoadingGlobal
+        };
+        this.compiler = null;
+    }
+}
+module.exports = LoadablePlugin;

package/dist/esm/cli/ssr/mode.mjs

@@ -0,0 +1,14 @@
+function resolveSSRMode(params) {
+    const { entry, config, appDirectory, nestedRoutesEntry } = params;
+    const isSsgEnabled = config.output?.ssg || config.output?.ssgByEntries && (entry ? !!config.output.ssgByEntries[entry] : Object.keys(config.output.ssgByEntries).length > 0);
+    if (isSsgEnabled) if (nestedRoutesEntry) return 'stream';
+    else return 'string';
+    const ssr = entry ? config.server?.ssrByEntries?.[entry] || config.server?.ssr : config.server?.ssr;
+    if (void 0 !== ssr) {
+        if (!ssr) return false;
+        if ('boolean' == typeof ssr) return ssr ? 'stream' : false;
+        return 'string' === ssr.mode ? 'string' : 'stream';
+    }
+    return false;
+}
+export { resolveSSRMode };

package/dist/{esm-node/cli/template.js → esm/cli/template.mjs}

@@ -1,48 +1,35 @@
-import path from "path";
+import path_0 from "path";
 import { JS_EXTENSIONS, findExists, formatImportPath } from "@modern-js/utils";
 import { ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME } from "./constants";
-const genRenderStatement = ({ customBootstrap, enableRsc, mountId, isNestedRouter }) => {
-  if (customBootstrap) {
-    return `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));`;
-  }
-  if (enableRsc) {
-    if (!isNestedRouter) {
-      return `render(<ModernRoot>
+const genRenderStatement = ({ enableRsc, mountId, isNestedRouter })=>{
+    if (enableRsc) {
+        if (!isNestedRouter) return `render(<ModernRoot>
                   <RscClientRoot rscPayload={data} />
-                </ModernRoot>, '${mountId || "root"}');`;
+                </ModernRoot>, '${mountId || 'root'}');`;
+        return `render(<ModernRoot rscPayload={data} />, '${mountId || 'root'}');`;
     }
-    return `render(<ModernRoot rscPayload={data} />, '${mountId || "root"}');`;
-  }
-  return `render(<ModernRoot />, '${mountId || "root"}');`;
+    return `render(<ModernRoot />, '${mountId || 'root'}');`;
 };
-const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId, enableRsc, isNestedRouter }) => {
-  if (customEntry) {
-    return `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'`;
-  }
-  return `import { createRoot } from '@${metaName}/runtime/react';
+const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, mountId, enableRsc, isNestedRouter })=>{
+    if (customEntry) return `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'`;
+    return `import { createRoot } from '@${metaName}/runtime/react';
 import { render } from '@${metaName}/runtime/browser';
 
-${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer } from '@${metaName}/runtime/rsc/client';` : ""}
+${enableRsc ? `import { RscClientRoot, createFromReadableStream, rscStream, callServer } from '@${metaName}/runtime/rsc/client';` : ''}
 
 ${enableRsc ? `const data = createFromReadableStream(rscStream, {
     callServer: callServer,
-  });` : ""}
-
-${customBootstrap ? `import customBootstrap from '${formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias))}';` : ""}
-
-
+  });` : ''}
 
 const ModernRoot = createRoot();
 
 ${genRenderStatement({
-    customBootstrap,
-    enableRsc,
-    mountId,
-    isNestedRouter
-  })}`;
+        enableRsc,
+        mountId,
+        isNestedRouter
+    })}`;
 };
-const entryForCSRWithRSC = ({ metaName, entryName, urlPath = "/", mountId = "root", isNestedRouter }) => {
-  return `
+const entryForCSRWithRSC = ({ metaName, entryName, urlPath = '/', mountId = 'root', isNestedRouter })=>`
   import '@${metaName}/runtime/registry/${entryName}';
   import { render } from '@${metaName}/runtime/browser';
   import { createRoot } from '@${metaName}/runtime/react';
@@ -102,61 +89,52 @@ const entryForCSRWithRSC = ({ metaName, entryName, urlPath = "/", mountId = "roo
       );
       `}
   `;
-};
-const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId, enableRsc, isNestedRouter }) => `import '@${metaName}/runtime/registry/${entryName}';
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, mountId, enableRsc, isNestedRouter })=>`import '@${metaName}/runtime/registry/${entryName}';
 ${genRenderCode({
-  srcDirectory,
-  internalSrcAlias,
-  metaName,
-  entry,
-  customEntry,
-  customBootstrap,
-  mountId,
-  enableRsc,
-  isNestedRouter
-})}
+        srcDirectory,
+        internalSrcAlias,
+        metaName,
+        entry,
+        customEntry,
+        mountId,
+        enableRsc,
+        isNestedRouter
+    })}
 `;
-const register = () => `import './${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}';
+const register = ()=>`import './${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}';
 import './${ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME}';
 `;
-const getImportRuntimeConfigCode = (srcDirectory, internalSrcAlias, runtimeConfigFile) => {
-  if (runtimeConfigFile && findExists(JS_EXTENSIONS.map((ext) => path.resolve(srcDirectory, `${runtimeConfigFile}${ext}`)))) {
-    return `import modernRuntime from '${internalSrcAlias}/${runtimeConfigFile}';
+const getImportRuntimeConfigCode = (srcDirectory, internalSrcAlias, runtimeConfigFile)=>{
+    if (runtimeConfigFile && findExists(JS_EXTENSIONS.map((ext)=>path_0.resolve(srcDirectory, `${runtimeConfigFile}${ext}`)))) return `import modernRuntime from '${internalSrcAlias}/${runtimeConfigFile}';
 const runtimeConfig = typeof modernRuntime === 'function' ? modernRuntime(getCurrentEntryName()) : modernRuntime`;
-  }
-  return `let runtimeConfig;`;
-};
-const getRegisterRuntimePluginCode = (entryName, name, config) => {
-  const configName = name === "garfish" ? "masterApp" : name;
-  return `plugins.push(${name}Plugin(mergeConfig(${JSON.stringify(config)}, (runtimeConfig || {})['${configName}'], ((runtimeConfig || {})['${configName}ByEntries'] || {})['${entryName}'], (getGlobalAppConfig() || {})['${configName}'])));`;
+    return "let runtimeConfig;";
 };
-const runtimeRegister = ({ entryName, srcDirectory, internalSrcAlias, metaName, runtimeConfigFile, runtimePlugins }) => `import { registerPlugin, mergeConfig } from '@${metaName}/runtime/plugin';
-import { getGlobalAppConfig, getGlobalLayoutApp, getCurrentEntryName } from '@${metaName}/runtime/context';
+const getRegisterRuntimePluginCode = (entryName, configName, config)=>`plugins.push(${configName}Plugin(mergeConfig(${JSON.stringify(config)}, (runtimeConfig || {})['${configName}'])));`;
+const runtimeRegister = ({ entryName, srcDirectory, internalSrcAlias, metaName, runtimeConfigFile, runtimePlugins })=>`import { registerPlugin, mergeConfig } from '@${metaName}/runtime/plugin';
+import { getGlobalLayoutApp, getCurrentEntryName } from '@${metaName}/runtime/context';
 
 ${getImportRuntimeConfigCode(srcDirectory, internalSrcAlias, runtimeConfigFile)}
 
 const plugins = [];
 
-${runtimePlugins.map(({ name, path: path2, config }) => `import { ${name}Plugin } from '${path2}';
+${runtimePlugins.map(({ name, path, config })=>`import { ${name}Plugin } from '${path}';
 
 ${getRegisterRuntimePluginCode(entryName, name, config)}
-`).join("\n")}
+`).join('\n')}
 registerPlugin(plugins, runtimeConfig);
 `;
-const runtimeGlobalContext = ({ entryName, srcDirectory, internalSrcAlias, metaName, entry, customEntry }) => {
-  return `import { setGlobalContext } from '@${metaName}/runtime/context'
+const runtimeGlobalContext = ({ entryName, srcDirectory, internalSrcAlias, metaName, entry, customEntry, basename })=>`import { setGlobalContext } from '@${metaName}/runtime/context'
 
-import App from '${// We need to get the path of App.tsx here, but the entry is `src/entry.tsx`
-  formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, "App").replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace(/\.[tj]sx/, ""))}';
+import App from '${formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, 'App').replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace(/\.[tj]sx/, ''))}';
 
 const entryName = '${entryName}';
+const basename = '${basename || '/'}';
 setGlobalContext({
   entryName,
   App,
+  basename,
 });`;
-};
-const runtimeGlobalContextForRSCServer = ({ metaName }) => {
-  return `
+const runtimeGlobalContextForRSCServer = ({ metaName })=>`
   import { createElement, Fragment } from 'react';
   import { setGlobalContext } from '@${metaName}/runtime/context';
   import AppProxy from './AppProxy';
@@ -169,9 +147,7 @@ const runtimeGlobalContextForRSCServer = ({ metaName }) => {
     App: DefaultRoot,
     RSCRoot: AppProxy,
   });`;
-};
-const runtimeGlobalContextForRSCClient = ({ metaName }) => {
-  return `
+const runtimeGlobalContextForRSCClient = ({ metaName })=>`
   import { createElement, Fragment } from 'react';
   import { setGlobalContext } from '@${metaName}/runtime/context';
 
@@ -181,25 +157,12 @@ const runtimeGlobalContextForRSCClient = ({ metaName }) => {
   setGlobalContext({
     App: DefaultRoot
   });`;
-};
-const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry }) => {
-  return `
-  import App from '${// We need to get the path of App.tsx here, but the entry is `src/entry.tsx`
-  formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, "App").replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace(".tsx", ""))}';
+const AppProxyForRSC = ({ srcDirectory, internalSrcAlias, entry, customEntry })=>`
+  import App from '${formatImportPath(customEntry ? entry.replace(/entry\.[tj]sx/, 'App').replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias).replace('.tsx', ''))}';
   import React from 'react';
 
   export default function Root() {
     return React.createElement(App, null);
   }
   `;
-};
-export {
-  AppProxyForRSC,
-  entryForCSRWithRSC,
-  index,
-  register,
-  runtimeGlobalContext,
-  runtimeGlobalContextForRSCClient,
-  runtimeGlobalContextForRSCServer,
-  runtimeRegister
-};
+export { AppProxyForRSC, entryForCSRWithRSC, index, register, runtimeGlobalContext, runtimeGlobalContextForRSCClient, runtimeGlobalContextForRSCServer, runtimeRegister };

package/dist/esm/cli/template.server.mjs

@@ -0,0 +1,147 @@
+import { formatImportPath } from "@modern-js/utils";
+const SERVER_ENTRY = `
+import {
+  #render,
+  createRequestHandler,
+} from '@#metaName/runtime/ssr/server';
+
+const handleRequest = async (request, ServerRoot, options) => {
+
+  const body = await #render(request, <ServerRoot />, options);
+
+  return new Response(body, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8'
+    },
+  })
+};
+
+export const requestHandler = createRequestHandler(handleRequest);
+`;
+const SERVER_ENTRY_RSC = `
+import {
+  renderStreaming,
+  createRequestHandler,
+} from '@#metaName/runtime/ssr/server';
+import { RSCServerSlot } from '@#metaName/runtime/rsc/client';
+import { renderRsc } from '@#metaName/runtime/rsc/server';
+export { handleAction } from '@#metaName/runtime/rsc/server';
+
+const handleRequest = async (request, ServerRoot, options) => {
+
+  const body = await renderStreaming(request,
+    <ServerRoot>
+      <RSCServerSlot />
+    </ServerRoot>,
+    {
+      ...options,
+      rscRoot: options.rscRoot,
+    },
+  );
+
+  return new Response(body, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8'
+    },
+  })
+};
+
+export const requestHandler = createRequestHandler(handleRequest, {
+  enableRsc: true
+});
+
+const handleRSCRequest = async (request, ServerRoot, options) => {
+  const { serverPayload } = options;
+  const stream = renderRsc({
+    element: options.rscRoot,
+    clientManifest: options.rscClientManifest!,
+  });
+
+  return new Response(stream);
+}
+
+
+export const rscPayloadHandler = createRequestHandler(handleRSCRequest, {
+  enableRsc: true
+});
+`;
+const serverIndex = (options)=>{
+    const { metaName = 'modern-js', entryName } = options;
+    return `
+    import '@${metaName}/runtime/registry/${entryName}';
+    ${genHandlerCode(options)}
+  `;
+};
+const entryForCSRWithRSC = ({ metaName, entryName })=>`
+  import '@${metaName}/runtime/registry/${entryName}';
+  import {
+    createRequestHandler,
+  } from '@${metaName}/runtime/ssr/server';
+  import { renderRsc, processRSCStream } from '@${metaName}/runtime/rsc/server'
+  export { handleAction } from '@${metaName}/runtime/rsc/server';
+
+  const handleCSRRender = async (request, ServerRoot, options) => {
+    const rscPayloadStream = renderRsc({
+      element: options.rscRoot,
+      clientManifest: options.rscClientManifest!,
+    });
+    const stream = new ReadableStream({
+      start(controller) {
+        const encoder = new TextEncoder();
+
+        controller.enqueue(encoder.encode(options.html));
+
+      processRSCStream(rscPayloadStream, controller, encoder)
+        .catch(err => {
+          controller.error(err);
+        });
+      }
+    });
+
+    return new Response(stream, {
+      status: 200,
+      headers: new Headers({
+        'content-type': 'text/html; charset=UTF-8',
+      }),
+    });
+  }
+
+  export const renderRscStreamHandler = createRequestHandler(handleCSRRender, {
+    enableRsc: true
+  });
+
+  const handleRequest = async (request, ServerRoot, options) => {
+    const stream = renderRsc({
+            element: options.rscRoot,
+      clientManifest: options.rscClientManifest!,
+    });
+
+    return new Response(stream);
+  }
+
+  export const rscPayloadHandler = createRequestHandler(handleRequest, {
+    enableRsc: true
+  });
+`;
+function genHandlerCode({ mode, metaName, customServerEntry, srcDirectory, internalSrcAlias, enableRsc }) {
+    if (customServerEntry) {
+        const realEntryPath = formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias));
+        return `
+      export * from '${realEntryPath}';
+      export { default as requestHandler } from '${realEntryPath}'`;
+    }
+    {
+        const entrySource = enableRsc ? SERVER_ENTRY_RSC : SERVER_ENTRY;
+        const serverEntry = transformServerEntry(entrySource, {
+            metaName: metaName || 'modern-js',
+            mode
+        });
+        return serverEntry;
+    }
+}
+function transformServerEntry(source, options) {
+    const { metaName = 'modern-js', mode } = options;
+    const output = source.replace(/#metaName/g, metaName).replace(/#render/g, 'string' === mode ? 'renderString' : 'renderStreaming');
+    return output;
+}
+export { entryForCSRWithRSC, serverIndex };

package/dist/esm/common.mjs

@@ -0,0 +1,4 @@
+const isBrowser = ()=>"u" > typeof window && 'nodejs' !== window.name;
+const JSX_SHELL_STREAM_END_MARK = '<!--<?- SHELL_STREAM_END ?>-->';
+const ESCAPED_SHELL_STREAM_END_MARK = '&lt;!--&lt;?- SHELL_STREAM_END ?&gt;--&gt;';
+export { ESCAPED_SHELL_STREAM_END_MARK, JSX_SHELL_STREAM_END_MARK, isBrowser };

package/dist/esm/core/browser/hydrate.mjs

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { loadableReady } from "@loadable/component";
+import { RenderLevel } from "../constants";
+import { wrapRuntimeContextProvider } from "../react/wrapper";
+import { WithCallback } from "./withCallback";
+const isReact18 = ()=>'true' === process.env.IS_REACT18;
+function hydrateRoot(App, context, ModernRender, ModernHydrate) {
+    const hydrateContext = {
+        ...context,
+        get routes () {
+            return context.routes;
+        },
+        _hydration: true
+    };
+    const callback = ()=>{
+        delete hydrateContext._hydration;
+    };
+    const renderLevel = window?._SSR_DATA?.renderLevel || RenderLevel.CLIENT_RENDER;
+    const renderMode = window?._SSR_DATA?.mode || 'string';
+    if (isReact18() && 'stream' === renderMode) return streamSSRHydrate();
+    function streamSSRHydrate() {
+        if (renderLevel !== RenderLevel.SERVER_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
+        {
+            const SSRApp = ()=>/*#__PURE__*/ jsx(WithCallback, {
+                    callback: callback,
+                    children: App
+                });
+            return ModernHydrate(wrapRuntimeContextProvider(/*#__PURE__*/ jsx(SSRApp, {}), hydrateContext));
+        }
+    }
+    return stringSSRHydrate();
+    function stringSSRHydrate() {
+        if (renderLevel === RenderLevel.CLIENT_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
+        if (renderLevel === RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
+            isReact18() ? loadableReady(()=>{
+                const SSRApp = ()=>/*#__PURE__*/ jsx(WithCallback, {
+                        callback: callback,
+                        children: App
+                    });
+                ModernHydrate(wrapRuntimeContextProvider(/*#__PURE__*/ jsx(SSRApp, {}), hydrateContext)).then((root)=>{
+                    resolve(root);
+                });
+            }) : loadableReady(()=>{
+                ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then((root)=>{
+                    resolve(root);
+                });
+            });
+        });
+        console.warn(`unknow render level: ${renderLevel}, execute render()`);
+        return ModernRender(wrapRuntimeContextProvider(App, context));
+    }
+}
+export { hydrateRoot, isReact18 };

package/dist/esm/core/browser/index.mjs

@@ -0,0 +1,96 @@
+import cookie from "cookie";
+import { getGlobalInternalRuntimeContext } from "../context";
+import { getInitialContext } from "../context/runtime";
+import { wrapRuntimeContextProvider } from "../react/wrapper";
+import { hydrateRoot } from "./hydrate";
+const IS_REACT18 = 'true' === process.env.IS_REACT18;
+const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
+        const [key, value] = item.split('=');
+        if (key) res[key] = value;
+        return res;
+    }, {});
+function getSSRData() {
+    const ssrData = window._SSR_DATA;
+    const ssrRequest = ssrData?.context?.request;
+    const finalSSRData = {
+        ...ssrData || {
+            renderLevel: 0,
+            mode: 'string'
+        },
+        context: {
+            ...ssrData?.context || {},
+            request: {
+                ...ssrData?.context?.request || {},
+                params: ssrRequest?.params || {},
+                host: ssrRequest?.host || location.host,
+                pathname: ssrRequest?.pathname || location.pathname,
+                headers: ssrRequest?.headers || {},
+                cookieMap: cookie.parse(document.cookie || '') || {},
+                cookie: document.cookie || '',
+                userAgent: ssrRequest?.headers?.['user-agent'] || navigator.userAgent,
+                referer: document.referrer,
+                query: {
+                    ...getQuery(),
+                    ...ssrRequest?.query || {}
+                },
+                url: location.href
+            }
+        }
+    };
+    return finalSSRData;
+}
+function isClientArgs(id) {
+    return void 0 === id || 'string' == typeof id || "u" > typeof HTMLElement && id instanceof HTMLElement;
+}
+async function render(App, id) {
+    const context = getInitialContext();
+    const runBeforeRender = async (context)=>{
+        const internalRuntimeContext = getGlobalInternalRuntimeContext();
+        const api = internalRuntimeContext.pluginAPI;
+        api.updateRuntimeContext(context);
+        const hooks = internalRuntimeContext.hooks;
+        await hooks.onBeforeRender.call(context);
+    };
+    if (isClientArgs(id)) {
+        const ssrData = getSSRData();
+        Object.assign(context, {
+            _internalRouterBaseName: App.props.basename,
+            ssrContext: ssrData.context
+        });
+        await runBeforeRender(context);
+        const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
+        async function ModernRender(App) {
+            const renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
+            return renderFunc(App, rootElement);
+        }
+        async function ModernHydrate(App, callback) {
+            const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
+            return hydrateFunc(App, rootElement, callback);
+        }
+        if (window._SSR_DATA) return hydrateRoot(App, context, ModernRender, ModernHydrate);
+        return ModernRender(wrapRuntimeContextProvider(App, context));
+    }
+    throw Error('`render` function needs id in browser environment, it needs to be string or element');
+}
+async function renderWithReact18(App, rootElement) {
+    const ReactDOM = await import("react-dom/client");
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(App);
+    return root;
+}
+async function renderWithReact17(App, rootElement) {
+    const ReactDOM = await import("react-dom");
+    ReactDOM.render(App, rootElement);
+    return rootElement;
+}
+async function hydrateWithReact18(App, rootElement) {
+    const ReactDOM = await import("react-dom/client");
+    const root = ReactDOM.hydrateRoot(rootElement, App);
+    return root;
+}
+async function hydrateWithReact17(App, rootElement, callback) {
+    const ReactDOM = await import("react-dom");
+    const root = ReactDOM.hydrate(App, rootElement, callback);
+    return root;
+}
+export { hydrateWithReact17, hydrateWithReact18, render, renderWithReact17, renderWithReact18 };

package/dist/esm/core/browser/withCallback.mjs

@@ -0,0 +1,13 @@
+import { useLayoutEffect, useRef } from "react";
+const WithCallback = ({ callback, children })=>{
+    const once = useRef(false);
+    useLayoutEffect(()=>{
+        if (once.current) return;
+        once.current = true;
+        callback();
+    }, [
+        callback
+    ]);
+    return children;
+};
+export { WithCallback };

package/dist/esm/core/compat/hooks.mjs

@@ -0,0 +1,35 @@
+function transformHookRunner(hookRunnerName) {
+    switch(hookRunnerName){
+        case 'beforeRender':
+            return 'onBeforeRender';
+        default:
+            return hookRunnerName;
+    }
+}
+function handleSetupResult(setupResult, api) {
+    if (!setupResult) return;
+    Object.keys(setupResult).forEach((key)=>{
+        const fn = setupResult[key];
+        if ('function' == typeof fn) {
+            const newAPI = transformHookRunner(key);
+            if (api[newAPI]) if ('beforeRender' === key) api[newAPI](async (...params)=>{
+                await fn(...params);
+            });
+            else api[newAPI]((...params)=>{
+                const res = fn(...params);
+                return res;
+            });
+        }
+    });
+}
+function getHookRunners(runtimeContext) {
+    const { _internalContext } = runtimeContext;
+    const { hooks } = _internalContext;
+    return {
+        beforeRender: async (context)=>hooks.onBeforeRender.call(context),
+        wrapRoot: (App)=>hooks.wrapRoot.call(App),
+        pickContext: (context)=>hooks.pickContext.call(context),
+        config: ()=>hooks.config.call()
+    };
+}
+export { getHookRunners, handleSetupResult, transformHookRunner };

package/dist/esm/core/compat/index.mjs

@@ -0,0 +1,12 @@
+import { getHookRunners } from "./hooks";
+const compatPlugin = ()=>({
+        name: '@modern-js/runtime-plugin-compat',
+        _registryApi: (getRuntimeContext)=>({
+                useRuntimeConfigContext: ()=>{
+                    const { _internalContext } = getRuntimeContext();
+                    return _internalContext.config;
+                },
+                useHookRunners: ()=>getHookRunners(getRuntimeContext())
+            })
+    });
+export { compatPlugin };

package/dist/esm/core/compat/requestContext.mjs

@@ -0,0 +1,21 @@
+const makeRequestContext = (context)=>{
+    const baseSSRContext = context.ssrContext;
+    if (baseSSRContext) return {
+        request: baseSSRContext.request,
+        response: baseSSRContext.response
+    };
+    return {
+        request: {},
+        response: {}
+    };
+};
+const requestContextPlugin = ()=>({
+        name: '@modern-js/runtime-plugin-request-context',
+        setup (api) {
+            api.onBeforeRender((context)=>{
+                const requestContext = makeRequestContext(context);
+                context.context = requestContext;
+            });
+        }
+    });
+export { makeRequestContext, requestContextPlugin };