@umijs/renderer-react 4.0.0-beta.9 → 4.0.0-canary-20240513.3

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017-present ChenCheng (sorrycc@gmail.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/dist/appContext.d.ts

@@ -1,9 +1,27 @@
 import React from 'react';
-export interface IAppContextType {
-    routes: any;
-    routeComponents: any;
-    clientRoutes: any;
+import { IClientRoute, ILoaderData, IRouteComponents, IRoutesById, ISelectedRoutes } from './types';
+interface IAppContextType {
+    routes: IRoutesById;
+    routeComponents: IRouteComponents;
+    clientRoutes: IClientRoute[];
     pluginManager: any;
+    rootElement?: HTMLElement;
+    basename?: string;
+    clientLoaderData: ILoaderData;
+    preloadRoute?: (to: string) => void;
+    serverLoaderData: ILoaderData;
+    history?: any;
 }
-export declare const AppContext: React.Context<IAppContextType | undefined>;
-export declare function useAppContext(): IAppContextType;
+export declare const AppContext: React.Context<IAppContextType>;
+export declare function useAppData(): IAppContextType;
+export declare function useSelectedRoutes(): ISelectedRoutes[];
+export declare function useRouteProps<T extends Record<string, any> = any>(): T;
+declare type ServerLoaderFunc = (...args: any[]) => Promise<any> | any;
+export declare function useServerLoaderData<T extends ServerLoaderFunc = any>(): {
+    data: Awaited<ReturnType<T>> | undefined;
+};
+export declare function useClientLoaderData(): {
+    data: any;
+};
+export declare function useLoaderData<T extends ServerLoaderFunc = any>(): Awaited<ReturnType<T>>;
+export {};

package/dist/appContext.js

@@ -1,5 +1,94 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["element"];
 import React from 'react';
-export const AppContext = React.createContext(undefined);
-export function useAppContext() {
-    return React.useContext(AppContext);
+import { matchRoutes, useLocation } from 'react-router-dom';
+import { fetchServerLoader } from "./dataFetcher";
+import { useRouteData } from "./routeContext";
+export var AppContext = /*#__PURE__*/React.createContext({});
+export function useAppData() {
+  return React.useContext(AppContext);
 }
+export function useSelectedRoutes() {
+  var location = useLocation();
+  var _useAppData = useAppData(),
+    clientRoutes = _useAppData.clientRoutes;
+  // use `useLocation` get location without `basename`, not need `basename` param
+  var routes = matchRoutes(clientRoutes, location.pathname);
+  return routes || [];
+}
+export function useRouteProps() {
+  var _currentRoute$;
+  var currentRoute = useSelectedRoutes().slice(-1);
+  var _ref = ((_currentRoute$ = currentRoute[0]) === null || _currentRoute$ === void 0 ? void 0 : _currentRoute$.route) || {},
+    _ = _ref.element,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return props;
+}
+// @deprecated  Please use `useLoaderData` instead.
+export function useServerLoaderData() {
+  var routes = useSelectedRoutes();
+  var _useAppData2 = useAppData(),
+    serverLoaderData = _useAppData2.serverLoaderData,
+    basename = _useAppData2.basename;
+  var _React$useState = React.useState(function () {
+      var ret = {};
+      var has = false;
+      routes.forEach(function (route) {
+        // 多级路由嵌套时，需要合并多级路由 serverLoader 的数据
+        var routeData = serverLoaderData[route.route.id];
+        if (routeData) {
+          Object.assign(ret, routeData);
+          has = true;
+        }
+      });
+      return has ? ret : undefined;
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    data = _React$useState2[0],
+    setData = _React$useState2[1];
+  React.useEffect(function () {
+    if (!window.__UMI_LOADER_DATA__) {
+      // 支持 ssr 降级，客户端兜底加载 serverLoader 数据
+      Promise.all(routes.filter(function (route) {
+        return route.route.hasServerLoader;
+      }).map(function (route) {
+        return new Promise(function (resolve) {
+          fetchServerLoader({
+            id: route.route.id,
+            basename: basename,
+            cb: resolve
+          });
+        });
+      })).then(function (datas) {
+        if (datas.length) {
+          var res = {};
+          datas.forEach(function (data) {
+            Object.assign(res, data);
+          });
+          setData(res);
+        }
+      });
+    }
+  }, []);
+  return {
+    data: data
+  };
+}
+
+// @deprecated  Please use `useLoaderData` instead.
+export function useClientLoaderData() {
+  var route = useRouteData();
+  var appData = useAppData();
+  return {
+    data: appData.clientLoaderData[route.route.id]
+  };
+}
+export function useLoaderData() {
+  var serverLoaderData = useServerLoaderData();
+  var clientLoaderData = useClientLoaderData();
+  return {
+    data: _objectSpread(_objectSpread({}, serverLoaderData.data), clientLoaderData.data)
+  };
+}

package/dist/browser.d.ts

@@ -1,12 +1,89 @@
-import { IRoutesById } from './types';
-export declare function Browser(props: {
-    routes: IRoutesById;
-    routeComponents: Record<string, any>;
-    pluginManager: any;
-}): any;
-export declare function renderClient(opts: {
+import { History } from 'history';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { IRouteComponents, IRoutesById } from './types';
+export declare function __getRoot(): ReactDOM.Root | null;
+export declare function Routes(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+/**
+ * umi 渲染需要的配置，在node端调用的哦
+ */
+export declare type RenderClientOpts = {
+    /**
+     * 配置 webpack 的 publicPath。
+     * @doc https://umijs.org/docs/api/config#publicpath
+     */
+    publicPath?: string;
+    /**
+     * 是否是 runtimePublicPath
+     * @doc https://umijs.org/docs/api/config#runtimepublicpath
+     */
+    runtimePublicPath?: boolean;
+    /**
+     * react dom 渲染的的目标节点 id
+     * @doc 一般不需要改，微前端的时候会变化
+     */
+    mountElementId?: string;
+    /**
+     * react dom 渲染的的目标 dom
+     * @doc 一般不需要改，微前端的时候会变化
+     */
     rootElement?: HTMLElement;
+    /**
+     * 是否从根节点开始渲染, 默认 false, 即从 html 开始渲染
+     */
+    renderFromRoot?: boolean;
+    /**
+     * 内部流程, 渲染特殊 html 节点, 不要使用!!!
+     */
+    __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: boolean;
+    /**
+     * 当前的路由配置
+     */
     routes: IRoutesById;
-    routeComponents: Record<string, any>;
+    /**
+     * 当前的路由对应的dom组件
+     */
+    routeComponents: IRouteComponents;
+    /**
+     * 插件的执行实例
+     */
     pluginManager: any;
-}): void;
+    /**
+     * 设置路由 base，部署项目到非根目录下时使用。
+     * @doc https://umijs.org/docs/api/config#base
+     */
+    basename?: string;
+    /**
+     * loading 中展示的组件 dom
+     */
+    loadingComponent?: React.ReactNode;
+    /**
+     * react router 的 history，用于控制列表渲染
+     * @doc https://umijs.org/docs/api/config#history
+     * 有多种不同的类型，测试的时候建议用 内存路由，默认是 browserHistory
+     */
+    history: History;
+    /**
+     * ssr 的配置
+     */
+    hydrate?: boolean;
+    /**
+     * 直接返回组件，是为了方便测试
+     */
+    components?: boolean;
+    /**
+     * 启用 react-router 5 兼容模式。
+     * 此模式下，路由组件的 props 会包含 location、match、history 和 params 属性，和 react-router 5 的保持一致。
+     */
+    reactRouter5Compat?: boolean;
+    /**
+     * 应用渲染完成的回调函数
+     */
+    callback?: () => void;
+};
+/**
+ *  执行 react dom 的 render 方法
+ * @param {RenderClientOpts} opts - 插件相关的配置
+ * @returns void
+ */
+export declare function renderClient(opts: RenderClientOpts): (() => JSX.Element) | undefined;

package/dist/browser.js

@@ -1,27 +1,293 @@
-import { createBrowserHistory } from 'history';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { App } from './app';
-export function Browser(props) {
-    const historyRef = React.useRef();
-    if (historyRef.current === undefined) {
-        historyRef.current = createBrowserHistory({ window });
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+// compatible with < react@18 in @umijs/preset-umi/src/features/react
+import ReactDOM from 'react-dom/client';
+import { matchRoutes, Router, useRoutes } from 'react-router-dom';
+import { AppContext, useAppData } from "./appContext";
+import { fetchServerLoader } from "./dataFetcher";
+import { Html } from "./html";
+import { createClientRoutes } from "./routes";
+var root = null;
+
+// react 18 some scenarios need unmount such as micro app
+export function __getRoot() {
+  return root;
+}
+
+/**
+ * 这个组件的功能是 history 发生改变的时候重新触发渲染
+ * @param props
+ * @returns
+ */
+function BrowserRoutes(props) {
+  var history = props.history;
+  var _React$useState = React.useState({
+      action: history.action,
+      location: history.location
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    state = _React$useState2[0],
+    setState = _React$useState2[1];
+  useLayoutEffect(function () {
+    return history.listen(setState);
+  }, [history]);
+  useLayoutEffect(function () {
+    function onRouteChange(opts) {
+      props.pluginManager.applyPlugins({
+        key: 'onRouteChange',
+        type: 'event',
+        args: {
+          routes: props.routes,
+          clientRoutes: props.clientRoutes,
+          location: opts.location,
+          action: opts.action,
+          basename: props.basename,
+          isFirst: Boolean(opts.isFirst)
+        }
+      });
     }
-    const history = historyRef.current;
-    const [state, dispatch] = React.useReducer((_, update) => update, {
-        action: history.action,
-        location: history.location,
-    });
-    React.useLayoutEffect(() => history.listen(dispatch), [history]);
-    return props.pluginManager.applyPlugins({
-        type: 'modify',
-        key: 'rootContainer',
-        initialValue: (React.createElement(App, { navigator: history, location: state.location, routes: props.routes, routeComponents: props.routeComponents, pluginManager: props.pluginManager })),
-        args: {},
+    onRouteChange({
+      location: state.location,
+      action: state.action,
+      isFirst: true
     });
+    return history.listen(onRouteChange);
+  }, [history, props.routes, props.clientRoutes]);
+  return /*#__PURE__*/React.createElement(Router, {
+    navigator: history,
+    location: state.location,
+    basename: props.basename
+  }, props.children);
 }
-export function renderClient(opts) {
-    // @ts-ignore
-    const root = ReactDOM.createRoot(opts.rootElement || document.getElementById('root'));
-    root.render(React.createElement(Browser, { routes: opts.routes, routeComponents: opts.routeComponents, pluginManager: opts.pluginManager }));
+export function Routes() {
+  var _useAppData = useAppData(),
+    clientRoutes = _useAppData.clientRoutes;
+  return useRoutes(clientRoutes);
 }
+
+/**
+ * umi 渲染需要的配置，在node端调用的哦
+ */
+
+/**
+ * umi max 所需要的所有插件列表，用于获取provide
+ */
+var UMI_CLIENT_RENDER_REACT_PLUGIN_LIST = [
+// Lowest to the highest priority
+'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer'];
+
+/**
+ *
+ * @param {RenderClientOpts} opts - 插件相关的配置
+ * @param {React.ReactElement} routesElement 需要渲染的 routers，为了方便测试注入才导出
+ * @returns @returns A function that returns a React component.
+ */
+var getBrowser = function getBrowser(opts, routesElement) {
+  var basename = opts.basename || '/';
+  var clientRoutes = createClientRoutes({
+    routesById: opts.routes,
+    routeComponents: opts.routeComponents,
+    loadingComponent: opts.loadingComponent,
+    reactRouter5Compat: opts.reactRouter5Compat
+  });
+  opts.pluginManager.applyPlugins({
+    key: 'patchClientRoutes',
+    type: 'event',
+    args: {
+      routes: clientRoutes
+    }
+  });
+  var rootContainer = /*#__PURE__*/React.createElement(BrowserRoutes, {
+    basename: basename,
+    pluginManager: opts.pluginManager,
+    routes: opts.routes,
+    clientRoutes: clientRoutes,
+    history: opts.history
+  }, routesElement);
+
+  // 加载所有需要的插件
+  for (var _i = 0, _UMI_CLIENT_RENDER_RE = UMI_CLIENT_RENDER_REACT_PLUGIN_LIST; _i < _UMI_CLIENT_RENDER_RE.length; _i++) {
+    var key = _UMI_CLIENT_RENDER_RE[_i];
+    rootContainer = opts.pluginManager.applyPlugins({
+      type: 'modify',
+      key: key,
+      initialValue: rootContainer,
+      args: {
+        routes: opts.routes,
+        history: opts.history,
+        plugin: opts.pluginManager
+      }
+    });
+  }
+
+  /**
+   * umi 增加完 Provide 的 react dom，可以直接交给 react-dom 渲染
+   * @returns {React.ReactElement}
+   */
+  var Browser = function Browser() {
+    var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      clientLoaderData = _useState2[0],
+      setClientLoaderData = _useState2[1];
+    var _useState3 = useState(window.__UMI_LOADER_DATA__ || {}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      serverLoaderData = _useState4[0],
+      setServerLoaderData = _useState4[1];
+    var handleRouteChange = useCallback(function (id, isFirst) {
+      var _matchRoutes;
+      // Patched routes has to id
+      var matchedRouteIds = (((_matchRoutes = matchRoutes(clientRoutes, id, basename)) === null || _matchRoutes === void 0 ? void 0 : _matchRoutes.map(
+      // @ts-ignore
+      function (route) {
+        return route.route.id;
+      })) || []).filter(Boolean);
+      matchedRouteIds.forEach(function (id) {
+        var _opts$routes$id, _opts$routes$id2;
+        // preload
+        // @ts-ignore
+        var manifest = window.__umi_manifest__;
+        if (manifest) {
+          var routeIdReplaced = id.replace(/[\/\-]/g, '_');
+          var preloadId = "preload-".concat(routeIdReplaced, ".js");
+          if (!document.getElementById(preloadId)) {
+            var keys = Object.keys(manifest).filter(function (k) {
+              return k.startsWith(routeIdReplaced + '.');
+            });
+            keys.forEach(function (key) {
+              if (!/\.(js|css)$/.test(key)) {
+                throw Error("preload not support ".concat(key, " file"));
+              }
+              var file = manifest[key];
+              var link = document.createElement('link');
+              link.rel = 'preload';
+              link.as = 'style';
+              if (key.endsWith('.js')) {
+                link.as = 'script';
+                link.id = preloadId;
+              }
+              // publicPath already in the manifest,
+              // but if runtimePublicPath is true, we need to replace it
+              if (opts.runtimePublicPath) {
+                file = file.replace(new RegExp("^".concat(opts.publicPath)),
+                // @ts-ignore
+                window.publicPath);
+              }
+              link.href = file;
+              document.head.appendChild(link);
+            });
+          }
+        }
+        var clientLoader = (_opts$routes$id = opts.routes[id]) === null || _opts$routes$id === void 0 ? void 0 : _opts$routes$id.clientLoader;
+        var hasClientLoader = !!clientLoader;
+        var hasServerLoader = (_opts$routes$id2 = opts.routes[id]) === null || _opts$routes$id2 === void 0 ? void 0 : _opts$routes$id2.hasServerLoader;
+        // server loader
+        // use ?. since routes patched with patchClientRoutes is not exists in opts.routes
+
+        if (!isFirst && hasServerLoader && !hasClientLoader && !window.__UMI_LOADER_DATA__) {
+          fetchServerLoader({
+            id: id,
+            basename: basename,
+            cb: function cb(data) {
+              // setServerLoaderData when startTransition because if ssr is enabled,
+              // the component may being hydrated and setLoaderData will break the hydration
+              React.startTransition(function () {
+                setServerLoaderData(function (d) {
+                  return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
+                });
+              });
+            }
+          });
+        }
+        // client loader
+        // onPatchClientRoutes 添加的 route 在 opts.routes 里是不存在的
+        var hasClientLoaderDataInRoute = !!clientLoaderData[id];
+
+        // Check if hydration is needed or there's no server loader for the current route
+        var shouldHydrateOrNoServerLoader = hasClientLoader && clientLoader.hydrate || !hasServerLoader;
+
+        // Check if server loader data is missing in the global window object
+        var isServerLoaderDataMissing = hasServerLoader && !window.__UMI_LOADER_DATA__;
+        if (hasClientLoader && !hasClientLoaderDataInRoute && (shouldHydrateOrNoServerLoader || isServerLoaderDataMissing)) {
+          // ...
+          clientLoader({
+            serverLoader: function serverLoader() {
+              return fetchServerLoader({
+                id: id,
+                basename: basename,
+                cb: function cb(data) {
+                  // setServerLoaderData when startTransition because if ssr is enabled,
+                  // the component may being hydrated and setLoaderData will break the hydration
+                  React.startTransition(function () {
+                    setServerLoaderData(function (d) {
+                      return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
+                    });
+                  });
+                }
+              });
+            }
+          }).then(function (data) {
+            setClientLoaderData(function (d) {
+              return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
+            });
+          });
+        }
+      });
+    }, [clientLoaderData]);
+    useEffect(function () {
+      handleRouteChange(window.location.pathname, true);
+      return opts.history.listen(function (e) {
+        handleRouteChange(e.location.pathname);
+      });
+    }, []);
+    useLayoutEffect(function () {
+      if (typeof opts.callback === 'function') opts.callback();
+    }, []);
+    return /*#__PURE__*/React.createElement(AppContext.Provider, {
+      value: {
+        routes: opts.routes,
+        routeComponents: opts.routeComponents,
+        clientRoutes: clientRoutes,
+        pluginManager: opts.pluginManager,
+        rootElement: opts.rootElement,
+        basename: basename,
+        clientLoaderData: clientLoaderData,
+        serverLoaderData: serverLoaderData,
+        preloadRoute: handleRouteChange,
+        history: opts.history
+      }
+    }, rootContainer);
+  };
+  return Browser;
+};
+
+/**
+ *  执行 react dom 的 render 方法
+ * @param {RenderClientOpts} opts - 插件相关的配置
+ * @returns void
+ */
+export function renderClient(opts) {
+  var rootElement = opts.rootElement || document.getElementById('root');
+  var Browser = getBrowser(opts, /*#__PURE__*/React.createElement(Routes, null));
+  // 为了测试，直接返回组件
+  if (opts.components) return Browser;
+  if (opts.hydrate) {
+    var loaderData = window.__UMI_LOADER_DATA__ || {};
+    var metadata = window.__UMI_METADATA_LOADER_DATA__ || {};
+    var hydtateHtmloptions = {
+      metadata: metadata,
+      loaderData: loaderData,
+      mountElementId: opts.mountElementId
+    };
+    ReactDOM.hydrateRoot(opts.renderFromRoot ? rootElement : document, /*#__PURE__*/React.createElement(Html, hydtateHtmloptions, /*#__PURE__*/React.createElement(Browser, null)));
+    return;
+  }
+  if (ReactDOM.createRoot) {
+    root = ReactDOM.createRoot(rootElement);
+    root.render( /*#__PURE__*/React.createElement(Browser, null));
+    return;
+  }
+  // @ts-ignore
+  ReactDOM.render( /*#__PURE__*/React.createElement(Browser, null), rootElement);
+}

package/dist/dataFetcher.d.ts

@@ -0,0 +1,5 @@
+export declare function fetchServerLoader({ id, basename, cb, }: {
+    id: string;
+    basename?: string;
+    cb: (data: any) => void;
+}): void;

package/dist/dataFetcher.js

@@ -0,0 +1,21 @@
+export function fetchServerLoader(_ref) {
+  var id = _ref.id,
+    basename = _ref.basename,
+    cb = _ref.cb;
+  var query = new URLSearchParams({
+    route: id,
+    url: window.location.href
+  }).toString();
+  // 在有basename的情况下__serverLoader的请求路径需要加上basename
+  // FIXME: 先临时解自定义 serverLoader 请求路径的问题，后续改造 serverLoader 时再提取成类似 runtimeServerLoader 的配置项
+  var url = "".concat(withEndSlash(window.umiServerLoaderPath || basename), "__serverLoader?").concat(query);
+  fetch(url, {
+    credentials: 'include'
+  }).then(function (d) {
+    return d.json();
+  }).then(cb).catch(console.error);
+}
+function withEndSlash() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.endsWith('/') ? str : "".concat(str, "/");
+}

package/dist/html.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IHtmlProps } from './types';
+export declare function Html({ children, loaderData, manifest, htmlPageOpts, renderFromRoot, __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, mountElementId, }: React.PropsWithChildren<IHtmlProps>): JSX.Element;