@modern-js/runtime 2.69.5 → 3.0.0-alpha.0

package/dist/esm/router/runtime/utils.mjs

@@ -0,0 +1,165 @@
+import { jsx } from "react/jsx-runtime";
+import { renderNestedRoute } from "@modern-js/runtime-utils/browser";
+import { Route, UNSAFE_ErrorResponseImpl, isRouteErrorResponse } from "@modern-js/runtime-utils/router";
+import react from "react";
+import { DefaultNotFound } from "./DefaultNotFound";
+import DeferredDataScripts from "./DeferredDataScripts";
+function getRouteComponents(routes, { globalApp, ssrMode, props }) {
+    const Layout = ({ Component, ...props })=>{
+        const GlobalLayout = globalApp;
+        if (!GlobalLayout) return /*#__PURE__*/ jsx(Component, {
+            ...props
+        });
+        return /*#__PURE__*/ jsx(GlobalLayout, {
+            Component: Component,
+            ...props
+        });
+    };
+    const routeElements = [];
+    for (const route of routes)if ('nested' === route.type) {
+        const routeElement = renderNestedRoute(route, {
+            DeferredDataComponent: 'stream' === ssrMode ? DeferredDataScripts : void 0,
+            props
+        });
+        routeElements.push(routeElement);
+    } else {
+        const routeElement = /*#__PURE__*/ jsx(Route, {
+            path: route.path,
+            element: /*#__PURE__*/ jsx(Layout, {
+                Component: route.component
+            })
+        }, route.path);
+        routeElements.push(routeElement);
+    }
+    routeElements.push(/*#__PURE__*/ jsx(Route, {
+        path: "*",
+        element: /*#__PURE__*/ jsx(DefaultNotFound, {}),
+        loader: ()=>new Response('404', {
+                status: 404
+            })
+    }, "*"));
+    return routeElements;
+}
+function getRouteObjects(routes, { globalApp, ssrMode, props }) {
+    const createLayoutElement = (Component)=>{
+        const GlobalLayout = globalApp;
+        if (!GlobalLayout) return Component;
+        const LayoutWrapper = (props)=>{
+            const LayoutComponent = GlobalLayout;
+            return /*#__PURE__*/ jsx(LayoutComponent, {
+                Component: Component,
+                ...props
+            });
+        };
+        return LayoutWrapper;
+    };
+    const routeObjects = [];
+    for (const route of routes)if ('nested' === route.type) {
+        const nestedRouteObject = {
+            path: route.path,
+            id: route.id,
+            loader: route.loader,
+            action: route.action,
+            hasErrorBoundary: route.hasErrorBoundary,
+            shouldRevalidate: route.shouldRevalidate,
+            handle: {
+                ...route.handle,
+                ...'object' == typeof route.config ? route.config?.handle : {}
+            },
+            index: route.index,
+            hasClientLoader: !!route.clientData,
+            Component: route.component ? route.component : void 0,
+            errorElement: route.error ? /*#__PURE__*/ jsx(route.error, {}) : void 0,
+            children: route.children ? route.children.map((child)=>getRouteObjects([
+                    child
+                ], {
+                    globalApp,
+                    ssrMode,
+                    props
+                })[0]) : void 0
+        };
+        routeObjects.push(nestedRouteObject);
+    } else if ('function' == typeof route.component || 'object' == typeof route.component) {
+        const LayoutComponent = createLayoutElement(route.component);
+        const routeObject = {
+            path: route.path,
+            element: /*#__PURE__*/ react.createElement(LayoutComponent)
+        };
+        routeObjects.push(routeObject);
+    }
+    routeObjects.push({
+        path: '*',
+        element: /*#__PURE__*/ jsx(DefaultNotFound, {})
+    });
+    return routeObjects;
+}
+function createRouteObjectsFromConfig({ routesConfig, props, ssrMode }) {
+    if (!routesConfig) return null;
+    const { routes, globalApp } = routesConfig;
+    if (!routes) return null;
+    return getRouteObjects(routes, {
+        globalApp,
+        ssrMode,
+        props
+    });
+}
+function renderRoutes({ routesConfig, props, ssrMode }) {
+    if (!routesConfig) return null;
+    const { routes, globalApp } = routesConfig;
+    if (!routes) return null;
+    const routeElements = getRouteComponents(routes, {
+        globalApp,
+        ssrMode,
+        props
+    });
+    return routeElements;
+}
+function getLocation(serverContext) {
+    const { pathname = '', url = '' } = serverContext?.request || {};
+    const cleanUrl = url?.replace('http://', '')?.replace('https://', '');
+    const index = (cleanUrl || '').indexOf(pathname);
+    if (-1 === index) return pathname;
+    return cleanUrl.substring(index);
+}
+const urlJoin = (...parts)=>{
+    const separator = '/';
+    const replace = new RegExp(`${separator}{1,}`, 'g');
+    return standardSlash(parts.join(separator).replace(replace, separator));
+};
+function standardSlash(str) {
+    let addr = str;
+    if (!addr || 'string' != typeof addr) return addr;
+    if (addr.startsWith('.')) addr = addr.slice(1);
+    if (!addr.startsWith('/')) addr = `/${addr}`;
+    if (addr.endsWith('/') && '/' !== addr) addr = addr.slice(0, addr.length - 1);
+    return addr;
+}
+function serializeErrors(errors) {
+    if (!errors) return null;
+    const entries = Object.entries(errors);
+    const serialized = {};
+    for (const [key, val] of entries)if (isRouteErrorResponse(val)) serialized[key] = {
+        ...val,
+        __type: 'RouteErrorResponse'
+    };
+    else if (val instanceof Error) serialized[key] = {
+        message: val.message,
+        stack: val.stack,
+        __type: 'Error'
+    };
+    else serialized[key] = val;
+    return serialized;
+}
+function deserializeErrors(errors) {
+    if (!errors) return null;
+    const entries = Object.entries(errors);
+    const serialized = {};
+    for (const [key, val] of entries)if (val && 'RouteErrorResponse' === val.__type) serialized[key] = new UNSAFE_ErrorResponseImpl(val.status, val.statusText, val.data, true === val.internal);
+    else if (val && 'Error' === val.__type) {
+        const error = new Error(val.message);
+        error.stack = val.stack;
+        serialized[key] = error;
+    } else serialized[key] = val;
+    return serialized;
+}
+export { createRouteObjectsFromConfig, deserializeErrors, getLocation, getRouteComponents, getRouteObjects, renderRoutes, serializeErrors, standardSlash, urlJoin };

package/dist/esm/router/runtime/withRouter.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocation, useNavigate, useParams } from "@modern-js/runtime-utils/router";
+const withRouter = (Component)=>(props)=>{
+        const location = useLocation();
+        const params = useParams();
+        const navigate = useNavigate();
+        return /*#__PURE__*/ jsx(Component, {
+            ...props,
+            location: location,
+            params: params,
+            navigate: navigate
+        });
+    };
+export { withRouter };

package/dist/esm/rsc/client.mjs

@@ -0,0 +1,3 @@
+export * from "@modern-js/render/client";
+const isRedirectResponse = (res)=>null != res.headers.get('X-Modernjs-Redirect');
+export { isRedirectResponse };

package/dist/esm/rsc/server.mjs

@@ -0,0 +1,33 @@
+export * from "@modern-js/render/rsc";
+async function processRSCStream(rscStream, controller, encoder) {
+    try {
+        const reader = rscStream.getReader();
+        const decoder = new TextDecoder('utf-8', {
+            fatal: true
+        });
+        while(true){
+            const { done, value } = await reader.read();
+            if (done) break;
+            try {
+                const chunk = JSON.stringify(decoder.decode(value, {
+                    stream: true
+                }));
+                const scriptTag = `<script>(self.__FLIGHT_DATA||=[]).push(${chunk})</script>`;
+                controller.enqueue(encoder.encode(scriptTag));
+            } catch (err) {
+                const base64 = JSON.stringify(btoa(String.fromCodePoint(...value)));
+                const scriptTag = `<script>(self.__FLIGHT_DATA||=[]).push(Uint8Array.from(atob(${base64}), m => m.codePointAt(0)))</script>`;
+                controller.enqueue(encoder.encode(scriptTag));
+            }
+        }
+        const remaining = decoder.decode();
+        if (remaining.length) {
+            const scriptTag = `<script>(self.__FLIGHT_DATA||=[]).push(${JSON.stringify(remaining)})</script>`;
+            controller.enqueue(encoder.encode(scriptTag));
+        }
+        controller.close();
+    } catch (error) {
+        controller.error(error);
+    }
+}
+export { processRSCStream };

package/dist/esm-node/cli/alias.mjs

@@ -0,0 +1,24 @@
+import path from "path";
+import { ENTRY_POINT_REGISTER_FILE_NAME } from "./constants.mjs";
+const builderPluginAlias = ({ entrypoints, internalDirectory, metaName })=>({
+        name: 'runtime:alias',
+        setup (api) {
+            api.modifyRsbuildConfig((userConfig, { mergeRsbuildConfig })=>{
+                const entrypointsAlias = {};
+                const mainEntrypointsAlias = {};
+                entrypoints.forEach((entrypoint)=>{
+                    entrypointsAlias[`@${metaName}/runtime/registry/${entrypoint.entryName}$`] = path.join(internalDirectory, entrypoint.entryName, ENTRY_POINT_REGISTER_FILE_NAME);
+                    if (entrypoint.isMainEntry) mainEntrypointsAlias[`@${metaName}/runtime/registry`] = path.join(internalDirectory, entrypoint.entryName, ENTRY_POINT_REGISTER_FILE_NAME);
+                });
+                return mergeRsbuildConfig(userConfig, {
+                    resolve: {
+                        alias: {
+                            ...entrypointsAlias,
+                            ...mainEntrypointsAlias
+                        }
+                    }
+                });
+            });
+        }
+    });
+export { builderPluginAlias };

package/dist/esm-node/cli/code.mjs

@@ -0,0 +1,119 @@
+import path from "path";
+import { fs } from "@modern-js/utils";
+import { ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME, ENTRY_POINT_REGISTER_FILE_NAME, ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME, ENTRY_SERVER_BOOTSTRAP_FILE_NAME, INDEX_FILE_NAME, SERVER_ENTRY_POINT_FILE_NAME } from "./constants.mjs";
+import { resolveSSRMode } from "./ssr/mode.mjs";
+import { AppProxyForRSC, entryForCSRWithRSC, index, register, runtimeGlobalContext, runtimeGlobalContextForRSCClient, runtimeGlobalContextForRSCServer, runtimeRegister } from "./template.mjs";
+import { entryForCSRWithRSC as external_template_server_mjs_entryForCSRWithRSC, serverIndex } from "./template.server.mjs";
+const generateCode = async (entrypoints, appContext, config, hooks)=>{
+    const { mountId } = config.html;
+    const { enableAsyncEntry } = config.source;
+    const { runtimeConfigFile, internalDirectory, internalSrcAlias, metaName, srcDirectory, serverRoutes } = appContext;
+    await Promise.all(entrypoints.map(async (entrypoint)=>{
+        const { entryName, isAutoMount, entry, customEntry, customServerEntry, nestedRoutesEntry } = entrypoint;
+        const { plugins: runtimePlugins } = await hooks._internalRuntimePlugins.call({
+            entrypoint,
+            plugins: []
+        });
+        if (isAutoMount) {
+            const ssrMode = resolveSSRMode({
+                entry: entryName,
+                config,
+                nestedRoutesEntry
+            });
+            let indexCode = '';
+            indexCode = !ssrMode && config.server.rsc ? entryForCSRWithRSC({
+                metaName,
+                entryName,
+                mountId,
+                urlPath: serverRoutes.find((route)=>route.entryName === entryName)?.urlPath,
+                isNestedRouter: entrypoint.nestedRoutesEntry
+            }) : index({
+                srcDirectory,
+                internalSrcAlias,
+                metaName,
+                entry,
+                entryName,
+                customEntry,
+                mountId,
+                enableRsc: config.server.rsc,
+                isNestedRouter: !!entrypoint.nestedRoutesEntry
+            });
+            const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
+            await fs.outputFile(indexFile, indexCode, 'utf8');
+            if (enableAsyncEntry) {
+                const bootstrapFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_BOOTSTRAP_FILE_NAME}`);
+                await fs.outputFile(bootstrapFile, `import(/* webpackChunkName: "async-${entryName}" */ './${INDEX_FILE_NAME}');`, 'utf8');
+                const bootstrapServerFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_SERVER_BOOTSTRAP_FILE_NAME}`);
+                if (ssrMode) await fs.outputFile(bootstrapServerFile, `export const requestHandler = import('./${SERVER_ENTRY_POINT_FILE_NAME}').then((m) => m.requestHandler)`, 'utf8');
+            }
+            if (ssrMode) {
+                const indexServerCode = serverIndex({
+                    entry,
+                    entryName,
+                    internalSrcAlias,
+                    metaName,
+                    mode: ssrMode,
+                    customServerEntry,
+                    srcDirectory,
+                    enableRsc: config.server.rsc
+                });
+                const indexServerFile = path.resolve(internalDirectory, `./${entryName}/${SERVER_ENTRY_POINT_FILE_NAME}`);
+                await fs.outputFile(indexServerFile, indexServerCode, 'utf8');
+            } else if (config.server.rsc) {
+                const indexServerFile = path.resolve(internalDirectory, `./${entryName}/${SERVER_ENTRY_POINT_FILE_NAME}`);
+                const indexServerCode = external_template_server_mjs_entryForCSRWithRSC({
+                    entryName,
+                    metaName
+                });
+                await fs.outputFile(indexServerFile, indexServerCode, 'utf8');
+            }
+            const registerCode = register();
+            const registerFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_REGISTER_FILE_NAME}`);
+            await fs.outputFile(registerFile, registerCode, 'utf8');
+            const registerRuntimeCode = runtimeRegister({
+                entryName,
+                srcDirectory,
+                internalSrcAlias,
+                metaName,
+                runtimeConfigFile,
+                runtimePlugins
+            });
+            const registerRuntimeFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME}`);
+            await fs.outputFile(registerRuntimeFile, registerRuntimeCode, 'utf8');
+            let contextCode = '';
+            if (!config.server.rsc || entrypoint.nestedRoutesEntry) {
+                const route = serverRoutes.find((r)=>r.entryName === entryName);
+                const basename = route?.urlPath || '/';
+                contextCode = runtimeGlobalContext({
+                    entryName,
+                    srcDirectory,
+                    internalSrcAlias,
+                    metaName,
+                    entry,
+                    customEntry,
+                    basename
+                });
+            } else {
+                const AppProxyPath = path.join(internalDirectory, entryName, './AppProxy.jsx');
+                const appProxyCode = AppProxyForRSC({
+                    srcDirectory,
+                    internalSrcAlias,
+                    entry,
+                    customEntry
+                });
+                await fs.outputFile(AppProxyPath, appProxyCode);
+                contextCode = runtimeGlobalContextForRSCClient({
+                    metaName
+                });
+                const contextServerCode = runtimeGlobalContextForRSCServer({
+                    metaName
+                });
+                const contextFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}.server.js`);
+                await fs.outputFile(contextFile, contextServerCode, 'utf8');
+            }
+            const contextFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}.js`);
+            await fs.outputFile(contextFile, contextCode, 'utf8');
+        }
+    }));
+};
+export { generateCode };

package/dist/esm-node/cli/constants.mjs

@@ -0,0 +1,10 @@
+const APP_FILE_NAME = 'App';
+const ENTRY_POINT_FILE_NAME = 'index.jsx';
+const SERVER_ENTRY_POINT_FILE_NAME = 'index.server.jsx';
+const INDEX_FILE_NAME = 'index';
+const ENTRY_BOOTSTRAP_FILE_NAME = 'bootstrap.jsx';
+const ENTRY_SERVER_BOOTSTRAP_FILE_NAME = 'bootstrap.server.jsx';
+const ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME = 'runtime-register.js';
+const ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME = 'runtime-global-context';
+const ENTRY_POINT_REGISTER_FILE_NAME = 'register.js';
+export { APP_FILE_NAME, ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME, ENTRY_POINT_REGISTER_FILE_NAME, ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME, ENTRY_SERVER_BOOTSTRAP_FILE_NAME, INDEX_FILE_NAME, SERVER_ENTRY_POINT_FILE_NAME };

package/dist/esm-node/cli/entry.mjs

@@ -0,0 +1,6 @@
+import path from "path";
+import { JS_EXTENSIONS, findExists } from "@modern-js/utils";
+import { APP_FILE_NAME } from "./constants.mjs";
+const hasApp = (dir)=>findExists(JS_EXTENSIONS.map((ext)=>path.resolve(dir, `${APP_FILE_NAME}${ext}`)));
+const isRuntimeEntry = (dir)=>hasApp(dir);
+export { hasApp, isRuntimeEntry };

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

@@ -0,0 +1,89 @@
+import path_0 from "path";
+import { cleanRequireCache, isReact18 as utils_isReact18 } from "@modern-js/utils";
+import { documentPlugin } from "../document/cli/index.mjs";
+import { routerPlugin } from "../router/cli/index.mjs";
+import { builderPluginAlias } from "./alias.mjs";
+import { generateCode } from "./code.mjs";
+import { ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME } from "./constants.mjs";
+import { isRuntimeEntry } from "./entry.mjs";
+import { ssrPlugin } from "./ssr/index.mjs";
+const runtimePlugin = (params)=>({
+        name: '@modern-js/runtime',
+        post: [
+            '@modern-js/plugin-ssr',
+            '@modern-js/plugin-router',
+            '@modern-js/plugin-document',
+            '@modern-js/plugin-design-token'
+        ],
+        usePlugins: params?.plugins || [
+            ssrPlugin(),
+            routerPlugin(),
+            documentPlugin()
+        ],
+        setup: (api)=>{
+            api.checkEntryPoint(({ path, entry })=>({
+                    path,
+                    entry: entry || isRuntimeEntry(path)
+                }));
+            api.modifyEntrypoints(({ entrypoints })=>{
+                const { internalDirectory } = api.getAppContext();
+                const { source: { enableAsyncEntry } } = api.getNormalizedConfig();
+                const newEntryPoints = entrypoints.map((entrypoint)=>{
+                    if (entrypoint.isAutoMount) entrypoint.internalEntry = path_0.resolve(internalDirectory, `./${entrypoint.entryName}/${enableAsyncEntry ? ENTRY_BOOTSTRAP_FILE_NAME : ENTRY_POINT_FILE_NAME}`);
+                    return entrypoint;
+                });
+                return {
+                    entrypoints: newEntryPoints
+                };
+            });
+            api.generateEntryCode(async ({ entrypoints })=>{
+                const appContext = api.getAppContext();
+                const resolvedConfig = api.getNormalizedConfig();
+                const hooks = api.getHooks();
+                await generateCode(entrypoints, appContext, resolvedConfig, hooks);
+            });
+            api.onPrepare(()=>{
+                const { builder, entrypoints, internalDirectory, metaName } = api.getAppContext();
+                builder?.addPlugins([
+                    builderPluginAlias({
+                        entrypoints,
+                        internalDirectory,
+                        metaName
+                    })
+                ]);
+            });
+            api.config(()=>{
+                const { appDirectory, metaName } = api.getAppContext();
+                const isReact18 = utils_isReact18(appDirectory);
+                process.env.IS_REACT18 = isReact18.toString();
+                return {
+                    source: {
+                        globalVars: {
+                            'process.env.IS_REACT18': process.env.IS_REACT18
+                        }
+                    },
+                    tools: {
+                        bundlerChain: (chain)=>{
+                            chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(path_0.resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
+                        },
+                        rspack: (_config, { appendPlugins, rspack })=>{
+                            if (!isReact18) appendPlugins([
+                                new rspack.IgnorePlugin({
+                                    resourceRegExp: /^react-dom\/client$/,
+                                    contextRegExp: /@modern-js\/runtime/
+                                })
+                            ]);
+                        }
+                    }
+                };
+            });
+            api.onBeforeRestart(()=>{
+                cleanRequireCache([
+                    require.resolve('../router/cli'),
+                    require.resolve('./ssr')
+                ]);
+            });
+        }
+    });
+const cli = runtimePlugin;
+export { cli as default, documentPlugin, isRuntimeEntry, routerPlugin, runtimePlugin, ssrPlugin };

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;