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

package/CHANGELOG.md

@@ -1,5 +1,163 @@
 # @modern-js/runtime
 
+## 2.0.0-beta.2
+
+### Major Changes
+
+- dda38c9c3e: chore: v2
+
+### Minor Changes
+
+- c9e800d39a: feat: support React18 streaming SSR
+  feat: 支持 React18 流式 SSR
+- 543be9558e: feat: compile server loader and support handle loader request
+  feat: 编译 server loader 并支持处理 loader 的请求
+
+### Patch Changes
+
+- 2344eb2: fix: bootstrap function params type define
+
+  fix: 修复 bootstrap 函数参数类型定义
+
+- a11fcf8: feat: fallback logic of streaming ssr
+  feat: streaming ssr 降级逻辑
+- b18fa8f3ed: feat: remove @loadable/component in streaming ssr
+  feat: 移除 streaming ssr 中的 @loadable/component 逻辑
+- 3e57f2b: feat: add document feature with plugin
+
+  feat: 增加 document 功能插件
+
+- fbf5eed: fix: fix ssg failure due to lack of Web Response API
+  fix: 修复因为缺少 Web Response API 而导致 ssg 失败
+- a2509bfbdb: feat: bump esbuild from 0.14.38 to 0.15.7
+
+  feat: 将 esbuild 从 0.14.38 版本升级至 0.15.7 版本
+
+- e4357f1: fix: change default document file and name
+
+  fix: 重置默认的 document 文件和文件名
+
+- 4369648ae2: fix: fix html template of streaming ssr
+  fix: 修复流式渲染的 html 模版
+- 92c0994: chore: remove `registerPrefetch`
+  chore: 移除 `registerPrefetch`
+- 6bda14ed71: feat: refactor router with react-router@6.4
+
+  feat: 使用 react-router@6.4 重构路由模块
+
+- 92004d1: feat: support load chunks parallelly
+  feat: 支持并行加载 chunks
+- 40ed587: feat: inject css chunk into html for streaming ssr
+  feat: streaming ssr 返回的 html 注入 css chunk
+- 60d5378632: fix: function extname should not return array
+  fix: 函数 extname 不应该返回一个数组
+- 8b8e1bb571: feat: support nested routes
+  feat: 支持嵌套路由
+- 3bbea92b2a: feat: support Hook、Middleware new API
+  feat: 支持 Hook、Middleware 的新 API
+- 18aaf42: fix: fix server loader redirects
+  fix: 修复 server loader 重定向错误
+- fcace5b5b9: fix: remove overmuch `@modernjs/utils` dependency import in ssr runtime & SSR hydrate error
+  fix: 去除 ssr 运行时过多的 `@modernjs/utils` 依赖引入 & SSR hydrate 错误
+- Updated dependencies [92f0ead]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [cc971eabfc]
+- Updated dependencies [5b9049f2e9]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [92004d1]
+- Updated dependencies [b8bbe036c7]
+- Updated dependencies [40ed587]
+- Updated dependencies [87c1ff8]
+- Updated dependencies [d5a31df781]
+- Updated dependencies [dda38c9c3e]
+- Updated dependencies [102d32e4ba]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [3bbea92b2a]
+- Updated dependencies [f179749]
+- Updated dependencies [abf3421a75]
+- Updated dependencies [543be9558e]
+- Updated dependencies [14b712da84]
+  - @modern-js/utils@2.0.0-beta.2
+  - @modern-js/types@2.0.0-beta.2
+  - @modern-js/plugin@2.0.0-beta.2
+
+## 2.0.0-beta.1
+
+### Major Changes
+
+- dda38c9: chore: v2
+
+### Minor Changes
+
+- c9e800d39a: feat: support React18 streaming SSR
+  feat: 支持 React18 流式 SSR
+- 543be9558e: feat: compile server loader and support handle loader request
+  feat: 编译 server loader 并支持处理 loader 的请求
+
+### Patch Changes
+
+- 2344eb2: fix: bootstrap function params type define
+
+  fix: 修复 bootstrap 函数参数类型定义
+
+- a11fcf8: feat: fallback logic of streaming ssr
+  feat: streaming ssr 降级逻辑
+- b18fa8f: feat: remove @loadable/component in streaming ssr
+  feat: 移除 streaming ssr 中的 @loadable/component 逻辑
+- 3e57f2b: feat: add document feature with plugin
+
+  feat: 增加 document 功能插件
+
+- fbf5eed: fix: fix ssg failure due to lack of Web Response API
+  fix: 修复因为缺少 Web Response API 而导致 ssg 失败
+- a2509bfbdb: feat: bump esbuild from 0.14.38 to 0.15.7
+
+  feat: 将 esbuild 从 0.14.38 版本升级至 0.15.7 版本
+
+- 4369648ae2: fix: fix html template of streaming ssr
+  fix: 修复流式渲染的 html 模版
+- 92c0994: chore: remove `registerPrefetch`
+  chore: 移除 `registerPrefetch`
+- 6bda14ed71: feat: refactor router with react-router@6.4
+
+  feat: 使用 react-router@6.4 重构路由模块
+
+- 92004d1: feat: support load chunks parallelly
+  feat: 支持并行加载 chunks
+- 40ed587: feat: inject css chunk into html for streaming ssr
+  feat: streaming ssr 返回的 html 注入 css chunk
+- 60d5378632: fix: function extname should not return array
+  fix: 函数 extname 不应该返回一个数组
+- 8b8e1bb571: feat: support nested routes
+  feat: 支持嵌套路由
+- 3bbea92b2a: feat: support Hook、Middleware new API
+  feat: 支持 Hook、Middleware 的新 API
+- 18aaf42: fix: fix server loader redirects
+  fix: 修复 server loader 重定向错误
+- fcace5b5b9: fix: remove overmuch `@modernjs/utils` dependency import in ssr runtime & SSR hydrate error
+  fix: 去除 ssr 运行时过多的 `@modernjs/utils` 依赖引入 & SSR hydrate 错误
+- Updated dependencies [92f0ead]
+- Updated dependencies [edd1cfb1af]
+- Updated dependencies [cc971eabfc]
+- Updated dependencies [5b9049f]
+- Updated dependencies [6bda14ed71]
+- Updated dependencies [92004d1]
+- Updated dependencies [b8bbe036c7]
+- Updated dependencies [40ed587]
+- Updated dependencies [87c1ff8]
+- Updated dependencies [d5a31df781]
+- Updated dependencies [dda38c9]
+- Updated dependencies [102d32e4ba]
+- Updated dependencies [8b8e1bb571]
+- Updated dependencies [3bbea92b2a]
+- Updated dependencies [f179749]
+- Updated dependencies [abf3421]
+- Updated dependencies [543be9558e]
+- Updated dependencies [14b712d]
+  - @modern-js/utils@2.0.0-beta.1
+  - @modern-js/types@2.0.0-beta.1
+  - @modern-js/plugin@2.0.0-beta.1
+
 ## 2.0.0-beta.0
 
 ### Major Changes

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

@@ -3,10 +3,11 @@ import { PLUGIN_SCHEMAS, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
+import Document from "../document/cli";
 export default (() => ({
   name: '@modern-js/runtime',
-  post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
-  usePlugins: [PluginState(), PluginSSR(), PluginRouter()],
+  post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-document', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
+  usePlugins: [PluginState(), PluginSSR(), PluginRouter(), Document()],
   setup: api => {
     return {
       config() {
@@ -24,19 +25,18 @@ export default (() => ({
                */
               'styled-components': require.resolve('styled-components')
             },
-            envVars: ['IS_REACT18']
+            globalVars: {
+              'process.env.IS_REACT18': process.env.IS_REACT18
+            }
           }
         };
       },
-
       validateSchema() {
         return PLUGIN_SCHEMAS['@modern-js/runtime'];
       },
-
       async beforeRestart() {
         cleanRequireCache([require.resolve("../state/cli"), require.resolve("../router/cli"), require.resolve("../ssr/cli")]);
       }
-
     };
   }
 }));

package/dist/js/modern/core/app-config.js

@@ -1,5 +1,6 @@
 const APP_CONFIG_SYMBOL = 'config';
-export const getConfig = Component => // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+export const getConfig = Component =>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 Component[APP_CONFIG_SYMBOL];
 export const defineConfig = (Component, config) => {

package/dist/js/modern/core/compatible.js

@@ -1,36 +1,27 @@
 const _excluded = ["context"];
-
 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, { useContext, useMemo } from 'react';
-import defaultReactDOM from 'react-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { RuntimeReactContext } from "../runtime-context";
 import { runtime } from "./plugin";
 import { createLoaderManager } from "./loader/loaderManager";
 import { jsx as _jsx } from "react/jsx-runtime";
 const IS_REACT18 = process.env.IS_REACT18 === 'true';
-
+const ROUTE_MANIFEST = `_MODERNJS_ROUTE_MANIFEST`;
 function isClientArgs(id) {
   return typeof id === 'string' || typeof HTMLElement !== 'undefined' && id instanceof HTMLElement;
 }
-
 const runnerMap = new WeakMap();
-
 const getInitialContext = runner => ({
   loaderManager: createLoaderManager({}),
   runner,
-  isBrowser: true
+  isBrowser: true,
+  routeManifest: typeof window !== 'undefined' && window[ROUTE_MANIFEST]
 });
-
 export const createApp = ({
   plugins
 }) => {
@@ -38,7 +29,6 @@ export const createApp = ({
   appRuntime.usePlugin(...plugins);
   return App => {
     const runner = appRuntime.init();
-
     const WrapperComponent = props => {
       const element = /*#__PURE__*/React.createElement(App || React.Fragment, _objectSpread({}, props), props.children);
       const context = useContext(RuntimeReactContext);
@@ -52,11 +42,9 @@ export const createApp = ({
         }) => element
       });
     };
-
     if (App) {
       hoistNonReactStatics(WrapperComponent, App);
     }
-
     const HOCApp = runner.hoc({
       App: WrapperComponent
     }, {
@@ -65,14 +53,13 @@ export const createApp = ({
       }) => {
         const WrapComponent = _ref => {
           var _contextValue;
-
           let {
-            context
-          } = _ref,
-              props = _objectWithoutProperties(_ref, _excluded);
-
-          let contextValue = context; // We should construct the context, when root component is not passed into `bootstrap`.
+              context
+            } = _ref,
+            props = _objectWithoutProperties(_ref, _excluded);
+          let contextValue = context;
 
+          // We should construct the context, when root component is not passed into `bootstrap`.
           if (!((_contextValue = contextValue) !== null && _contextValue !== void 0 && _contextValue.runner)) {
             contextValue = getInitialContext(runner);
             runner.init({
@@ -82,18 +69,15 @@ export const createApp = ({
                 context: context1
               }) => {
                 var _App$init;
-
                 return App === null || App === void 0 ? void 0 : (_App$init = App.init) === null || _App$init === void 0 ? void 0 : _App$init.call(App, context1);
               }
             });
           }
-
           return /*#__PURE__*/_jsx(RuntimeReactContext.Provider, {
             value: contextValue,
             children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
           });
         };
-
         return hoistNonReactStatics(WrapComponent, App);
       }
     });
@@ -110,19 +94,20 @@ id,
 /**
  * root.render need use root to run function
  */
-root, ReactDOM = defaultReactDOM) => {
+root, ReactDOM
+// eslint-disable-next-line consistent-return
+) => {
   let App = BootApp;
-  let runner = runnerMap.get(App); // ensure Component used is created by `createApp`
+  let runner = runnerMap.get(App);
 
+  // ensure Component used is created by `createApp`
   if (!runner) {
     App = createApp({
       plugins: []
     })(App);
     runner = runnerMap.get(App);
   }
-
   const context = getInitialContext(runner);
-
   const runInit = _context => runner.init({
     context: _context
   }, {
@@ -130,33 +115,27 @@ root, ReactDOM = defaultReactDOM) => {
       context: context1
     }) => {
       var _App, _App$init2;
-
       return (_App = App) === null || _App === void 0 ? void 0 : (_App$init2 = _App.init) === null || _App$init2 === void 0 ? void 0 : _App$init2.call(_App, context1);
     }
-  }); // don't mount the App, let user in charge of it.
-
+  });
 
+  // don't mount the App, let user in charge of it.
   if (!id) {
     return /*#__PURE__*/React.createElement(App, {
       context
     });
   }
-
   const isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
-
   if (isBrowser) {
     if (isClientArgs(id)) {
       var _ssrData$data, _ssrData$data2;
-
       const ssrData = window._SSR_DATA;
       const loadersData = (ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data = ssrData.data) === null || _ssrData$data === void 0 ? void 0 : _ssrData$data.loadersData) || {};
       const initialLoadersState = Object.keys(loadersData).reduce((res, key) => {
         const loaderData = loadersData[key];
-
         if (loaderData.loading !== false) {
           return res;
         }
-
         res[key] = loaderData;
         return res;
       }, {});
@@ -169,29 +148,43 @@ root, ReactDOM = defaultReactDOM) => {
       } : {}));
       context.initialData = ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data2 = ssrData.data) === null || _ssrData$data2 === void 0 ? void 0 : _ssrData$data2.initialData;
       const initialData = await runInit(context);
-
       if (initialData) {
         context.initialData = initialData;
       }
-
-      const rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root'); // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
-
+      const rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root');
+      if (!ReactDOM) {
+        throw Error('The `bootstrap` need provide `ReactDOM` parameter');
+      }
+      // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
       const ModernRender = App => {
         if (IS_REACT18) {
-          (root || ReactDOM.createRoot(rootElement)).render(App);
+          if (root) {
+            root.render(App);
+          } else if (ReactDOM.createRoot) {
+            ReactDOM.createRoot(rootElement).render(App);
+          } else {
+            throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `createRoot` method');
+          }
         } else {
+          if (!ReactDOM.render) {
+            throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `render` method');
+          }
           ReactDOM.render(App, rootElement);
         }
       };
-
       const ModernHydrate = (App, callback) => {
         if (IS_REACT18) {
+          if (!ReactDOM.hydrateRoot) {
+            throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `hydrateRoot` method');
+          }
           ReactDOM.hydrateRoot(rootElement, App);
         } else {
+          if (!ReactDOM.hydrate) {
+            throw Error('The `bootstrap` `ReactDOM` parameter needs to provide the `hydrate` method');
+          }
           ReactDOM.hydrate(App, rootElement, callback);
         }
       };
-
       return runner.client({
         App,
         context,
@@ -219,12 +212,37 @@ root, ReactDOM = defaultReactDOM) => {
         skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
       })
     });
+
+    // Handle redirects from React Router with an HTTP redirect
+    const isRedirectResponse = result => {
+      if (typeof Response !== 'undefined' &&
+      // fix: ssg workflow doesn't inject Web Response
+      result instanceof Response && result.status >= 300 && result.status <= 399) {
+        const {
+          status
+        } = result;
+        const redirectUrl = result.headers.get('Location') || '/';
+        const {
+          ssrContext
+        } = context;
+        if (ssrContext) {
+          ssrContext.res.statusCode = status;
+          ssrContext.res.setHeader('Location', redirectUrl);
+          ssrContext.redirection.status = status;
+          ssrContext.redirection.url = redirectUrl;
+        }
+        return true;
+      }
+      return false;
+    };
     const initialData = await runInit(context);
-    context.initialData = initialData;
-    return runner.server({
-      App,
-      context
-    });
+    if (!isRedirectResponse(initialData)) {
+      context.initialData = initialData;
+      return runner.server({
+        App,
+        context
+      });
+    }
   }
 };
 export const useRuntimeContext = () => {

package/dist/js/modern/core/index.js

@@ -1,6 +1,7 @@
-export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from "./plugin";
-export { defineConfig, getConfig } from "./app-config"; // compatible
+export { createPlugin, createRuntime, runtime, registerInit } from "./plugin";
+export { defineConfig, getConfig } from "./app-config";
 
+// compatible
 export * from "./compatible";
 export { RuntimeReactContext, ServerRouterContext } from "../runtime-context";
 export * from "./loader";

package/dist/js/modern/core/loader/loaderManager.js

@@ -1,5 +1,4 @@
 import invariant from 'invariant';
-
 /**
  * Calc id from string or object
  */
@@ -7,28 +6,24 @@ const createGetId = () => {
   const idCache = new Map();
   return objectId => {
     const cachedId = idCache.get(objectId);
-
     if (cachedId) {
       return cachedId;
-    } // WARNING: id should be unique after serialize.
-
+    }
 
+    // WARNING: id should be unique after serialize.
     const id = JSON.stringify(objectId);
     invariant(id, 'params should be not null value');
     idCache.set(objectId, id);
     return id;
   };
 };
-
 export let LoaderStatus;
-
 (function (LoaderStatus) {
   LoaderStatus[LoaderStatus["idle"] = 0] = "idle";
   LoaderStatus[LoaderStatus["loading"] = 1] = "loading";
   LoaderStatus[LoaderStatus["fulfilled"] = 2] = "fulfilled";
   LoaderStatus[LoaderStatus["rejected"] = 3] = "rejected";
 })(LoaderStatus || (LoaderStatus = {}));
-
 const createLoader = (id, initialData = {
   loading: false,
   reloading: false,
@@ -43,16 +38,13 @@ const createLoader = (id, initialData = {
   } = initialData;
   let hasLoaded = false;
   const handlers = new Set();
-
   const load = async () => {
     if (skip) {
       return promise;
     }
-
     if (status === LoaderStatus.loading) {
       return promise;
     }
-
     status = LoaderStatus.loading;
     notify();
     promise = loaderFn().then(value => {
@@ -70,7 +62,6 @@ const createLoader = (id, initialData = {
     });
     return promise;
   };
-
   const getResult = () => ({
     loading: !hasLoaded && status === LoaderStatus.loading,
     reloading: hasLoaded && status === LoaderStatus.loading,
@@ -79,35 +70,29 @@ const createLoader = (id, initialData = {
     // redundant fields for ssr log
     _error: error
   });
-
   const notify = () => {
     // don't iterate handlers directly, since it could be modified during iteration
     [...handlers].forEach(handler => {
       handler(status, getResult());
     });
   };
-
   const onChange = handler => {
     handlers.add(handler);
     return () => {
       handlers.delete(handler);
     };
   };
-
   return {
     get result() {
       return getResult();
     },
-
     get promise() {
       return promise;
     },
-
     onChange,
     load
   };
 };
-
 /**
  * Create loaders manager. It's returned instance will add to context
  * @param initialDataMap used to initialing loader data
@@ -119,67 +104,60 @@ export const createLoaderManager = (initialDataMap, managerOptions = {}) => {
   } = managerOptions;
   const loadersMap = new Map();
   const getId = createGetId();
-
   const add = (loaderFn, loaderOptions) => {
     const id = getId(loaderOptions.params);
-    let loader = loadersMap.get(id); // private property for opting out loader cache, maybe change in future
+    let loader = loadersMap.get(id);
 
+    // private property for opting out loader cache, maybe change in future
     const cache = loaderOptions._cache;
-
     if (!loader || cache === false) {
       // ignore non-static loader on static phase
-      const ignoreNonStatic = skipNonStatic && !loaderOptions.static; // ignore static loader on non-static phase
+      const ignoreNonStatic = skipNonStatic && !loaderOptions.static;
 
+      // ignore static loader on non-static phase
       const ignoreStatic = skipStatic && loaderOptions.static;
       const skipExec = ignoreNonStatic || ignoreStatic;
       loader = createLoader(id, typeof initialDataMap[id] !== 'undefined' ? initialDataMap[id] : {
         data: loaderOptions.initialData
-      }, loaderFn, // Todo whether static loader is exec when CSR
+      }, loaderFn,
+      // Todo whether static loader is exec when CSR
       skipExec);
       loadersMap.set(id, loader);
     }
-
     return id;
   };
+  const get = id => loadersMap.get(id);
 
-  const get = id => loadersMap.get(id); // check if there has pending loaders
-
-
+  // check if there has pending loaders
   const hasPendingLoaders = () => {
     for (const loader of loadersMap.values()) {
       const {
         promise
       } = loader;
-
       if (promise instanceof Promise) {
         return true;
       }
     }
-
     return false;
-  }; // waiting for all pending loaders to be settled
-
+  };
 
+  // waiting for all pending loaders to be settled
   const awaitPendingLoaders = async () => {
     const pendingLoaders = [];
-
     for (const [id, loader] of loadersMap) {
       const {
         promise
       } = loader;
-
       if (promise instanceof Promise) {
         pendingLoaders.push([id, loader]);
       }
     }
-
     await Promise.all(pendingLoaders.map(item => item[1].promise));
     return pendingLoaders.reduce((res, [id, loader]) => {
       res[id] = loader.result;
       return res;
     }, {});
   };
-
   return {
     hasPendingLoaders,
     awaitPendingLoaders,