@modern-js/runtime 1.4.4 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @modern-js/runtime
 
+## 1.16.0
+
+### Minor Changes
+
+- 1100dd58c: chore: support react 18
+
+  chore: 支持 React 18
+
+### Patch Changes
+
+- a480d6ad0: fix: remove helmet regexp's global tag
+  fix: 删除 helmet 中正则匹配的全局标记
+- Updated dependencies [641592f52]
+- Updated dependencies [3904b30a5]
+- Updated dependencies [1100dd58c]
+- Updated dependencies [e04e6e76a]
+- Updated dependencies [81c66e4a4]
+- Updated dependencies [2c305b6f5]
+  - @modern-js/utils@1.16.0
+  - @modern-js/webpack@1.16.0
+  - @modern-js/plugin@1.16.0
+
+## 1.15.0
+
+### Patch Changes
+
+- 335c97c: fix: fix runtime context format bug
+  fix: 修复 runtimeContext 数据格式化时的问题
+- a04a11b: fix: 修复 SSR 物理降级时，获取不到请求上下文的问题
+  fix: should get ssrContext anyway if entry is ssr enable
+- Updated dependencies [8658a78]
+- Updated dependencies [0df4970]
+- Updated dependencies [05d4a4f]
+- Updated dependencies [ad05af9]
+- Updated dependencies [5d53d1c]
+- Updated dependencies [37cd159]
+  - @modern-js/utils@1.15.0
+  - @modern-js/webpack@1.15.0
+  - @modern-js/plugin@1.15.0
+
+## 1.5.0
+
+### Minor Changes
+
+- 59c941a: chore(runtime): merge `@modern-js/runtime-core` to `@modern-js/runtime`
+
+  chore(runtime): 合并 `@modern-js/runtime-core` 到 `@modern-js/runtime`
+
+### Patch Changes
+
+- e0cd14a: feat: support runtime router and state type
+
+  feat: 支持在 `modern.config.ts` 中提示 `runtime.router` and `runtime.state` 类型
+
+- 287ac8b: fix(runtime): router plugin replace error
+
+  fix(runtime): router 插件 replace 报错
+
+- Updated dependencies [79e83ef]
+- Updated dependencies [5f1a231]
+- Updated dependencies [22f4dca]
+- Updated dependencies [7b9067f]
+  - @modern-js/utils@1.9.0
+  - @modern-js/webpack@1.12.4
+
 ## 1.4.3
 
 ### Patch Changes

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

@@ -1,5 +1,5 @@
 import path from 'path';
-import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache } from '@modern-js/utils';
+import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
@@ -11,8 +11,9 @@ export default (() => ({
     let runtimeExportsUtils = {};
     return {
       config() {
-        const dir = api.useAppContext().internalDirectory;
+        const dir = api.useAppContext().internalDirectory || '';
         runtimeExportsUtils = createRuntimeExportsUtils(dir, 'index');
+        process.env.IS_REACT18 = isReact18(path.join(dir, '../../')).toString();
         return {
           runtime: {},
           runtimeByEntries: {},
@@ -25,10 +26,9 @@ export default (() => ({
                * But it will not be installed under the user project.
                * So need to add alias
                */
-              'styled-components': require.resolve('styled-components', {
-                paths: [require.resolve('@modern-js/runtime-core')]
-              })
-            }
+              'styled-components': require.resolve('styled-components')
+            },
+            envVars: ['IS_REACT18']
           }
         };
       },

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

@@ -0,0 +1,10 @@
+const APP_CONFIG_SYMBOL = 'config';
+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) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  Component[APP_CONFIG_SYMBOL] = config;
+  return Component;
+};

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

@@ -0,0 +1,241 @@
+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 { runtime } from "./plugin";
+import { RuntimeReactContext } from "./runtime-context";
+import { createLoaderManager } from "./loader/loaderManager";
+import { jsx as _jsx } from "react/jsx-runtime";
+const IS_REACT18 = process.env.IS_REACT18 === 'true';
+
+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
+});
+
+export const createApp = ({
+  plugins
+}) => {
+  const appRuntime = runtime.clone();
+  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);
+      return runner.provide({
+        element,
+        props: _objectSpread({}, props),
+        context
+      }, {
+        onLast: ({
+          element
+        }) => element
+      });
+    };
+
+    if (App) {
+      hoistNonReactStatics(WrapperComponent, App);
+    }
+
+    const HOCApp = runner.hoc({
+      App: WrapperComponent
+    }, {
+      onLast: ({
+        App
+      }) => {
+        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`.
+
+          if (!((_contextValue = contextValue) !== null && _contextValue !== void 0 && _contextValue.runner)) {
+            contextValue = getInitialContext(runner);
+            runner.init({
+              context: contextValue
+            }, {
+              onLast: ({
+                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);
+      }
+    });
+    runnerMap.set(HOCApp, runner);
+    return HOCApp;
+  };
+};
+export const bootstrap = async (BootApp,
+/**
+ * When csr, id is root id.
+ * When ssr, id is serverContext
+ */
+id,
+/**
+ * root.render need use root to run function
+ */
+root, render = defaultReactDOM.render, hydrate = defaultReactDOM.hydrate) => {
+  let App = BootApp;
+  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
+  }, {
+    onLast: ({
+      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.
+
+
+  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;
+      }, {});
+      Object.assign(context, _objectSpread({
+        loaderManager: createLoaderManager(initialLoadersState, {
+          skipStatic: true
+        })
+      }, ssrData ? {
+        ssrContext: ssrData === null || ssrData === void 0 ? void 0 : ssrData.context
+      } : {}));
+      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 ModernRender = App => {
+        if (IS_REACT18) {
+          root.render(App);
+        } else {
+          render(App, rootElement);
+        }
+      };
+
+      const ModernHydrate = (App, callback) => {
+        if (IS_REACT18) {
+          hydrate(rootElement, App);
+        } else {
+          hydrate(App, rootElement, callback);
+        }
+      };
+
+      return runner.client({
+        App,
+        context,
+        ModernRender,
+        ModernHydrate
+      }, {
+        onLast: ({
+          App
+        }) => {
+          ModernRender( /*#__PURE__*/React.createElement(App, {
+            context
+          }));
+        }
+      });
+    } else {
+      throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
+    }
+  } else {
+    Object.assign(context, {
+      ssrContext: id,
+      isBrowser: false,
+      loaderManager: createLoaderManager({}, {
+        skipNonStatic: id.staticGenerate,
+        // if not static generate, only non-static loader can exec on prod env
+        skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
+      })
+    });
+    const initialData = await runInit(context);
+    context.initialData = initialData;
+    return runner.server({
+      App,
+      context
+    });
+  }
+};
+export const useRuntimeContext = () => {
+  const context = useContext(RuntimeReactContext);
+  const memoizedContext = useMemo(() => context.runner.pickContext({
+    context,
+    pickedContext: {}
+  }, {
+    onLast: ({
+      pickedContext
+    }) => pickedContext
+  }), [context]);
+  return memoizedContext;
+};

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

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

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

@@ -0,0 +1 @@
+export { default as useLoader } from "./useLoader";

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

@@ -0,0 +1,189 @@
+import invariant from 'invariant';
+
+/**
+ * Calc id from string or object
+ */
+const createGetId = () => {
+  const idCache = new Map();
+  return objectId => {
+    const cachedId = idCache.get(objectId);
+
+    if (cachedId) {
+      return cachedId;
+    } // 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,
+  data: undefined,
+  error: undefined
+}, loaderFn, skip = false) => {
+  let promise;
+  let status = LoaderStatus.idle;
+  let {
+    data,
+    error
+  } = 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 => {
+      data = value;
+      error = null;
+      status = LoaderStatus.fulfilled;
+    }).catch(e => {
+      error = e;
+      data = null;
+      status = LoaderStatus.rejected;
+    }).finally(() => {
+      promise = null;
+      hasLoaded = true;
+      notify();
+    });
+    return promise;
+  };
+
+  const getResult = () => ({
+    loading: !hasLoaded && status === LoaderStatus.loading,
+    reloading: hasLoaded && status === LoaderStatus.loading,
+    data,
+    error: error instanceof Error ? `${error.message}` : error,
+    // 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
+ */
+export const createLoaderManager = (initialDataMap, managerOptions = {}) => {
+  const {
+    skipStatic = false,
+    skipNonStatic = false
+  } = 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
+
+    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 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
+      skipExec);
+      loadersMap.set(id, loader);
+    }
+
+    return id;
+  };
+
+  const get = id => loadersMap.get(id); // 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
+
+
+  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,
+    add,
+    get
+  };
+};

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

@@ -0,0 +1,105 @@
+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 { useContext, useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import invariant from 'invariant';
+import { RuntimeReactContext } from "../runtime-context";
+import { LoaderStatus } from "./loaderManager";
+
+const useLoader = (loaderFn, options = {
+  params: undefined
+}) => {
+  const context = useContext(RuntimeReactContext);
+  const isSSRRender = Boolean(context.ssr);
+  const {
+    loaderManager
+  } = context;
+  const loaderRef = useRef();
+  const unlistenLoaderChangeRef = useRef(null); // SSR render should ignore `_cache` prop
+
+  if (isSSRRender && Object.prototype.hasOwnProperty.call(options, '_cache')) {
+    delete options._cache;
+  }
+
+  const load = useCallback(params => {
+    var _unlistenLoaderChange, _window, _window$_SSR_DATA, _window$_SSR_DATA$dat, _window$_SSR_DATA$dat2, _loaderRef$current2;
+
+    if (typeof params === 'undefined') {
+      var _loaderRef$current;
+
+      return (_loaderRef$current = loaderRef.current) === null || _loaderRef$current === void 0 ? void 0 : _loaderRef$current.load();
+    }
+
+    const id = loaderManager.add(() => {
+      try {
+        const res = loaderFn(context, params);
+
+        if (res instanceof Promise) {
+          return res;
+        }
+
+        return Promise.resolve(res);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }, _objectSpread(_objectSpread({}, options), {}, {
+      params
+    }));
+    loaderRef.current = loaderManager.get(id); // unsubscribe old loader onChange event
+
+    (_unlistenLoaderChange = unlistenLoaderChangeRef.current) === null || _unlistenLoaderChange === void 0 ? void 0 : _unlistenLoaderChange.call(unlistenLoaderChangeRef);
+
+    if (isSSRRender) {
+      return undefined;
+    } // skip this loader, then try to unlisten loader change
+
+
+    if (options.skip) {
+      return undefined;
+    } // do not load data again in CSR hydrate stage if SSR data exists
+
+
+    if (context._hydration && ((_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : (_window$_SSR_DATA$dat = _window$_SSR_DATA.data) === null || _window$_SSR_DATA$dat === void 0 ? void 0 : (_window$_SSR_DATA$dat2 = _window$_SSR_DATA$dat.loadersData[id]) === null || _window$_SSR_DATA$dat2 === void 0 ? void 0 : _window$_SSR_DATA$dat2.error) === null) {
+      return undefined;
+    }
+
+    const res = loaderRef.current.load();
+    unlistenLoaderChangeRef.current = (_loaderRef$current2 = loaderRef.current) === null || _loaderRef$current2 === void 0 ? void 0 : _loaderRef$current2.onChange((_status, _result) => {
+      setResult(_result);
+
+      if (_status === LoaderStatus.fulfilled) {
+        var _options$onSuccess;
+
+        options === null || options === void 0 ? void 0 : (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, _result.data);
+      }
+
+      if (_status === LoaderStatus.rejected) {
+        var _options$onError;
+
+        options === null || options === void 0 ? void 0 : (_options$onError = options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(options, _result.error);
+      }
+    });
+    return res;
+  }, [options.skip]);
+  useEffect(() => () => {
+    var _unlistenLoaderChange2;
+
+    (_unlistenLoaderChange2 = unlistenLoaderChangeRef.current) === null || _unlistenLoaderChange2 === void 0 ? void 0 : _unlistenLoaderChange2.call(unlistenLoaderChangeRef);
+  }, []);
+  useMemo(() => {
+    var _options$params;
+
+    const p = (_options$params = options.params) !== null && _options$params !== void 0 ? _options$params : loaderFn.id;
+    invariant(typeof p !== 'undefined' && p !== null, 'Params is required in useLoader');
+    load(p);
+  }, [options.params]);
+  const [result, setResult] = useState(loaderRef.current.result);
+  return _objectSpread(_objectSpread({}, result), {}, {
+    reload: load
+  });
+};
+
+export default useLoader;