@modern-js/runtime 2.9.0 → 2.11.0

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

@@ -0,0 +1,446 @@
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _asyncToGenerator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+var __generator = this && this.__generator || function(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useContext, useMemo } from "react";
+import { Link as RouterLink, matchRoutes, useResolvedPath, useHref, useMatches, NavLink as RouterNavLink } from "react-router-dom";
+import { RuntimeReactContext } from "../../core";
+function composeEventHandlers(theirHandler, ourHandler) {
+    return function(event) {
+        theirHandler === null || theirHandler === void 0 ? void 0 : theirHandler(event);
+        if (!event.defaultPrevented) {
+            ourHandler(event);
+        }
+    };
+}
+var ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+function usePrefetchBehavior(prefetch, theirElementProps) {
+    var _React_useState = _slicedToArray(React.useState(false), 2), maybePrefetch = _React_useState[0], setMaybePrefetch = _React_useState[1];
+    var _React_useState1 = _slicedToArray(React.useState(false), 2), shouldPrefetch = _React_useState1[0], setShouldPrefetch = _React_useState1[1];
+    var onFocus = theirElementProps.onFocus, onBlur = theirElementProps.onBlur, onMouseEnter = theirElementProps.onMouseEnter, onMouseLeave = theirElementProps.onMouseLeave, onTouchStart = theirElementProps.onTouchStart;
+    React.useEffect(function() {
+        if (prefetch === "render") {
+            setShouldPrefetch(true);
+        }
+    }, [
+        prefetch
+    ]);
+    var setIntent = function() {
+        if (prefetch === "intent") {
+            setMaybePrefetch(true);
+        }
+    };
+    var cancelIntent = function() {
+        if (prefetch === "intent") {
+            setMaybePrefetch(false);
+            setShouldPrefetch(false);
+        }
+    };
+    React.useEffect(function() {
+        if (maybePrefetch) {
+            var id = setTimeout(function() {
+                setShouldPrefetch(true);
+            }, 100);
+            return function() {
+                clearTimeout(id);
+            };
+        }
+    }, [
+        maybePrefetch
+    ]);
+    return [
+        shouldPrefetch,
+        {
+            onFocus: composeEventHandlers(onFocus, setIntent),
+            onBlur: composeEventHandlers(onBlur, cancelIntent),
+            onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+            onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+            onTouchStart: composeEventHandlers(onTouchStart, setIntent)
+        }
+    ];
+}
+function loadRouteModule(route, routeAssets) {
+    return _loadRouteModule.apply(this, arguments);
+}
+function _loadRouteModule() {
+    _loadRouteModule = _asyncToGenerator(function(route, routeAssets) {
+        var routeId, chunkIds, error;
+        return __generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    routeId = route.id;
+                    if (!routeId) {
+                        return [
+                            2
+                        ];
+                    }
+                    if (!routeAssets[routeId]) {
+                        return [
+                            2
+                        ];
+                    }
+                    chunkIds = routeAssets[routeId].chunkIds;
+                    if (!chunkIds) {
+                        return [
+                            2
+                        ];
+                    }
+                    _state.label = 1;
+                case 1:
+                    _state.trys.push([
+                        1,
+                        3,
+                        ,
+                        4
+                    ]);
+                    return [
+                        4,
+                        Promise.all(chunkIds.map(function(chunkId) {
+                            return __webpack_chunk_load__ === null || __webpack_chunk_load__ === void 0 ? void 0 : __webpack_chunk_load__(String(chunkId));
+                        }))
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error(error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    });
+    return _loadRouteModule.apply(this, arguments);
+}
+var getRequestUrl = function(pathname, routeId) {
+    var LOADER_ID_PARAM = "__loader";
+    var DIRECT_PARAM = "__ssrDirect";
+    var _window_location = window.location, protocol = _window_location.protocol, host = _window_location.host;
+    var url = new URL(pathname, "".concat(protocol, "//").concat(host));
+    url.searchParams.append(LOADER_ID_PARAM, routeId);
+    url.searchParams.append(DIRECT_PARAM, "true");
+    return url;
+};
+var createDataHref = function(href) {
+    return /* @__PURE__ */ jsx("link", {
+        rel: "prefetch",
+        as: "fetch",
+        href: href
+    }, href);
+};
+var getDataHref = function(route, pathname, basename) {
+    var id = route.id;
+    var path = basename === "/" ? pathname : "".concat(basename).concat(pathname);
+    var url = getRequestUrl(path, id);
+    return createDataHref(url.toString());
+};
+var PrefetchPageLinks = function(param) {
+    var pathname = param.pathname;
+    var context = useContext(RuntimeReactContext);
+    var routeManifest = context.routeManifest, routes = context.routes;
+    var routeAssets = routeManifest.routeAssets;
+    var matches = Array.isArray(routes) ? matchRoutes(routes, pathname) : [];
+    if (Array.isArray(matches)) {
+        matches === null || matches === void 0 ? void 0 : matches.forEach(function(match) {
+            return loadRouteModule(match.route, routeAssets);
+        });
+    }
+    if (!window._SSR_DATA) {
+        return null;
+    }
+    return /* @__PURE__ */ jsx(PrefetchDataLinks, {
+        matches: matches,
+        pathname: pathname,
+        routeManifest: routeManifest
+    });
+};
+var PrefetchDataLinks = function(param) {
+    var matches = param.matches, pathname = param.pathname, routeManifest = param.routeManifest;
+    var currentMatches = useMatches();
+    var basename = useHref("/");
+    var dataHrefs = useMemo(function() {
+        return matches === null || matches === void 0 ? void 0 : matches.filter(function(match) {
+            return match.route.loader && typeof match.route.loader === "function" && match.route.loader.length > 0;
+        }).filter(function(match, index) {
+            var currentMatch = currentMatches[index];
+            if (!currentMatch || currentMatch.id !== match.route.id) {
+                return true;
+            }
+            if (currentMatch.pathname !== match.pathname) {
+                return true;
+            }
+            if (currentMatch.pathname.endsWith("*") && currentMatch.params["*"] !== match.params["*"]) {
+                return true;
+            }
+            return false;
+        }).map(function(match) {
+            return getDataHref(match.route, pathname, basename);
+        });
+    }, [
+        matches,
+        pathname,
+        routeManifest
+    ]);
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: dataHrefs
+    });
+};
+var createPrefetchLink = function(Link2) {
+    return React.forwardRef(function(_param, forwardedRef) {
+        var to = _param.to, _param_prefetch = _param.prefetch, prefetch = _param_prefetch === void 0 ? "none" : _param_prefetch, props = _objectWithoutProperties(_param, [
+            "to",
+            "prefetch"
+        ]);
+        var isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
+        var _usePrefetchBehavior = _slicedToArray(usePrefetchBehavior(prefetch, props), 2), shouldPrefetch = _usePrefetchBehavior[0], prefetchHandlers = _usePrefetchBehavior[1];
+        var resolvedPath = useResolvedPath(to);
+        var pathname = resolvedPath.pathname;
+        return /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+                /* @__PURE__ */ jsx(Link2, _objectSpread({
+                    ref: forwardedRef,
+                    to: to
+                }, props, prefetchHandlers)),
+                shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /* @__PURE__ */ jsx(PrefetchPageLinks, {
+                    pathname: pathname
+                }) : null
+            ]
+        });
+    });
+};
+var Link = createPrefetchLink(RouterLink);
+Link.displayName = "Link";
+var NavLink = createPrefetchLink(RouterNavLink);
+NavLink.displayName = "NavLink";
+export { Link as PrefetchLink, NavLink as PrefetchNavLink, composeEventHandlers };

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

@@ -2,6 +2,7 @@ import { routerPlugin } from "./plugin";
 var runtime_default = routerPlugin;
 import { modifyRoutes } from "./plugin";
 export * from "./withRouter";
+import { PrefetchLink, PrefetchNavLink } from "./PrefetchLink";
 import { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Link, NavLink, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath } from "react-router-dom";
-import { defer, json, redirect } from "@modern-js/utils/remix-router";
-export { Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, createSearchParams, runtime_default as default, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, modifyRoutes, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit };
+import { defer, json, redirect } from "@modern-js/utils/universal/remix-router";
+export { Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, PrefetchLink, PrefetchNavLink, Route, Router, RouterProvider, Routes, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromChildren, createRoutesFromElements, createSearchParams, runtime_default as default, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, modifyRoutes, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit };

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

@@ -74,6 +74,7 @@ var routerPlugin = function(param) {
             return pathname.search(baseUrl) === 0;
         }) || "/";
     };
+    var routes = [];
     finalRouteConfig = routesConfig;
     return {
         name: "@modern-js/plugin-router",
@@ -85,6 +86,11 @@ var routerPlugin = function(param) {
                         useMatches: useMatches,
                         useLocation: useLocation
                     };
+                    Object.defineProperty(context, "routes", {
+                        get: function get() {
+                            return routes;
+                        }
+                    });
                     return next({
                         context: context
                     });
@@ -100,7 +106,10 @@ var routerPlugin = function(param) {
                         return function(props) {
                             var _window__SERVER_DATA;
                             beforeCreateRouter = true;
-                            var routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
+                            routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                                routesConfig: finalRouteConfig,
+                                props: props
+                            }));
                             var baseUrl = ((_window__SERVER_DATA = window._SERVER_DATA) === null || _window__SERVER_DATA === void 0 ? void 0 : _window__SERVER_DATA.router.baseUrl) || select(location.pathname);
                             var _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
                             var hydrationData = window._ROUTER_DATA;

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

@@ -229,7 +229,7 @@ var __generator = this && this.__generator || function(thisArg, body) {
 };
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { createStaticHandler } from "@modern-js/utils/remix-router";
+import { createStaticHandler } from "@modern-js/utils/universal/remix-router";
 import { createStaticRouter, StaticRouterProvider } from "react-router-dom/server";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { createRoutesFromElements } from "react-router-dom";
@@ -321,7 +321,10 @@ var routerPlugin = function(param) {
                                     _context_ssrContext = context.ssrContext, request = _context_ssrContext.request, ssrMode = _context_ssrContext.mode;
                                     baseUrl = request.baseUrl;
                                     _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
-                                    routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig, ssrMode));
+                                    routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                                        routesConfig: routesConfig,
+                                        ssrMode: ssrMode
+                                    }));
                                     query = createStaticHandler(routes, {
                                         basename: _basename
                                     }).query;

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

@@ -132,23 +132,23 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 import { jsx } from "react/jsx-runtime";
 import { Route } from "react-router-dom";
-import { renderNestedRoute } from "@modern-js/utils/nestedRoutes";
-import { ErrorResponse, isRouteErrorResponse } from "@modern-js/utils/remix-router";
+import { ErrorResponse, isRouteErrorResponse } from "@modern-js/utils/universal/remix-router";
+import { renderNestedRoute } from "@modern-js/utils/universal/nestedRoutes";
 import { DefaultNotFound } from "./DefaultNotFound";
 import DeferredDataScripts from "./DeferredDataScripts";
 function getRouteComponents(routes, param) {
-    var globalApp = param.globalApp, ssrMode = param.ssrMode;
+    var globalApp = param.globalApp, ssrMode = param.ssrMode, props = param.props;
     var Layout = function(_param) {
-        var Component = _param.Component, props = _objectWithoutProperties(_param, [
+        var Component = _param.Component, props2 = _objectWithoutProperties(_param, [
             "Component"
         ]);
         var GlobalLayout = globalApp;
         if (!GlobalLayout) {
-            return /* @__PURE__ */ jsx(Component, _objectSpread({}, props));
+            return /* @__PURE__ */ jsx(Component, _objectSpread({}, props2));
         }
         return /* @__PURE__ */ jsx(GlobalLayout, _objectSpread({
             Component: Component
-        }, props));
+        }, props2));
     };
     var routeElements = [];
     var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
@@ -157,7 +157,8 @@ function getRouteComponents(routes, param) {
             var route = _step.value;
             if (route.type === "nested") {
                 var routeElement = renderNestedRoute(route, {
-                    DeferredDataComponent: ssrMode === "stream" ? DeferredDataScripts : void 0
+                    DeferredDataComponent: ssrMode === "stream" ? DeferredDataScripts : void 0,
+                    props: props
                 });
                 routeElements.push(routeElement);
             } else {
@@ -190,7 +191,8 @@ function getRouteComponents(routes, param) {
     }, "*"));
     return routeElements;
 }
-function renderRoutes(routesConfig, ssrMode) {
+function renderRoutes(param) {
+    var routesConfig = param.routesConfig, props = param.props, ssrMode = param.ssrMode;
     if (!routesConfig) {
         return null;
     }
@@ -200,7 +202,8 @@ function renderRoutes(routesConfig, ssrMode) {
     }
     var routeElements = getRouteComponents(routes, {
         globalApp: globalApp,
-        ssrMode: ssrMode
+        ssrMode: ssrMode,
+        props: props
     });
     return routeElements;
 }

package/dist/esm/ssr/index.js

@@ -243,6 +243,9 @@ var ssr = function(config) {
                         return __generator(this, function(_state) {
                             App = param.App, context = param.context, ModernRender = param.ModernRender, ModernHydrate = param.ModernHydrate;
                             hydrateContext = _objectSpreadProps(_objectSpread({}, context), {
+                                get routes () {
+                                    return context.routes;
+                                },
                                 _hydration: true
                             });
                             callback = function() {

package/dist/esm/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -26,19 +26,23 @@ function _objectSpread(target) {
     }
     return target;
 }
-import { serializeJson } from "@modern-js/utils/serialize";
+import { serializeJson } from "@modern-js/utils/universal/serialize";
 import { buildTemplate } from "./buildTemplate.share";
 function buildShellAfterTemplate(afterAppTemplate, options) {
     var injectSSRDataScript = function injectSSRDataScript(template) {
         var ssrDataScript = buildSSRDataScript();
         return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
         function buildSSRDataScript() {
-            var ssrContext = options.ssrContext, renderLevel = options.renderLevel;
+            var _options_context = options.context, ssrContext = _options_context.ssrContext, initialData = _options_context.initialData, __i18nData__ = _options_context.__i18nData__, renderLevel = options.renderLevel;
             var request = ssrContext.request, enableUnsafeCtx = ssrContext.enableUnsafeCtx;
             var unsafeContext = {
                 headers: request.headers
             };
             var SSRData = {
+                data: {
+                    initialData: initialData,
+                    i18nData: __i18nData__
+                },
                 context: {
                     request: _objectSpread({
                         params: request.params,

package/dist/esm/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -81,8 +81,8 @@ function getHeadTemplate(beforeEntryTemplate, context) {
                     var routeManifest2 = routeAssets[routeId];
                     if (routeManifest2) {
                         var _cssChunks;
-                        var _routeManifest2_assets = routeManifest2.assets, assets = _routeManifest2_assets === void 0 ? [] : _routeManifest2_assets;
-                        var _cssChunks1 = assets.filter(function(asset) {
+                        var _routeManifest2_referenceCssAssets = routeManifest2.referenceCssAssets, referenceCssAssets = _routeManifest2_referenceCssAssets === void 0 ? [] : _routeManifest2_referenceCssAssets;
+                        var _cssChunks1 = referenceCssAssets.filter(function(asset) {
                             return asset === null || asset === void 0 ? void 0 : asset.endsWith(".css");
                         });
                         (_cssChunks = cssChunks).push.apply(_cssChunks, _toConsumableArray(_cssChunks1));

package/dist/esm/ssr/serverRender/renderToStream/template.js

@@ -48,12 +48,11 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 var HTML_SEPARATOR = "<!--<?- html ?>-->";
 var getTemplates = function(context, renderLevel) {
-    var ssrContext = context.ssrContext, routerContext = context.routerContext;
+    var ssrContext = context.ssrContext;
     var _ref = _slicedToArray(ssrContext.template.split(HTML_SEPARATOR) || [], 2), tmp = _ref[0], beforeAppTemplate = tmp === void 0 ? "" : tmp, tmp1 = _ref[1], afterAppHtmlTemplate = tmp1 === void 0 ? "" : tmp1;
     var builtBeforeTemplate = buildShellBeforeTemplate(beforeAppTemplate, context);
     var builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
-        ssrContext: ssrContext,
-        routerContext: routerContext,
+        context: context,
         renderLevel: renderLevel
     });
     return {

package/dist/esm/ssr/serverRender/renderToString/entry.js

@@ -171,7 +171,7 @@ var __generator = this && this.__generator || function(thisArg, body) {
 };
 import React from "react";
 import ReactDomServer from "react-dom/server";
-import { serializeJson } from "@modern-js/utils/serialize";
+import { serializeJson } from "@modern-js/utils/universal/serialize";
 import ReactHelmet from "react-helmet";
 import { serializeErrors } from "../../../router/runtime/utils";
 import helmetReplace from "../helmet";

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo } from "react";
 import hoistNonReactStatics from "hoist-non-react-statics";
-import { ROUTE_MANIFEST } from "@modern-js/utils/constants";
+import { ROUTE_MANIFEST } from "@modern-js/utils/universal/constants";
 import {
   RuntimeReactContext
 } from "../runtimeContext";
@@ -24,10 +24,14 @@ const createApp = ({ plugins }) => {
   return (App) => {
     const runner = appRuntime.init();
     const WrapperComponent = (props) => {
+      var _a;
       const element = React.createElement(
         App || React.Fragment,
-        { ...props },
-        props.children
+        App ? { ...props } : null,
+        App ? props.children : React.cloneElement(props.children, {
+          ...(_a = props.children) == null ? void 0 : _a.props,
+          ...props
+        })
       );
       const context = useContext(RuntimeReactContext);
       return runner.provide(