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

package/dist/js/node/exports/styled.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {};
 exports.default = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 Object.keys(_styledComponents).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -19,10 +17,7 @@ Object.keys(_styledComponents).forEach(function (key) {
     }
   });
 });
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = _styledComponents.default;
 exports.default = _default;

package/dist/js/node/index.js

@@ -45,12 +45,6 @@ Object.defineProperty(exports, "registerInit", {
     return _core.registerInit;
   }
 });
-Object.defineProperty(exports, "registerPrefetch", {
-  enumerable: true,
-  get: function () {
-    return _core.registerPrefetch;
-  }
-});
 Object.defineProperty(exports, "useLoader", {
   enumerable: true,
   get: function () {
@@ -63,7 +57,5 @@ Object.defineProperty(exports, "useRuntimeContext", {
     return _core.useRuntimeContext;
   }
 });
-
 var _common = require("./common");
-
 var _core = require("./core");

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

@@ -4,18 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _utils = require("@modern-js/utils");
-
 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; }
-
 const PLUGIN_IDENTIFIER = 'router';
 const ROUTES_IDENTIFIER = 'routes';
-
 var _default = () => ({
   name: '@modern-js/plugin-router',
   required: ['@modern-js/runtime'],
@@ -34,17 +28,14 @@ var _default = () => ({
           }
         };
       },
-
       validateSchema() {
         return _utils.PLUGIN_SCHEMAS['@modern-js/plugin-router'];
       },
-
       modifyEntryImports({
         entrypoint,
         imports
       }) {
         var _userConfig$runtime, _userConfig$runtime$r;
-
         const {
           entryName,
           fileSystemRoutes
@@ -56,7 +47,6 @@ var _default = () => ({
         } = api.useAppContext();
         const runtimeConfig = (0, _utils.getEntryOptions)(entryName, userConfig.runtime, userConfig.runtimeByEntries, packageName);
         runtimeConfigMap.set(entryName, runtimeConfig);
-
         if (runtimeConfig !== null && runtimeConfig !== void 0 && runtimeConfig.router) {
           if (!isLegacy) {
             imports.push({
@@ -69,19 +59,16 @@ var _default = () => ({
         } else if (fileSystemRoutes) {
           throw new Error(`should enable runtime.router for entry ${entryName}`);
         }
-
         return {
           entrypoint,
           imports
         };
       },
-
       modifyEntryRuntimePlugins({
         entrypoint,
         plugins
       }) {
         var _userConfig$runtime2, _userConfig$runtime2$;
-
         const {
           entryName,
           fileSystemRoutes
@@ -92,7 +79,6 @@ var _default = () => ({
         const userConfig = api.useResolvedConfigContext();
         const isLegacy = Boolean(userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$runtime2 = userConfig.runtime) === null || _userConfig$runtime2 === void 0 ? void 0 : (_userConfig$runtime2$ = _userConfig$runtime2.router) === null || _userConfig$runtime2$ === void 0 ? void 0 : _userConfig$runtime2$.legacy);
         const runtimeConfig = runtimeConfigMap.get(entryName);
-
         if (runtimeConfig.router && !isLegacy) {
           // Todo: plugin-router best to only handle manage client route.
           // here support base server route usage, part for compatibility
@@ -106,26 +92,20 @@ var _default = () => ({
             })).replace(/"routesConfig"\s*:\s*"((\S|\s)+)"/g, '"routesConfig": $1,')
           });
         }
-
         return {
           entrypoint,
           plugins
         };
       },
-
       addRuntimeExports() {
         var _userConfig$runtime3, _userConfig$runtime3$;
-
         const userConfig = api.useResolvedConfigContext();
         const isLegacy = Boolean(userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$runtime3 = userConfig.runtime) === null || _userConfig$runtime3 === void 0 ? void 0 : (_userConfig$runtime3$ = _userConfig$runtime3.router) === null || _userConfig$runtime3$ === void 0 ? void 0 : _userConfig$runtime3$.legacy);
-
         if (!isLegacy) {
           pluginsExportsUtils.addExport(`export { default as router } from '@modern-js/runtime/router'`);
         }
       }
-
     };
   }
 });
-
 exports.default = _default;

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

@@ -18,9 +18,7 @@ Object.defineProperty(exports, "router", {
     return _runtime.default;
   }
 });
-
 var _runtime = _interopRequireWildcard(require("./runtime"));
-
 Object.keys(_runtime).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -32,7 +30,5 @@ Object.keys(_runtime).forEach(function (key) {
     }
   });
 });
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultNotFound = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 const DefaultNotFound = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   style: {
     margin: '150px auto',
@@ -22,5 +19,4 @@ const DefaultNotFound = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   },
   children: "404"
 });
-
 exports.DefaultNotFound = DefaultNotFound;

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

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {};
 exports.default = void 0;
-
 var _plugin = require("./plugin");
-
 var _reactRouterDom = require("react-router-dom");
-
 Object.keys(_reactRouterDom).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -21,9 +18,7 @@ Object.keys(_reactRouterDom).forEach(function (key) {
     }
   });
 });
-
 var _withRouter = require("./withRouter");
-
 Object.keys(_withRouter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;

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

@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.routerPlugin = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactRouterDom = require("react-router-dom");
-
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
-
 var _utils = require("./utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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; }
-
 const routerPlugin = ({
   serverBase: _serverBase = [],
   supportHtml5History: _supportHtml5History = true,
@@ -30,7 +20,6 @@ const routerPlugin = ({
   createRoutes
 }) => {
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
-
   return {
     name: '@modern-js/plugin-router',
     setup: () => {
@@ -45,11 +34,9 @@ const routerPlugin = ({
               App
             });
           }
-
           const getRouteApp = () => {
             return props => {
               var _window$_SERVER_DATA;
-
               const routeElements = (0, _utils.renderRoutes)(routesConfig);
               const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.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);
@@ -65,15 +52,12 @@ const routerPlugin = ({
               }));
             };
           };
-
           const RouteApp = getRouteApp();
-
           if (routesConfig.globalApp) {
             return next({
               App: (0, _hoistNonReactStatics.default)(RouteApp, routesConfig.globalApp)
             });
           }
-
           return next({
             App: RouteApp
           });
@@ -82,5 +66,4 @@ const routerPlugin = ({
     }
   };
 };
-
 exports.routerPlugin = routerPlugin;

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

@@ -5,46 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createFetchHeaders = createFetchHeaders;
 exports.routerPlugin = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _router = require("@remix-run/router");
-
 var _server = require("react-router-dom/server");
-
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
-
 var _node = require("@remix-run/node");
-
 var _reactRouterDom = require("react-router-dom");
-
 var _core = require("../../core");
-
 var _utils = require("./utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; }
-
 // Polyfill Web Fetch API
-(0, _node.installGlobals)(); // TODO: polish
+(0, _node.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();
   // });
 
@@ -52,16 +39,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);
 }
-
 function createFetchHeaders(requestHeaders) {
   const headers = new Headers();
-
   for (const [key, values] of Object.entries(requestHeaders)) {
     if (values) {
       if (Array.isArray(values)) {
@@ -73,10 +60,8 @@ function createFetchHeaders(requestHeaders) {
       }
     }
   }
-
   return headers;
 }
-
 const routerPlugin = ({
   routesConfig,
   createRoutes
@@ -95,7 +80,6 @@ const routerPlugin = ({
               context
             });
           }
-
           const {
             request
           } = context.ssrContext;
@@ -106,22 +90,21 @@ const routerPlugin = ({
           } = (0, _router.unstable_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 = (0, _server.unstable_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) => {
@@ -132,7 +115,6 @@ const routerPlugin = ({
               App
             });
           }
-
           const getRouteApp = () => {
             return props => {
               const {
@@ -148,15 +130,12 @@ const routerPlugin = ({
               }));
             };
           };
-
           const RouteApp = getRouteApp();
-
           if (routesConfig.globalApp) {
             return next({
               App: (0, _hoistNonReactStatics.default)(RouteApp, routesConfig.globalApp)
             });
           }
-
           return next({
             App: RouteApp
           });
@@ -165,5 +144,4 @@ const routerPlugin = ({
     }
   };
 };
-
 exports.routerPlugin = routerPlugin;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RootLayout = RootLayout;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _core = require("../../../core");
+var _load = require("./load");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function RootLayout(props) {
+  const location = (0, _reactRouterDom.useLocation)();
+  const context = (0, _react.useContext)(_core.RuntimeReactContext);
+  (0, _react.useEffect)(() => {
+    const {
+      routes
+    } = props;
+    (0, _load.handleLoad)(routes, location, context.routeManifest);
+  }, [location]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: props.children
+  });
+}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleLoad = handleLoad;
+exports.loadRouteModule = loadRouteModule;
+exports.matchClientRoutes = matchClientRoutes;
+var _reactRouterDom = require("react-router-dom");
+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; }
+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);
+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));
+}
+function matchClientRoutes(routes, location) {
+  const matches = (0, _reactRouterDom.matchRoutes)(routes, location);
+  return matches;
+}
+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);
+  }
+}