@umijs/renderer-react 4.0.0-canary.20230223.1 → 4.0.0-canary.20230227.1

package/dist/browser.js

@@ -1,36 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 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 React, { useCallback, useEffect, useLayoutEffect, 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";
 import { createClientRoutes } from "./routes";
-var root = null; // react 18 some scenarios need unmount such as micro app
+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];
-
+      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]);
@@ -48,7 +46,6 @@ function BrowserRoutes(props) {
         }
       });
     }
-
     history.listen(onRouteChange);
     onRouteChange({
       location: state.location,
@@ -61,13 +58,12 @@ function BrowserRoutes(props) {
     basename: props.basename
   }, props.children);
 }
-
 export function Routes() {
   var _useAppData = useAppData(),
-      clientRoutes = _useAppData.clientRoutes;
-
+    clientRoutes = _useAppData.clientRoutes;
   return useRoutes(clientRoutes);
 }
+
 /**
  * umi 渲染需要的配置，在node端调用的哦
  */
@@ -75,15 +71,16 @@ export function Routes() {
 /**
  * umi max 所需要的所有插件列表，用于获取provide
  */
-var UMI_CLIENT_RENDER_REACT_PLUGIN_LIST = [// Lowest to the highest priority
+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({
@@ -105,67 +102,54 @@ 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();
+  }, 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( // @ts-ignore
-    window.__UMI_LOADER_DATA__ || {}),
-        _useState4 = _slicedToArray(_useState3, 2),
-        serverLoaderData = _useState4[0],
-        setServerLoaderData = _useState4[1];
-
+      _useState2 = _slicedToArray(_useState, 2),
+      clientLoaderData = _useState2[0],
+      setClientLoaderData = _useState2[1];
+    var _useState3 = useState(
+      // @ts-ignore
+      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
+      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 + '.');
@@ -174,32 +158,28 @@ var getBrowser = function getBrowser(opts, routesElement) {
               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,
+              }
+              // 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
+                file = file.replace(new RegExp("^".concat(opts.publicPath)),
+                // @ts-ignore
                 window.publicPath);
               }
-
               link.href = file;
               document.head.appendChild(link);
             });
           }
-        } // server loader
+        }
+        // server loader
         // use ?. since routes patched with patchClientRoutes is not exists in opts.routes
-
-
         if (!isFirst && (_opts$routes$id = opts.routes[id]) !== null && _opts$routes$id !== void 0 && _opts$routes$id.hasServerLoader) {
           fetch('/__serverLoader?route=' + id).then(function (d) {
             return d.json();
@@ -213,12 +193,10 @@ var getBrowser = function getBrowser(opts, routesElement) {
               });
             });
           }).catch(console.error);
-        } // client loader
+        }
+        // client loader
         // onPatchClientRoutes 添加的 route 在 opts.routes 里是不存在的
-
-
         var clientLoader = (_opts$routes$id2 = opts.routes[id]) === null || _opts$routes$id2 === void 0 ? void 0 : _opts$routes$id2.clientLoader;
-
         if (clientLoader && !clientLoaderData[id]) {
           clientLoader().then(function (data) {
             setClientLoaderData(function (d) {
@@ -254,33 +232,28 @@ 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)); // 为了测试，直接返回组件
-
+  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;
   }
-
   if (ReactDOM.createRoot) {
     root = ReactDOM.createRoot(rootElement);
     root.render( /*#__PURE__*/React.createElement(Browser, null));
     return;
-  } // @ts-ignore
-
-
+  }
+  // @ts-ignore
   ReactDOM.render( /*#__PURE__*/React.createElement(Browser, null), rootElement);
 }

package/dist/link.js

@@ -6,19 +6,16 @@ import { Link } from 'react-router-dom';
 import { useAppData } from "./appContext";
 export function LinkWithPrefetch(props) {
   var _props$to;
-
   var prefetch = props.prefetch,
-      linkProps = _objectWithoutProperties(props, _excluded);
-
+    linkProps = _objectWithoutProperties(props, _excluded);
   var appData = useAppData();
-  var to = typeof props.to === 'string' ? props.to : (_props$to = props.to) === null || _props$to === void 0 ? void 0 : _props$to.pathname; // compatible with old code
+  var to = typeof props.to === 'string' ? props.to : (_props$to = props.to) === null || _props$to === void 0 ? void 0 : _props$to.pathname;
+  // compatible with old code
   // which to might be undefined
-
   if (!to) return null;
   return /*#__PURE__*/React.createElement(Link, _extends({
     onMouseEnter: function onMouseEnter() {
       var _appData$preloadRoute;
-
       return prefetch && to && ((_appData$preloadRoute = appData.preloadRoute) === null || _appData$preloadRoute === void 0 ? void 0 : _appData$preloadRoute.call(appData, to));
     }
   }, linkProps), props.children);

package/dist/routes.js

@@ -9,8 +9,8 @@ import { RouteContext, useRouteData } from "./routeContext";
 import { useAppData } from "./appContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
-      parentId = opts.parentId,
-      routeComponents = opts.routeComponents;
+    parentId = opts.parentId,
+    routeComponents = opts.routeComponents;
   return Object.keys(routesById).filter(function (id) {
     return routesById[id].parentId === parentId;
   }).map(function (id) {
@@ -32,36 +32,28 @@ export function createClientRoutes(opts) {
       loadingComponent: opts.loadingComponent,
       reactRouter5Compat: opts.reactRouter5Compat
     });
-
     if (children.length > 0) {
-      route.children = children; // TODO: remove me
+      route.children = children;
+      // TODO: remove me
       // compatible with @ant-design/pro-layout
-
       route.routes = children;
     }
-
     return route;
   });
 }
-
 function NavigateWithParams(props) {
   var params = useParams();
-
   var propsWithParams = _objectSpread(_objectSpread({}, props), {}, {
     to: generatePath(props.to, params)
   });
-
   return /*#__PURE__*/React.createElement(Navigate, _extends({
     replace: true
   }, propsWithParams));
 }
-
 function createClientRoute(opts) {
   var route = opts.route;
-
   var redirect = route.redirect,
-      props = _objectWithoutProperties(route, _excluded);
-
+    props = _objectWithoutProperties(route, _excluded);
   var Remote = opts.reactRouter5Compat ? RemoteComponentReactRouter5 : RemoteComponent;
   return _objectSpread({
     element: redirect ? /*#__PURE__*/React.createElement(NavigateWithParams, {
@@ -77,27 +69,24 @@ function createClientRoute(opts) {
     }))
   }, props);
 }
-
 function DefaultLoading() {
   return /*#__PURE__*/React.createElement("div", null);
 }
-
 function RemoteComponentReactRouter5(props) {
   var _useRouteData = useRouteData(),
-      route = _useRouteData.route;
-
+    route = _useRouteData.route;
   var _useAppData = useAppData(),
-      history = _useAppData.history,
-      clientRoutes = _useAppData.clientRoutes;
-
+    history = _useAppData.history,
+    clientRoutes = _useAppData.clientRoutes;
   var params = useParams();
   var match = {
     params: params,
     isExact: true,
     path: route.path,
     url: history.location.pathname
-  }; // staticContext 没有兼容 好像没看到对应的兼容写法
+  };
 
+  // staticContext 没有兼容 好像没看到对应的兼容写法
   var Component = props.loader;
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
@@ -110,7 +99,6 @@ function RemoteComponentReactRouter5(props) {
     routes: clientRoutes
   }, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null)));
 }
-
 function RemoteComponent(props) {
   var Component = props.loader;
   return /*#__PURE__*/React.createElement(React.Suspense, {

package/dist/server.js

@@ -8,77 +8,72 @@ import { AppContext } from "./appContext";
 import { Routes } from "./browser";
 import { createClientRoutes } from "./routes";
 // store helmet data
-var helmetContext = {}; // get helmet context
+var helmetContext = {};
 
+// get helmet context
 export function getHelmetContext() {
   return helmetContext;
-} // Get the root React component for ReactDOMServer.renderToString
+}
 
+// Get the root React component for ReactDOMServer.renderToString
 export function getClientRootComponent(_x) {
   return _getClientRootComponent.apply(this, arguments);
 }
-
 function _getClientRootComponent() {
   _getClientRootComponent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(opts) {
     var basename, components, clientRoutes, rootContainer, _i, _arr, key;
-
     return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            basename = '/';
-            components = _objectSpread({}, opts.routeComponents);
-            clientRoutes = createClientRoutes({
-              routesById: opts.routes,
-              routeComponents: components
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          basename = '/';
+          components = _objectSpread({}, opts.routeComponents);
+          clientRoutes = createClientRoutes({
+            routesById: opts.routes,
+            routeComponents: components
+          });
+          rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
+            basename: basename,
+            location: opts.location
+          }, /*#__PURE__*/React.createElement(Routes, null));
+          for (_i = 0, _arr = [
+          // Lowest to the highest priority
+          'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer']; _i < _arr.length; _i++) {
+            key = _arr[_i];
+            rootContainer = opts.pluginManager.applyPlugins({
+              type: 'modify',
+              key: key,
+              initialValue: rootContainer,
+              args: {}
             });
-            rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
+          }
+          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,
+              routeComponents: opts.routeComponents,
+              clientRoutes: clientRoutes,
+              pluginManager: opts.pluginManager,
               basename: basename,
-              location: opts.location
-            }, /*#__PURE__*/React.createElement(Routes, null));
-
-            for (_i = 0, _arr = [// Lowest to the highest priority
-            'innerProvider', 'i18nProvider', 'accessProvider', 'dataflowProvider', 'outerProvider', 'rootContainer']; _i < _arr.length; _i++) {
-              key = _arr[_i];
-              rootContainer = opts.pluginManager.applyPlugins({
-                type: 'modify',
-                key: key,
-                initialValue: rootContainer,
-                args: {}
-              });
+              clientLoaderData: {},
+              serverLoaderData: opts.loaderData
             }
-
-            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,
-                routeComponents: opts.routeComponents,
-                clientRoutes: clientRoutes,
-                pluginManager: opts.pluginManager,
-                basename: basename,
-                clientLoaderData: {},
-                serverLoaderData: opts.loaderData
-              }
-            }, rootContainer))));
-
-          case 6:
-          case "end":
-            return _context.stop();
-        }
+          }, rootContainer))));
+        case 6:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));
   return _getClientRootComponent.apply(this, arguments);
 }
-
 function Html(_ref) {
   var children = _ref.children,
-      loaderData = _ref.loaderData,
-      manifest = _ref.manifest;
+    loaderData = _ref.loaderData,
+    manifest = _ref.manifest;
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
   return /*#__PURE__*/React.createElement("html", {

package/dist/useFetcher.js

@@ -2,8 +2,7 @@ import { useLocation } from 'react-router-dom';
 import { useAppData } from "./appContext";
 export function __useFetcher() {
   var _useAppData = useAppData(),
-      preloadRoute = _useAppData.preloadRoute;
-
+    preloadRoute = _useAppData.preloadRoute;
   var location = useLocation();
   return {
     load: function load(path) {

package/dist/withRouter.js

@@ -37,6 +37,5 @@ export function withRouter(Component) {
       navigate: navigate
     }));
   }
-
   return ComponentWithRouterProp;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-canary.20230223.1",
+  "version": "4.0.0-canary.20230227.1",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -22,7 +22,7 @@
     "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
-    "@babel/runtime": "7.20.7",
+    "@babel/runtime": "7.21.0",
     "@loadable/component": "5.15.2",
     "history": "5.3.0",
     "react-helmet-async": "1.3.0",