@umijs/renderer-react 4.0.7 → 4.0.8

package/dist/appContext.js

@@ -1,16 +1,20 @@
 import React from 'react';
-import { useRouteData } from './routeContext';
-export const AppContext = React.createContext({});
+import { useRouteData } from "./routeContext";
+export var AppContext = /*#__PURE__*/React.createContext({});
 export function useAppData() {
-    return React.useContext(AppContext);
+  return React.useContext(AppContext);
 }
 export function useServerLoaderData() {
-    const route = useRouteData();
-    const appData = useAppData();
-    return { data: appData.serverLoaderData[route.route.id] };
+  var route = useRouteData();
+  var appData = useAppData();
+  return {
+    data: appData.serverLoaderData[route.route.id]
+  };
 }
 export function useClientLoaderData() {
-    const route = useRouteData();
-    const appData = useAppData();
-    return { data: appData.clientLoaderData[route.route.id] };
-}
+  var route = useRouteData();
+  var appData = useAppData();
+  return {
+    data: appData.clientLoaderData[route.route.id]
+  };
+}

package/dist/browser.js

@@ -1,167 +1,220 @@
-import React, { useCallback, useEffect, useState } from 'react';
-// compatible with < react@18 in @umijs/preset-umi/src/features/react
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+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 ReactDOM from 'react-dom/client';
 import { matchRoutes, Router, useRoutes } from 'react-router-dom';
-import { AppContext, useAppData } from './appContext';
-import { createClientRoutes } from './routes';
+import { AppContext, useAppData } from "./appContext";
+import { createClientRoutes } from "./routes";
+import { jsx as _jsx } from "react/jsx-runtime";
+
 function BrowserRoutes(props) {
-    const { history } = props;
-    const [state, setState] = React.useState({
-        action: history.action,
-        location: history.location,
-    });
-    React.useLayoutEffect(() => history.listen(setState), [history]);
-    React.useLayoutEffect(() => {
-        function onRouteChange(opts) {
-            props.pluginManager.applyPlugins({
-                key: 'onRouteChange',
-                type: 'event',
-                args: {
-                    routes: props.routes,
-                    clientRoutes: props.clientRoutes,
-                    location: opts.location,
-                    action: opts.action,
-                },
-            });
+  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];
+
+  React.useLayoutEffect(function () {
+    return history.listen(setState);
+  }, [history]);
+  React.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
         }
-        history.listen(onRouteChange);
-        onRouteChange({ location: state.location, action: state.action });
-    }, [history, props.routes, props.clientRoutes]);
-    return (React.createElement(Router, { navigator: history, location: state.location, basename: props.basename }, props.children));
+      });
+    }
+
+    history.listen(onRouteChange);
+    onRouteChange({
+      location: state.location,
+      action: state.action
+    });
+  }, [history, props.routes, props.clientRoutes]);
+  return /*#__PURE__*/_jsx(Router, {
+    navigator: history,
+    location: state.location,
+    basename: props.basename,
+    children: props.children
+  });
 }
+
 export function Routes() {
-    const { clientRoutes } = useAppData();
-    return useRoutes(clientRoutes);
+  var _useAppData = useAppData(),
+      clientRoutes = _useAppData.clientRoutes;
+
+  return useRoutes(clientRoutes);
 }
 export function renderClient(opts) {
-    const basename = opts.basename || '/';
-    const rootElement = opts.rootElement || document.getElementById('root');
-    const clientRoutes = createClientRoutes({
-        routesById: opts.routes,
-        routeComponents: opts.routeComponents,
-        loadingComponent: opts.loadingComponent,
-    });
-    opts.pluginManager.applyPlugins({
-        key: 'patchClientRoutes',
-        type: 'event',
-        args: {
-            routes: clientRoutes,
-        },
-    });
-    let rootContainer = (React.createElement(BrowserRoutes, { basename: basename, pluginManager: opts.pluginManager, routes: opts.routes, clientRoutes: clientRoutes, history: opts.history },
-        React.createElement(Routes, null)));
-    for (const key of [
-        // Lowest to the highest priority
-        'innerProvider',
-        'i18nProvider',
-        'accessProvider',
-        'dataflowProvider',
-        'outerProvider',
-        'rootContainer',
-    ]) {
-        rootContainer = opts.pluginManager.applyPlugins({
-            type: 'modify',
-            key: key,
-            initialValue: rootContainer,
-            args: {},
-        });
+  var basename = opts.basename || '/';
+  var rootElement = opts.rootElement || document.getElementById('root');
+  var clientRoutes = createClientRoutes({
+    routesById: opts.routes,
+    routeComponents: opts.routeComponents,
+    loadingComponent: opts.loadingComponent
+  });
+  opts.pluginManager.applyPlugins({
+    key: 'patchClientRoutes',
+    type: 'event',
+    args: {
+      routes: clientRoutes
     }
-    const Browser = () => {
-        const [clientLoaderData, setClientLoaderData] = useState({});
-        const [serverLoaderData, setServerLoaderData] = useState(
+  });
+
+  var rootContainer = /*#__PURE__*/_jsx(BrowserRoutes, {
+    basename: basename,
+    pluginManager: opts.pluginManager,
+    routes: opts.routes,
+    clientRoutes: clientRoutes,
+    history: opts.history,
+    children: /*#__PURE__*/_jsx(Routes, {})
+  });
+
+  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: {}
+    });
+  }
+
+  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];
+
+    var handleRouteChange = useCallback(function (id, isFirst) {
+      var _matchRoutes;
+
+      // Patched routes has to id
+      var matchedRouteIds = (((_matchRoutes = matchRoutes(clientRoutes, id)) === 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
-        window.__UMI_LOADER_DATA__ || {});
-        const handleRouteChange = useCallback((id, isFirst) => {
-            var _a;
-            // Patched routes has to id
-            const matchedRouteIds = (((_a = matchRoutes(clientRoutes, id)) === null || _a === void 0 ? void 0 : _a.map(
-            // @ts-ignore
-            (route) => route.route.id)) || []).filter(Boolean);
-            matchedRouteIds.forEach((id) => {
-                var _a;
-                // preload
-                // @ts-ignore
-                const manifest = window.__umi_manifest__;
-                if (manifest) {
-                    const routeIdReplaced = id.replace(/[\/\-]/g, '_');
-                    const preloadId = `preload-${routeIdReplaced}.js`;
-                    if (!document.getElementById(preloadId)) {
-                        const keys = Object.keys(manifest).filter((k) => k.startsWith(routeIdReplaced + '.'));
-                        keys.forEach((key) => {
-                            if (!/\.(js|css)$/.test(key)) {
-                                throw Error(`preload not support ${key} file`);
-                            }
-                            let file = manifest[key];
-                            const 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(`^${opts.publicPath}`), 
-                                // @ts-ignore
-                                window.publicPath);
-                            }
-                            link.href = file;
-                            document.head.appendChild(link);
-                        });
-                    }
-                }
-                // server loader
-                if (!isFirst && opts.routes[id].hasServerLoader) {
-                    fetch('/__serverLoader?route=' + id)
-                        .then((d) => d.json())
-                        .then((data) => {
-                        // setServerLoaderData when startTransition because if ssr is enabled,
-                        // the component may being hydrated and setLoaderData will break the hydration
-                        React.startTransition(() => {
-                            setServerLoaderData((d) => ({ ...d, [id]: data }));
-                        });
-                    })
-                        .catch(console.error);
-                }
-                // client loader
-                // onPatchClientRoutes 添加的 route 在 opts.routes 里是不存在的
-                const clientLoader = (_a = opts.routes[id]) === null || _a === void 0 ? void 0 : _a.clientLoader;
-                if (clientLoader && !clientLoaderData[id]) {
-                    clientLoader().then((data) => {
-                        setClientLoaderData((d) => ({ ...d, [id]: data }));
-                    });
-                }
+        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 + '.');
             });
-        }, [clientLoaderData]);
-        useEffect(() => {
-            handleRouteChange(window.location.pathname, true);
-            return opts.history.listen((e) => {
-                handleRouteChange(e.location.pathname);
+            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);
             });
-        }, []);
-        return (React.createElement(AppContext.Provider, { value: {
-                routes: opts.routes,
-                routeComponents: opts.routeComponents,
-                clientRoutes,
-                pluginManager: opts.pluginManager,
-                rootElement: opts.rootElement,
-                basename,
-                clientLoaderData,
-                serverLoaderData,
-                preloadRoute: handleRouteChange,
-            } }, rootContainer));
-    };
-    if (opts.hydrate) {
-        ReactDOM.hydrateRoot(rootElement, React.createElement(Browser, null));
-    }
-    else {
-        if (ReactDOM.createRoot) {
-            ReactDOM.createRoot(rootElement).render(React.createElement(Browser, null));
-        }
-        else {
-            // @ts-ignore
-            ReactDOM.render(React.createElement(Browser, null), rootElement);
+          }
+        } // 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();
+          }).then(function (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));
+              });
+            });
+          }).catch(console.error);
+        } // 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) {
+              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);
+      });
+    }, []);
+    return /*#__PURE__*/_jsx(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
+      },
+      children: rootContainer
+    });
+  };
+
+  if (opts.hydrate) {
+    ReactDOM.hydrateRoot(rootElement, /*#__PURE__*/_jsx(Browser, {}));
+  } else {
+    if (ReactDOM.createRoot) {
+      ReactDOM.createRoot(rootElement).render( /*#__PURE__*/_jsx(Browser, {}));
+    } else {
+      // @ts-ignore
+      ReactDOM.render( /*#__PURE__*/_jsx(Browser, {}), rootElement);
     }
-}
+  }
+}

package/dist/index.d.ts

@@ -1,7 +1,8 @@
-export { createBrowserHistory, createHashHistory, createMemoryHistory, History, } from 'history';
+export { createBrowserHistory, createHashHistory, createMemoryHistory, type History, } from 'history';
 export { createSearchParams, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
 export { useAppData, useClientLoaderData, useServerLoaderData, } from './appContext';
 export { renderClient } from './browser';
 export { LinkWithPrefetch as Link } from './link';
 export { useRouteData } from './routeContext';
 export { __useFetcher } from './useFetcher';
+export { withRouter, type RouteComponentProps } from './withRouter';

package/dist/index.js

@@ -1,7 +1,8 @@
-export { createBrowserHistory, createHashHistory, createMemoryHistory, } from 'history';
-export { createSearchParams, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
-export { useAppData, useClientLoaderData, useServerLoaderData, } from './appContext';
-export { renderClient } from './browser';
-export { LinkWithPrefetch as Link } from './link';
-export { useRouteData } from './routeContext';
-export { __useFetcher } from './useFetcher';
+export { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history';
+export { createSearchParams, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams } from 'react-router-dom';
+export { useAppData, useClientLoaderData, useServerLoaderData } from "./appContext";
+export { renderClient } from "./browser";
+export { LinkWithPrefetch as Link } from "./link";
+export { useRouteData } from "./routeContext";
+export { __useFetcher } from "./useFetcher";
+export { withRouter } from "./withRouter";

package/dist/link.js

@@ -1,8 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { useAppData } from './appContext';
+import { useAppData } from "./appContext";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function LinkWithPrefetch(props) {
-    const appData = useAppData();
-    const to = typeof props.to === 'string' ? props.to : props.to.pathname;
-    return (React.createElement(Link, { onMouseEnter: () => { var _a; return props.prefetch && to && ((_a = appData.preloadRoute) === null || _a === void 0 ? void 0 : _a.call(appData, to)); }, ...props }, props.children));
-}
+  var appData = useAppData();
+  var to = typeof props.to === 'string' ? props.to : props.to.pathname;
+  return /*#__PURE__*/_jsx(Link, _objectSpread(_objectSpread({
+    onMouseEnter: function onMouseEnter() {
+      var _appData$preloadRoute;
+
+      return props.prefetch && to && ((_appData$preloadRoute = appData.preloadRoute) === null || _appData$preloadRoute === void 0 ? void 0 : _appData$preloadRoute.call(appData, to));
+    }
+  }, props), {}, {
+    children: props.children
+  }));
+}

package/dist/routeContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
-export const RouteContext = React.createContext(undefined);
+export var RouteContext = /*#__PURE__*/React.createContext(undefined);
 export function useRouteData() {
-    return React.useContext(RouteContext);
-}
+  return React.useContext(RouteContext);
+}

package/dist/routes.js

@@ -1,68 +1,91 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["redirect"];
 // @ts-ignore
 import React from 'react';
 import { generatePath, Navigate, useParams } from 'react-router-dom';
-import { RouteContext } from './routeContext';
+import { RouteContext } from "./routeContext";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function createClientRoutes(opts) {
-    const { routesById, parentId, routeComponents } = opts;
-    return Object.keys(routesById)
-        .filter((id) => routesById[id].parentId === parentId)
-        .map((id) => {
-        const route = createClientRoute({
-            route: routesById[id],
-            routeComponent: routeComponents[id],
-            loadingComponent: opts.loadingComponent,
-        });
-        const children = createClientRoutes({
-            routesById,
-            routeComponents,
-            parentId: route.id,
-            loadingComponent: opts.loadingComponent,
-        });
-        if (children.length > 0) {
-            route.children = children;
-            // TODO: remove me
-            // compatible with @ant-design/pro-layout
-            route.routes = children;
-        }
-        return route;
+  var routesById = opts.routesById,
+      parentId = opts.parentId,
+      routeComponents = opts.routeComponents;
+  return Object.keys(routesById).filter(function (id) {
+    return routesById[id].parentId === parentId;
+  }).map(function (id) {
+    var route = createClientRoute({
+      route: routesById[id],
+      routeComponent: routeComponents[id],
+      loadingComponent: opts.loadingComponent
     });
+    var children = createClientRoutes({
+      routesById: routesById,
+      routeComponents: routeComponents,
+      parentId: route.id,
+      loadingComponent: opts.loadingComponent
+    });
+
+    if (children.length > 0) {
+      route.children = children; // TODO: remove me
+      // compatible with @ant-design/pro-layout
+
+      route.routes = children;
+    }
+
+    return route;
+  });
 }
+
 function NavigateWithParams(props) {
-    const params = useParams();
-    const propsWithParams = {
-        ...params,
-        to: generatePath(props.to, params),
-    };
-    return React.createElement(Navigate, { ...propsWithParams });
+  var params = useParams();
+
+  var propsWithParams = _objectSpread(_objectSpread({}, props), {}, {
+    to: generatePath(props.to, params)
+  });
+
+  return /*#__PURE__*/_jsx(Navigate, _objectSpread({}, propsWithParams));
 }
+
 function createClientRoute(opts) {
-    const { route } = opts;
-    const { redirect, ...props } = route;
-    return {
-        element: redirect ? (React.createElement(NavigateWithParams, { to: redirect })) : (React.createElement(RouteContext.Provider, { value: {
-                route: opts.route,
-            } },
-            React.createElement(RemoteComponent, { loader: opts.routeComponent, loadingComponent: opts.loadingComponent || DefaultLoading }))),
-        ...props,
-    };
+  var route = opts.route;
+
+  var redirect = route.redirect,
+      props = _objectWithoutProperties(route, _excluded);
+
+  return _objectSpread({
+    element: redirect ? /*#__PURE__*/_jsx(NavigateWithParams, {
+      to: redirect
+    }) : /*#__PURE__*/_jsx(RouteContext.Provider, {
+      value: {
+        route: opts.route
+      },
+      children: /*#__PURE__*/_jsx(RemoteComponent, {
+        loader: opts.routeComponent,
+        loadingComponent: opts.loadingComponent || DefaultLoading
+      })
+    })
+  }, props);
 }
+
 function DefaultLoading() {
-    return React.createElement("div", null);
+  return /*#__PURE__*/_jsx("div", {});
 }
+
 function RemoteComponent(props) {
-    const useSuspense = true; // !!React.startTransition;
-    if (useSuspense) {
-        const Component = props.loader;
-        return (React.createElement(React.Suspense, { fallback: React.createElement(props.loadingComponent, null) },
-            React.createElement(Component, null)));
-    }
-    else {
-        return null;
-        // // @ts-ignore
-        //     import loadable from '@loadable/component';
-        //     const Component = loadable(props.loader, {
-        //       fallback: <props.loadingComponent />,
-        //     });
-        //     return <Component />;
-    }
-}
+  var useSuspense = true; // !!React.startTransition;
+
+  if (useSuspense) {
+    var Component = props.loader;
+    return /*#__PURE__*/_jsx(React.Suspense, {
+      fallback: /*#__PURE__*/_jsx(props.loadingComponent, {}),
+      children: /*#__PURE__*/_jsx(Component, {})
+    });
+  } else {
+    return null; // // @ts-ignore
+    //     import loadable from '@loadable/component';
+    //     const Component = loadable(props.loader, {
+    //       fallback: <props.loadingComponent />,
+    //     });
+    //     return <Component />;
+  }
+}

package/dist/server.js

@@ -1,59 +1,107 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { StaticRouter } from 'react-router-dom/server';
-import { AppContext } from './appContext';
-import { Routes } from './browser';
-import { createClientRoutes } from './routes';
+import { AppContext } from "./appContext";
+import { Routes } from "./browser";
+import { createClientRoutes } from "./routes";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 // Get the root React component for ReactDOMServer.renderToString
-export async function getClientRootComponent(opts) {
-    const basename = '/';
-    const components = { ...opts.routeComponents };
-    const clientRoutes = createClientRoutes({
-        routesById: opts.routes,
-        routeComponents: components,
-    });
-    let rootContainer = (React.createElement(StaticRouter, { basename: basename, location: opts.location },
-        React.createElement(Routes, null)));
-    for (const key of [
-        // Lowest to the highest priority
-        'innerProvider',
-        'i18nProvider',
-        'accessProvider',
-        'dataflowProvider',
-        'outerProvider',
-        'rootContainer',
-    ]) {
-        rootContainer = opts.pluginManager.applyPlugins({
-            type: 'modify',
-            key: key,
-            initialValue: rootContainer,
-            args: {},
-        });
-    }
-    return (React.createElement(Html, { loaderData: opts.loaderData, manifest: opts.manifest },
-        React.createElement(AppContext.Provider, { value: {
-                routes: opts.routes,
-                routeComponents: opts.routeComponents,
-                clientRoutes,
-                pluginManager: opts.pluginManager,
-                basename,
-                clientLoaderData: {},
-                serverLoaderData: opts.loaderData,
-            } }, rootContainer)));
+export function getClientRootComponent(_x) {
+  return _getClientRootComponent.apply(this, arguments);
 }
-function Html({ children, loaderData, manifest }) {
-    // TODO: 处理 head 标签，比如 favicon.ico 的一致性
-    // TODO: root 支持配置
-    return (React.createElement("html", { lang: "en" },
-        React.createElement("head", null,
-            React.createElement("meta", { charSet: "utf-8" }),
-            React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
-            manifest.assets['umi.css'] && (React.createElement("link", { rel: "stylesheet", href: manifest.assets['umi.css'] }))),
-        React.createElement("body", null,
-            React.createElement("noscript", { dangerouslySetInnerHTML: {
-                    __html: `<b>Enable JavaScript to run this app.</b>`,
-                } }),
-            React.createElement("div", { id: "root" }, children),
-            React.createElement("script", { dangerouslySetInnerHTML: {
-                    __html: `window.__UMI_LOADER_DATA__ = ${JSON.stringify(loaderData)}`,
-                } }))));
+
+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
+            });
+            rootContainer = /*#__PURE__*/_jsx(StaticRouter, {
+              basename: basename,
+              location: opts.location,
+              children: /*#__PURE__*/_jsx(Routes, {})
+            });
+
+            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: {}
+              });
+            }
+
+            return _context.abrupt("return", /*#__PURE__*/_jsx(Html, {
+              loaderData: opts.loaderData,
+              manifest: opts.manifest,
+              children: /*#__PURE__*/_jsx(AppContext.Provider, {
+                value: {
+                  routes: opts.routes,
+                  routeComponents: opts.routeComponents,
+                  clientRoutes: clientRoutes,
+                  pluginManager: opts.pluginManager,
+                  basename: basename,
+                  clientLoaderData: {},
+                  serverLoaderData: opts.loaderData
+                },
+                children: 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;
+  // TODO: 处理 head 标签，比如 favicon.ico 的一致性
+  // TODO: root 支持配置
+  return /*#__PURE__*/_jsxs("html", {
+    lang: "en",
+    children: [/*#__PURE__*/_jsxs("head", {
+      children: [/*#__PURE__*/_jsx("meta", {
+        charSet: "utf-8"
+      }), /*#__PURE__*/_jsx("meta", {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1"
+      }), manifest.assets['umi.css'] && /*#__PURE__*/_jsx("link", {
+        rel: "stylesheet",
+        href: manifest.assets['umi.css']
+      })]
+    }), /*#__PURE__*/_jsxs("body", {
+      children: [/*#__PURE__*/_jsx("noscript", {
+        dangerouslySetInnerHTML: {
+          __html: "<b>Enable JavaScript to run this app.</b>"
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        id: "root",
+        children: children
+      }), /*#__PURE__*/_jsx("script", {
+        dangerouslySetInnerHTML: {
+          __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData))
+        }
+      })]
+    })]
+  });
+}

package/dist/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/useFetcher.d.ts

@@ -1,3 +1,3 @@
 export declare function __useFetcher(): {
-    load(path?: string): void;
+    load(path?: string | undefined): void;
 };

package/dist/useFetcher.js

@@ -1,11 +1,13 @@
 import { useLocation } from 'react-router-dom';
-import { useAppData } from './appContext';
+import { useAppData } from "./appContext";
 export function __useFetcher() {
-    const { preloadRoute } = useAppData();
-    const location = useLocation();
-    return {
-        load(path) {
-            preloadRoute(path || location.pathname);
-        },
-    };
-}
+  var _useAppData = useAppData(),
+      preloadRoute = _useAppData.preloadRoute;
+
+  var location = useLocation();
+  return {
+    load: function load(path) {
+      preloadRoute(path || location.pathname);
+    }
+  };
+}

package/dist/withRouter.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+export interface RouteComponentProps<T = ReturnType<typeof useParams>> {
+    history: {
+        back: () => void;
+        goBack: () => void;
+        location: ReturnType<typeof useLocation>;
+        push: (url: string, state?: any) => void;
+    };
+    location: ReturnType<typeof useLocation>;
+    match: {
+        params: T;
+    };
+    params: T;
+    navigate: ReturnType<typeof useNavigate>;
+}
+export declare function withRouter<P extends RouteComponentProps<P>>(Component: React.ComponentType<P>): (props: P) => JSX.Element;

package/dist/withRouter.js

@@ -0,0 +1,43 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function withRouter(Component) {
+  function ComponentWithRouterProp(props) {
+    var location = useLocation();
+    var navigate = useNavigate();
+    var params = useParams();
+    var match = {
+      params: params
+    };
+    var history = {
+      back: function back() {
+        return navigate(-1);
+      },
+      goBack: function goBack() {
+        return navigate(-1);
+      },
+      location: location,
+      push: function push(url, state) {
+        return navigate(url, {
+          state: state
+        });
+      },
+      replace: function replace(url, state) {
+        return navigate(url, {
+          replace: true,
+          state: state
+        });
+      }
+    };
+    return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+      history: history,
+      location: location,
+      match: match,
+      params: params,
+      navigate: navigate
+    }));
+  }
+
+  return ComponentWithRouterProp;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -16,12 +16,13 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm tsc",
+    "build": "pnpm father build",
     "build:deps": "umi-scripts bundleDeps",
-    "dev": "pnpm build --watch",
+    "dev": "pnpm father dev",
     "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
+    "@babel/runtime": "7.17.9",
     "@loadable/component": "5.15.2",
     "history": "5.3.0",
     "react-router-dom": "6.3.0"