@modern-js/runtime 1.21.5 → 2.0.0-beta.1

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

@@ -1,28 +1,18 @@
 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 { createBrowserHistory, createHashHistory } from 'history';
-import { Router, StaticRouter } from 'react-router-dom';
+import React from 'react';
+import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements } from 'react-router-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { RuntimeReactContext } from "../../core";
-import { isBrowser } from "../../common";
-import { renderRoutes, getLocation, urlJoin } from "./utils";
+import { renderRoutes } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const routerPlugin = ({
   serverBase: _serverBase = [],
-  history: customHistory,
   supportHtml5History: _supportHtml5History = true,
   routesConfig,
-  historyOptions: _historyOptions = {}
+  createRoutes
 }) => {
-  const isBrow = isBrowser();
-
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
-
   return {
     name: '@modern-js/plugin-router',
     setup: () => {
@@ -30,54 +20,37 @@ export const routerPlugin = ({
         hoc: ({
           App
         }, next) => {
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              App
+            });
+          }
           const getRouteApp = () => {
-            if (isBrow) {
+            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);
-              _historyOptions.basename = baseUrl === '/' ? urlJoin(baseUrl, _historyOptions.basename) : baseUrl;
-              const history = customHistory || (_supportHtml5History ? createBrowserHistory(_historyOptions) : createHashHistory(_historyOptions));
-              return props => /*#__PURE__*/_jsx(Router, {
-                history: history,
-                children: /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
-                  children: routesConfig ? renderRoutes(routesConfig, props) : null
-                }))
-              });
-            }
-
-            return props => {
-              const runtimeContext = useContext(RuntimeReactContext);
-              const {
-                ssrContext
-              } = runtimeContext;
-              const location = getLocation(ssrContext);
-              const routerContext = (ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.redirection) || {};
-              const request = ssrContext === null || ssrContext === void 0 ? void 0 : ssrContext.request;
-              const baseUrl = request === null || request === void 0 ? void 0 : request.baseUrl;
-              const basename = baseUrl === '/' ? urlJoin(baseUrl, _historyOptions.basename) : baseUrl;
-              return /*#__PURE__*/_jsx(StaticRouter, {
-                basename: basename === '/' ? '' : basename,
-                location: location,
-                context: routerContext,
-                children: /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
-                  children: routesConfig ? renderRoutes(routesConfig, props) : null
-                }))
+              const router = _supportHtml5History ? createBrowserRouter(routes, {
+                basename: baseUrl
+              }) : createHashRouter(routes, {
+                basename: baseUrl
               });
+              return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/_jsx(RouterProvider, {
+                  router: router
+                })
+              }));
             };
           };
-
-          let RouteApp = getRouteApp();
-
-          if (App) {
-            RouteApp = hoistNonReactStatics(RouteApp, App);
-          }
-
-          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
+          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

@@ -0,0 +1,137 @@
+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';
+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 { jsx as _jsx } from "react/jsx-runtime";
+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 url = new URL(req.originalUrl || req.url, origin);
+  const controller = new AbortController();
+
+  // req.on('close', () => {
+  //   controller.abort();
+  // });
+
+  const init = {
+    method: req.method,
+    headers: createFetchHeaders(req.headers),
+    signal: controller.signal
+  };
+
+  // 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)) {
+        for (const value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+  return headers;
+}
+export const routerPlugin = ({
+  routesConfig,
+  createRoutes
+}) => {
+  return {
+    name: '@modern-js/plugin-router',
+    setup: () => {
+      return {
+        async init({
+          context
+        }, next) {
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              context
+            });
+          }
+          const {
+            request
+          } = context.ssrContext;
+          const routeElements = renderRoutes(routesConfig);
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(routeElements);
+          const {
+            query
+          } = createStaticHandler(routes);
+          const remixRequest = createFetchRequest(request);
+          const routerContext = await query(remixRequest);
+          if (routerContext instanceof Response) {
+            // 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) => {
+          // can not get routes config, skip wrapping React Router.
+          // e.g. App.tsx as the entrypoint
+          if (!routesConfig) {
+            return next({
+              App
+            });
+          }
+          const getRouteApp = () => {
+            return props => {
+              const {
+                router,
+                routerContext
+              } = useContext(RuntimeReactContext);
+              return /*#__PURE__*/_jsx(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/_jsx(StaticRouterProvider, {
+                  router: router,
+                  context: routerContext,
+                  nonce: "the-nonce"
+                })
+              }));
+            };
+          };
+          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/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,85 +1,131 @@
 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; }
-
-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; }
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React from 'react';
-import { Route, matchPath } from 'react-router-dom';
+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";
-export function renderRoutes(routesConfig, extraProps = {}) {
+const renderNestedRoute = (nestedRoute, parent) => {
+  const {
+    children,
+    index,
+    id,
+    component: Component
+  } = nestedRoute;
+  const childElements = children === null || children === void 0 ? void 0 : children.map(childRoute => {
+    return renderNestedRoute(childRoute, nestedRoute);
+  });
+  const routeProps = {
+    caseSensitive: nestedRoute.caseSensitive,
+    path: nestedRoute.path,
+    id: nestedRoute.id,
+    loader: nestedRoute.loader,
+    action: nestedRoute.action,
+    hasErrorBoundary: nestedRoute.hasErrorBoundary,
+    shouldRevalidate: nestedRoute.shouldRevalidate,
+    handle: nestedRoute.handle,
+    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;
+      element = /*#__PURE__*/_jsx(Suspense, {
+        fallback: /*#__PURE__*/_jsx(Loading, {}),
+        children: /*#__PURE__*/_jsx(Component, {})
+      });
+    } else {
+      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), {}, {
+    index: false,
+    children: childElements
+  }), id);
+  return routeElement;
+};
+export function getRouteComponents(routes, globalApp) {
   const Layout = _ref => {
     let {
-      Component
-    } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded);
-
-    const GlobalLayout = routesConfig === null || routesConfig === void 0 ? void 0 : routesConfig.globalApp;
-
+        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 findMatchedRoute = pathname => {
-    var _routesConfig$routes;
-
-    return routesConfig === null || routesConfig === void 0 ? void 0 : (_routesConfig$routes = routesConfig.routes) === null || _routesConfig$routes === void 0 ? void 0 : _routesConfig$routes.find(route => {
-      const info = matchPath(pathname, {
+  const routeElements = [];
+  for (const route of routes) {
+    if (route.type === 'nested') {
+      const routeElement = renderNestedRoute(route);
+      routeElements.push(routeElement);
+    } else {
+      const routeElement = /*#__PURE__*/_jsx(Route, {
         path: route.path,
-        exact: route.exact,
-        sensitive: route.sensitive
-      });
-      return Boolean(info);
-    });
-  };
-
-  return /*#__PURE__*/_jsx(Route, {
-    path: "/",
-    render: props => {
-      const matchedRoute = findMatchedRoute(props.location.pathname);
-
-      if (!matchedRoute) {
-        return /*#__PURE__*/_jsx(DefaultNotFound, {});
-      }
-
-      return /*#__PURE__*/_jsx(Route, {
-        path: matchedRoute.path,
-        exact: matchedRoute.exact,
-        sensitive: matchedRoute.sensitive,
-        render: routeProps => /*#__PURE__*/_jsx(Layout, _objectSpread(_objectSpread({
-          Component: matchedRoute.component
-        }, routeProps), extraProps))
-      });
+        element: /*#__PURE__*/_jsx(Layout, {
+          Component: route.component
+        })
+      }, route.path);
+      routeElements.push(routeElement);
     }
-  });
+  }
+  routeElements.push( /*#__PURE__*/_jsx(Route, {
+    path: "*",
+    element: /*#__PURE__*/_jsx(DefaultNotFound, {})
+  }, "*"));
+  return routeElements;
+}
+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) => {
@@ -89,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

@@ -0,0 +1,20 @@
+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";
+export const withRouter = Component => {
+  return props => {
+    const location = useLocation();
+    const params = useParams();
+    const navigate = useNavigate();
+    return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+      location: location,
+      params: params,
+      navigate: navigate
+    }));
+  };
+};

package/dist/js/modern/runtime-context.js

@@ -1,2 +1,3 @@
 import { createContext } from 'react';
-export const RuntimeReactContext = /*#__PURE__*/createContext({});
+export const RuntimeReactContext = /*#__PURE__*/createContext({});
+export const ServerRouterContext = /*#__PURE__*/createContext({});