@umijs/renderer-react 4.0.0-canary.20220831.1 → 4.0.0-canary.20220914.1

package/dist/appContext.d.ts

@@ -10,6 +10,7 @@ interface IAppContextType {
     clientLoaderData: ILoaderData;
     preloadRoute?: (to: string) => void;
     serverLoaderData: ILoaderData;
+    history?: any;
 }
 export declare const AppContext: React.Context<IAppContextType>;
 export declare function useAppData(): IAppContextType;

package/dist/browser.d.ts

@@ -15,4 +15,5 @@ export declare function renderClient(opts: {
     loadingComponent?: React.ReactNode;
     history: History;
     hydrate?: boolean;
+    reactRouter5Compat?: boolean;
 }): void;

package/dist/browser.js

@@ -66,7 +66,8 @@ export function renderClient(opts) {
   var clientRoutes = createClientRoutes({
     routesById: opts.routes,
     routeComponents: opts.routeComponents,
-    loadingComponent: opts.loadingComponent
+    loadingComponent: opts.loadingComponent,
+    reactRouter5Compat: opts.reactRouter5Compat
   });
   opts.pluginManager.applyPlugins({
     key: 'patchClientRoutes',
@@ -202,7 +203,8 @@ export function renderClient(opts) {
         basename: basename,
         clientLoaderData: clientLoaderData,
         serverLoaderData: serverLoaderData,
-        preloadRoute: handleRouteChange
+        preloadRoute: handleRouteChange,
+        history: opts.history
       }
     }, rootContainer);
   };

package/dist/link.js

@@ -1,18 +1,15 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useAppData } from "./appContext";
-import { jsx as _jsx } from "react/jsx-runtime";
 export function LinkWithPrefetch(props) {
   var appData = useAppData();
   var to = typeof props.to === 'string' ? props.to : props.to.pathname;
-  return /*#__PURE__*/_jsx(Link, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Link, _extends({
     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
-  }));
+  }, props), props.children);
 }

package/dist/routes.d.ts

@@ -5,4 +5,5 @@ export declare function createClientRoutes(opts: {
     routeComponents: Record<string, any>;
     parentId?: string;
     loadingComponent?: React.ReactNode;
+    reactRouter5Compat?: boolean;
 }): IClientRoute[];

package/dist/routes.js

@@ -1,11 +1,12 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 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 { jsx as _jsx } from "react/jsx-runtime";
+import { generatePath, Navigate, useParams, Outlet } from 'react-router-dom';
+import { RouteContext, useRouteData } from "./routeContext";
+import { useAppData } from "./appContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
       parentId = opts.parentId,
@@ -13,16 +14,23 @@ export function createClientRoutes(opts) {
   return Object.keys(routesById).filter(function (id) {
     return routesById[id].parentId === parentId;
   }).map(function (id) {
-    var route = createClientRoute({
+    var route = createClientRoute(_objectSpread({
       route: routesById[id],
       routeComponent: routeComponents[id],
-      loadingComponent: opts.loadingComponent
-    });
+      loadingComponent: opts.loadingComponent,
+      reactRouter5Compat: opts.reactRouter5Compat
+    }, opts.reactRouter5Compat && {
+      // TODO: 这个不准，没考虑 patchClientRoutes 的场景
+      hasChildren: Object.keys(routesById).filter(function (rid) {
+        return routesById[rid].parentId === id;
+      }).length > 0
+    }));
     var children = createClientRoutes({
       routesById: routesById,
       routeComponents: routeComponents,
       parentId: route.id,
-      loadingComponent: opts.loadingComponent
+      loadingComponent: opts.loadingComponent,
+      reactRouter5Compat: opts.reactRouter5Compat
     });
 
     if (children.length > 0) {
@@ -43,7 +51,7 @@ function NavigateWithParams(props) {
     to: generatePath(props.to, params)
   });
 
-  return /*#__PURE__*/_jsx(Navigate, _objectSpread({
+  return /*#__PURE__*/React.createElement(Navigate, _extends({
     replace: true
   }, propsWithParams));
 }
@@ -54,40 +62,58 @@ function createClientRoute(opts) {
   var redirect = route.redirect,
       props = _objectWithoutProperties(route, _excluded);
 
+  var Remote = opts.reactRouter5Compat ? RemoteComponentReactRouter5 : RemoteComponent;
   return _objectSpread({
-    element: redirect ? /*#__PURE__*/_jsx(NavigateWithParams, {
+    element: redirect ? /*#__PURE__*/React.createElement(NavigateWithParams, {
       to: redirect
-    }) : /*#__PURE__*/_jsx(RouteContext.Provider, {
+    }) : /*#__PURE__*/React.createElement(RouteContext.Provider, {
       value: {
         route: opts.route
-      },
-      children: /*#__PURE__*/_jsx(RemoteComponent, {
-        loader: opts.routeComponent,
-        loadingComponent: opts.loadingComponent || DefaultLoading
-      })
-    })
+      }
+    }, /*#__PURE__*/React.createElement(Remote, {
+      loader: /*#__PURE__*/React.memo(opts.routeComponent),
+      loadingComponent: opts.loadingComponent || DefaultLoading,
+      hasChildren: opts.hasChildren
+    }))
   }, props);
 }
 
 function DefaultLoading() {
-  return /*#__PURE__*/_jsx("div", {});
+  return /*#__PURE__*/React.createElement("div", null);
 }
 
-function RemoteComponent(props) {
-  var useSuspense = true; // !!React.startTransition;
+function RemoteComponentReactRouter5(props) {
+  var _useRouteData = useRouteData(),
+      route = _useRouteData.route;
 
-  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 />;
-  }
+  var _useAppData = useAppData(),
+      history = _useAppData.history,
+      clientRoutes = _useAppData.clientRoutes;
+
+  var params = useParams();
+  var match = {
+    params: params,
+    isExact: true,
+    path: route.path,
+    url: history.location.pathname
+  }; // staticContext 没有兼容 好像没看到对应的兼容写法
+
+  var Component = props.loader;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Component, {
+    location: history.location,
+    match: match,
+    history: history,
+    params: params,
+    route: route,
+    routes: clientRoutes
+  }, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null)));
+}
+
+function RemoteComponent(props) {
+  var Component = props.loader;
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Component, null));
 }

package/dist/server.js

@@ -1,23 +1,21 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/regeneratorRuntime";
 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 { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 // 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) {
+  _getClientRootComponent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(opts) {
     var basename, components, clientRoutes, rootContainer, _i, _arr, key;
 
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
@@ -27,11 +25,10 @@ function _getClientRootComponent() {
               routesById: opts.routes,
               routeComponents: components
             });
-            rootContainer = /*#__PURE__*/_jsx(StaticRouter, {
+            rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
               basename: basename,
-              location: opts.location,
-              children: /*#__PURE__*/_jsx(Routes, {})
-            });
+              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++) {
@@ -44,22 +41,20 @@ function _getClientRootComponent() {
               });
             }
 
-            return _context.abrupt("return", /*#__PURE__*/_jsx(Html, {
+            return _context.abrupt("return", /*#__PURE__*/React.createElement(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
-              })
-            }));
+              manifest: opts.manifest
+            }, /*#__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":
@@ -77,31 +72,25 @@ function Html(_ref) {
       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))
-        }
-      })]
-    })]
-  });
+  return /*#__PURE__*/React.createElement("html", {
+    lang: "en"
+  }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
+    charSet: "utf-8"
+  }), /*#__PURE__*/React.createElement("meta", {
+    name: "viewport",
+    content: "width=device-width, initial-scale=1"
+  }), manifest.assets['umi.css'] && /*#__PURE__*/React.createElement("link", {
+    rel: "stylesheet",
+    href: manifest.assets['umi.css']
+  })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
+    dangerouslySetInnerHTML: {
+      __html: "<b>Enable JavaScript to run this app.</b>"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "root"
+  }, children), /*#__PURE__*/React.createElement("script", {
+    dangerouslySetInnerHTML: {
+      __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData))
+    }
+  })));
 }

package/package.json

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