@umijs/renderer-react 3.5.20 → 4.0.0-beta.12

package/README.md

@@ -1 +1,3 @@
 # @umijs/renderer-react
+
+See our website [umijs](https://umijs.org) for more information.

package/dist/app.d.ts

@@ -0,0 +1,14 @@
+/// <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

@@ -0,0 +1,50 @@
+// @ts-ignore
+import loadable from '@loadable/component';
+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(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 (React.createElement(AppContext.Provider, { value: {
+            routes: props.routes,
+            routeComponents: props.routeComponents,
+            pluginManager: props.pluginManager,
+            navigator: props.navigator,
+            clientRoutes,
+        } }, 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 = loadable(loader, {
+        fallback: React.createElement(Loading, null),
+    });
+    // ref: https://reactjs.org/docs/code-splitting.html
+    return React.createElement(RouteComponent, null);
+}

package/dist/appContext.d.ts

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

package/dist/appContext.js

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

package/dist/browser.d.ts

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

package/dist/browser.js

@@ -0,0 +1,27 @@
+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, {
+        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: {},
+    });
+}
+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 }));
+}

package/dist/index.d.ts

@@ -1,35 +1,3 @@
-import { History, Location } from 'history-with-query';
-import { FunctionComponent } from 'react';
-import { match } from 'react-router-dom';
-export interface IComponent extends FunctionComponent {
-    getInitialProps?: Function;
-    preload?: () => Promise<any>;
-}
-export interface IRoute {
-    path?: string;
-    exact?: boolean;
-    redirect?: string;
-    component?: IComponent | string;
-    routes?: IRoute[];
-    key?: any;
-    strict?: boolean;
-    sensitive?: boolean;
-    wrappers?: any[];
-    [k: string]: any;
-}
-export interface IRouteComponentProps<Params extends {
-    [K in keyof Params]?: string;
-} = {}, Query extends {
-    [K in keyof Query]?: string;
-} = {}> {
-    children: JSX.Element;
-    location: Location & {
-        query: Query;
-    };
-    route: IRoute;
-    routes: IRoute[];
-    history: History;
-    match: match<Params>;
-}
-export { default as renderClient } from './renderClient/renderClient';
-export { default as renderRoutes } from './renderRoutes/renderRoutes';
+export { Link, Outlet, useNavigate } from 'react-router-dom';
+export { useAppContext } from './appContext';
+export { renderClient } from './browser';