@modern-js/runtime 2.0.0-beta.3 → 2.0.0-canary.1

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

@@ -1,4 +1,5 @@
 import { routerPlugin } from "./plugin";
 export default routerPlugin;
+export { modifyRoutes } from "./plugin";
 export * from 'react-router-dom';
 export * from "./withRouter";

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

@@ -6,6 +6,23 @@ import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFrom
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { renderRoutes, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
+// eslint-disable-next-line import/no-mutable-exports
+export let finalRouteConfig = {
+  routes: []
+};
+// eslint-disable-next-line import/no-mutable-exports
+export let beforeRenderRouter = true;
+export function modifyRoutes(modifyFunction) {
+  if (beforeRenderRouter) {
+    const {
+      routes: originRoutes
+    } = finalRouteConfig;
+    const newRoutes = modifyFunction(originRoutes);
+    finalRouteConfig.routes = newRoutes;
+  } else {
+    console.error('it is not allowed to modify routes config after router render.');
+  }
+}
 export const routerPlugin = ({
   serverBase: _serverBase = [],
   supportHtml5History: _supportHtml5History = true,
@@ -14,6 +31,7 @@ export const routerPlugin = ({
   createRoutes
 }) => {
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
+  finalRouteConfig = routesConfig;
   return {
     name: '@modern-js/plugin-router',
     setup: () => {
@@ -23,7 +41,7 @@ export const routerPlugin = ({
         }, next) => {
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig && !createRoutes) {
+          if (!finalRouteConfig && !createRoutes) {
             return next({
               App
             });
@@ -31,7 +49,8 @@ export const routerPlugin = ({
           const getRouteApp = () => {
             return props => {
               var _window$_SERVER_DATA;
-              const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+              beforeRenderRouter = true;
+              const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
               const baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === '/' ? urlJoin(baseUrl, _basename2) : baseUrl;
               const router = _supportHtml5History ? createBrowserRouter(routes, {

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

@@ -29,6 +29,7 @@ const renderNestedRoute = (nestedRoute, parent) => {
     shouldRevalidate: nestedRoute.shouldRevalidate,
     handle: nestedRoute.handle,
     index: nestedRoute.index,
+    element: nestedRoute.element,
     errorElement: nestedRoute.errorElement
   };
   if (nestedRoute.error) {
@@ -55,7 +56,9 @@ const renderNestedRoute = (nestedRoute, parent) => {
       children: element
     });
   }
-  routeProps.element = element;
+  if (element) {
+    routeProps.element = element;
+  }
   const routeElement = index ? /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {
     index: true
   }), id) : /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {

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

@@ -40,11 +40,14 @@ function getHeadTemplate(beforeEntryTemplate, context) {
         }
         const routeId = match.route.id;
         if (routeId) {
-          const {
-            assets = []
-          } = routeAssets[routeId];
-          const _cssChunks = assets.filter(asset => asset === null || asset === void 0 ? void 0 : asset.endsWith('.css'));
-          cssChunks.push(..._cssChunks);
+          const routeManifest = routeAssets[routeId];
+          if (routeManifest) {
+            const {
+              assets = []
+            } = routeManifest;
+            const _cssChunks = assets.filter(asset => asset === null || asset === void 0 ? void 0 : asset.endsWith('.css'));
+            cssChunks.push(..._cssChunks);
+          }
         }
       });
       const styleLinks = cssChunks.map(chunk => {

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

@@ -3,8 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  modifyRoutes: true
+};
 exports.default = void 0;
+Object.defineProperty(exports, "modifyRoutes", {
+  enumerable: true,
+  get: function () {
+    return _plugin.modifyRoutes;
+  }
+});
 var _plugin = require("./plugin");
 var _reactRouterDom = require("react-router-dom");
 Object.keys(_reactRouterDom).forEach(function (key) {

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

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.finalRouteConfig = exports.beforeRenderRouter = void 0;
+exports.modifyRoutes = modifyRoutes;
 exports.routerPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
@@ -13,6 +15,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
+// eslint-disable-next-line import/no-mutable-exports
+let finalRouteConfig = {
+  routes: []
+};
+// eslint-disable-next-line import/no-mutable-exports
+exports.finalRouteConfig = finalRouteConfig;
+let beforeRenderRouter = true;
+exports.beforeRenderRouter = beforeRenderRouter;
+function modifyRoutes(modifyFunction) {
+  if (beforeRenderRouter) {
+    const {
+      routes: originRoutes
+    } = finalRouteConfig;
+    const newRoutes = modifyFunction(originRoutes);
+    finalRouteConfig.routes = newRoutes;
+  } else {
+    console.error('it is not allowed to modify routes config after router render.');
+  }
+}
 const routerPlugin = ({
   serverBase: _serverBase = [],
   supportHtml5History: _supportHtml5History = true,
@@ -21,6 +42,7 @@ const routerPlugin = ({
   createRoutes
 }) => {
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
+  exports.finalRouteConfig = finalRouteConfig = routesConfig;
   return {
     name: '@modern-js/plugin-router',
     setup: () => {
@@ -30,7 +52,7 @@ const routerPlugin = ({
         }, next) => {
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig && !createRoutes) {
+          if (!finalRouteConfig && !createRoutes) {
             return next({
               App
             });
@@ -38,7 +60,8 @@ const routerPlugin = ({
           const getRouteApp = () => {
             return props => {
               var _window$_SERVER_DATA;
-              const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)((0, _utils.renderRoutes)(routesConfig));
+              exports.beforeRenderRouter = beforeRenderRouter = true;
+              const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)((0, _utils.renderRoutes)(finalRouteConfig));
               const baseUrl = ((_window$_SERVER_DATA = window._SERVER_DATA) === null || _window$_SERVER_DATA === void 0 ? void 0 : _window$_SERVER_DATA.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === '/' ? (0, _utils.urlJoin)(baseUrl, _basename2) : baseUrl;
               const router = _supportHtml5History ? (0, _reactRouterDom.createBrowserRouter)(routes, {

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

@@ -41,6 +41,7 @@ const renderNestedRoute = (nestedRoute, parent) => {
     shouldRevalidate: nestedRoute.shouldRevalidate,
     handle: nestedRoute.handle,
     index: nestedRoute.index,
+    element: nestedRoute.element,
     errorElement: nestedRoute.errorElement
   };
   if (nestedRoute.error) {
@@ -67,7 +68,9 @@ const renderNestedRoute = (nestedRoute, parent) => {
       children: element
     });
   }
-  routeProps.element = element;
+  if (element) {
+    routeProps.element = element;
+  }
   const routeElement = index ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, _objectSpread(_objectSpread({}, routeProps), {}, {
     index: true
   }), id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, _objectSpread(_objectSpread({}, routeProps), {}, {

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

@@ -47,11 +47,14 @@ function getHeadTemplate(beforeEntryTemplate, context) {
         }
         const routeId = match.route.id;
         if (routeId) {
-          const {
-            assets = []
-          } = routeAssets[routeId];
-          const _cssChunks = assets.filter(asset => asset === null || asset === void 0 ? void 0 : asset.endsWith('.css'));
-          cssChunks.push(..._cssChunks);
+          const routeManifest = routeAssets[routeId];
+          if (routeManifest) {
+            const {
+              assets = []
+            } = routeManifest;
+            const _cssChunks = assets.filter(asset => asset === null || asset === void 0 ? void 0 : asset.endsWith('.css'));
+            cssChunks.push(..._cssChunks);
+          }
         }
       });
       const styleLinks = cssChunks.map(chunk => {

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

@@ -1,4 +1,5 @@
 import { routerPlugin } from "./plugin";
 export default routerPlugin;
+export { modifyRoutes } from "./plugin";
 export * from 'react-router-dom';
 export * from "./withRouter";

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

@@ -4,6 +4,22 @@ import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFrom
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { renderRoutes, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
+// eslint-disable-next-line import/no-mutable-exports
+export var finalRouteConfig = {
+  routes: []
+};
+// eslint-disable-next-line import/no-mutable-exports
+export var beforeRenderRouter = true;
+export function modifyRoutes(modifyFunction) {
+  if (beforeRenderRouter) {
+    var _finalRouteConfig = finalRouteConfig,
+      originRoutes = _finalRouteConfig.routes;
+    var newRoutes = modifyFunction(originRoutes);
+    finalRouteConfig.routes = newRoutes;
+  } else {
+    console.error('it is not allowed to modify routes config after router render.');
+  }
+}
 export var routerPlugin = function routerPlugin(_ref) {
   var _ref$serverBase = _ref.serverBase,
     serverBase = _ref$serverBase === void 0 ? [] : _ref$serverBase,
@@ -18,6 +34,7 @@ export var routerPlugin = function routerPlugin(_ref) {
       return pathname.search(baseUrl) === 0;
     }) || '/';
   };
+  finalRouteConfig = routesConfig;
   return {
     name: '@modern-js/plugin-router',
     setup: function setup() {
@@ -26,7 +43,7 @@ export var routerPlugin = function routerPlugin(_ref) {
           var App = _ref2.App;
           // can not get routes config, skip wrapping React Router.
           // e.g. App.tsx as the entrypoint
-          if (!routesConfig && !createRoutes) {
+          if (!finalRouteConfig && !createRoutes) {
             return next({
               App: App
             });
@@ -34,7 +51,8 @@ export var routerPlugin = function routerPlugin(_ref) {
           var getRouteApp = function getRouteApp() {
             return function (props) {
               var _window$_SERVER_DATA;
-              var routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+              beforeRenderRouter = true;
+              var routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
               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 router = supportHtml5History ? createBrowserRouter(routes, {

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

@@ -25,6 +25,7 @@ var renderNestedRoute = function renderNestedRoute(nestedRoute, parent) {
     shouldRevalidate: nestedRoute.shouldRevalidate,
     handle: nestedRoute.handle,
     index: nestedRoute.index,
+    element: nestedRoute.element,
     errorElement: nestedRoute.errorElement
   };
   if (nestedRoute.error) {
@@ -51,7 +52,9 @@ var renderNestedRoute = function renderNestedRoute(nestedRoute, parent) {
       children: element
     });
   }
-  routeProps.element = element;
+  if (element) {
+    routeProps.element = element;
+  }
   var routeElement = index ? /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {
     index: true
   }), id) : /*#__PURE__*/_jsx(Route, _objectSpread(_objectSpread({}, routeProps), {}, {

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

@@ -41,12 +41,15 @@ function getHeadTemplate(beforeEntryTemplate, context) {
         }
         var routeId = match.route.id;
         if (routeId) {
-          var _routeAssets$routeId$ = routeAssets[routeId].assets,
-            assets = _routeAssets$routeId$ === void 0 ? [] : _routeAssets$routeId$;
-          var _cssChunks = assets.filter(function (asset) {
-            return asset === null || asset === void 0 ? void 0 : asset.endsWith('.css');
-          });
-          cssChunks.push.apply(cssChunks, _toConsumableArray(_cssChunks));
+          var _routeManifest = routeAssets[routeId];
+          if (_routeManifest) {
+            var _routeManifest$assets = _routeManifest.assets,
+              assets = _routeManifest$assets === void 0 ? [] : _routeManifest$assets;
+            var _cssChunks = assets.filter(function (asset) {
+              return asset === null || asset === void 0 ? void 0 : asset.endsWith('.css');
+            });
+            cssChunks.push.apply(cssChunks, _toConsumableArray(_cssChunks));
+          }
         }
       });
       var styleLinks = cssChunks.map(function (chunk) {

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

@@ -2,5 +2,6 @@ import { routerPlugin } from './plugin';
 import type { SingleRouteConfig, RouterConfig } from './types';
 export type { SingleRouteConfig, RouterConfig };
 export default routerPlugin;
+export { modifyRoutes } from './plugin';
 export * from 'react-router-dom';
 export * from './withRouter';

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

@@ -1,5 +1,8 @@
 import type { Plugin } from '../../core';
-import type { RouterConfig } from './types';
+import type { RouterConfig, Routes } from './types';
+export declare let finalRouteConfig: RouterConfig['routesConfig'];
+export declare let beforeRenderRouter: boolean;
+export declare function modifyRoutes(modifyFunction: (routes: Routes) => Routes): void;
 export declare const routerPlugin: ({
   serverBase,
   supportHtml5History,

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

@@ -34,4 +34,5 @@ export declare type RouterConfig = {
   supportHtml5History?: boolean;
   basename?: string;
   createRoutes?: () => RouteObject[];
-};
+};
+export declare type Routes = RouterConfig['routesConfig']['routes'];

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-canary.1",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -53,6 +53,11 @@
       "node": "./dist/js/node/document/index.js",
       "default": "./dist/js/treeshaking/document/index.js"
     },
+    "./document/cli": {
+      "jsnext:source": "./src/document/cli/index.ts",
+      "node": "./dist/js/node/document/cli/index.js",
+      "default": "./dist/js/treeshaking/document/cli/index.js"
+    },
     "./ssr": {
       "jsnext:source": "./src/ssr/index.ts",
       "node": "./dist/js/node/ssr/index",
@@ -101,6 +106,9 @@
       "document": [
         "./dist/types/document/index.d.ts"
       ],
+      "document/cli": [
+        "./dist/types/document/cli/index.d.ts"
+      ],
       "ssr": [
         "./dist/types/ssr/index.d.ts"
       ],
@@ -143,8 +151,8 @@
     "redux-logger": "^3.0.6",
     "serialize-javascript": "^6.0.0",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.0.0-beta.3",
     "@modern-js/types": "2.0.0-beta.3",
+    "@modern-js/plugin": "2.0.0-beta.3",
     "@modern-js/utils": "2.0.0-beta.3"
   },
   "peerDependencies": {
@@ -166,9 +174,9 @@
     "react-dom": "^18",
     "ts-jest": "^27.0.4",
     "typescript": "^4",
-    "@modern-js/core": "2.0.0-beta.3",
     "@modern-js/server-core": "2.0.0-beta.3",
     "@modern-js/utils": "2.0.0-beta.3",
+    "@modern-js/core": "2.0.0-beta.3",
     "@scripts/build": "2.0.0-beta.3",
     "@modern-js/app-tools": "2.0.0-beta.3",
     "@scripts/jest-config": "2.0.0-beta.3"