@umijs/renderer-react 4.0.0-beta.9 → 4.0.0-rc.3

package/dist/appContext.d.ts

@@ -1,9 +1,3 @@
 import React from 'react';
-export interface IAppContextType {
-    routes: any;
-    routeComponents: any;
-    clientRoutes: any;
-    pluginManager: any;
-}
-export declare const AppContext: React.Context<IAppContextType | undefined>;
-export declare function useAppContext(): IAppContextType;
+export declare const AppContext: React.Context<any>;
+export declare function useAppData(): any;

package/dist/appContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
-export const AppContext = React.createContext(undefined);
-export function useAppContext() {
+export const AppContext = React.createContext(null);
+export function useAppData() {
     return React.useContext(AppContext);
 }

package/dist/browser.d.ts

@@ -1,12 +1,12 @@
-import { IRoutesById } from './types';
-export declare function Browser(props: {
-    routes: IRoutesById;
-    routeComponents: Record<string, any>;
-    pluginManager: any;
-}): any;
+import { History } from 'history';
+import React from 'react';
+import { IRouteComponents, IRoutesById } from './types';
 export declare function renderClient(opts: {
     rootElement?: HTMLElement;
     routes: IRoutesById;
-    routeComponents: Record<string, any>;
+    routeComponents: IRouteComponents;
     pluginManager: any;
+    basename?: string;
+    loadingComponent?: React.ReactNode;
+    history: History;
 }): void;

package/dist/browser.js

@@ -1,27 +1,73 @@
-import { createBrowserHistory } from 'history';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { App } from './app';
-export function Browser(props) {
-    const historyRef = React.useRef();
-    if (historyRef.current === undefined) {
-        historyRef.current = createBrowserHistory({ window });
-    }
-    const history = historyRef.current;
-    const [state, dispatch] = React.useReducer((_, update) => update, {
+import { Router, useRoutes } from 'react-router-dom';
+import { AppContext, useAppData } from './appContext';
+import { createClientRoutes } from './routes';
+function BrowserRoutes(props) {
+    const { history } = props;
+    const [state, setState] = React.useState({
         action: history.action,
         location: history.location,
     });
-    React.useLayoutEffect(() => history.listen(dispatch), [history]);
-    return props.pluginManager.applyPlugins({
-        type: 'modify',
-        key: 'rootContainer',
-        initialValue: (React.createElement(App, { navigator: history, location: state.location, routes: props.routes, routeComponents: props.routeComponents, pluginManager: props.pluginManager })),
-        args: {},
-    });
+    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]);
+    return (React.createElement(Router, { navigator: history, location: state.location, basename: props.basename }, props.children));
+}
+function Routes() {
+    const { clientRoutes } = useAppData();
+    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,
+    });
+    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: {},
+        });
+    }
+    const browser = (React.createElement(AppContext.Provider, { value: {
+            routes: opts.routes,
+            routeComponents: opts.routeComponents,
+            clientRoutes,
+            pluginManager: opts.pluginManager,
+            rootElement: opts.rootElement,
+            basename,
+        } }, rootContainer));
     // @ts-ignore
-    const root = ReactDOM.createRoot(opts.rootElement || document.getElementById('root'));
-    root.render(React.createElement(Browser, { routes: opts.routes, routeComponents: opts.routeComponents, pluginManager: opts.pluginManager }));
+    if (ReactDOM.createRoot) {
+        // @ts-ignore
+        ReactDOM.createRoot(rootElement).render(browser);
+    }
+    else {
+        ReactDOM.render(browser, rootElement);
+    }
 }

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-export { Link, Outlet } from 'react-router-dom';
-export * from './browser';
+export { createBrowserHistory, createHashHistory, createMemoryHistory, History, } from 'history';
+export { createSearchParams, Link, matchPath, matchRoutes, NavLink, Outlet, useLocation, useMatch, useNavigate, useOutlet, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
+export { useAppData } from './appContext';
+export { renderClient } from './browser';
+export { useRouteData } from './routeContext';

package/dist/index.js

@@ -1,2 +1,5 @@
-export { Link, Outlet } from 'react-router-dom';
-export * from './browser';
+export { createBrowserHistory, createHashHistory, createMemoryHistory, } from 'history';
+export { createSearchParams, Link, matchPath, matchRoutes, NavLink, Outlet, useLocation, useMatch, useNavigate, useOutlet, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
+export { useAppData } from './appContext';
+export { renderClient } from './browser';
+export { useRouteData } from './routeContext';

package/dist/routeContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface IRouteContextType {
+    route: any;
+}
+export declare const RouteContext: React.Context<IRouteContextType | undefined>;
+export declare function useRouteData(): IRouteContextType;

package/dist/routeContext.js

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

package/dist/routes.d.ts

@@ -1,10 +1,12 @@
-/// <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;
-    Component: any;
+    loadingComponent?: React.ReactNode;
 }): {
+    parentId?: string | undefined;
     id: string;
     path: string | undefined;
     index: boolean | undefined;
@@ -12,8 +14,10 @@ export declare function createClientRoutes(opts: {
 }[];
 export declare function createClientRoute(opts: {
     route: IRoute;
-    Component: any;
+    routeComponent: any;
+    loadingComponent?: React.ReactNode;
 }): {
+    parentId?: string | undefined;
     id: string;
     path: string | undefined;
     index: boolean | undefined;

package/dist/routes.js

@@ -1,32 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// @ts-ignore
+import loadable from '@loadable/component';
 import React from 'react';
 import { Navigate } from 'react-router-dom';
+import { RouteContext } from './routeContext';
 export function createClientRoutes(opts) {
-    const { routesById, parentId, Component } = opts;
+    const { routesById, parentId, routeComponents } = opts;
     return Object.keys(routesById)
         .filter((id) => routesById[id].parentId === parentId)
         .map((id) => {
         const route = createClientRoute({
             route: routesById[id],
-            Component,
+            routeComponent: routeComponents[id],
+            loadingComponent: opts.loadingComponent,
         });
         const children = createClientRoutes({
             routesById,
+            routeComponents,
             parentId: route.id,
-            Component,
+            loadingComponent: opts.loadingComponent,
         });
         if (children.length > 0) {
             // @ts-ignore
             route.children = children;
+            // TODO: remove me
+            // compatible with @ant-design/pro-layout
+            // @ts-ignore
+            route.routes = children;
         }
         return route;
     });
 }
 export function createClientRoute(opts) {
-    const { route, Component } = opts;
-    return {
-        id: route.id,
-        path: route.path,
-        index: route.index,
-        element: route.redirect ? (React.createElement(Navigate, { to: route.redirect })) : (React.createElement(Component, { id: route.id })),
-    };
+    const { route } = opts;
+    const { id, path, index, redirect } = route, props = __rest(route, ["id", "path", "index", "redirect"]);
+    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, loadingComponent: opts.loadingComponent || DefaultLoading }))) }, props);
+}
+function DefaultLoading() {
+    return React.createElement("div", null);
+}
+function RemoteComponent(props) {
+    const Component = loadable(props.loader, {
+        fallback: React.createElement(props.loadingComponent, null),
+    });
+    return React.createElement(Component, null);
 }

package/dist/types.d.ts

@@ -8,3 +8,6 @@ export interface IRoute {
 export interface IRoutesById {
     [id: string]: IRoute;
 }
+export interface IRouteComponents {
+    [id: string]: any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0-rc.3",
   "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",
@@ -21,12 +21,13 @@
     "dev": "pnpm build -- --watch"
   },
   "dependencies": {
-    "history": "5.0.1",
-    "react-router-dom": "6.0.0-beta.8"
+    "@loadable/component": "5.15.2",
+    "history": "5.2.0",
+    "react-router-dom": "6.2.1"
   },
   "devDependencies": {
-    "react": "18.0.0-alpha-f2c381131-20211004",
-    "react-dom": "18.0.0-alpha-f2c381131-20211004"
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/dist/app.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { Location } from 'history';
-import { Navigator } from 'react-router-dom';
-import { IRoutesById } from './types';
-export declare function App(props: {
-    navigator: Navigator;
-    location: Location;
-    routes: IRoutesById;
-    routeComponents: Record<string, any>;
-    pluginManager: any;
-}): JSX.Element;
-export declare function RouteComponent(props: {
-    id: string;
-}): JSX.Element;

package/dist/app.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Router, useRoutes } from 'react-router-dom';
-import { AppContext, useAppContext } from './appContext';
-import { createClientRoutes } from './routes';
-export function App(props) {
-    const clientRoutes = React.useMemo(() => {
-        return createClientRoutes({
-            routesById: props.routes,
-            Component: RouteComponent,
-        });
-    }, [props.routes]);
-    let ret = (React.createElement(AppContext.Provider, { value: {
-            routes: props.routes,
-            routeComponents: props.routeComponents,
-            pluginManager: props.pluginManager,
-            clientRoutes,
-        } },
-        React.createElement(Router, { navigator: props.navigator, location: props.location },
-            React.createElement(Routes, null))));
-    for (const key of [
-        'innerProvider',
-        'i18nProvider',
-        'dataflowProvider',
-        'outerProvider',
-    ]) {
-        ret = props.pluginManager.applyPlugins({
-            type: 'modify',
-            key: key,
-            initialValue: ret,
-        });
-    }
-    return ret;
-}
-function Routes() {
-    const { clientRoutes } = useAppContext();
-    return useRoutes(clientRoutes) || clientRoutes[0].element;
-}
-function Loading() {
-    return React.createElement("div", null, "Loading...");
-}
-export function RouteComponent(props) {
-    const loader = useAppContext().routeComponents[props.id];
-    const RouteComponent = React.lazy(loader);
-    // ref: https://reactjs.org/docs/code-splitting.html
-    // TODO: replace with https://github.com/gregberge/loadable-components when we support ssr
-    return (React.createElement(React.Suspense, { fallback: React.createElement(Loading, null) },
-        React.createElement(RouteComponent, null)));
-}