@umijs/renderer-react 4.0.0-canary.20220516.3 → 4.0.0-canary.20220525.1

package/dist/appContext.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 export declare const AppContext: React.Context<any>;
 export declare function useAppData(): any;
+export declare function useClientLoaderData(): any;

package/dist/appContext.js

@@ -1,5 +1,11 @@
 import React from 'react';
+import { useRouteData } from './routeContext';
 export const AppContext = React.createContext(null);
 export function useAppData() {
     return React.useContext(AppContext);
 }
+export function useClientLoaderData() {
+    const route = useRouteData();
+    const appData = useAppData();
+    return appData.clientLoaderData[route.route.id];
+}

package/dist/browser.d.ts

@@ -2,6 +2,8 @@ import { History } from 'history';
 import React from 'react';
 import { IRouteComponents, IRoutesById } from './types';
 export declare function renderClient(opts: {
+    publicPath?: string;
+    runtimePublicPath?: boolean;
     rootElement?: HTMLElement;
     routes: IRoutesById;
     routeComponents: IRouteComponents;

package/dist/browser.js

@@ -1,7 +1,7 @@
-import React from 'react';
+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 { Router, useRoutes } from 'react-router-dom';
+import { matchRoutes, Router, useRoutes } from 'react-router-dom';
 import { AppContext, useAppData } from './appContext';
 import { createClientRoutes } from './routes';
 function BrowserRoutes(props) {
@@ -66,19 +66,72 @@ 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));
+    const Browser = () => {
+        const [clientLoaderData, setClientLoaderData] = useState({});
+        const handleRouteChange = useCallback((p) => {
+            var _a;
+            // Patched routes has to id
+            const matchedRouteIds = (((_a = matchRoutes(clientRoutes, p)) === null || _a === void 0 ? void 0 : _a.map(
+            // @ts-ignore
+            (route) => route.route.id)) || []).filter(Boolean);
+            matchedRouteIds.forEach((id) => {
+                // 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);
+                    }
+                }
+                // client loader
+                const clientLoader = opts.routes[id].clientLoader;
+                if (clientLoader && !clientLoaderData[id]) {
+                    clientLoader().then((data) => {
+                        setClientLoaderData((d) => ({ ...d, [id]: data }));
+                    });
+                }
+            });
+        }, [clientLoaderData]);
+        useEffect(() => {
+            handleRouteChange(window.location.pathname);
+            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,
+                preloadRoute: handleRouteChange,
+            } }, rootContainer));
+    };
     if (ReactDOM.createRoot) {
-        ReactDOM.createRoot(rootElement).render(browser);
+        ReactDOM.createRoot(rootElement).render(React.createElement(Browser, null));
     }
     else {
         // @ts-ignore
-        ReactDOM.render(browser, rootElement);
+        ReactDOM.render(React.createElement(Browser, null), rootElement);
     }
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 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 { createSearchParams, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
+export { useAppData, useClientLoaderData } from './appContext';
 export { renderClient } from './browser';
+export { LinkWithPrefetch as Link } from './link';
 export { useRouteData } from './routeContext';

package/dist/index.js

@@ -1,5 +1,6 @@
 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 { createSearchParams, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
+export { useAppData, useClientLoaderData } from './appContext';
 export { renderClient } from './browser';
+export { LinkWithPrefetch as Link } from './link';
 export { useRouteData } from './routeContext';

package/dist/link.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export declare function LinkWithPrefetch(props: PropsWithChildren<{
+    prefetch?: boolean;
+    to: string | Partial<{
+        pathname: string;
+        search: string;
+        hash: string;
+    }>;
+    replace?: boolean;
+    state?: boolean;
+    reloadDocument?: boolean;
+}>): 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: () => props.prefetch && appData.preloadRoute(to), to: props.to, replace: props.replace, state: props.state, reloadDocument: props.reloadDocument }, props.children));
+}

package/dist/routes.d.ts

@@ -7,6 +7,7 @@ export declare function createClientRoutes(opts: {
     loadingComponent?: React.ReactNode;
 }): {
     parentId?: string | undefined;
+    clientLoader?: (() => Promise<any>) | undefined;
     id: string;
     path: string | undefined;
     index: boolean | undefined;
@@ -18,6 +19,7 @@ export declare function createClientRoute(opts: {
     loadingComponent?: React.ReactNode;
 }): {
     parentId?: string | undefined;
+    clientLoader?: (() => Promise<any>) | undefined;
     id: string;
     path: string | undefined;
     index: boolean | undefined;

package/dist/types.d.ts

@@ -4,6 +4,7 @@ export interface IRoute {
     index?: boolean;
     parentId?: string;
     redirect?: string;
+    clientLoader?: () => Promise<any>;
 }
 export interface IRoutesById {
     [id: string]: IRoute;
@@ -11,3 +12,6 @@ export interface IRoutesById {
 export interface IRouteComponents {
     [id: string]: any;
 }
+export interface ILoaderData {
+    [routeKey: string]: any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-canary.20220516.3",
+  "version": "4.0.0-canary.20220525.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",