@shuvi/platform-web 1.0.0-rc.4 → 1.0.0-rc.7

package/esm/shared/appTypes.d.ts

@@ -1,9 +1,11 @@
-import { IRequest, IPageRouteRecord, IAppData, IAppState } from '@shuvi/platform-shared/shared';
+import { IPageRouteRecord, IAppData, IAppState } from '@shuvi/platform-shared/shared';
 import { Application } from '@shuvi/platform-shared/shuvi-app/application';
+import type { ShuviRequest } from '@shuvi/service';
 export interface CreateAppServer {
     (options: {
-        req: IRequest;
+        req: ShuviRequest;
         ssr: boolean;
+        isDev: boolean;
     }): Application;
 }
 export interface CreateAppClient {

package/esm/shared/renderTypes.d.ts

@@ -1,10 +1,10 @@
 import { IManifest } from '@shuvi/toolpack/lib/webpack/types';
-import { Response, IApplication, IRequest, IAppData } from '@shuvi/platform-shared/shared';
-export declare type IRenderDocumentOptions = {
+import type { ShuviRequest } from '@shuvi/service';
+import { Response, IApplication, IAppData } from '@shuvi/platform-shared/shared';
+export declare type IRenderViewOptions = {
     app: IApplication;
-    req?: IRequest;
 };
-export interface IRenderOptions extends IRenderDocumentOptions {
+export interface IRenderOptions extends IRenderViewOptions {
 }
 export interface IView<RenderOption extends IRenderOptions = any, RenderResult = void> {
     renderApp(options: RenderOption): RenderResult;
@@ -35,8 +35,9 @@ export interface IClientRendererOptions<ExtraAppData = {}> extends IRenderOption
     appData: IAppData<ExtraAppData>;
 }
 export interface IServerRendererOptions extends IRenderOptions {
+    req: ShuviRequest;
     manifest: IManifest;
-    getAssetPublicUrl(path: string): string;
+    isDev?: boolean;
 }
 export interface IViewClient<ExtraAppData = {}> extends IView<IClientRendererOptions<ExtraAppData>> {
 }

package/esm/shared/routeTypes.d.ts

@@ -1,10 +1,5 @@
-import { IURLParams, IURLQuery } from '@shuvi/platform-shared/shared';
-import { IRequestHandlerWithNext } from '@shuvi/service';
-import { IResponse, IRequest } from '@shuvi/service';
+import { ShuviRequest, ShuviResponse, ShuviRequestHandler } from '@shuvi/service';
 export interface IApiReq {
-    pathname: string;
-    query: IURLQuery;
-    params: IURLParams;
     cookies: {
         [key: string]: string;
     };
@@ -12,7 +7,7 @@ export interface IApiReq {
         [key: string]: any;
     };
 }
-export declare type IApiRequest = IRequest & IApiReq;
+export declare type IApiRequest = ShuviRequest & IApiReq;
 export declare type Send<T> = (body: T) => void;
 export declare type IApiRes<T = any> = {
     send: Send<T>;
@@ -21,7 +16,7 @@ export declare type IApiRes<T = any> = {
     redirect(url: string): IApiRes<T>;
     redirect(status: number, url: string): IApiRes<T>;
 };
-export declare type IApiResponse<T = any> = IResponse & IApiRes<T>;
+export declare type IApiResponse<T = any> = ShuviResponse & IApiRes<T>;
 export declare type IApiRequestHandler<T = any> = (req: IApiRequest, res: IApiResponse<T>) => void | Promise<void>;
 export interface IApiConfig {
     api?: {
@@ -35,7 +30,7 @@ export interface IApiHandler {
     config?: IApiConfig;
 }
 export interface IMiddlewareConfig {
-    default: IRequestHandlerWithNext;
+    default: ShuviRequestHandler;
 }
 export declare type IApiRoutes = {
     path: string;

package/esm/shuvi-app/app/client.js

@@ -8,12 +8,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { getRoutes } from '@shuvi/app/core/platform';
-import { runPreload, runLoaders, getRouteMatchesWithInvalidLoader, getLoaderManager, isRedirect, isResponse } from '@shuvi/platform-shared/shared';
+import { runPreload, runLoaders, getRouteMatchesWithInvalidLoader, isRedirect, isResponse } from '@shuvi/platform-shared/shared';
 import application, { Application } from '@shuvi/platform-shared/shuvi-app/application';
 import { createRouter, createBrowserHistory, createHashHistory } from '@shuvi/router';
 import pageLoaders from '@shuvi/app/files/page-loaders';
 import { historyMode } from '@shuvi/app/files/routerConfig';
 import { SHUVI_ERROR } from '@shuvi/shared/lib/constants';
+import { serializeServerError } from '../helper/serializeServerError';
 let app;
 export { Application };
 export const createApp = ({ routes, appData, appComponent }) => {
@@ -21,7 +22,7 @@ export const createApp = ({ routes, appData, appComponent }) => {
     if (app) {
         return app;
     }
-    const { loadersData = {}, appState, ssr } = appData;
+    const { appState, ssr } = appData;
     let history;
     if (historyMode === 'hash') {
         history = createHashHistory();
@@ -38,14 +39,14 @@ export const createApp = ({ routes, appData, appComponent }) => {
         AppComponent: appComponent,
         router
     });
+    const loadersData = app.getLoadersData();
     const hasHydrateData = Object.keys(loadersData).length > 0;
-    const loaderManager = getLoaderManager();
     let shouldHydrate = ssr && hasHydrateData;
-    let hasServerError = app.error.hasError;
+    let hasServerError = !!app.error;
     router.beforeResolve((to, from, next) => __awaiter(void 0, void 0, void 0, function* () {
         if (shouldHydrate) {
             shouldHydrate = false;
-            loaderManager.setDatas(loadersData);
+            app.setLoadersData(loadersData);
             return next();
         }
         if (hasServerError) {
@@ -53,12 +54,11 @@ export const createApp = ({ routes, appData, appComponent }) => {
             return next();
         }
         if (!to.matches.length) {
-            app.error.error(SHUVI_ERROR.PAGE_NOT_FOUND);
+            app.setError(SHUVI_ERROR.PAGE_NOT_FOUND);
             next();
             return;
         }
         const matches = getRouteMatchesWithInvalidLoader(to, from, pageLoaders);
-        let isPreloadError = false;
         try {
             const loaderDatas = yield new Promise((resolve, reject) => {
                 let value;
@@ -79,11 +79,9 @@ export const createApp = ({ routes, appData, appComponent }) => {
                 runPreload(to)
                     .then(tryResolve)
                     .catch(err => {
-                    isPreloadError = true;
                     reject(err);
                 });
                 runLoaders(matches, pageLoaders, {
-                    isServer: false,
                     query: to.query,
                     getAppContext: () => app.context
                 })
@@ -96,7 +94,7 @@ export const createApp = ({ routes, appData, appComponent }) => {
                     tryResolve();
                 });
             });
-            loaderManager.setDatas(loaderDatas);
+            app.setLoadersData(loaderDatas);
         }
         catch (error) {
             if (isRedirect(error)) {
@@ -104,22 +102,19 @@ export const createApp = ({ routes, appData, appComponent }) => {
                 return;
             }
             if (isResponse(error) && error.status >= 400 && error.status < 600) {
-                app.error.error({
+                app.setError({
                     code: error.status,
                     message: error.data
                 });
                 next();
                 return;
             }
-            app.error.error({
-                code: SHUVI_ERROR.APP_ERROR.code,
-                message: error.message || isPreloadError ? 'Preload Error' : 'Loader Error'
-            });
+            app.setError(serializeServerError(error, process.env.NODE_ENV === 'development'));
             next();
             return;
         }
         next(() => {
-            app.error.clear();
+            app.clearError();
         });
     }));
     return app;

package/esm/shuvi-app/app/server.js

@@ -9,12 +9,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import routes from '@shuvi/app/files/routes';
 import { getRoutes, app as AppComponent } from '@shuvi/app/core/platform';
-import { runLoaders, getRouteMatchesWithInvalidLoader, isResponse, isRedirect, getLoaderManager } from '@shuvi/platform-shared/shared';
+import { runLoaders, getRouteMatchesWithInvalidLoader, isResponse, isRedirect } from '@shuvi/platform-shared/shared';
 import pageLoaders from '@shuvi/app/files/page-loaders';
 import application from '@shuvi/platform-shared/shuvi-app/application';
 import { createRouter, createMemoryHistory } from '@shuvi/router';
+import chalk from '@shuvi/utils/lib/chalk';
+import { serializeServerError } from '../helper/serializeServerError';
 export const createApp = options => {
-    const { req, ssr } = options;
+    const { req, ssr, isDev } = options;
     const history = createMemoryHistory({
         initialEntries: [(req && req.url) || '/'],
         initialIndex: 0
@@ -24,18 +26,16 @@ export const createApp = options => {
         routes: getRoutes(routes)
     });
     let app;
-    const loaderManager = getLoaderManager();
     if (ssr) {
         router.beforeResolve((to, from, next) => __awaiter(void 0, void 0, void 0, function* () {
             const matches = getRouteMatchesWithInvalidLoader(to, from, pageLoaders);
             try {
                 const loaderResult = yield runLoaders(matches, pageLoaders, {
-                    isServer: true,
                     req,
                     query: to.query,
                     getAppContext: () => app.context
                 });
-                loaderManager.setDatas(loaderResult);
+                app.setLoadersData(loaderResult);
             }
             catch (error) {
                 if (isRedirect(error)) {
@@ -43,16 +43,17 @@ export const createApp = options => {
                     return;
                 }
                 if (isResponse(error) && error.status >= 400 && error.status < 600) {
-                    app.error.error({
+                    app.setError({
                         code: error.status,
                         message: error.data
                     });
                     next();
                     return;
                 }
-                app.error.error({
-                    message: error.message || 'Loader Error'
-                });
+                if (isDev) {
+                    console.error(chalk.red('error') + ' - ' + error.stack);
+                }
+                app.setError(serializeServerError(error, isDev));
                 next();
                 return;
             }

package/esm/shuvi-app/dev/hotDevClient.d.ts

@@ -24,7 +24,6 @@ SOFTWARE.
 export declare type HotDevClient = {
     sendMessage: (data: any) => void;
     subscribeToHmrEvent: (handler: any) => void;
-    reportRuntimeError: (err: any) => void;
 };
 export default function connect(options: {
     launchEditorEndpoint: string;

package/esm/shuvi-app/dev/hotDevClient.js

@@ -34,9 +34,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // @ts-nocheck
-import * as ErrorOverlay from 'react-error-overlay';
 import stripAnsi from 'strip-ansi';
 import formatWebpackMessages from '@shuvi/toolpack/lib/utils/formatWebpackMessages';
+import { startReportingRuntimeErrors, stopReportingRuntimeErrors, onBuildError, onBuildOk, onRefresh } from '@shuvi/error-overlay';
 import { DEV_SOCKET_TIMEOUT_MS } from '@shuvi/shared/esm/constants';
 import { connectHMR, addMessageListener, sendMessage } from './websocket';
 // This alternative WebpackDevServer combines the functionality of:
@@ -52,33 +52,14 @@ import { connectHMR, addMessageListener, sendMessage } from './websocket';
 let hadRuntimeError = false;
 let customHmrEventHandler;
 export default function connect(options) {
-    // Open stack traces in an editor.
-    ErrorOverlay.setEditorHandler(function editorHandler({ fileName, lineNumber, colNumber }) {
-        // Resolve invalid paths coming from react-error-overlay
-        const resolvedFilename = fileName.replace(/^webpack:\/\/[^/]+/ /* webpack://namaspcae/resourcepath */, '');
-        fetch(options.launchEditorEndpoint +
-            '?fileName=' +
-            window.encodeURIComponent(resolvedFilename) +
-            '&lineNumber=' +
-            window.encodeURIComponent(lineNumber || 1) +
-            '&colNumber=' +
-            window.encodeURIComponent(colNumber || 1));
-    });
-    // We need to keep track of if there has been a runtime error.
-    // Essentially, we cannot guarantee application state was not corrupted by the
-    // runtime error. To prevent confusing behavior, we forcibly reload the entire
-    // application. This is handled below when we are notified of a compile (code
-    // change).
-    // See https://github.com/facebook/create-react-app/issues/3096
-    ErrorOverlay.startReportingRuntimeErrors({
+    startReportingRuntimeErrors({
         onError: function () {
             hadRuntimeError = true;
         }
     });
     if (module.hot && typeof module.hot.dispose === 'function') {
         module.hot.dispose(function () {
-            // TODO: why do we need this?
-            ErrorOverlay.stopReportingRuntimeErrors();
+            stopReportingRuntimeErrors();
         });
     }
     connectHMR(Object.assign(Object.assign({}, options), { log: true }));
@@ -104,9 +85,6 @@ export default function connect(options) {
         },
         subscribeToHmrEvent(handler) {
             customHmrEventHandler = handler;
-        },
-        reportRuntimeError(err) {
-            ErrorOverlay.reportRuntimeError(err);
         }
     };
 }
@@ -123,8 +101,11 @@ function clearOutdatedErrors() {
     }
 }
 let startLatency = undefined;
-function onFastRefresh() {
-    tryDismissErrorOverlay();
+function onFastRefresh(hasUpdates) {
+    onBuildOk();
+    if (hasUpdates) {
+        onRefresh();
+    }
     if (startLatency) {
         const endLatency = Date.now();
         const latency = endLatency - startLatency;
@@ -139,10 +120,10 @@ function handleSuccess() {
     hasCompileErrors = false;
     // Attempt to apply hot updates or reload.
     if (isHotUpdate) {
-        tryApplyUpdates(function onHotUpdateSuccess() {
+        tryApplyUpdates(function onHotUpdateSuccess(hasUpdates) {
             // Only dismiss it when we're sure it's a hot update.
             // Otherwise it would flicker right before the reload.
-            onFastRefresh();
+            onFastRefresh(hasUpdates);
         });
     }
 }
@@ -169,16 +150,18 @@ function handleWarnings(warnings) {
     }
     // Attempt to apply hot updates or reload.
     if (isHotUpdate) {
-        tryApplyUpdates(function onSuccessfulHotUpdate() {
+        tryApplyUpdates(function onSuccessfulHotUpdate(hasUpdates) {
             // Only dismiss it when we're sure it's a hot update.
             // Otherwise it would flicker right before the reload.
-            tryDismissErrorOverlay();
-            onFastRefresh();
+            onFastRefresh(hasUpdates);
         });
     }
 }
 // Compilation with errors (e.g. syntax error or missing modules).
 function handleErrors(errors) {
+    if (!Boolean(errors && errors.length)) {
+        return;
+    }
     clearOutdatedErrors();
     isFirstCompilation = false;
     hasCompileErrors = true;
@@ -188,7 +171,7 @@ function handleErrors(errors) {
         warnings: []
     });
     // Only show the first error.
-    ErrorOverlay.reportBuildError(formatted.errors[0]);
+    onBuildError(formatted.errors[0]);
     // Also log them to the console.
     if (typeof console !== 'undefined' && typeof console.error === 'function') {
         for (var i = 0; i < formatted.errors.length; i++) {
@@ -196,11 +179,6 @@ function handleErrors(errors) {
         }
     }
 }
-function tryDismissErrorOverlay() {
-    if (!hasCompileErrors) {
-        ErrorOverlay.dismissBuildError();
-    }
-}
 // There is a newer version of the code available.
 function handleAvailableHash(hash) {
     // Update last known compilation hash.
@@ -286,7 +264,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
             return;
         }
         if (!isUpdateAvailable() || !canApplyUpdates()) {
-            ErrorOverlay.dismissBuildError();
+            onBuildOk();
             // HMR failed, need to refresh
             const hmrStatus = module.hot.status();
             if (hmrStatus === 'abort' || hmrStatus === 'fail') {
@@ -295,24 +273,25 @@ function tryApplyUpdates(onHotUpdateSuccess) {
             return;
         }
         function handleApplyUpdates(err, updatedModules) {
-            const needForcedReload = err || hadRuntimeError;
-            if (needForcedReload) {
-                if (hadRuntimeError) {
-                    hadRuntimeError = false;
-                    window.location.reload();
-                }
-                else {
-                    ErrorOverlay.reportRuntimeError(err);
-                    hadRuntimeError = true;
-                }
+            const hasUpdates = Boolean(updatedModules === null || updatedModules === void 0 ? void 0 : updatedModules.length);
+            if (hadRuntimeError) {
+                hadRuntimeError = false;
+                window.location.reload();
+                return;
+            }
+            if (err) {
+                hadRuntimeError = true;
             }
             if (typeof onHotUpdateSuccess === 'function') {
                 // Maybe we want to do something.
-                onHotUpdateSuccess();
+                onHotUpdateSuccess(hasUpdates);
             }
             if (isUpdateAvailable()) {
                 // While we were updating, there was a new update! Do it again.
-                tryApplyUpdates(onHotUpdateSuccess);
+                tryApplyUpdates(hasUpdates ? onBuildOk : onHotUpdateSuccess);
+            }
+            else {
+                onBuildOk();
             }
         }
         try {

package/esm/shuvi-app/dev/websocket.d.ts

@@ -3,7 +3,6 @@ export declare function sendMessage(data: any): any;
 export declare type HotDevClient = {
     sendMessage: (data: any) => void;
     subscribeToHmrEvent?: (handler: any) => void;
-    reportRuntimeError?: (err: any) => void;
 };
 export declare function connectHMR(options: {
     path: string;

package/esm/shuvi-app/helper/serializeServerError.d.ts

@@ -0,0 +1,2 @@
+import { IError } from '@shuvi/platform-shared/shared';
+export declare function serializeServerError(err: Error, dev: boolean | undefined): IError;

package/esm/shuvi-app/helper/serializeServerError.js

@@ -0,0 +1,21 @@
+// @ts-ignore
+import stripAnsi from 'strip-ansi';
+function errorToJSON(err) {
+    return {
+        code: 500,
+        message: stripAnsi(err.message),
+        name: err.name,
+        source: 'server',
+        stack: err.stack
+    };
+}
+export function serializeServerError(err, dev) {
+    if (dev) {
+        return errorToJSON(err);
+    }
+    return {
+        code: 500,
+        message: 'Internal Server Error',
+        name: 'Internal Server Error'
+    };
+}

package/esm/shuvi-app/react/AppContainer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { IApplication } from '@shuvi/platform-shared/shared';
-export default function AppContainer({ children, app }: {
+export default function AppContainer({ app, children }: React.PropsWithChildren<{
     app: IApplication;
-    children: React.ReactElement;
-}): JSX.Element;
+}>): JSX.Element;

package/esm/shuvi-app/react/AppContainer.jsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { errorModel } from '@shuvi/platform-shared/shared';
-import { createContainer } from '@shuvi/redox-react';
 import { AppProvider } from './applicationContext';
 import ErrorPage from './ErrorPage';
 import { ErrorBoundary } from './ErrorBoundary';
-const { Provider, useSharedModel } = createContainer();
+import { Provider, useSharedModel } from './store';
 function ErrorGuard({ children = null }) {
     const [errorState] = useSharedModel(errorModel);
     if (errorState.error !== undefined) {
@@ -12,10 +11,10 @@ function ErrorGuard({ children = null }) {
     }
     return <>{children}</>;
 }
-export default function AppContainer({ children, app }) {
+export default function AppContainer({ app, children }) {
     return (<ErrorBoundary>
       <AppProvider app={app}>
-        <Provider storeManager={app.storeManager}>
+        <Provider store={app.store}>
           <ErrorGuard>{children}</ErrorGuard>
         </Provider>
       </AppProvider>

package/esm/shuvi-app/react/getRoutes.js

@@ -13,8 +13,7 @@ import { loadRouteComponent } from './loadRouteComponent';
 export default function getRoutes(routes) {
     const getRoutesWithRequire = (routes) => routes.map(x => {
         const originalRoute = Object.assign({}, x);
-        const { __componentRawRequest__, __import__, __resolveWeak__, children } = originalRoute, rest = __rest(originalRoute, ["__componentRawRequest__", "__import__", "__resolveWeak__", "children"]);
-        const route = Object.assign({}, rest);
+        const { __componentRawRequest__, __import__, __resolveWeak__, children } = originalRoute, route = __rest(originalRoute, ["__componentRawRequest__", "__import__", "__resolveWeak__", "children"]);
         if (children) {
             route.children = getRoutesWithRequire(children);
         }
@@ -23,7 +22,10 @@ export default function getRoutes(routes) {
                 modules: [__componentRawRequest__]
             })));
         }
-        return Object.assign({ __componentRawRequest__, __resolveWeak__ }, route);
+        if (__componentRawRequest__) {
+            route.__componentRawRequest__ = __componentRawRequest__;
+        }
+        return route;
     });
     const routesWithRequire = getRoutesWithRequire(routes || []);
     return routesWithRequire;

package/esm/shuvi-app/react/{redox-react → model}/RedoxWrapper.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { IStoreManager } from '@shuvi/redox';
+import type { RedoxStore } from '@shuvi/redox';
 export declare const RedoxWrapper: (App: any, appContext: {
-    storeManager: IStoreManager;
+    store: RedoxStore;
 }) => {
-    (appProps: any): JSX.Element;
+    (): JSX.Element;
     displayName: string;
 };

package/esm/shuvi-app/react/{redox-react → model}/RedoxWrapper.jsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { RedoxRoot } from '@shuvi/redox-react';
 export const RedoxWrapper = (App, appContext) => {
-    function RedoxAppWrapper(appProps) {
-        return (<RedoxRoot storeManager={appContext.storeManager}>
-        <App {...appProps}/>
+    function RedoxAppWrapper() {
+        return (<RedoxRoot store={appContext.store}>
+        <App />
       </RedoxRoot>);
     }
     RedoxAppWrapper.displayName = 'RedoxAppWrapper';

package/esm/shuvi-app/react/model/runtime.d.ts

@@ -0,0 +1,8 @@
+import { RedoxStore } from '@shuvi/redox';
+declare module '@shuvi/runtime' {
+    interface CustomAppContext {
+        store: RedoxStore;
+    }
+}
+declare const _default: import("@shuvi/platform-shared/shared").IPluginInstance<import("@shuvi/platform-shared/shared").RuntimePluginHooks, void>;
+export default _default;

package/esm/shuvi-app/react/{redox-react → model}/runtime.js

@@ -7,12 +7,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { createRuntimePlugin } from '@shuvi/platform-shared/shared';
+import { createRuntimePluginAfter } from '@shuvi/platform-shared/shared';
 import { RedoxWrapper } from './RedoxWrapper';
-export default createRuntimePlugin({
+// this needs to be run last
+export default createRuntimePluginAfter({
     appComponent: (App, appContext) => __awaiter(void 0, void 0, void 0, function* () {
         return RedoxWrapper(App, {
-            storeManager: appContext.store
+            store: appContext.store
         });
     })
+}, {
+    name: 'model-react'
 });

package/esm/shuvi-app/react/store.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Provider: (props: import("react").PropsWithChildren<{
+    store?: import("@shuvi/redox").RedoxStore | undefined;
+}>) => JSX.Element, useSharedModel: import("@shuvi/redox-react/esm/types").IUseModel, useStaticModel: import("@shuvi/redox-react/esm/types").IUseStaticModel;
+export { Provider, useSharedModel, useStaticModel };

package/esm/shuvi-app/react/store.js

@@ -0,0 +1,3 @@
+import { createContainer } from '@shuvi/redox-react';
+const { Provider, useSharedModel, useStaticModel } = createContainer();
+export { Provider, useSharedModel, useStaticModel };

package/esm/shuvi-app/react/types.d.ts

@@ -1,14 +1,7 @@
-import { IAppState } from '@shuvi/platform-shared/shared';
 import { IHtmlTag, IViewClient, IViewServer } from '../../shared';
 export { IHtmlTag };
 export declare type IReactAppData = {
-    appProps?: Record<string, any>;
-    errorProps?: {
-        notFound: boolean;
-    };
     dynamicIds?: Array<string | number>;
-    appState?: IAppState;
-    loadersData: any;
 };
 export declare type IReactServerView = IViewServer<IReactAppData>;
 export declare type IReactClientView = IViewClient<IReactAppData>;

package/esm/shuvi-app/react/useLoaderData.js

@@ -1,27 +1,16 @@
 import { useMatchedRoute } from '@shuvi/router-react';
-import { getLoaderManager } from '@shuvi/platform-shared/shared';
-import { useRef, useEffect, useReducer } from 'react';
+import { loaderModel } from '@shuvi/platform-shared/shared';
+import { useStaticModel } from './store';
 export const noLoaderMessage = 'Warning: no loader found. Please make sure the page component where `useLoaderData` is called has a `loader` export.';
+const hasOwn = Object.prototype.hasOwnProperty;
 export const useLoaderData = () => {
-    var _a;
     const currentMatch = useMatchedRoute();
-    const loaderManager = getLoaderManager();
-    const id = (_a = currentMatch.route) === null || _a === void 0 ? void 0 : _a.id;
-    const data = loaderManager.getData(id);
-    if (data === null) {
+    const id = currentMatch.route.id;
+    // we don't need to watch the model change, cause it always change with
+    // matched route
+    const [state] = useStaticModel(loaderModel);
+    if (!hasOwn.call(state.current.dataByRouteId, id)) {
         throw Error(noLoaderMessage);
     }
-    const dataRef = useRef(data);
-    const [_, forceUpdate] = useReducer(state => state * -1, 1);
-    useEffect(() => {
-        const cancel = loaderManager.subscribe(() => {
-            const newData = loaderManager.getData(id);
-            if (newData !== data) {
-                dataRef.current = newData;
-                forceUpdate();
-            }
-        });
-        return cancel;
-    }, []);
-    return dataRef.current;
+    return state.current.dataByRouteId[id];
 };