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

package/dist/esm-node/cli/ssr/index.mjs

@@ -0,0 +1,125 @@
+import * as __rspack_external__loadable_bundler_plugin_mjs_5b4104f0 from "./loadable-bundler-plugin.mjs";
+import path from "path";
+import { LOADABLE_STATS_FILE, isUseSSRBundle } from "@modern-js/utils";
+import { resolveSSRMode } from "./mode.mjs";
+var __webpack_modules__ = {
+    "./loadable-bundler-plugin.js" (module) {
+        module.exports = __rspack_external__loadable_bundler_plugin_mjs_5b4104f0;
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+const checkUseStringSSR = (config, appDirectory, entrypoints)=>{
+    if (entrypoints && entrypoints.length > 0) {
+        for (const entrypoint of entrypoints){
+            const ssrMode = resolveSSRMode({
+                entry: entrypoint.entryName,
+                config,
+                appDirectory,
+                nestedRoutesEntry: entrypoint.nestedRoutesEntry
+            });
+            if ('string' === ssrMode) return true;
+        }
+        return false;
+    }
+    return true;
+};
+const ssrBuilderPlugin = (modernAPI, outputModule)=>({
+        name: '@modern-js/builder-plugin-ssr',
+        setup (api) {
+            api.modifyEnvironmentConfig((config, { name, mergeEnvironmentConfig })=>{
+                const isServerEnvironment = 'node' === config.output.target || 'workerSSR' === name;
+                const userConfig = modernAPI.getNormalizedConfig();
+                const ssrEnv = userConfig.deploy?.worker?.ssr || userConfig.server?.rsc ? 'edge' : 'node';
+                const appContext = modernAPI.getAppContext();
+                const { appDirectory, entrypoints } = appContext;
+                const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig, appDirectory, entrypoints);
+                return mergeEnvironmentConfig(config, {
+                    source: {
+                        define: {
+                            'process.env.MODERN_TARGET': isServerEnvironment ? JSON.stringify('node') : JSON.stringify('browser'),
+                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv)
+                        }
+                    },
+                    output: {
+                        module: isServerEnvironment && outputModule
+                    },
+                    tools: {
+                        bundlerChain: useLoadablePlugin ? (chain)=>{
+                            const LoadableBundlerPlugin = __webpack_require__("./loadable-bundler-plugin.js");
+                            chain.plugin('loadable').use(LoadableBundlerPlugin, [
+                                {
+                                    filename: LOADABLE_STATS_FILE
+                                }
+                            ]);
+                        } : void 0
+                    }
+                });
+            });
+        }
+    });
+const ssrPlugin = ()=>({
+        name: '@modern-js/plugin-ssr',
+        required: [
+            '@modern-js/runtime'
+        ],
+        setup: (api)=>{
+            const appContext = api.getAppContext();
+            const exportLoadablePath = `@${appContext.metaName}/runtime/loadable`;
+            const runtimeUtilsPath = require.resolve('@modern-js/runtime-utils/node');
+            const aliasPath = runtimeUtilsPath.replace(`${path.sep}cjs${path.sep}`, `${path.sep}esm${path.sep}`).replace(/\.js$/, '.mjs');
+            api.config(()=>({
+                    builderPlugins: [
+                        ssrBuilderPlugin(api, 'module' === appContext.moduleType)
+                    ],
+                    resolve: {
+                        alias: {
+                            '@modern-js/runtime-utils/node$': aliasPath
+                        }
+                    },
+                    tools: {
+                        swc: {
+                            jsc: {
+                                experimental: {
+                                    plugins: [
+                                        [
+                                            require.resolve('@swc/plugin-loadable-components'),
+                                            {
+                                                signatures: [
+                                                    {
+                                                        name: 'default',
+                                                        from: '@loadable/component'
+                                                    },
+                                                    {
+                                                        name: 'lazy',
+                                                        from: '@loadable/component'
+                                                    },
+                                                    {
+                                                        name: 'default',
+                                                        from: exportLoadablePath
+                                                    },
+                                                    {
+                                                        name: 'lazy',
+                                                        from: exportLoadablePath
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    ]
+                                }
+                            }
+                        }
+                    }
+                }));
+        }
+    });
+const cli_ssr = ssrPlugin;
+export { cli_ssr as default, ssrPlugin };

package/dist/esm-node/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-node/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.mjs

@@ -0,0 +1,168 @@
+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.mjs";
+const genRenderStatement = ({ enableRsc, mountId, isNestedRouter })=>{
+    if (enableRsc) {
+        if (!isNestedRouter) return `render(<ModernRoot>
+                  <RscClientRoot rscPayload={data} />
+                </ModernRoot>, '${mountId || 'root'}');`;
+        return `render(<ModernRoot rscPayload={data} />, '${mountId || 'root'}');`;
+    }
+    return `render(<ModernRoot />, '${mountId || 'root'}');`;
+};
+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 ? `const data = createFromReadableStream(rscStream, {
+    callServer: callServer,
+  });` : ''}
+
+const ModernRoot = createRoot();
+
+${genRenderStatement({
+        enableRsc,
+        mountId,
+        isNestedRouter
+    })}`;
+};
+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';
+
+  import {
+    RscClientRoot,
+    createFromFetch,
+    isRedirectResponse,
+    rscStream,
+    callServer,
+    createFromReadableStream
+  } from '@${metaName}/runtime/rsc/client';
+
+  const handleRedirectResponse = (res: Response) => {
+    const { headers } = res;
+    const location = headers.get('X-Modernjs-Redirect');
+    const baseUrl = headers.get('X-Modernjs-BaseUrl');
+    if (location) {
+      if (baseUrl !== '/') {
+        window.location.replace(baseUrl + location);
+      } else {
+        window.location.replace(location);
+      }
+      return;
+    }
+    return res;
+  };
+
+  ${process.env.MODERN_DISABLE_INJECT_RSC_DATA ? `
+      const data = createFromFetch(
+        fetch(location.pathname, {
+          headers: {
+            'x-rsc-tree': 'true',
+          },
+        }).then(handleRedirectResponse),
+      )
+      ` : `
+      const data = createFromReadableStream(rscStream, {
+        callServer: callServer,
+      });
+      `}
+
+  const ModernRoot = createRoot();
+
+  ${isNestedRouter ? `
+      render(
+        <ModernRoot rscPayload={data}>
+        </ModernRoot>,
+        '${mountId}',
+      );
+      ` : `
+      render(
+        <ModernRoot>
+          <RscClientRoot rscPayload={data} />
+        </ModernRoot>,
+        '${mountId}',
+      );
+      `}
+  `;
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, mountId, enableRsc, isNestedRouter })=>`import '@${metaName}/runtime/registry/${entryName}';
+${genRenderCode({
+        srcDirectory,
+        internalSrcAlias,
+        metaName,
+        entry,
+        customEntry,
+        mountId,
+        enableRsc,
+        isNestedRouter
+    })}
+`;
+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_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, 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, config })=>`import { ${name}Plugin } from '${path}';
+
+${getRegisterRuntimePluginCode(entryName, name, config)}
+`).join('\n')}
+registerPlugin(plugins, runtimeConfig);
+`;
+const runtimeGlobalContext = ({ entryName, srcDirectory, internalSrcAlias, metaName, entry, customEntry, basename })=>`import { setGlobalContext } from '@${metaName}/runtime/context'
+
+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 })=>`
+  import { createElement, Fragment } from 'react';
+  import { setGlobalContext } from '@${metaName}/runtime/context';
+  import AppProxy from './AppProxy';
+
+  const DefaultRoot = ({ children }: { children?: ReactNode }) =>
+    createElement(Fragment, null, children);
+
+
+  setGlobalContext({
+    App: DefaultRoot,
+    RSCRoot: AppProxy,
+  });`;
+const runtimeGlobalContextForRSCClient = ({ metaName })=>`
+  import { createElement, Fragment } from 'react';
+  import { setGlobalContext } from '@${metaName}/runtime/context';
+
+  const DefaultRoot = ({ children }: { children?: ReactNode }) =>
+    createElement(Fragment, null, children);
+
+  setGlobalContext({
+    App: DefaultRoot
+  });`;
+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 };

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

@@ -65,15 +65,14 @@ export const rscPayloadHandler = createRequestHandler(handleRSCRequest, {
   enableRsc: true
 });
 `;
-const serverIndex = (options) => {
-  const { metaName = "modern-js", entryName } = options;
-  return `
+const serverIndex = (options)=>{
+    const { metaName = 'modern-js', entryName } = options;
+    return `
     import '@${metaName}/runtime/registry/${entryName}';
     ${genHandlerCode(options)}
   `;
 };
-const entryForCSRWithRSC = ({ metaName, entryName }) => {
-  return `
+const entryForCSRWithRSC = ({ metaName, entryName })=>`
   import '@${metaName}/runtime/registry/${entryName}';
   import {
     createRequestHandler,
@@ -124,28 +123,25 @@ const entryForCSRWithRSC = ({ metaName, entryName }) => {
     enableRsc: true
   });
 `;
-};
 function genHandlerCode({ mode, metaName, customServerEntry, srcDirectory, internalSrcAlias, enableRsc }) {
-  if (customServerEntry) {
-    const realEntryPath = formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias));
-    return `
+    if (customServerEntry) {
+        const realEntryPath = formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias));
+        return `
       export * from '${realEntryPath}';
       export { default as requestHandler } from '${realEntryPath}'`;
-  } else {
-    const entrySource = enableRsc ? SERVER_ENTRY_RSC : SERVER_ENTRY;
-    const serverEntry = transformServerEntry(entrySource, {
-      metaName: metaName || "modern-js",
-      mode
-    });
-    return serverEntry;
-  }
+    }
+    {
+        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, mode === "string" ? "renderString" : "renderStreaming");
-  return output;
+    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
-};
+export { entryForCSRWithRSC, serverIndex };

package/dist/esm-node/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-node/core/browser/hydrate.mjs

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { loadableReady } from "@loadable/component";
+import { RenderLevel } from "../constants.mjs";
+import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
+import { WithCallback } from "./withCallback.mjs";
+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-node/core/browser/index.mjs

@@ -0,0 +1,96 @@
+import cookie from "cookie";
+import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
+import { getInitialContext } from "../context/runtime.mjs";
+import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
+import { hydrateRoot } from "./hydrate.mjs";
+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-node/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-node/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-node/core/compat/index.mjs

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