@umijs/renderer-react 4.0.0-rc.1 → 4.0.0-rc.10

package/dist/browser.d.ts

@@ -1,4 +1,5 @@
 import { History } from 'history';
+import React from 'react';
 import { IRouteComponents, IRoutesById } from './types';
 export declare function renderClient(opts: {
     rootElement?: HTMLElement;
@@ -6,5 +7,6 @@ export declare function renderClient(opts: {
     routeComponents: IRouteComponents;
     pluginManager: any;
     basename?: string;
+    loadingComponent?: React.ReactNode;
     history: History;
 }): void;

package/dist/browser.js

@@ -10,18 +10,22 @@ function BrowserRoutes(props) {
         location: history.location,
     });
     React.useLayoutEffect(() => history.listen(setState), [history]);
-    React.useLayoutEffect(() => history.listen((location, action) => {
-        props.pluginManager.applyPlugins({
-            key: 'onRouteChange',
-            type: 'event',
-            args: {
-                routes: props.routes,
-                clientRoutes: props.clientRoutes,
-                location,
-                action,
-            },
-        });
-    }), [history, props.routes, props.clientRoutes]);
+    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,
+                },
+            });
+        }
+        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));
 }
 function Routes() {
@@ -34,6 +38,7 @@ export function renderClient(opts) {
     const clientRoutes = createClientRoutes({
         routesById: opts.routes,
         routeComponents: opts.routeComponents,
+        loadingComponent: opts.loadingComponent,
     });
     let rootContainer = (React.createElement(BrowserRoutes, { basename: basename, pluginManager: opts.pluginManager, routes: opts.routes, clientRoutes: clientRoutes, history: opts.history },
         React.createElement(Routes, null)));

package/dist/routes.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { IRoute, IRoutesById } from './types';
 export declare function createClientRoutes(opts: {
     routesById: IRoutesById;
     routeComponents: Record<string, any>;
     parentId?: string;
+    loadingComponent?: React.ReactNode;
 }): {
     parentId?: string | undefined;
     id: string;
@@ -14,6 +15,7 @@ export declare function createClientRoutes(opts: {
 export declare function createClientRoute(opts: {
     route: IRoute;
     routeComponent: any;
+    loadingComponent?: React.ReactNode;
 }): {
     parentId?: string | undefined;
     id: string;

package/dist/routes.js

@@ -22,11 +22,13 @@ export function createClientRoutes(opts) {
         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) {
             // @ts-ignore
@@ -45,14 +47,14 @@ export function createClientRoute(opts) {
     return Object.assign({ id: id, path: path, index: index, element: redirect ? (React.createElement(Navigate, { to: redirect })) : (React.createElement(RouteContext.Provider, { value: {
                 route: opts.route,
             } },
-            React.createElement(RemoteComponent, { loader: opts.routeComponent }))) }, props);
+            React.createElement(RemoteComponent, { loader: opts.routeComponent, loadingComponent: opts.loadingComponent || DefaultLoading }))) }, props);
 }
 function DefaultLoading() {
-    return React.createElement("div", null, "Loading...");
+    return React.createElement("div", null);
 }
 function RemoteComponent(props) {
     const Component = loadable(props.loader, {
-        fallback: React.createElement(DefaultLoading, null),
+        fallback: React.createElement(props.loadingComponent, null),
     });
     return React.createElement(Component, null);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-rc.1",
+  "version": "4.0.0-rc.10",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@loadable/component": "5.15.2",
-    "history": "5.1.0",
-    "react-router-dom": "6.1.1"
+    "history": "5.3.0",
+    "react-router-dom": "6.2.2"
   },
   "devDependencies": {
     "react": "17.0.2",