@umijs/renderer-react 4.0.29 → 4.0.30

package/dist/browser.d.ts

@@ -4,69 +4,16 @@ 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
-     */
+export declare function renderClient(opts: {
     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;
-};
-/**
- *  执行 react dom 的 render 方法
- * @param {RenderClientOpts} opts - 插件相关的配置
- * @returns void
- */
-export declare function renderClient(opts: RenderClientOpts): (() => JSX.Element) | undefined;
+}): void;

package/dist/browser.js

@@ -1,6 +1,5 @@
 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
 
@@ -13,11 +12,6 @@ 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;
@@ -67,24 +61,9 @@ export function Routes() {
 
   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) {
+export function renderClient(opts) {
   var basename = opts.basename || '/';
+  var rootElement = opts.rootElement || document.getElementById('root');
   var clientRoutes = createClientRoutes({
     routesById: opts.routes,
     routeComponents: opts.routeComponents,
@@ -104,34 +83,21 @@ var getBrowser = function getBrowser(opts, routesElement) {
     routes: opts.routes,
     clientRoutes: clientRoutes,
     history: opts.history
-  }, 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();
+  }, /*#__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
+      }
+    });
   }
 
   var Browser = function Browser() {
@@ -205,7 +171,6 @@ var getBrowser = function getBrowser(opts, routesElement) {
           }).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));
@@ -249,31 +214,15 @@ var getBrowser = function getBrowser(opts, routesElement) {
     }, 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));
-    return;
+  } 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);
+    }
   }
-
-  if (ReactDOM.createRoot) {
-    ReactDOM.createRoot(rootElement).render( /*#__PURE__*/React.createElement(Browser, null));
-    return;
-  } // @ts-ignore
-
-
-  ReactDOM.render( /*#__PURE__*/React.createElement(Browser, null), rootElement);
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { createBrowserHistory, createHashHistory, createMemoryHistory, type History, } from 'history';
 export { createSearchParams, generatePath, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
+export { Helmet } from 'react-helmet-async';
 export { useAppData, useClientLoaderData, useServerLoaderData, } from './appContext';
 export { renderClient, __getRoot } from './browser';
 export { LinkWithPrefetch as Link } from './link';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history';
 export { createSearchParams, generatePath, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams } from 'react-router-dom';
+export { Helmet } from 'react-helmet-async';
 export { useAppData, useClientLoaderData, useServerLoaderData } from "./appContext";
 export { renderClient, __getRoot } from "./browser";
 export { LinkWithPrefetch as Link } from "./link";

package/dist/server.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { IRouteComponents, IRoutesById } from './types';
+export declare function getHelmetContext(): {};
 export declare function getClientRootComponent(opts: {
     routes: IRoutesById;
     routeComponents: IRouteComponents;

package/dist/server.js

@@ -2,11 +2,18 @@ import _regeneratorRuntime from "@babel/runtime/helpers/regeneratorRuntime";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import React from 'react';
+import { HelmetProvider } from 'react-helmet-async';
 import { StaticRouter } from 'react-router-dom/server';
 import { AppContext } from "./appContext";
 import { Routes } from "./browser";
 import { createClientRoutes } from "./routes";
-// Get the root React component for ReactDOMServer.renderToString
+// store helmet data
+var helmetContext = {}; // get helmet context
+
+export function getHelmetContext() {
+  return helmetContext;
+} // Get the root React component for ReactDOMServer.renderToString
+
 export function getClientRootComponent(_x) {
   return _getClientRootComponent.apply(this, arguments);
 }
@@ -44,6 +51,8 @@ function _getClientRootComponent() {
             return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, {
               loaderData: opts.loaderData,
               manifest: opts.manifest
+            }, /*#__PURE__*/React.createElement(HelmetProvider, {
+              context: helmetContext
             }, /*#__PURE__*/React.createElement(AppContext.Provider, {
               value: {
                 routes: opts.routes,
@@ -54,7 +63,7 @@ function _getClientRootComponent() {
                 clientLoaderData: {},
                 serverLoaderData: opts.loaderData
               }
-            }, rootContainer)));
+            }, rootContainer))));
 
           case 6:
           case "end":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.29",
+  "version": "4.0.30",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -25,6 +25,7 @@
     "@babel/runtime": "7.18.9",
     "@loadable/component": "5.15.2",
     "history": "5.3.0",
+    "react-helmet-async": "1.3.0",
     "react-router-dom": "6.3.0"
   },
   "devDependencies": {