@modern-js/runtime 2.63.6 → 2.63.7

package/dist/cjs/core/browser/hydrate.js

@@ -24,13 +24,12 @@ __export(hydrate_exports, {
 module.exports = __toCommonJS(hydrate_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_component = require("@loadable/component");
-var import_url = require("@modern-js/runtime-utils/url");
 var import_constants = require("../constants");
 var import_wrapper = require("../react/wrapper");
 var import_withCallback = require("./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() {
@@ -38,14 +37,6 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     },
     _hydration: true
   };
-  const { ssrContext } = hydrateContext;
-  const currentPathname = (0, import_url.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) && (0, import_url.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/cjs/core/server/stream/createReadableStream.js

@@ -49,9 +49,9 @@ const createReadableStreamFromElement = async (request, rootElement, options) =>
   const onReady = isbot || forceStream2String ? "onAllReady" : "onShellReady";
   const sheet = new import_styled_components.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;
@@ -92,7 +92,10 @@ const createReadableStreamFromElement = async (request, rootElement, options) =>
           });
           const stream = (0, import_node.createReadableStreamFromReadable)(body);
           resolve(stream);
-          pipe(body);
+          const passThrough = new import_stream.PassThrough();
+          const styledStream = sheet.interleaveWithNodeStream(passThrough);
+          reactStreamingPipe(passThrough);
+          styledStream.pipe(body);
         });
       },
       onShellError(error) {

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

@@ -27,6 +27,7 @@ module.exports = __toCommonJS(plugin_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_merge = require("@modern-js/runtime-utils/merge");
 var import_router = require("@modern-js/runtime-utils/router");
+var import_url = require("@modern-js/runtime-utils/url");
 var import_react = require("react");
 var import_core = require("../../core");
 var import_context = require("../../core/context");
@@ -55,6 +56,17 @@ const routerPlugin = (userConfig = {}) => {
       let routes = [];
       return {
         beforeRender(context) {
+          if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
+            var _ssrContext_request;
+            const { ssrContext } = context;
+            const currentPathname = (0, import_url.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) && (0, import_url.normalizePathname)(ssrContext.request.pathname);
+            if (initialPathname && initialPathname !== currentPathname) {
+              const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
+              console.error(errorMsg);
+              window.location.reload();
+            }
+          }
           context.router = {
             useMatches: import_router.useMatches,
             useLocation: import_router.useLocation,

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

@@ -109,10 +109,12 @@ const routerPlugin = (userConfig = {}) => {
           if (routerContext instanceof Response) {
             return interrupt(routerContext);
           }
-          if (routerContext.statusCode >= 500 && routerContext.statusCode < 600 && // TODO: if loaderFailureMode is not 'errroBoundary', error log will not be printed.
-          loaderFailureMode === "clientRender") {
+          const 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;
-            const errors = Object.values(routerContext.errors);
             throw errors[0];
           }
           const router = (0, import_router.createStaticRouter)(routes, routerContext);

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

@@ -2,7 +2,6 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 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";
@@ -10,21 +9,13 @@ var isReact18 = function() {
   return 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;
   var hydrateContext = _object_spread_props(_object_spread({}, context), {
     get routes() {
       return context.routes;
     },
     _hydration: true
   });
-  var ssrContext = hydrateContext.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 && context.router) {
-    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();
-  }
   var callback = function() {
     delete hydrateContext._hydration;
   };

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/plugin.js

@@ -4,6 +4,7 @@ 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";
@@ -33,6 +34,17 @@ var routerPlugin = function() {
       var routes = [];
       return {
         beforeRender: function beforeRender(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,

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

@@ -98,10 +98,12 @@ var routerPlugin = function() {
                       interrupt(routerContext)
                     ];
                   }
-                  if (routerContext.statusCode >= 500 && routerContext.statusCode < 600 && // TODO: if loaderFailureMode is not 'errroBoundary', error log will not be printed.
-                  loaderFailureMode === "clientRender") {
+                  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;
-                    errors = Object.values(routerContext.errors);
                     throw errors[0];
                   }
                   router = createStaticRouter(routes, routerContext);

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/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) {

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

@@ -1,6 +1,7 @@
 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";
@@ -29,6 +30,17 @@ const routerPlugin = (userConfig = {}) => {
       let routes = [];
       return {
         beforeRender(context) {
+          if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
+            var _ssrContext_request;
+            const { ssrContext } = context;
+            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) {
+              const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
+              console.error(errorMsg);
+              window.location.reload();
+            }
+          }
           context.router = {
             useMatches,
             useLocation,

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

@@ -75,10 +75,12 @@ const routerPlugin = (userConfig = {}) => {
           if (routerContext instanceof Response) {
             return interrupt(routerContext);
           }
-          if (routerContext.statusCode >= 500 && routerContext.statusCode < 600 && // TODO: if loaderFailureMode is not 'errroBoundary', error log will not be printed.
-          loaderFailureMode === "clientRender") {
+          const 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;
-            const errors = Object.values(routerContext.errors);
             throw errors[0];
           }
           const router = createStaticRouter(routes, routerContext);

package/dist/types/router/runtime/types.d.ts

@@ -32,6 +32,10 @@ export type RouterConfig = {
     future?: Partial<{
         v7_startTransition: boolean;
     }>;
+    /**
+     * An unstable feature, which will reload the page when the current browser URL and the SSR Context URL do not match.
+     */
+    unstable_reloadOnURLMismatch?: boolean;
 };
 export type Routes = RouterConfig['routesConfig']['routes'];
 export interface RouteManifest {

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.63.6",
+  "version": "2.63.7",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -200,12 +200,12 @@
     "react-is": "^18",
     "react-side-effect": "^2.1.1",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.63.6",
-    "@modern-js/plugin-v2": "2.63.6",
-    "@modern-js/plugin-data-loader": "2.63.6",
-    "@modern-js/runtime-utils": "2.63.6",
-    "@modern-js/types": "2.63.6",
-    "@modern-js/utils": "2.63.6"
+    "@modern-js/plugin": "2.63.7",
+    "@modern-js/plugin-v2": "2.63.7",
+    "@modern-js/plugin-data-loader": "2.63.7",
+    "@modern-js/runtime-utils": "2.63.7",
+    "@modern-js/types": "2.63.7",
+    "@modern-js/utils": "2.63.7"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -229,9 +229,9 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "webpack": "^5.97.1",
-    "@scripts/build": "2.63.6",
-    "@modern-js/app-tools": "2.63.6",
-    "@scripts/jest-config": "2.63.6"
+    "@modern-js/app-tools": "2.63.7",
+    "@scripts/build": "2.63.7",
+    "@scripts/jest-config": "2.63.7"
   },
   "sideEffects": false,
   "publishConfig": {