@modern-js/runtime 2.63.7-alpha.0 → 2.64.0

package/dist/esm/router/runtime/plugin.node.js

@@ -15,7 +15,7 @@ import { JSX_SHELL_STREAM_END_MARK } from "../../common";
 import { RuntimeReactContext } from "../../core";
 import { getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
 import DeferredDataScripts from "./DeferredDataScripts.node";
-import { beforeCreateRoutes as beforeCreateRoutesHook, modifyRoutes as modifyRoutesHook } from "./hooks";
+import { modifyRoutes as modifyRoutesHook, onBeforeCreateRoutes as onBeforeCreateRoutesHook } from "./hooks";
 import { renderRoutes, urlJoin } from "./utils";
 function createRemixReuqest(request) {
   var method = "GET";
@@ -31,126 +31,127 @@ var routerPlugin = function() {
   var userConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   return {
     name: "@modern-js/plugin-router",
-    registerHook: {
+    registryHooks: {
       modifyRoutes: modifyRoutesHook,
-      beforeCreateRoutes: beforeCreateRoutesHook
+      onBeforeCreateRoutes: onBeforeCreateRoutesHook
     },
     setup: function(api) {
       var finalRouteConfig = {};
-      return {
-        beforeRender: function beforeRender(context, interrupt) {
-          return _async_to_generator(function() {
-            var _context_ssrContext, _context_ssrContext_onTiming, _context_ssrContext1, pluginConfig, _merge, _merge_basename, basename, routesConfig, createRoutes, _context_ssrContext2, request, ssrMode, nonce, _context_ssrContext_loaderFailureMode, loaderFailureMode, baseUrl, _basename, reporter, requestContext, runner, routes, query, remixRequest, end, routerContext, cost, errors, router;
-            return _ts_generator(this, function(_state) {
-              switch (_state.label) {
-                case 0:
-                  pluginConfig = api.useRuntimeConfigContext();
-                  _merge = merge(pluginConfig.router || {}, userConfig), _merge_basename = _merge.basename, basename = _merge_basename === void 0 ? "" : _merge_basename, routesConfig = _merge.routesConfig, createRoutes = _merge.createRoutes;
-                  finalRouteConfig = _object_spread({
-                    routes: getGlobalRoutes(),
-                    globalApp: getGlobalLayoutApp()
-                  }, routesConfig);
-                  if (!finalRouteConfig.routes && !createRoutes) {
-                    return [
-                      2
-                    ];
-                  }
-                  _context_ssrContext2 = context.ssrContext, request = _context_ssrContext2.request, ssrMode = _context_ssrContext2.mode, nonce = _context_ssrContext2.nonce, _context_ssrContext_loaderFailureMode = _context_ssrContext2.loaderFailureMode, loaderFailureMode = _context_ssrContext_loaderFailureMode === void 0 ? "errorBoundary" : _context_ssrContext_loaderFailureMode;
-                  baseUrl = request.baseUrl;
-                  _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
-                  reporter = context.ssrContext.reporter;
-                  requestContext = createRequestContext((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.loaderContext);
-                  requestContext.set(reporterCtx, reporter);
-                  runner = api.useHookRunners();
+      api.onBeforeRender(function() {
+        var _ref = _async_to_generator(function(context, interrupt) {
+          var _context_ssrContext, _context_ssrContext_onTiming, _context_ssrContext1, pluginConfig, _merge, _merge_basename, basename, routesConfig, createRoutes, _context_ssrContext2, request, ssrMode, nonce, _context_ssrContext_loaderFailureMode, loaderFailureMode, baseUrl, _basename, reporter, requestContext, hooks, routes, query, remixRequest, end, routerContext, cost, errors, router;
+          return _ts_generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                pluginConfig = api.getRuntimeConfig();
+                _merge = merge(pluginConfig.router || {}, userConfig), _merge_basename = _merge.basename, basename = _merge_basename === void 0 ? "" : _merge_basename, routesConfig = _merge.routesConfig, createRoutes = _merge.createRoutes;
+                finalRouteConfig = _object_spread({
+                  routes: getGlobalRoutes(),
+                  globalApp: getGlobalLayoutApp()
+                }, routesConfig);
+                if (!finalRouteConfig.routes && !createRoutes) {
                   return [
-                    4,
-                    runner.beforeCreateRoutes(context)
-                  ];
-                case 1:
-                  _state.sent();
-                  routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-                    routesConfig: finalRouteConfig,
-                    ssrMode,
-                    props: {
-                      nonce
-                    },
-                    reporter
-                  }));
-                  routes = runner.modifyRoutes(routes);
-                  query = createStaticHandler(routes, {
-                    basename: _basename
-                  }).query;
-                  remixRequest = createRemixReuqest(context.ssrContext.request.raw);
-                  end = time();
-                  return [
-                    4,
-                    query(remixRequest, {
-                      requestContext
-                    })
+                    2
                   ];
-                case 2:
-                  routerContext = _state.sent();
-                  cost = end();
-                  (_context_ssrContext1 = context.ssrContext) === null || _context_ssrContext1 === void 0 ? void 0 : (_context_ssrContext_onTiming = _context_ssrContext1.onTiming) === null || _context_ssrContext_onTiming === void 0 ? void 0 : _context_ssrContext_onTiming.call(_context_ssrContext1, LOADER_REPORTER_NAME, cost);
-                  if (_instanceof(routerContext, Response)) {
-                    return [
-                      2,
-                      interrupt(routerContext)
-                    ];
-                  }
-                  errors = Object.values(routerContext.errors || {});
-                  if (
-                    // TODO: if loaderFailureMode is not 'errroBoundary', error log will not be printed.
-                    errors.length > 0 && loaderFailureMode === "clientRender"
-                  ) {
-                    routerContext.statusCode = 200;
-                    throw errors[0];
-                  }
-                  router = createStaticRouter(routes, routerContext);
-                  context.routerContext = routerContext;
-                  context.remixRouter = router;
-                  context.routes = routes;
+                }
+                _context_ssrContext2 = context.ssrContext, request = _context_ssrContext2.request, ssrMode = _context_ssrContext2.mode, nonce = _context_ssrContext2.nonce, _context_ssrContext_loaderFailureMode = _context_ssrContext2.loaderFailureMode, loaderFailureMode = _context_ssrContext_loaderFailureMode === void 0 ? "errorBoundary" : _context_ssrContext_loaderFailureMode;
+                baseUrl = request.baseUrl;
+                _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
+                reporter = context.ssrContext.reporter;
+                requestContext = createRequestContext((_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.loaderContext);
+                requestContext.set(reporterCtx, reporter);
+                hooks = api.getHooks();
+                return [
+                  4,
+                  hooks.onBeforeCreateRoutes.call(context)
+                ];
+              case 1:
+                _state.sent();
+                routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                  routesConfig: finalRouteConfig,
+                  ssrMode,
+                  props: {
+                    nonce
+                  },
+                  reporter
+                }));
+                routes = hooks.modifyRoutes.call(routes);
+                query = createStaticHandler(routes, {
+                  basename: _basename
+                }).query;
+                remixRequest = createRemixReuqest(context.ssrContext.request.raw);
+                end = time();
+                return [
+                  4,
+                  query(remixRequest, {
+                    requestContext
+                  })
+                ];
+              case 2:
+                routerContext = _state.sent();
+                cost = end();
+                (_context_ssrContext1 = context.ssrContext) === null || _context_ssrContext1 === void 0 ? void 0 : (_context_ssrContext_onTiming = _context_ssrContext1.onTiming) === null || _context_ssrContext_onTiming === void 0 ? void 0 : _context_ssrContext_onTiming.call(_context_ssrContext1, LOADER_REPORTER_NAME, cost);
+                if (_instanceof(routerContext, Response)) {
                   return [
-                    2
+                    2,
+                    interrupt(routerContext)
                   ];
-              }
+                }
+                errors = Object.values(routerContext.errors || {});
+                if (
+                  // TODO: if loaderFailureMode is not 'errroBoundary', error log will not be printed.
+                  errors.length > 0 && loaderFailureMode === "clientRender"
+                ) {
+                  routerContext.statusCode = 200;
+                  throw errors[0];
+                }
+                router = createStaticRouter(routes, routerContext);
+                context.routerContext = routerContext;
+                context.remixRouter = router;
+                context.routes = routes;
+                return [
+                  2
+                ];
+            }
+          });
+        });
+        return function(context, interrupt) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+      api.wrapRoot(function(App) {
+        if (!finalRouteConfig) {
+          return App;
+        }
+        var getRouteApp = function() {
+          return function() {
+            var context = useContext(RuntimeReactContext);
+            var remixRouter = context.remixRouter, routerContext = context.routerContext, ssrContext = context.ssrContext;
+            var nonce = ssrContext.nonce, mode = ssrContext.mode, useJsonScript = ssrContext.useJsonScript;
+            var routerWrapper = /* @__PURE__ */ _jsxs(_Fragment, {
+              children: [
+                /* @__PURE__ */ _jsx(StaticRouterProvider, {
+                  router: remixRouter,
+                  context: routerContext,
+                  hydrate: false
+                }),
+                mode === "stream" && // ROUTER_DATA will inject in `packages/runtime/plugin-runtime/src/core/server/string/ssrData.ts` in string ssr
+                // So we can inject it only when streaming ssr
+                /* @__PURE__ */ _jsx(DeferredDataScripts, {
+                  nonce,
+                  context: routerContext,
+                  useJsonScript
+                }),
+                mode === "stream" && JSX_SHELL_STREAM_END_MARK
+              ]
             });
-          })();
-        },
-        wrapRoot: function(App) {
-          if (!finalRouteConfig) {
-            return App;
-          }
-          var getRouteApp = function() {
-            return function() {
-              var context = useContext(RuntimeReactContext);
-              var remixRouter = context.remixRouter, routerContext = context.routerContext, ssrContext = context.ssrContext;
-              var nonce = ssrContext.nonce, mode = ssrContext.mode, useJsonScript = ssrContext.useJsonScript;
-              var routerWrapper = /* @__PURE__ */ _jsxs(_Fragment, {
-                children: [
-                  /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                    router: remixRouter,
-                    context: routerContext,
-                    hydrate: false
-                  }),
-                  mode === "stream" && // ROUTER_DATA will inject in `packages/runtime/plugin-runtime/src/core/server/string/ssrData.ts` in string ssr
-                  // So we can inject it only when streaming ssr
-                  /* @__PURE__ */ _jsx(DeferredDataScripts, {
-                    nonce,
-                    context: routerContext,
-                    useJsonScript
-                  }),
-                  mode === "stream" && JSX_SHELL_STREAM_END_MARK
-                ]
-              });
-              return App ? /* @__PURE__ */ _jsx(App, {
-                children: routerWrapper
-              }) : routerWrapper;
-            };
+            return App ? /* @__PURE__ */ _jsx(App, {
+              children: routerWrapper
+            }) : routerWrapper;
           };
-          return getRouteApp();
-        }
-      };
+        };
+        return getRouteApp();
+      });
     }
   };
 };

package/dist/esm-node/core/browser/hydrate.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
-import { normalizePathname } from "@modern-js/runtime-utils/url";
 import { RenderLevel } from "../constants";
 import { wrapRuntimeContextProvider } from "../react/wrapper";
 import { WithCallback } from "./withCallback";
 const isReact18 = () => process.env.IS_REACT18 === "true";
 function hydrateRoot(App, context, ModernRender, ModernHydrate) {
-  var _ssrContext_request, _window__SSR_DATA, _window, _window__SSR_DATA1, _window1;
+  var _window__SSR_DATA, _window, _window__SSR_DATA1, _window1;
   const hydrateContext = {
     ...context,
     get routes() {
@@ -14,14 +13,6 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     },
     _hydration: true
   };
-  const { ssrContext } = hydrateContext;
-  const currentPathname = normalizePathname(window.location.pathname);
-  const initialPathname = (ssrContext === null || ssrContext === void 0 ? void 0 : (_ssrContext_request = ssrContext.request) === null || _ssrContext_request === void 0 ? void 0 : _ssrContext_request.pathname) && normalizePathname(ssrContext.request.pathname);
-  if (initialPathname && initialPathname !== currentPathname && context.router) {
-    const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
-    console.error(errorMsg);
-    window.location.reload();
-  }
   const callback = () => {
     delete hydrateContext._hydration;
   };

package/dist/esm-node/core/browser/index.js

@@ -1,8 +1,7 @@
 import cookieTool from "cookie";
-import { getGlobalAppInit } from "../context";
+import { getGlobalAppInit, getGlobalInternalRuntimeContext } from "../context";
 import { getInitialContext } from "../context/runtime";
 import { createLoaderManager } from "../loader/loaderManager";
-import { getGlobalRunner } from "../plugin/runner";
 import { wrapRuntimeContextProvider } from "../react/wrapper";
 import { hydrateRoot } from "./hydrate";
 const IS_REACT18 = process.env.IS_REACT18 === "true";
@@ -48,10 +47,13 @@ function isClientArgs(id) {
   return typeof id === "undefined" || typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
 }
 async function render(App, id) {
-  const runner = getGlobalRunner();
-  const context = getInitialContext(runner);
+  const context = getInitialContext();
   const runBeforeRender = async (context2) => {
-    await runner.beforeRender(context2);
+    const internalRuntimeContext = getGlobalInternalRuntimeContext();
+    const api = internalRuntimeContext.pluginAPI;
+    api.updateRuntimeContext(context2);
+    const hooks = internalRuntimeContext.hooks;
+    await hooks.onBeforeRender.call(context2);
     const init = getGlobalAppInit();
     return init === null || init === void 0 ? void 0 : init(context2);
   };

package/dist/esm-node/core/compat/hooks.js

@@ -0,0 +1,54 @@
+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 (typeof fn === "function") {
+      const newAPI = transformHookRunner(key);
+      if (api[newAPI]) {
+        if (key === "beforeRender") {
+          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) => {
+      return hooks.onBeforeRender.call(context);
+    },
+    wrapRoot: (App) => {
+      return hooks.wrapRoot.call(App);
+    },
+    pickContext: (context) => {
+      return hooks.pickContext.call(context);
+    },
+    modifyRuntimeConfig: (config) => {
+      return hooks.modifyRuntimeConfig.call(config);
+    }
+  };
+}
+export {
+  getHookRunners,
+  handleSetupResult,
+  transformHookRunner
+};

package/dist/esm-node/core/compat/index.js

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

package/dist/esm-node/core/compatible.js

@@ -2,26 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ROUTE_MANIFEST } from "@modern-js/utils/universal/constants";
 import React, { useContext, useMemo } from "react";
 import { hydrateRoot as ModernHydrateRoot } from "./browser/hydrate";
-import { getGlobalAppInit } from "./context";
+import { getGlobalAppInit, getGlobalInternalRuntimeContext } from "./context";
 import { RuntimeReactContext } from "./context/runtime";
 import { createLoaderManager } from "./loader/loaderManager";
 import { registerPlugin } from "./plugin";
-import { getGlobalRunner } from "./plugin/runner";
 import { wrapRuntimeContextProvider } from "./react/wrapper";
 const IS_REACT18 = process.env.IS_REACT18 === "true";
 function isClientArgs(id) {
   return typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
 }
-const getInitialContext = (runner) => ({
+const getInitialContext = () => ({
   loaderManager: createLoaderManager({}),
-  runner,
   isBrowser: true,
   routeManifest: typeof window !== "undefined" && window[ROUTE_MANIFEST]
 });
-const createApp = ({ plugins, runtime, props: globalProps }) => {
-  const runner = registerPlugin(plugins, {
+const createApp = ({ plugins, props: globalProps }) => {
+  const context = registerPlugin(plugins, {
     plugins: []
-  }, runtime);
+  });
+  const hooks = context.hooks;
   return (App) => {
     const WrapperComponent = (props) => {
       return /* @__PURE__ */ React.createElement(App || React.Fragment, App ? {
@@ -31,7 +30,7 @@ const createApp = ({ plugins, runtime, props: globalProps }) => {
         ...props
       }) : child));
     };
-    const WrapperApp = runner.wrapRoot(WrapperComponent);
+    const WrapperApp = hooks.wrapRoot.call(WrapperComponent);
     const WrapComponent = (props) => {
       const mergedProps = {
         ...props,
@@ -46,10 +45,13 @@ const createApp = ({ plugins, runtime, props: globalProps }) => {
 };
 const bootstrap = async (BootApp, id, root, ReactDOM) => {
   const App = BootApp;
-  const runner = getGlobalRunner();
-  const context = getInitialContext(runner);
+  const internalRuntimeContext = getGlobalInternalRuntimeContext();
+  const api = internalRuntimeContext.pluginAPI;
+  const hooks = internalRuntimeContext.hooks;
+  const context = getInitialContext();
+  api.updateRuntimeContext(context);
   const runBeforeRender = async (context2) => {
-    await runner.beforeRender(context2);
+    await hooks.onBeforeRender.call(context2);
     const init = getGlobalAppInit();
     return init === null || init === void 0 ? void 0 : init(context2);
   };
@@ -145,18 +147,16 @@ const useRuntimeContext = () => {
     getInitData: () => {
       return Object.freeze(context.initialData);
     }
-  } : {
-    getInitData: () => {
-      return Object.freeze(context.initialData);
-    }
-  };
+  } : {};
   const pickedContext = {
     ...context,
     context: tSSRContext,
     request: (_context_ssrContext = context.ssrContext) === null || _context_ssrContext === void 0 ? void 0 : _context_ssrContext.request,
     response: (_context_ssrContext1 = context.ssrContext) === null || _context_ssrContext1 === void 0 ? void 0 : _context_ssrContext1.response
   };
-  const memoizedContext = useMemo(() => context.runner.pickContext(pickedContext), [
+  const internalRuntimeContext = getGlobalInternalRuntimeContext();
+  const hooks = internalRuntimeContext.hooks;
+  const memoizedContext = useMemo(() => hooks.pickContext.call(pickedContext), [
     context
   ]);
   return memoizedContext;

package/dist/esm-node/core/context/index.js

@@ -7,6 +7,12 @@ function setGlobalContext(context) {
   globalContext.appConfig = typeof context.appConfig === "function" ? context.appConfig() : context.appConfig;
   globalContext.layoutApp = context.layoutApp;
 }
+function setGlobalInternalRuntimeContext(context) {
+  globalContext.internalRuntimeContext = context;
+}
+function getGlobalInternalRuntimeContext() {
+  return globalContext.internalRuntimeContext;
+}
 function getGlobalApp() {
   return globalContext.App;
 }
@@ -29,8 +35,10 @@ export {
   getGlobalApp,
   getGlobalAppConfig,
   getGlobalAppInit,
+  getGlobalInternalRuntimeContext,
   getGlobalLayoutApp,
   getGlobalRoutes,
   getInitialContext,
-  setGlobalContext
+  setGlobalContext,
+  setGlobalInternalRuntimeContext
 };

package/dist/esm-node/core/context/runtime.js

@@ -3,9 +3,8 @@ import { createContext } from "react";
 import { createLoaderManager } from "../loader/loaderManager";
 const RuntimeReactContext = createContext({});
 const ServerRouterContext = createContext({});
-const getInitialContext = (runner, isBrowser = true, routeManifest) => ({
+const getInitialContext = (isBrowser = true, routeManifest) => ({
   loaderManager: createLoaderManager({}),
-  runner,
   isBrowser,
   routeManifest: routeManifest || typeof window !== "undefined" && window[ROUTE_MANIFEST]
 });

package/dist/esm-node/core/index.js

@@ -1,4 +1,3 @@
-import { runtime } from "./plugin";
 import { defineConfig, getConfig, defineRuntimeConfig } from "./config";
 export * from "./compatible";
 import { RuntimeReactContext, ServerRouterContext } from "./context/runtime";
@@ -9,6 +8,5 @@ export {
   ServerRouterContext,
   defineConfig,
   defineRuntimeConfig,
-  getConfig,
-  runtime
+  getConfig
 };

package/dist/esm-node/core/plugin/base.js

@@ -1,24 +0,0 @@
-import { createAsyncInterruptWorkflow, createContext, createManager, createSyncParallelWorkflow, createWaterfall } from "@modern-js/plugin";
-const RuntimeConfigContext = createContext({});
-const useRuntimeConfigContext = () => RuntimeConfigContext.use().value;
-const wrapRoot = createWaterfall();
-const beforeRender = createAsyncInterruptWorkflow();
-const pickContext = createWaterfall();
-const modifyRuntimeConfig = createSyncParallelWorkflow();
-const runtimeHooks = {
-  beforeRender,
-  wrapRoot,
-  pickContext,
-  modifyRuntimeConfig
-};
-const runtimePluginAPI = {
-  useRuntimeConfigContext
-};
-const createRuntime = () => createManager(runtimeHooks, runtimePluginAPI);
-const runtime = createRuntime();
-export {
-  RuntimeConfigContext,
-  createRuntime,
-  runtime,
-  useRuntimeConfigContext
-};

package/dist/esm-node/core/plugin/index.js

@@ -1,19 +1,21 @@
+import { runtime } from "@modern-js/plugin-v2/runtime";
 import { merge } from "@modern-js/runtime-utils/merge";
-import { RuntimeConfigContext, runtime } from "./base";
-import { getGlobalRunner, setGlobalRunner } from "./runner";
-export * from "./base";
-function setupConfigContext() {
-  const runner = getGlobalRunner();
-  const configs = runner.modifyRuntimeConfig();
-  RuntimeConfigContext.set(merge({}, ...configs));
-}
-function registerPlugin(internalPlugins, runtimeConfig, customRuntime) {
+import { compatPlugin } from "../compat";
+import { handleSetupResult } from "../compat/hooks";
+import { setGlobalInternalRuntimeContext } from "../context";
+function registerPlugin(internalPlugins, runtimeConfig) {
   const { plugins = [] } = runtimeConfig || {};
-  (customRuntime || runtime).usePlugin(...internalPlugins, ...plugins);
-  const runner = (customRuntime || runtime).init();
-  setGlobalRunner(runner);
-  setupConfigContext();
-  return runner;
+  const { runtimeContext } = runtime.run({
+    plugins: [
+      compatPlugin(),
+      ...internalPlugins,
+      ...plugins
+    ],
+    config: runtimeConfig || {},
+    handleSetupResult
+  });
+  setGlobalInternalRuntimeContext(runtimeContext);
+  return runtimeContext;
 }
 function mergeConfig(config, ...otherConfig) {
   return merge({}, config, ...otherConfig);

package/dist/esm-node/core/react/index.js

@@ -1,16 +1,16 @@
 import { parsedJSONFromElement } from "@modern-js/runtime-utils/parsed";
 import { isBrowser } from "../../common";
 import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../constants";
-import { getGlobalApp } from "../context";
-import { getGlobalRunner } from "../plugin/runner";
+import { getGlobalApp, getGlobalInternalRuntimeContext } from "../context";
 function createRoot(UserApp) {
   const App = UserApp || getGlobalApp();
   if (isBrowser()) {
     window._SSR_DATA = window._SSR_DATA || parsedJSONFromElement(SSR_DATA_JSON_ID);
     window._ROUTER_DATA = window._ROUTER_DATA || parsedJSONFromElement(ROUTER_DATA_JSON_ID);
   }
-  const runner = getGlobalRunner();
-  const WrapperApp = runner.wrapRoot(App);
+  const internalRuntimeContext = getGlobalInternalRuntimeContext();
+  const hooks = internalRuntimeContext.hooks;
+  const WrapperApp = hooks.wrapRoot.call(App);
   return WrapperApp;
 }
 export {

package/dist/esm-node/core/server/requestHandler.js

@@ -1,8 +1,7 @@
 import { getPathname, parseCookie, parseHeaders, parseQuery } from "@modern-js/runtime-utils/universal/request";
-import { getGlobalAppInit } from "../context";
+import { getGlobalAppInit, getGlobalInternalRuntimeContext } from "../context";
 import { getInitialContext } from "../context/runtime";
 import { createLoaderManager } from "../loader/loaderManager";
-import { getGlobalRunner } from "../plugin/runner";
 import { createRoot } from "../react";
 import { CHUNK_CSS_PLACEHOLDER } from "./constants";
 import { getSSRConfigByEntry, getSSRMode } from "./utils";
@@ -66,11 +65,12 @@ const createRequestHandler = async (handleRequest) => {
   const requestHandler = async (request, options) => {
     var _context_routerContext, _context_routerContext1;
     const Root = createRoot();
-    const runner = getGlobalRunner();
+    const internalRuntimeContext = getGlobalInternalRuntimeContext();
+    const hooks = internalRuntimeContext.hooks;
     const { routeManifest } = options.resource;
-    const context = getInitialContext(runner, false, routeManifest);
+    const context = getInitialContext(false, routeManifest);
     const runBeforeRender = async (context2) => {
-      const result = await runner.beforeRender(context2);
+      const result = await hooks.onBeforeRender.call(context2);
       if (typeof Response !== "undefined" && result instanceof Response) {
         return result;
       }

package/dist/esm-node/core/server/stream/createReadableStream.js

@@ -1,4 +1,4 @@
-import { Transform } from "stream";
+import { PassThrough, Transform } from "stream";
 import { createReadableStreamFromReadable } from "@modern-js/runtime-utils/node";
 import checkIsBot from "isbot";
 import { ServerStyleSheet } from "styled-components";
@@ -16,9 +16,9 @@ const createReadableStreamFromElement = async (request, rootElement, options) =>
   const onReady = isbot || forceStream2String ? "onAllReady" : "onShellReady";
   const sheet = new ServerStyleSheet();
   const chunkVec = [];
-  const root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
+  const root = sheet.collectStyles(rootElement);
   return new Promise((resolve) => {
-    const { pipe } = renderToPipeableStream(root, {
+    const { pipe: reactStreamingPipe } = renderToPipeableStream(root, {
       nonce: config.nonce,
       [onReady]() {
         var _options_onReady;
@@ -59,7 +59,10 @@ const createReadableStreamFromElement = async (request, rootElement, options) =>
           });
           const stream = createReadableStreamFromReadable(body);
           resolve(stream);
-          pipe(body);
+          const passThrough = new PassThrough();
+          const styledStream = sheet.interleaveWithNodeStream(passThrough);
+          reactStreamingPipe(passThrough);
+          styledStream.pipe(body);
         });
       },
       onShellError(error) {