@umijs/renderer-react 4.0.30 → 4.0.32

package/dist/browser.d.ts

@@ -4,16 +4,69 @@ 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;
-export declare function renderClient(opts: {
+/**
+ * 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 渲染的的目标 dom
+     * @doc 一般不需要改，微前端的时候会变化
+     */
     rootElement?: HTMLElement;
+    /**
+     * 当前的路由配置
+     */
     routes: IRoutesById;
+    /**
+     * 当前的路由对应的dom组件
+     */
     routeComponents: IRouteComponents;
+    /**
+     * 插件的执行实例
+     */
     pluginManager: any;
+    /**
+     * 设置路由 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;
-}): void;
+};
+/**
+ *  执行 react dom 的 render 方法
+ * @param {RenderClientOpts} opts - 插件相关的配置
+ * @returns void
+ */
+export declare function renderClient(opts: RenderClientOpts): (() => JSX.Element) | undefined;

package/dist/browser.js

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useState } from 'react'; // compatible with < react@18 in @umijs/preset-umi/src/features/react
 
+import { HelmetProvider } from 'react-helmet-async';
 import ReactDOM from 'react-dom/client';
 import { matchRoutes, Router, useRoutes } from 'react-router-dom';
 import { AppContext, useAppData } from "./appContext";
@@ -12,6 +14,11 @@ 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;
@@ -61,9 +68,24 @@ export function Routes() {
 
   return useRoutes(clientRoutes);
 }
-export function renderClient(opts) {
+/**
+ * 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 rootElement = opts.rootElement || document.getElementById('root');
   var clientRoutes = createClientRoutes({
     routesById: opts.routes,
     routeComponents: opts.routeComponents,
@@ -83,21 +105,34 @@ export function renderClient(opts) {
     routes: opts.routes,
     clientRoutes: clientRoutes,
     history: opts.history
-  }, /*#__PURE__*/React.createElement(Routes, null));
-
-  for (var _i = 0, _arr = [// Lowest to the highest priority
-  'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer']; _i < _arr.length; _i++) {
-    var key = _arr[_i];
-    rootContainer = opts.pluginManager.applyPlugins({
-      type: 'modify',
-      key: key,
-      initialValue: rootContainer,
-      args: {
-        routes: opts.routes,
-        history: opts.history,
-        plugin: opts.pluginManager
-      }
-    });
+  }, routesElement); // 加载所有需要的插件
+
+  var _iterator = _createForOfIteratorHelper(UMI_CLIENT_RENDER_REACT_PLUGIN_LIST),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      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}
+     */
+
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
 
   var Browser = function Browser() {
@@ -171,6 +206,7 @@ export function renderClient(opts) {
           }).then(function (data) {
             // setServerLoaderData when startTransition because if ssr is enabled,
             // the component may being hydrated and setLoaderData will break the hydration
+            // @ts-ignore
             React.startTransition(function () {
               setServerLoaderData(function (d) {
                 return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
@@ -198,7 +234,9 @@ export function renderClient(opts) {
         handleRouteChange(e.location.pathname);
       });
     }, []);
-    return /*#__PURE__*/React.createElement(AppContext.Provider, {
+    return /*#__PURE__*/React.createElement(HelmetProvider, {
+      context: {}
+    }, /*#__PURE__*/React.createElement(AppContext.Provider, {
       value: {
         routes: opts.routes,
         routeComponents: opts.routeComponents,
@@ -211,18 +249,35 @@ export function renderClient(opts) {
         preloadRoute: handleRouteChange,
         history: opts.history
       }
-    }, rootContainer);
+    }, 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) {
     ReactDOM.hydrateRoot(rootElement, /*#__PURE__*/React.createElement(Browser, null));
-  } else {
-    if (ReactDOM.createRoot) {
-      root = ReactDOM.createRoot(rootElement);
-      root.render( /*#__PURE__*/React.createElement(Browser, null));
-    } else {
-      // @ts-ignore
-      ReactDOM.render( /*#__PURE__*/React.createElement(Browser, null), rootElement);
-    }
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.30",
+  "version": "4.0.32",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",