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

package/dist/esm/core/compatible.js

@@ -7,36 +7,35 @@ 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";
 var IS_REACT18 = process.env.IS_REACT18 === "true";
 function isClientArgs(id) {
   return typeof id === "string" || typeof HTMLElement !== "undefined" && _instanceof(id, HTMLElement);
 }
-var getInitialContext = function(runner) {
+var getInitialContext = function() {
   return {
     loaderManager: createLoaderManager({}),
-    runner,
     isBrowser: true,
     routeManifest: typeof window !== "undefined" && window[ROUTE_MANIFEST]
   };
 };
 var createApp = function(param) {
-  var plugins = param.plugins, runtime = param.runtime, globalProps = param.props;
-  var runner = registerPlugin(plugins, {
+  var plugins = param.plugins, globalProps = param.props;
+  var context = registerPlugin(plugins, {
     plugins: []
-  }, runtime);
+  });
+  var hooks = context.hooks;
   return function(App) {
     var WrapperComponent = function(props) {
       return /* @__PURE__ */ React.createElement(App || React.Fragment, App ? _object_spread({}, props) : null, App ? props.children : React.Children.map(props.children, function(child) {
         return /* @__PURE__ */ React.isValidElement(child) ? /* @__PURE__ */ React.cloneElement(child, _object_spread({}, child.props, props)) : child;
       }));
     };
-    var WrapperApp = runner.wrapRoot(WrapperComponent);
+    var WrapperApp = hooks.wrapRoot.call(WrapperComponent);
     var WrapComponent = function(props) {
       var mergedProps = _object_spread({}, props, globalProps);
       return /* @__PURE__ */ _jsx(WrapperApp, _object_spread({}, mergedProps));
@@ -46,13 +45,16 @@ var createApp = function(param) {
 };
 var bootstrap = function() {
   var _ref = _async_to_generator(function(BootApp, id, root, ReactDOM) {
-    var App, runner, context, runBeforeRender, isBrowser, _ssrData_data, _ssrData_data1, ssrData, loadersData, initialLoadersState, initialData, rootElement, ModernRender, ModernHydrate;
+    var App, internalRuntimeContext, api, hooks, context, runBeforeRender, isBrowser, _ssrData_data, _ssrData_data1, ssrData, loadersData, initialLoadersState, initialData, rootElement, ModernRender, ModernHydrate;
     return _ts_generator(this, function(_state) {
       switch (_state.label) {
         case 0:
           App = BootApp;
-          runner = getGlobalRunner();
-          context = getInitialContext(runner);
+          internalRuntimeContext = getGlobalInternalRuntimeContext();
+          api = internalRuntimeContext.pluginAPI;
+          hooks = internalRuntimeContext.hooks;
+          context = getInitialContext();
+          api.updateRuntimeContext(context);
           runBeforeRender = function() {
             var _ref2 = _async_to_generator(function(context2) {
               var init;
@@ -61,7 +63,7 @@ var bootstrap = function() {
                   case 0:
                     return [
                       4,
-                      runner.beforeRender(context2)
+                      hooks.onBeforeRender.call(context2)
                     ];
                   case 1:
                     _state2.sent();
@@ -202,18 +204,16 @@ var useRuntimeContext = function() {
     getInitData: function() {
       return Object.freeze(context.initialData);
     }
-  } : {
-    getInitData: function() {
-      return Object.freeze(context.initialData);
-    }
-  };
+  } : {};
   var pickedContext = _object_spread_props(_object_spread({}, 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
   });
+  var internalRuntimeContext = getGlobalInternalRuntimeContext();
+  var hooks = internalRuntimeContext.hooks;
   var memoizedContext = useMemo(function() {
-    return context.runner.pickContext(pickedContext);
+    return hooks.pickContext.call(pickedContext);
   }, [
     context
   ]);

package/dist/esm/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/core/context/runtime.js

@@ -3,11 +3,10 @@ import { createContext } from "react";
 import { createLoaderManager } from "../loader/loaderManager";
 var RuntimeReactContext = createContext({});
 var ServerRouterContext = createContext({});
-var getInitialContext = function(runner) {
-  var isBrowser = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true, routeManifest = arguments.length > 2 ? arguments[2] : void 0;
+var getInitialContext = function() {
+  var isBrowser = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, routeManifest = arguments.length > 1 ? arguments[1] : void 0;
   return {
     loaderManager: createLoaderManager({}),
-    runner,
     isBrowser,
     routeManifest: routeManifest || typeof window !== "undefined" && window[ROUTE_MANIFEST]
   };

package/dist/esm/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/core/plugin/base.js

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

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

@@ -1,23 +1,20 @@
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+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() {
-  var runner = getGlobalRunner();
-  var configs = runner.modifyRuntimeConfig();
-  RuntimeConfigContext.set(merge.apply(void 0, [
-    {}
-  ].concat(_to_consumable_array(configs))));
-}
-function registerPlugin(internalPlugins, runtimeConfig, customRuntime) {
-  var _instance;
+import { compatPlugin } from "../compat";
+import { handleSetupResult } from "../compat/hooks";
+import { setGlobalInternalRuntimeContext } from "../context";
+function registerPlugin(internalPlugins, runtimeConfig) {
   var _ref = runtimeConfig || {}, _ref_plugins = _ref.plugins, plugins = _ref_plugins === void 0 ? [] : _ref_plugins;
-  (_instance = customRuntime || runtime).usePlugin.apply(_instance, _to_consumable_array(internalPlugins).concat(_to_consumable_array(plugins)));
-  var runner = (customRuntime || runtime).init();
-  setGlobalRunner(runner);
-  setupConfigContext();
-  return runner;
+  var runtimeContext = runtime.run({
+    plugins: [
+      compatPlugin()
+    ].concat(_to_consumable_array(internalPlugins), _to_consumable_array(plugins)),
+    config: runtimeConfig || {},
+    handleSetupResult
+  }).runtimeContext;
+  setGlobalInternalRuntimeContext(runtimeContext);
+  return runtimeContext;
 }
 function mergeConfig(config) {
   for (var _len = arguments.length, otherConfig = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

package/dist/esm/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) {
   var 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);
   }
-  var runner = getGlobalRunner();
-  var WrapperApp = runner.wrapRoot(App);
+  var internalRuntimeContext = getGlobalInternalRuntimeContext();
+  var hooks = internalRuntimeContext.hooks;
+  var WrapperApp = hooks.wrapRoot.call(App);
   return WrapperApp;
 }
 export {

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

@@ -6,10 +6,9 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _type_of } from "@swc/helpers/_/_type_of";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 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";
@@ -75,14 +74,15 @@ var createRequestHandler = function() {
     return _ts_generator(this, function(_state) {
       requestHandler = function() {
         var _ref2 = _async_to_generator(function(request, options) {
-          var _context_routerContext, _context_routerContext1, Root, runner, routeManifest, context, runBeforeRender, responseProxy, ssrContext, getRedirectResponse, initialData, _context_routerContext2, _context_ssrContext, redirectResponse, htmlTemplate, response;
+          var _context_routerContext, _context_routerContext1, Root, internalRuntimeContext, hooks, routeManifest, context, runBeforeRender, responseProxy, ssrContext, getRedirectResponse, initialData, _context_routerContext2, _context_ssrContext, redirectResponse, htmlTemplate, response;
           return _ts_generator(this, function(_state2) {
             switch (_state2.label) {
               case 0:
                 Root = createRoot();
-                runner = getGlobalRunner();
+                internalRuntimeContext = getGlobalInternalRuntimeContext();
+                hooks = internalRuntimeContext.hooks;
                 routeManifest = options.resource.routeManifest;
-                context = getInitialContext(runner, false, routeManifest);
+                context = getInitialContext(false, routeManifest);
                 runBeforeRender = function() {
                   var _ref3 = _async_to_generator(function(context2) {
                     var result, init;
@@ -91,7 +91,7 @@ var createRequestHandler = function() {
                         case 0:
                           return [
                             4,
-                            runner.beforeRender(context2)
+                            hooks.onBeforeRender.call(context2)
                           ];
                         case 1:
                           result = _state3.sent();

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

@@ -2,7 +2,7 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-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";
@@ -30,12 +30,12 @@ var createReadableStreamFromElement = function() {
           onReady = isbot || forceStream2String ? "onAllReady" : "onShellReady";
           sheet = new ServerStyleSheet();
           chunkVec = [];
-          root = forceStream2String ? sheet.collectStyles(rootElement) : rootElement;
+          root = sheet.collectStyles(rootElement);
           return [
             2,
             new Promise(function(resolve) {
               var _obj;
-              var pipe = renderToPipeableStream(root, (_obj = {
+              var _renderToPipeableStream = renderToPipeableStream(root, (_obj = {
                 nonce: config.nonce
               }, _define_property(_obj, onReady, function() {
                 var _options_onReady;
@@ -77,7 +77,10 @@ var createReadableStreamFromElement = function() {
                   });
                   var stream = createReadableStreamFromReadable(body);
                   resolve(stream);
-                  pipe(body);
+                  var passThrough = new PassThrough();
+                  var styledStream = sheet.interleaveWithNodeStream(passThrough);
+                  reactStreamingPipe(passThrough);
+                  styledStream.pipe(body);
                 });
               }), _define_property(_obj, "onShellError", function onShellError(error) {
                 renderLevel = RenderLevel.CLIENT_RENDER;
@@ -100,7 +103,7 @@ var createReadableStreamFromElement = function() {
                 var _options_onError;
                 renderLevel = RenderLevel.CLIENT_RENDER;
                 options === null || options === void 0 ? void 0 : (_options_onError = options.onError) === null || _options_onError === void 0 ? void 0 : _options_onError.call(options, error);
-              }), _obj)).pipe;
+              }), _obj)), reactStreamingPipe = _renderToPipeableStream.pipe;
             })
           ];
       }

package/dist/esm/router/runtime/hooks.js

@@ -1,7 +1,7 @@
-import { createAsyncInterruptWorkflow, createWaterfall } from "@modern-js/plugin";
-var modifyRoutes = createWaterfall();
-var beforeCreateRoutes = createAsyncInterruptWorkflow();
+import { createSyncHook } from "@modern-js/plugin-v2";
+var modifyRoutes = createSyncHook();
+var onBeforeCreateRoutes = createSyncHook();
 export {
-  beforeCreateRoutes,
-  modifyRoutes
+  modifyRoutes,
+  onBeforeCreateRoutes
 };

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

@@ -4,10 +4,11 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { merge } from "@modern-js/runtime-utils/merge";
 import { RouterProvider, createBrowserRouter, createHashRouter, createRoutesFromElements, useHref, useLocation, useMatches } from "@modern-js/runtime-utils/router";
+import { normalizePathname } from "@modern-js/runtime-utils/url";
 import { useContext, useMemo } from "react";
 import { RuntimeReactContext } from "../../core";
 import { getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
-import { modifyRoutes as modifyRoutesHook } from "./hooks";
+import { modifyRoutes as modifyRoutesHook, onBeforeCreateRoutes as onBeforeCreateRoutesHook } from "./hooks";
 import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
 var finalRouteConfig = {
   routes: []
@@ -26,117 +27,127 @@ var routerPlugin = function() {
   var userConfig = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   return {
     name: "@modern-js/plugin-router",
-    registerHook: {
-      modifyRoutes: modifyRoutesHook
+    registryHooks: {
+      modifyRoutes: modifyRoutesHook,
+      onBeforeCreateRoutes: onBeforeCreateRoutesHook
     },
     setup: function(api) {
       var routes = [];
-      return {
-        beforeRender: function beforeRender(context) {
-          context.router = {
-            useMatches,
-            useLocation,
-            useHref
-          };
-          Object.defineProperty(context, "routes", {
-            get: function get() {
-              return routes;
-            }
-          });
-        },
-        wrapRoot: function(App) {
-          var pluginConfig = api.useRuntimeConfigContext();
-          var _merge = merge(pluginConfig.router || {}, userConfig), _merge_serverBase = _merge.serverBase, serverBase = _merge_serverBase === void 0 ? [] : _merge_serverBase, _merge_supportHtml5History = _merge.supportHtml5History, supportHtml5History = _merge_supportHtml5History === void 0 ? true : _merge_supportHtml5History, _merge_basename = _merge.basename, basename = _merge_basename === void 0 ? "" : _merge_basename, routesConfig = _merge.routesConfig, createRoutes = _merge.createRoutes, future = _merge.future;
-          var select = function(pathname) {
-            return serverBase.find(function(baseUrl) {
-              return pathname.search(baseUrl) === 0;
-            }) || "/";
-          };
-          finalRouteConfig = _object_spread({
-            routes: getGlobalRoutes(),
-            globalApp: getGlobalLayoutApp()
-          }, routesConfig);
-          if (!finalRouteConfig.routes && !createRoutes) {
-            return App;
+      api.onBeforeRender(function(context) {
+        if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
+          var _ssrContext_request;
+          var ssrContext = context.ssrContext;
+          var currentPathname = normalizePathname(window.location.pathname);
+          var 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) {
+            var errorMsg = "The initial URL ".concat(initialPathname, " and the URL ").concat(currentPathname, " to be hydrated do not match, reload.");
+            console.error(errorMsg);
+            window.location.reload();
+          }
+        }
+        context.router = {
+          useMatches,
+          useLocation,
+          useHref
+        };
+        Object.defineProperty(context, "routes", {
+          get: function get() {
+            return routes;
           }
-          var getRouteApp = function() {
-            var useCreateRouter = function(props) {
-              var runtimeContext = useContext(RuntimeReactContext);
-              var baseUrl = select(location.pathname).replace(/^\/*/, "/");
-              var _basename = baseUrl === "/" ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename) : baseUrl;
-              var hydrationData = window._ROUTER_DATA;
-              var getBlockNavState = runtimeContext.unstable_getBlockNavState;
-              return useMemo(function() {
-                if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
-                  hydrationData = _object_spread_props(_object_spread({}, hydrationData), {
-                    errors: deserializeErrors(hydrationData.errors)
-                  });
-                }
-                routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-                  routesConfig: finalRouteConfig,
-                  props
-                }));
-                var runner = api.useHookRunners();
-                routes = runner.modifyRoutes(routes);
-                var router = supportHtml5History ? createBrowserRouter(routes, {
-                  basename: _basename,
-                  hydrationData
-                }) : createHashRouter(routes, {
-                  basename: _basename,
-                  hydrationData
+        });
+      });
+      api.wrapRoot(function(App) {
+        var pluginConfig = api.getRuntimeConfig();
+        var _merge = merge(pluginConfig.router || {}, userConfig), _merge_serverBase = _merge.serverBase, serverBase = _merge_serverBase === void 0 ? [] : _merge_serverBase, _merge_supportHtml5History = _merge.supportHtml5History, supportHtml5History = _merge_supportHtml5History === void 0 ? true : _merge_supportHtml5History, _merge_basename = _merge.basename, basename = _merge_basename === void 0 ? "" : _merge_basename, routesConfig = _merge.routesConfig, createRoutes = _merge.createRoutes, future = _merge.future;
+        var select = function(pathname) {
+          return serverBase.find(function(baseUrl) {
+            return pathname.search(baseUrl) === 0;
+          }) || "/";
+        };
+        finalRouteConfig = _object_spread({
+          routes: getGlobalRoutes(),
+          globalApp: getGlobalLayoutApp()
+        }, routesConfig);
+        if (!finalRouteConfig.routes && !createRoutes) {
+          return App;
+        }
+        var getRouteApp = function() {
+          var useCreateRouter = function(props) {
+            var runtimeContext = useContext(RuntimeReactContext);
+            var baseUrl = select(location.pathname).replace(/^\/*/, "/");
+            var _basename = baseUrl === "/" ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename) : baseUrl;
+            var hydrationData = window._ROUTER_DATA;
+            var getBlockNavState = runtimeContext.unstable_getBlockNavState;
+            return useMemo(function() {
+              if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
+                hydrationData = _object_spread_props(_object_spread({}, hydrationData), {
+                  errors: deserializeErrors(hydrationData.errors)
                 });
-                var originSubscribe = router.subscribe;
-                router.subscribe = function(listener) {
-                  var wrapedListener = function() {
-                    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                      args[_key] = arguments[_key];
-                    }
-                    var blockRoute = getBlockNavState ? getBlockNavState() : false;
-                    if (blockRoute) {
-                      return;
-                    }
-                    return listener.apply(void 0, _to_consumable_array(args));
-                  };
-                  return originSubscribe(wrapedListener);
+              }
+              routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                routesConfig: finalRouteConfig,
+                props
+              }));
+              var hooks = api.getHooks();
+              routes = hooks.modifyRoutes.call(routes);
+              var router = supportHtml5History ? createBrowserRouter(routes, {
+                basename: _basename,
+                hydrationData
+              }) : createHashRouter(routes, {
+                basename: _basename,
+                hydrationData
+              });
+              var originSubscribe = router.subscribe;
+              router.subscribe = function(listener) {
+                var wrapedListener = function() {
+                  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                    args[_key] = arguments[_key];
+                  }
+                  var blockRoute = getBlockNavState ? getBlockNavState() : false;
+                  if (blockRoute) {
+                    return;
+                  }
+                  return listener.apply(void 0, _to_consumable_array(args));
                 };
-                return router;
-              }, [
-                finalRouteConfig,
-                props,
-                _basename,
-                hydrationData,
-                getBlockNavState
-              ]);
-            };
-            var Null = function() {
-              return null;
-            };
-            return function(props) {
-              beforeCreateRouter = false;
-              var router = useCreateRouter(props);
-              var routerWrapper = (
-                // To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
-                // According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
-                // To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
-                /* @__PURE__ */ _jsxs(_Fragment, {
-                  children: [
-                    /* @__PURE__ */ _jsx(RouterProvider, {
-                      router,
-                      future
-                    }),
-                    /* @__PURE__ */ _jsx(Null, {}),
-                    /* @__PURE__ */ _jsx(Null, {})
-                  ]
-                })
-              );
-              return App ? /* @__PURE__ */ _jsx(App, {
-                children: routerWrapper
-              }) : routerWrapper;
-            };
+                return originSubscribe(wrapedListener);
+              };
+              return router;
+            }, [
+              finalRouteConfig,
+              props,
+              _basename,
+              hydrationData,
+              getBlockNavState
+            ]);
           };
-          return getRouteApp();
-        }
-      };
+          var Null = function() {
+            return null;
+          };
+          return function(props) {
+            beforeCreateRouter = false;
+            var router = useCreateRouter(props);
+            var routerWrapper = (
+              // To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
+              // According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
+              // To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
+              /* @__PURE__ */ _jsxs(_Fragment, {
+                children: [
+                  /* @__PURE__ */ _jsx(RouterProvider, {
+                    router,
+                    future
+                  }),
+                  /* @__PURE__ */ _jsx(Null, {}),
+                  /* @__PURE__ */ _jsx(Null, {})
+                ]
+              })
+            );
+            return App ? /* @__PURE__ */ _jsx(App, {
+              children: routerWrapper
+            }) : routerWrapper;
+          };
+        };
+        return getRouteApp();
+      });
     }
   };
 };