@modern-js/runtime 2.0.0-beta.0 → 2.0.0-beta.2

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

@@ -1,9 +1,6 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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; }
-
 import React from 'react';
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -16,7 +13,6 @@ export const routerPlugin = ({
   createRoutes
 }) => {
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
-
   return {
     name: '@modern-js/plugin-router',
     setup: () => {
@@ -31,11 +27,9 @@ export const routerPlugin = ({
               App
             });
           }
-
           const getRouteApp = () => {
             return props => {
               var _window$_SERVER_DATA;
-
               const routeElements = renderRoutes(routesConfig);
               const routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
               const baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
@@ -51,15 +45,12 @@ export const routerPlugin = ({
               }));
             };
           };
-
           const RouteApp = getRouteApp();
-
           if (routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });
           }
-
           return next({
             App: RouteApp
           });

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

@@ -1,9 +1,6 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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; }
-
 import React, { useContext } from 'react';
 import { unstable_createStaticHandler as createStaticHandler } from '@remix-run/router';
 import { unstable_createStaticRouter as createStaticRouter, unstable_StaticRouterProvider as StaticRouterProvider } from 'react-router-dom/server';
@@ -11,17 +8,21 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 import { installGlobals } from '@remix-run/node';
 import { createRoutesFromElements } from 'react-router-dom';
 import { RuntimeReactContext } from "../../core";
-import { renderRoutes } from "./utils"; // Polyfill Web Fetch API
+import { renderRoutes } from "./utils";
 
+// Polyfill Web Fetch API
 import { jsx as _jsx } from "react/jsx-runtime";
-installGlobals(); // TODO: polish
+installGlobals();
 
+// TODO: polish
 function createFetchRequest(req) {
   // const origin = `${req.protocol}://${req.get('host')}`;
-  const origin = `${req.protocol}://${req.host}`; // Note: This had to take originalUrl into account for presumably vite's proxying
-
+  const origin = `${req.protocol}://${req.host}`;
+  // Note: This had to take originalUrl into account for presumably vite's proxying
   const url = new URL(req.originalUrl || req.url, origin);
-  const controller = new AbortController(); // req.on('close', () => {
+  const controller = new AbortController();
+
+  // req.on('close', () => {
   //   controller.abort();
   // });
 
@@ -29,16 +30,16 @@ function createFetchRequest(req) {
     method: req.method,
     headers: createFetchHeaders(req.headers),
     signal: controller.signal
-  }; // if (req.method !== 'GET' && req.method !== 'HEAD') {
+  };
+
+  // if (req.method !== 'GET' && req.method !== 'HEAD') {
   //   init.body = req.body;
   // }
 
   return new Request(url.href, init);
 }
-
 export function createFetchHeaders(requestHeaders) {
   const headers = new Headers();
-
   for (const [key, values] of Object.entries(requestHeaders)) {
     if (values) {
       if (Array.isArray(values)) {
@@ -50,7 +51,6 @@ export function createFetchHeaders(requestHeaders) {
       }
     }
   }
-
   return headers;
 }
 export const routerPlugin = ({
@@ -71,7 +71,6 @@ export const routerPlugin = ({
               context
             });
           }
-
           const {
             request
           } = context.ssrContext;
@@ -82,22 +81,21 @@ export const routerPlugin = ({
           } = createStaticHandler(routes);
           const remixRequest = createFetchRequest(request);
           const routerContext = await query(remixRequest);
-
           if (routerContext instanceof Response) {
-            // TODO: resolve repsonse ?
-            return next({
-              context
-            });
+            // React Router would return a Response when redirects occur in loader.
+            // Throw the Response to bail out and let the server handle it with an HTTP redirect
+            return routerContext;
           }
-
           const router = createStaticRouter(routes, routerContext);
           context.router = router;
           context.routerContext = routerContext;
+          context.routes = routes;
+          // set routeManifest in context to be consistent with csr context
+          context.routeManifest = context.ssrContext.routeManifest;
           return next({
             context
           });
         },
-
         hoc: ({
           App
         }, next) => {
@@ -108,7 +106,6 @@ export const routerPlugin = ({
               App
             });
           }
-
           const getRouteApp = () => {
             return props => {
               const {
@@ -124,15 +121,12 @@ export const routerPlugin = ({
               }));
             };
           };
-
           const RouteApp = getRouteApp();
-
           if (routesConfig.globalApp) {
             return next({
               App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
             });
           }
-
           return next({
             App: RouteApp
           });

package/dist/js/modern/router/runtime/root/index.js

@@ -0,0 +1,19 @@
+import React, { useContext, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { RuntimeReactContext } from "../../../core";
+import { handleLoad } from "./load";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RootLayout(props) {
+  const location = useLocation();
+  const context = useContext(RuntimeReactContext);
+  useEffect(() => {
+    const {
+      routes
+    } = props;
+    handleLoad(routes, location, context.routeManifest);
+  }, [location]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: props.children
+  });
+}

package/dist/js/modern/router/runtime/root/load.js

@@ -0,0 +1,61 @@
+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; }
+import { matchRoutes } from 'react-router-dom';
+class Logger {
+  static getLogger(options) {
+    if (this.logger) {
+      return this.logger;
+    }
+    this.logger = new Logger(options);
+    return this.logger;
+  }
+  constructor(options) {
+    _defineProperty(this, "enableLogging", void 0);
+    this.enableLogging = options.enableLogging;
+  }
+  log(...args) {
+    if (this.enableLogging) {
+      // eslint-disable-next-line no-console
+      console.log(...args);
+    }
+  }
+}
+_defineProperty(Logger, "logger", void 0);
+export function handleLoad(routes, location, routeManifest) {
+  if (!routeManifest || !routeManifest.enableFetchParallel === false) {
+    return;
+  }
+  const {
+    routeAssets
+  } = routeManifest;
+  Logger.getLogger({
+    enableLogging: routeManifest.enableLogging
+  }).log('handle page load');
+  const matches = matchClientRoutes(routes, location);
+  matches === null || matches === void 0 ? void 0 : matches.forEach(match => loadRouteModule(match.route, routeAssets));
+}
+export function matchClientRoutes(routes, location) {
+  const matches = matchRoutes(routes, location);
+  return matches;
+}
+export async function loadRouteModule(route, routeAssets) {
+  const routeId = route.id;
+  if (!routeId) {
+    return;
+  }
+  if (!routeAssets[routeId]) {
+    return;
+  }
+  const {
+    chunkIds
+  } = routeAssets[routeId];
+  if (!chunkIds) {
+    return;
+  }
+  try {
+    await Promise.all(chunkIds.map(chunkId => {
+      return __webpack_chunk_load__(String(chunkId));
+    }));
+  } catch (error) {
+    console.error(error);
+  }
+}

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

@@ -1,20 +1,14 @@
 const _excluded = ["Component"];
-
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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; }
-
 import React, { Suspense } from 'react';
 import { Route } from 'react-router-dom';
 import { DefaultNotFound } from "./DefaultNotFound";
+import { RootLayout } from "./root";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const renderNestedRoute = (nestedRoute, parent) => {
   const {
     children,
@@ -37,27 +31,33 @@ const renderNestedRoute = (nestedRoute, parent) => {
     index: nestedRoute.index,
     errorElement: nestedRoute.errorElement
   };
-
   if (nestedRoute.error) {
     const errorElement = /*#__PURE__*/_jsx(nestedRoute.error, {});
-
     routeProps.errorElement = errorElement;
   }
-
+  let element;
   if (Component) {
     if (parent !== null && parent !== void 0 && parent.loading) {
       const Loading = parent.loading;
-      routeProps.element = /*#__PURE__*/_jsx(Suspense, {
+      element = /*#__PURE__*/_jsx(Suspense, {
         fallback: /*#__PURE__*/_jsx(Loading, {}),
         children: /*#__PURE__*/_jsx(Component, {})
       });
     } else {
-      routeProps.element = /*#__PURE__*/_jsx(Suspense, {
+      element = /*#__PURE__*/_jsx(Suspense, {
         children: /*#__PURE__*/_jsx(Component, {})
       });
     }
   }
-
+  if (!parent) {
+    element = /*#__PURE__*/_jsx(RootLayout, {
+      routes: [nestedRoute],
+      children: /*#__PURE__*/_jsx(Suspense, {
+        children: element
+      })
+    });
+  }
+  routeProps.element = element;
   const routeElement = index ? /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {
     index: true
   }), id) : /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {
@@ -66,27 +66,21 @@ const renderNestedRoute = (nestedRoute, parent) => {
   }), id);
   return routeElement;
 };
-
 export function getRouteComponents(routes, globalApp) {
   const Layout = _ref => {
     let {
-      Component
-    } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded);
-
+        Component
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
     const GlobalLayout = globalApp;
-
     if (!GlobalLayout) {
       return /*#__PURE__*/_jsx(Component, _objectSpread({}, props));
     }
-
     return /*#__PURE__*/_jsx(GlobalLayout, _objectSpread({
       Component: Component
     }, props));
   };
-
   const routeElements = [];
-
   for (const route of routes) {
     if (route.type === 'nested') {
       const routeElement = renderNestedRoute(route);
@@ -98,11 +92,9 @@ export function getRouteComponents(routes, globalApp) {
           Component: route.component
         })
       }, route.path);
-
       routeElements.push(routeElement);
     }
   }
-
   routeElements.push( /*#__PURE__*/_jsx(Route, {
     path: "*",
     element: /*#__PURE__*/_jsx(DefaultNotFound, {})
@@ -113,33 +105,27 @@ export function renderRoutes(routesConfig) {
   if (!routesConfig) {
     return null;
   }
-
   const {
     routes,
     globalApp
   } = routesConfig;
-
   if (!routes) {
     return null;
   }
-
   const routeElements = getRouteComponents(routes, globalApp);
   return routeElements;
 }
 export function getLocation(serverContext) {
   var _url$replace;
-
   const {
     pathname,
     url
   } = (serverContext === null || serverContext === void 0 ? void 0 : serverContext.request) || {};
   const cleanUrl = url === null || url === void 0 ? void 0 : (_url$replace = url.replace('http://', '')) === null || _url$replace === void 0 ? void 0 : _url$replace.replace('https://', '');
   const index = (cleanUrl || '').indexOf(pathname);
-
   if (index === -1) {
     return pathname;
   }
-
   return cleanUrl.substring(index);
 }
 export const urlJoin = (...parts) => {
@@ -149,22 +135,17 @@ export const urlJoin = (...parts) => {
 };
 export function standardSlash(str) {
   let addr = str;
-
   if (!addr || typeof addr !== 'string') {
     return addr;
   }
-
   if (addr.startsWith('.')) {
     addr = addr.slice(1);
   }
-
   if (!addr.startsWith('/')) {
     addr = `/${addr}`;
   }
-
   if (addr.endsWith('/') && addr !== '/') {
     addr = addr.slice(0, addr.length - 1);
   }
-
   return addr;
 }

package/dist/js/modern/router/runtime/withRouter.js

@@ -1,10 +1,8 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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; }
-
 // legacy withRouter
+
 import React from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/js/modern/ssr/cli/index.js

@@ -1,17 +1,13 @@
 import { getEntryOptions, SERVER_RENDER_FUNCTION_NAME, LOADABLE_STATS_FILE, isUseSSRBundle, createRuntimeExportsUtils, isSingleEntry } from '@modern-js/utils';
 const PLUGIN_IDENTIFIER = 'ssr';
-
 const hasStringSSREntry = userConfig => {
   const isStreaming = ssr => ssr && typeof ssr === 'object' && ssr.mode === 'stream';
-
   const {
     server
   } = userConfig;
-
   if (server !== null && server !== void 0 && server.ssr && !isStreaming(server.ssr)) {
     return true;
   }
-
   if (server !== null && server !== void 0 && server.ssrByEntries && typeof server.ssrByEntries === 'object') {
     for (const name of Object.keys(server.ssrByEntries)) {
       if (!isStreaming(server.ssrByEntries[name])) {
@@ -19,10 +15,8 @@ const hasStringSSREntry = userConfig => {
       }
     }
   }
-
   return false;
 };
-
 export default (() => ({
   name: '@modern-js/plugin-ssr',
   required: ['@modern-js/runtime'],
@@ -45,11 +39,9 @@ export default (() => ({
               CHAIN_ID
             }) => {
               const userConfig = api.useResolvedConfigContext();
-
               if (isUseSSRBundle(userConfig) && name !== 'server' && hasStringSSREntry(userConfig)) {
                 // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
                 const LoadableWebpackPlugin = require('@loadable/webpack-plugin');
-
                 chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableWebpackPlugin, [{
                   filename: LOADABLE_STATS_FILE
                 }]);
@@ -57,7 +49,6 @@ export default (() => ({
             },
             babel: config => {
               const userConfig = api.useResolvedConfigContext();
-
               if (isUseSSRBundle(userConfig) && hasStringSSREntry(userConfig)) {
                 config.plugins.push(require.resolve('@loadable/babel-plugin'));
               }
@@ -65,7 +56,6 @@ export default (() => ({
           }
         };
       },
-
       modifyEntryImports({
         entrypoint,
         imports
@@ -79,28 +69,23 @@ export default (() => ({
           packageName,
           entrypoints
         } = api.useAppContext();
-        pluginsExportsUtils.addExport(`export { default as ssr } from '@modern-js/runtime/ssr'`); // if use ssg then set ssr config to true
+        pluginsExportsUtils.addExport(`export { default as ssr } from '@modern-js/runtime/ssr'`);
 
+        // if use ssg then set ssr config to true
         const ssrConfig = getEntryOptions(entryName, userConfig.server.ssr, userConfig.server.ssrByEntries, packageName);
-
         if (typeof ssrConfig === 'object' && ssrConfig.mode === 'stream') {
           var _runtimeConfig$router;
-
           const runtimeConfig = getEntryOptions(entryName, userConfig.runtime, userConfig.runtimeByEntries, packageName);
-
           if (runtimeConfig !== null && runtimeConfig !== void 0 && (_runtimeConfig$router = runtimeConfig.router) !== null && _runtimeConfig$router !== void 0 && _runtimeConfig$router.legacy) {
             throw new Error(`Legacy router plugin doesn't support streaming SSR, check your config 'runtime.router'`);
           }
-
           if (fileSystemRoutes && !entrypoint.nestedRoutesEntry) {
             throw new Error(`You should switch to file-system based router to support streaming SSR.`);
           }
         }
-
         const ssgConfig = userConfig.output.ssg;
         const useSSG = isSingleEntry(entrypoints) ? Boolean(ssgConfig) : ssgConfig === true || typeof (ssgConfig === null || ssgConfig === void 0 ? void 0 : ssgConfig[0]) === 'function' || Boolean(ssgConfig === null || ssgConfig === void 0 ? void 0 : ssgConfig[entryName]);
         ssrConfigMap.set(entryName, ssrConfig || useSSG);
-
         if (ssrConfig || useSSG) {
           imports.push({
             value: '@modern-js/runtime/plugins',
@@ -109,13 +94,11 @@ export default (() => ({
             }]
           });
         }
-
         return {
           entrypoint,
           imports
         };
       },
-
       modifyEntryRuntimePlugins({
         entrypoint,
         plugins
@@ -126,13 +109,11 @@ export default (() => ({
             options: JSON.stringify(ssrConfigMap.get(entrypoint.entryName))
           });
         }
-
         return {
           entrypoint,
           plugins
         };
       },
-
       modifyEntryExport({
         entrypoint,
         exportStatement
@@ -145,13 +126,11 @@ export default (() => ({
             }`, exportStatement].join('\n')
           };
         }
-
         return {
           entrypoint,
           exportStatement
         };
       }
-
     };
   }
 }));