@umijs/renderer-react 4.0.0-beta.7 → 4.0.0-canary.202200505.1

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,84 @@
-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, {
+// compatible with < react@18 in @umijs/preset-umi/src/features/react
+import ReactDOM from 'react-dom/client';
+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(() => {
+        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() {
+    const { clientRoutes } = useAppData();
+    return useRoutes(clientRoutes);
 }
 export function renderClient(opts) {
-    // @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 }));
+    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: {},
+        });
+    }
+    const browser = (React.createElement(AppContext.Provider, { value: {
+            routes: opts.routes,
+            routeComponents: opts.routeComponents,
+            clientRoutes,
+            pluginManager: opts.pluginManager,
+            rootElement: opts.rootElement,
+            basename,
+        } }, rootContainer));
+    if (ReactDOM.createRoot) {
+        ReactDOM.createRoot(rootElement).render(browser);
+    }
+    else {
+        // @ts-ignore
+        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, Navigate, 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, Navigate, 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,31 +1,55 @@
+// @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;
+    const { route } = opts;
+    const { id, path, index, redirect, ...props } = route;
     return {
-        id: route.id,
-        path: route.path,
-        index: route.index,
-        element: React.createElement(Component, { id: route.id }),
+        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

@@ -3,7 +3,11 @@ export interface IRoute {
     path?: string;
     index?: boolean;
     parentId?: string;
+    redirect?: string;
 }
 export interface IRoutesById {
     [id: string]: IRoute;
 }
+export interface IRouteComponents {
+    [id: string]: any;
+}

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-canary.202200505.1",
   "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",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-next"
+  },
+  "license": "MIT",
+  "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -9,33 +17,27 @@
   ],
   "scripts": {
     "build": "pnpm tsc",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
-    "dev": "pnpm build -- --watch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/umijs/umi-next"
-  },
-  "authors": [
-    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
-  ],
-  "license": "MIT",
-  "bugs": "https://github.com/umijs/umi-next/issues",
-  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/renderer-react#readme",
-  "publishConfig": {
-    "access": "public"
+    "build:deps": "umi-scripts bundleDeps",
+    "dev": "pnpm build -- --watch",
+    "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
-    "history": "5.0.1",
-    "react-router-dom": "6.0.0-beta.8"
+    "@loadable/component": "5.15.2",
+    "history": "5.3.0",
+    "react-router-dom": "6.3.0"
   },
   "devDependencies": {
-    "react": "18.0.0-alpha-f2c381131-20211004",
-    "react-dom": "18.0.0-alpha-f2c381131-20211004"
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
-  "sideEffects": false
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
+  ]
 }

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,35 +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]);
-    return (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))));
-}
-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)));
-}