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

package/dist/js/modern/ssr/serverRender/utils.js

@@ -0,0 +1,24 @@
+export function getLoadableScripts(extractor) {
+  const check = scripts => (scripts || '').includes('__LOADABLE_REQUIRED_CHUNKS___ext');
+
+  const scripts = extractor.getScriptTags();
+
+  if (!check(scripts)) {
+    return '';
+  }
+
+  return scripts.split('</script>') // 前两个 script为 loadable 必须的 script
+  .slice(0, 2).map(i => `${i}</script>`).join('');
+}
+
+const getLatency = hrtime => {
+  const [s, ns] = process.hrtime(hrtime);
+  return s * 1e3 + ns / 1e6;
+};
+
+export const time = () => {
+  const hrtime = process.hrtime();
+  return () => {
+    return getLatency(hrtime);
+  };
+};

package/dist/js/modern/ssr/utils.js

@@ -4,6 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+export const isReact18 = () => process.env.IS_REACT18 === 'true';
 export const formatServer = request => {
   const {
     cookie = '',
@@ -46,16 +47,21 @@ export const formatClient = request => {
 export const mockResponse = () => {
   return {
     setHeader() {
-      console.info('setHeader can only be used in the server side');
+      console.warn('response.setHeader() can only be used in the server side');
     },
 
     status() {
-      console.info('status can only be used in the server side');
+      console.warn('response.status() can only be used in the server side');
+    },
+
+    get locals() {
+      console.warn('response.locals can only be used in the server side');
+      return {};
     }
 
   };
 };
-export const isCrossOrigin = (url, base) => {
+export const isCrossOrigin = (url = '', base) => {
   if (url.startsWith('/') || url.startsWith('./')) {
     return false;
   } else if (!url.includes(base)) {

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

@@ -20,7 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = () => ({
   name: '@modern-js/runtime',
   post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
-  usePlugins: [(0, _cli.default)(), (0, _cli3.default)(), (0, _cli2.default)()],
+  usePlugins: [(0, _cli.default)(), (0, _cli2.default)(), (0, _cli3.default)()],
   setup: api => {
     return {
       config() {

package/dist/js/node/core/index.js

@@ -11,7 +11,8 @@ var _exportNames = {
   registerPrefetch: true,
   defineConfig: true,
   getConfig: true,
-  RuntimeReactContext: true
+  RuntimeReactContext: true,
+  ServerRouterContext: true
 };
 Object.defineProperty(exports, "RuntimeReactContext", {
   enumerable: true,
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "RuntimeReactContext", {
     return _runtimeContext.RuntimeReactContext;
   }
 });
+Object.defineProperty(exports, "ServerRouterContext", {
+  enumerable: true,
+  get: function () {
+    return _runtimeContext.ServerRouterContext;
+  }
+});
 Object.defineProperty(exports, "createPlugin", {
   enumerable: true,
   get: function () {

package/dist/js/node/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "defineConfig", {
     return _core.defineConfig;
   }
 });
+Object.defineProperty(exports, "isBrowser", {
+  enumerable: true,
+  get: function () {
+    return _common.isBrowser;
+  }
+});
 Object.defineProperty(exports, "registerInit", {
   enumerable: true,
   get: function () {
@@ -58,4 +64,6 @@ Object.defineProperty(exports, "useRuntimeContext", {
   }
 });
 
+var _common = require("./common");
+
 var _core = require("./core");

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

@@ -43,11 +43,14 @@ var _default = () => ({
         entrypoint,
         imports
       }) {
+        var _userConfig$runtime, _userConfig$runtime$r;
+
         const {
           entryName,
           fileSystemRoutes
         } = entrypoint;
         const userConfig = api.useResolvedConfigContext();
+        const isLegacy = Boolean(userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$runtime = userConfig.runtime) === null || _userConfig$runtime === void 0 ? void 0 : (_userConfig$runtime$r = _userConfig$runtime.router) === null || _userConfig$runtime$r === void 0 ? void 0 : _userConfig$runtime$r.legacy);
         const {
           packageName
         } = api.useAppContext();
@@ -55,12 +58,14 @@ var _default = () => ({
         runtimeConfigMap.set(entryName, runtimeConfig);
 
         if (runtimeConfig !== null && runtimeConfig !== void 0 && runtimeConfig.router) {
-          imports.push({
-            value: '@modern-js/runtime/plugins',
-            specifiers: [{
-              imported: PLUGIN_IDENTIFIER
-            }]
-          });
+          if (!isLegacy) {
+            imports.push({
+              value: '@modern-js/runtime/plugins',
+              specifiers: [{
+                imported: PLUGIN_IDENTIFIER
+              }]
+            });
+          }
         } else if (fileSystemRoutes) {
           throw new Error(`should enable runtime.router for entry ${entryName}`);
         }
@@ -75,6 +80,8 @@ var _default = () => ({
         entrypoint,
         plugins
       }) {
+        var _userConfig$runtime2, _userConfig$runtime2$;
+
         const {
           entryName,
           fileSystemRoutes
@@ -82,9 +89,11 @@ var _default = () => ({
         const {
           serverRoutes
         } = api.useAppContext();
+        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) {
+        if (runtimeConfig.router && !isLegacy) {
           // Todo: plugin-router best to only handle manage client route.
           // here support base server route usage, part for compatibility
           const serverBase = serverRoutes.filter(route => route.entryName === entryName).map(route => route.urlPath).sort((a, b) => a.length - b.length > 0 ? -1 : 1);
@@ -105,7 +114,14 @@ var _default = () => ({
       },
 
       addRuntimeExports() {
-        pluginsExportsUtils.addExport(`export { default as router } from '@modern-js/runtime/router'`);
+        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'`);
+        }
       }
 
     };

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

@@ -22,16 +22,16 @@ Object.keys(_reactRouterDom).forEach(function (key) {
   });
 });
 
-var _history = require("history");
+var _withRouter = require("./withRouter");
 
-Object.keys(_history).forEach(function (key) {
+Object.keys(_withRouter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _history[key]) return;
+  if (key in exports && exports[key] === _withRouter[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _history[key];
+      return _withRouter[key];
     }
   });
 });

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

@@ -5,28 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.routerPlugin = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _history = require("history");
+var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
-var _core = require("../../core");
-
-var _common = require("../../common");
-
 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; }
@@ -35,13 +25,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 const routerPlugin = ({
   serverBase: _serverBase = [],
-  history: customHistory,
   supportHtml5History: _supportHtml5History = true,
   routesConfig,
-  historyOptions: _historyOptions = {}
+  createRoutes
 }) => {
-  const isBrow = (0, _common.isBrowser)();
-
   const select = pathname => _serverBase.find(baseUrl => pathname.search(baseUrl) === 0) || '/';
 
   return {
@@ -51,49 +38,37 @@ 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 = (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);
-              _historyOptions.basename = baseUrl === '/' ? (0, _utils.urlJoin)(baseUrl, _historyOptions.basename) : baseUrl;
-              const history = customHistory || (_supportHtml5History ? (0, _history.createBrowserHistory)(_historyOptions) : (0, _history.createHashHistory)(_historyOptions));
-              return props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Router, {
-                history: history,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, props), {}, {
-                  children: routesConfig ? (0, _utils.renderRoutes)(routesConfig, props) : null
-                }))
-              });
-            }
-
-            return props => {
-              const runtimeContext = (0, _react.useContext)(_core.RuntimeReactContext);
-              const {
-                ssrContext
-              } = runtimeContext;
-              const location = (0, _utils.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 === '/' ? (0, _utils.urlJoin)(baseUrl, _historyOptions.basename) : baseUrl;
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.StaticRouter, {
-                basename: basename === '/' ? '' : basename,
-                location: location,
-                context: routerContext,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, props), {}, {
-                  children: routesConfig ? (0, _utils.renderRoutes)(routesConfig, props) : null
-                }))
+              const router = _supportHtml5History ? (0, _reactRouterDom.createBrowserRouter)(routes, {
+                basename: baseUrl
+              }) : (0, _reactRouterDom.createHashRouter)(routes, {
+                basename: baseUrl
               });
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.RouterProvider, {
+                  router: router
+                })
+              }));
             };
           };
 
-          let RouteApp = getRouteApp();
-
-          if (App) {
-            RouteApp = (0, _hoistNonReactStatics.default)(RouteApp, App);
-          }
+          const RouteApp = getRouteApp();
 
-          if (routesConfig !== null && routesConfig !== void 0 && routesConfig.globalApp) {
+          if (routesConfig.globalApp) {
             return next({
               App: (0, _hoistNonReactStatics.default)(RouteApp, routesConfig.globalApp)
             });

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

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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
+
+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);
+}
+
+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;
+}
+
+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 = (0, _utils.renderRoutes)(routesConfig);
+          const routes = createRoutes ? createRoutes() : (0, _reactRouterDom.createRoutesFromElements)(routeElements);
+          const {
+            query
+          } = (0, _router.unstable_createStaticHandler)(routes);
+          const remixRequest = createFetchRequest(request);
+          const routerContext = await query(remixRequest);
+
+          if (routerContext instanceof Response) {
+            // TODO: resolve repsonse ?
+            return next({
+              context
+            });
+          }
+
+          const router = (0, _server.unstable_createStaticRouter)(routes, routerContext);
+          context.router = router;
+          context.routerContext = routerContext;
+          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
+              } = (0, _react.useContext)(_core.RuntimeReactContext);
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, props), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_server.unstable_StaticRouterProvider, {
+                  router: router,
+                  context: routerContext,
+                  nonce: "the-nonce"
+                })
+              }));
+            };
+          };
+
+          const RouteApp = getRouteApp();
+
+          if (routesConfig.globalApp) {
+            return next({
+              App: (0, _hoistNonReactStatics.default)(RouteApp, routesConfig.globalApp)
+            });
+          }
+
+          return next({
+            App: RouteApp
+          });
+        }
+      };
+    }
+  };
+};
+
+exports.routerPlugin = routerPlugin;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});