@umijs/renderer-react 4.0.0-rc.8 → 4.0.1

package/dist/appContext.d.ts

@@ -1,3 +1,22 @@
 import React from 'react';
-export declare const AppContext: React.Context<any>;
-export declare function useAppData(): any;
+import { IClientRoute, ILoaderData, IRouteComponents, IRoutesById } from './types';
+interface IAppContextType {
+    routes: IRoutesById;
+    routeComponents: IRouteComponents;
+    clientRoutes: IClientRoute[];
+    pluginManager: any;
+    rootElement?: HTMLElement;
+    basename?: string;
+    clientLoaderData: ILoaderData;
+    preloadRoute?: (to: string) => void;
+    serverLoaderData: ILoaderData;
+}
+export declare const AppContext: React.Context<IAppContextType>;
+export declare function useAppData(): IAppContextType;
+export declare function useServerLoaderData(): {
+    data: any;
+};
+export declare function useClientLoaderData(): {
+    data: any;
+};
+export {};

package/dist/appContext.js

@@ -1,5 +1,16 @@
 import React from 'react';
-export const AppContext = React.createContext(null);
+import { useRouteData } from './routeContext';
+export const AppContext = React.createContext({});
 export function useAppData() {
     return React.useContext(AppContext);
 }
+export function useServerLoaderData() {
+    const route = useRouteData();
+    const 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] };
+}

package/dist/browser.d.ts

@@ -1,7 +1,10 @@
 import { History } from 'history';
 import React from 'react';
 import { IRouteComponents, IRoutesById } from './types';
+export declare function Routes(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export declare function renderClient(opts: {
+    publicPath?: string;
+    runtimePublicPath?: boolean;
     rootElement?: HTMLElement;
     routes: IRoutesById;
     routeComponents: IRouteComponents;
@@ -9,4 +12,5 @@ export declare function renderClient(opts: {
     basename?: string;
     loadingComponent?: React.ReactNode;
     history: History;
+    hydrate?: boolean;
 }): void;

package/dist/browser.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Router, useRoutes } from 'react-router-dom';
+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';
 function BrowserRoutes(props) {
@@ -28,7 +29,7 @@ function BrowserRoutes(props) {
     }, [history, props.routes, props.clientRoutes]);
     return (React.createElement(Router, { navigator: history, location: state.location, basename: props.basename }, props.children));
 }
-function Routes() {
+export function Routes() {
     const { clientRoutes } = useAppData();
     return useRoutes(clientRoutes);
 }
@@ -40,6 +41,13 @@ export function renderClient(opts) {
         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 [
@@ -58,20 +66,96 @@ export function renderClient(opts) {
             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
-    if (ReactDOM.createRoot) {
+    const Browser = () => {
+        const [clientLoaderData, setClientLoaderData] = useState({});
+        const [serverLoaderData, setServerLoaderData] = useState(
         // @ts-ignore
-        ReactDOM.createRoot(rootElement).render(browser);
+        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;
+                    if (!document.getElementById(preloadId)) {
+                        const key = Object.keys(manifest).find((k) => k.startsWith(routeIdReplaced + '.'));
+                        if (!key)
+                            return;
+                        let file = manifest[key];
+                        const link = document.createElement('link');
+                        link.id = preloadId;
+                        link.rel = 'preload';
+                        link.as = 'script';
+                        // 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 }));
+                    });
+                }
+            });
+        }, [clientLoaderData]);
+        useEffect(() => {
+            handleRouteChange(window.location.pathname, true);
+            return opts.history.listen((e) => {
+                handleRouteChange(e.location.pathname);
+            });
+        }, []);
+        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 {
-        ReactDOM.render(browser, rootElement);
+        if (ReactDOM.createRoot) {
+            ReactDOM.createRoot(rootElement).render(React.createElement(Browser, null));
+        }
+        else {
+            // @ts-ignore
+            ReactDOM.render(React.createElement(Browser, null), rootElement);
+        }
     }
 }

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 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 { 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';

package/dist/index.js

@@ -1,5 +1,7 @@
 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 { 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';

package/dist/link.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from 'react';
+import { LinkProps } from 'react-router-dom';
+export declare function LinkWithPrefetch(props: PropsWithChildren<{
+    prefetch?: boolean;
+} & LinkProps & React.RefAttributes<HTMLAnchorElement>>): JSX.Element;

package/dist/link.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useAppData } from './appContext';
+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));
+}

package/dist/routeContext.d.ts

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

package/dist/routes.d.ts

@@ -1,25 +1,8 @@
 import React from 'react';
-import { IRoute, IRoutesById } from './types';
+import { IClientRoute, IRoutesById } from './types';
 export declare function createClientRoutes(opts: {
     routesById: IRoutesById;
     routeComponents: Record<string, any>;
     parentId?: string;
     loadingComponent?: React.ReactNode;
-}): {
-    parentId?: string | undefined;
-    id: string;
-    path: string | undefined;
-    index: boolean | undefined;
-    element: JSX.Element;
-}[];
-export declare function createClientRoute(opts: {
-    route: IRoute;
-    routeComponent: any;
-    loadingComponent?: React.ReactNode;
-}): {
-    parentId?: string | undefined;
-    id: string;
-    path: string | undefined;
-    index: boolean | undefined;
-    element: JSX.Element;
-};
+}): IClientRoute[];

package/dist/routes.js

@@ -1,16 +1,4 @@
-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';
@@ -31,30 +19,42 @@ export function createClientRoutes(opts) {
             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) {
+function createClientRoute(opts) {
     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: {
+    const { redirect, ...props } = route;
+    return {
+        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);
+            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);
+    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 />;
+    }
 }

package/dist/server.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IRouteComponents, IRoutesById } from './types';
+export declare function getClientRootComponent(opts: {
+    routes: IRoutesById;
+    routeComponents: IRouteComponents;
+    pluginManager: any;
+    location: string;
+    loaderData: {
+        [routeKey: string]: any;
+    };
+    manifest: any;
+}): Promise<JSX.Element>;

package/dist/server.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { StaticRouter } from 'react-router-dom/server';
+import { AppContext } from './appContext';
+import { Routes } from './browser';
+import { createClientRoutes } from './routes';
+// 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)));
+}
+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)}`,
+                } }))));
+}

package/dist/types.d.ts

@@ -1,9 +1,22 @@
+/// <reference types="react" />
 export interface IRoute {
     id: string;
     path?: string;
     index?: boolean;
     parentId?: string;
     redirect?: string;
+    clientLoader?: () => Promise<any>;
+    hasServerLoader?: boolean;
+}
+export interface IClientRoute {
+    id: string;
+    element: React.ReactNode;
+    children?: IClientRoute[];
+    routes?: IClientRoute[];
+    path?: string;
+    index?: boolean;
+    parentId?: string;
+    clientLoader?: () => Promise<any>;
 }
 export interface IRoutesById {
     [id: string]: IRoute;
@@ -11,3 +24,6 @@ export interface IRoutesById {
 export interface IRouteComponents {
     [id: string]: any;
 }
+export interface ILoaderData {
+    [routeKey: string]: any;
+}

package/dist/useFetcher.d.ts

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

package/dist/useFetcher.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-rc.8",
+  "version": "4.0.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",
@@ -17,17 +17,18 @@
   ],
   "scripts": {
     "build": "pnpm tsc",
-    "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
-    "dev": "pnpm build -- --watch"
+    "build:deps": "umi-scripts bundleDeps",
+    "dev": "pnpm build -- --watch",
+    "test": "umi-scripts jest-turbo"
   },
   "dependencies": {
     "@loadable/component": "5.15.2",
     "history": "5.3.0",
-    "react-router-dom": "6.2.2"
+    "react-router-dom": "6.3.0"
   },
   "devDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   },
   "peerDependencies": {
     "react": ">=16.8",