@shuvi/platform-web 0.0.1-rc.34 → 1.0.0-rc.2

package/esm/shared/appTypes.d.ts

@@ -0,0 +1,15 @@
+import { IRequest, IRawPageRouteRecord, IAppData, IAppState } from '@shuvi/platform-shared/shared';
+import { Application } from '@shuvi/platform-shared/shuvi-app/application';
+export interface CreateAppServer {
+    (options: {
+        req: IRequest;
+        ssr: boolean;
+    }): Application;
+}
+export interface CreateAppClient {
+    (options: {
+        routes: IRawPageRouteRecord[];
+        appComponent: any;
+        appData: IAppData<any, IAppState>;
+    }): Application;
+}

package/esm/shared/appTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/shared/configTypes.d.ts

@@ -0,0 +1,14 @@
+import { IRouterHistoryMode, IPageRouteConfig, IMiddlewareRouteConfig, IApiRouteConfig } from '@shuvi/platform-shared/shared';
+export interface IRouterConfig {
+    history: IRouterHistoryMode | 'auto';
+}
+export interface PlatformWebCustomConfig {
+    ssr: boolean;
+    router: IRouterConfig;
+    routes?: IPageRouteConfig[];
+    middlewareRoutes?: IMiddlewareRouteConfig[];
+    apiRoutes?: IApiRouteConfig[];
+    conventionRoutes: {
+        exclude?: string[];
+    };
+}

package/esm/shared/configTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/shared/index.d.ts

@@ -0,0 +1,5 @@
+export * from './appTypes';
+export * from './configTypes';
+export * from './renderTypes';
+export * from './routeTypes';
+export * from './serverTypes';

package/esm/shared/index.js

@@ -0,0 +1,5 @@
+export * from './appTypes';
+export * from './configTypes';
+export * from './renderTypes';
+export * from './routeTypes';
+export * from './serverTypes';

package/esm/shared/renderTypes.d.ts

@@ -0,0 +1,44 @@
+import { IManifest } from '@shuvi/toolpack/lib/webpack/types';
+import { Response, IApplication, IRequest, IAppData } from '@shuvi/platform-shared/shared';
+export declare type IRenderDocumentOptions = {
+    app: IApplication;
+    req?: IRequest;
+};
+export interface IRenderOptions extends IRenderDocumentOptions {
+}
+export interface IView<RenderOption extends IRenderOptions = any, RenderResult = void> {
+    renderApp(options: RenderOption): RenderResult;
+}
+export declare type IHtmlAttrs = {
+    textContent?: string;
+} & {
+    [x: string]: string | number | undefined | boolean;
+};
+export interface IHtmlTag<TagNames = string> {
+    tagName: TagNames;
+    attrs: IHtmlAttrs;
+    innerHTML?: string;
+}
+export declare type IRenderAppServerResult<ExtraAppData = {}> = {
+    htmlAttrs?: IHtmlAttrs;
+    headBeginTags?: IHtmlTag[];
+    headEndTags?: IHtmlTag[];
+    mainBeginTags?: IHtmlTag[];
+    mainEndTags?: IHtmlTag[];
+    scriptBeginTags?: IHtmlTag[];
+    scriptEndTags?: IHtmlTag[];
+    appData?: ExtraAppData;
+    content?: string;
+};
+export interface IClientRendererOptions<ExtraAppData = {}> extends IRenderOptions {
+    appContainer: HTMLElement;
+    appData: IAppData<ExtraAppData>;
+}
+export interface IServerRendererOptions extends IRenderOptions {
+    manifest: IManifest;
+    getAssetPublicUrl(path: string): string;
+}
+export interface IViewClient<ExtraAppData = {}> extends IView<IClientRendererOptions<ExtraAppData>> {
+}
+export interface IViewServer<ExtraAppData = {}> extends IView<IServerRendererOptions, Promise<IRenderAppServerResult<ExtraAppData> | Response>> {
+}

package/esm/shared/renderTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/shared/routeTypes.d.ts

@@ -0,0 +1,47 @@
+import { IURLParams, IURLQuery } from '@shuvi/platform-shared/shared';
+import { IRequestHandlerWithNext } from '@shuvi/service';
+import { IResponse, IRequest } from '@shuvi/service';
+export interface IApiReq {
+    pathname: string;
+    query: IURLQuery;
+    params: IURLParams;
+    cookies: {
+        [key: string]: string;
+    };
+    body?: {
+        [key: string]: any;
+    };
+}
+export declare type IApiRequest = IRequest & IApiReq;
+export declare type Send<T> = (body: T) => void;
+export declare type IApiRes<T = any> = {
+    send: Send<T>;
+    json: Send<T>;
+    status: (statusCode: number) => IApiRes<T>;
+    redirect(url: string): IApiRes<T>;
+    redirect(status: number, url: string): IApiRes<T>;
+};
+export declare type IApiResponse<T = any> = IResponse & IApiRes<T>;
+export declare type IApiRequestHandler<T = any> = (req: IApiRequest, res: IApiResponse<T>) => void | Promise<void>;
+export interface IApiConfig {
+    api?: {
+        bodyParser?: {
+            sizeLimit: number | string;
+        } | boolean;
+    };
+}
+export interface IApiHandler {
+    default: IApiRequestHandler;
+    config?: IApiConfig;
+}
+export interface IMiddlewareConfig {
+    default: IRequestHandlerWithNext;
+}
+export declare type IApiRoutes = {
+    path: string;
+    api: IApiHandler;
+}[];
+export declare type IMiddlewareRoutes = {
+    path: string;
+    middleware: IMiddlewareConfig;
+}[];

package/esm/shared/routeTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/shared/serverTypes.d.ts

@@ -0,0 +1,6 @@
+import { ServerPluginConstructor } from '@shuvi/service';
+export interface IServerModule {
+    getPageData?: ServerPluginConstructor['getPageData'];
+    handlePageRequest?: ServerPluginConstructor['handlePageRequest'];
+    modifyHtml?: ServerPluginConstructor['modifyHtml'];
+}

package/esm/shared/serverTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/shuvi-app/app/client.d.ts

@@ -0,0 +1,2 @@
+import { CreateAppClient } from '../../shared';
+export declare const createApp: CreateAppClient;

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

@@ -0,0 +1,125 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getRoutes } from '@shuvi/app/core/platform';
+import { runPreload, runLoaders, getRouteMatchesWithInvalidLoader, getLoaderManager, isRedirect, isResponse } from '@shuvi/platform-shared/shared';
+import 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';
+let app;
+export const createApp = ({ routes, appData, appComponent }) => {
+    // app is a singleton in client side
+    if (app) {
+        return app;
+    }
+    const { loadersData = {}, appState, ssr } = appData;
+    let history;
+    if (historyMode === 'hash') {
+        history = createHashHistory();
+    }
+    else {
+        history = createBrowserHistory();
+    }
+    const router = createRouter({
+        history,
+        routes: getRoutes(routes)
+    });
+    app = application({
+        initialState: appState,
+        AppComponent: appComponent,
+        router
+    });
+    const hasHydrateData = Object.keys(loadersData).length > 0;
+    const loaderManager = getLoaderManager();
+    let shouldHydrate = ssr && hasHydrateData;
+    let hasServerError = app.error.hasError;
+    router.beforeResolve((to, from, next) => __awaiter(void 0, void 0, void 0, function* () {
+        if (shouldHydrate) {
+            shouldHydrate = false;
+            loaderManager.setDatas(loadersData);
+            return next();
+        }
+        if (hasServerError) {
+            hasServerError = false;
+            return next();
+        }
+        if (!to.matches.length) {
+            app.error.error(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;
+                let error;
+                let requireNum = 2;
+                let resolvedNum = 0;
+                const tryResolve = () => {
+                    if (++resolvedNum === requireNum) {
+                        if (error) {
+                            reject(error);
+                        }
+                        else {
+                            resolve(value);
+                        }
+                    }
+                };
+                // if preload has error, reject directly
+                runPreload(to)
+                    .then(tryResolve)
+                    .catch(err => {
+                    isPreloadError = true;
+                    reject(err);
+                });
+                runLoaders(matches, pageLoaders, {
+                    isServer: false,
+                    query: to.query,
+                    getAppContext: () => app.context
+                })
+                    .then(_value => {
+                    value = _value;
+                    tryResolve();
+                })
+                    .catch(err => {
+                    error = err;
+                    tryResolve();
+                });
+            });
+            loaderManager.setDatas(loaderDatas);
+        }
+        catch (error) {
+            if (isRedirect(error)) {
+                next(error.headers.get('Location'));
+                return;
+            }
+            if (isResponse(error) && error.status >= 400 && error.status < 600) {
+                app.error.error({
+                    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'
+            });
+            next();
+            return;
+        }
+        next(() => {
+            app.error.clear();
+        });
+    }));
+    return app;
+};

package/esm/shuvi-app/app/server.d.ts

@@ -0,0 +1,2 @@
+import { CreateAppServer } from '../../shared';
+export declare const createApp: CreateAppServer;

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

@@ -0,0 +1,67 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 pageLoaders from '@shuvi/app/files/page-loaders';
+import application from '@shuvi/platform-shared/shuvi-app/application';
+import { createRouter, createMemoryHistory } from '@shuvi/router';
+export const createApp = options => {
+    const { req, ssr } = options;
+    const history = createMemoryHistory({
+        initialEntries: [(req && req.url) || '/'],
+        initialIndex: 0
+    });
+    const router = createRouter({
+        history,
+        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);
+            }
+            catch (error) {
+                if (isRedirect(error)) {
+                    next(error.headers.get('Location'));
+                    return;
+                }
+                if (isResponse(error) && error.status >= 400 && error.status < 600) {
+                    app.error.error({
+                        code: error.status,
+                        message: error.data
+                    });
+                    next();
+                    return;
+                }
+                app.error.error({
+                    message: error.message || 'Loader Error'
+                });
+                next();
+                return;
+            }
+            next();
+        }));
+    }
+    app = application({
+        AppComponent,
+        router
+    });
+    return app;
+};

package/{shuvi-app → esm/shuvi-app}/dev/webpackHotDevClient.js

@@ -5,7 +5,8 @@ export default (options = {}) => {
     if (devClient) {
         return devClient;
     }
-    devClient = connect(Object.assign(Object.assign({}, options), { launchEditorEndpoint: DEV_HOT_LAUNCH_EDITOR_ENDPOINT, path: DEV_HOT_MIDDLEWARE_PATH }));
+    devClient = connect(Object.assign(Object.assign({}, options), { launchEditorEndpoint: DEV_HOT_LAUNCH_EDITOR_ENDPOINT, path: DEV_HOT_MIDDLEWARE_PATH, location,
+        WebSocket }));
     devClient.subscribeToHmrEvent((event) => {
         // if (obj.action === "reloadPage") {
         //   return window.location.reload();

package/esm/shuvi-app/entry/client/app.d.ts

@@ -0,0 +1,2 @@
+declare const run: () => Promise<void>;
+export { run };

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

@@ -0,0 +1,57 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { CLIENT_CONTAINER_ID } from '@shuvi/shared/lib/constants';
+// renderer must be imported before application
+// we need to init init renderer before import AppComponent
+import { view, getRoutes, app as PlatformAppComponent } from '@shuvi/app/core/platform';
+import routes from '@shuvi/app/files/routes';
+import { getAppData } from '@shuvi/platform-shared/shared/helper/getAppData';
+import { createApp } from '../../app/client';
+const appData = getAppData();
+const app = createApp({
+    appComponent: PlatformAppComponent,
+    routes,
+    appData
+});
+const render = () => {
+    const appContainer = document.getElementById(CLIENT_CONTAINER_ID);
+    view.renderApp({
+        app: app.getPublicAPI(),
+        appData,
+        appContainer
+    });
+};
+const run = () => __awaiter(void 0, void 0, void 0, function* () {
+    yield app.init();
+    render();
+});
+export { run };
+if (module.hot) {
+    const handleHotUpdate = () => __awaiter(void 0, void 0, void 0, function* () {
+        const rerender = () => __awaiter(void 0, void 0, void 0, function* () {
+            app.router.replaceRoutes(getRoutes(routes));
+            yield app.updateComponents({
+                AppComponent: PlatformAppComponent
+            });
+            render();
+        });
+        // if we are in the midsf of route transition, don't render unit it's done
+        if (app.router._pending) {
+            const removelistener = app.router.afterEach(() => {
+                removelistener();
+                rerender();
+            });
+        }
+        else {
+            rerender();
+        }
+    });
+    module.hot.accept(['@shuvi/app/files/routes'], handleHotUpdate);
+}

package/esm/shuvi-app/entry/client/index.d.ts

@@ -0,0 +1,2 @@
+import './setup-env';
+import '@shuvi/app/core/entry';

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

@@ -0,0 +1,12 @@
+// shuvi built-in entry
+// IMPORTANT: there files must be runned before any other codes
+import './setup-env';
+// user entry
+import '@shuvi/app/core/entry';
+// app starts here
+if (process.env.NODE_ENV === 'development') {
+    require('./run.dev');
+}
+else {
+    require('./run.prod');
+}

package/{shuvi-app → esm/shuvi-app}/entry/client/run.dev.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 /// <reference lib="dom" />
 import { DEV_STYLE_HIDE_FOUC, DEV_STYLE_PREPARE } from '@shuvi/shared/lib/constants';
 import initWebpackHMR from '../../dev/webpackHotDevClient';
-import { app } from './setup-app';
+import { run } from './app';
 function init() {
     return __awaiter(this, void 0, void 0, function* () {
         initWebpackHMR();
@@ -27,4 +27,4 @@ function init() {
         yield styleReady;
     });
 }
-init().then(() => app.run());
+init().then(run);

package/esm/shuvi-app/entry/client/run.prod.js

@@ -0,0 +1,3 @@
+/// <reference lib="dom" />
+import { run } from './app';
+run();

package/{shuvi-app → esm/shuvi-app}/entry/client/setup-env.d.ts

@@ -1,5 +1,5 @@
 /**
- * Following codes should be run beforen any other codes.
+ * Following codes should be run before any other codes.
  * Do not try to import any module from `@shuvi/app`.
  */
 export {};

package/esm/shuvi-app/entry/client/setup-env.js

@@ -0,0 +1,17 @@
+/**
+ * Following codes should be run before any other codes.
+ * Do not try to import any module from `@shuvi/app`.
+ */
+import setRuntimeConfig from '@shuvi/app/core/setRuntimeConfig';
+import runtimeConfig from '@shuvi/app/core/runtimeConfig';
+import { getAppData } from '@shuvi/platform-shared/shared';
+// === set runtime config ===
+const appData = getAppData();
+// build-time config for none-ssr
+if (runtimeConfig) {
+    setRuntimeConfig(runtimeConfig);
+}
+// runtime config from server
+if (appData.runtimeConfig) {
+    setRuntimeConfig(appData.runtimeConfig);
+}

package/esm/shuvi-app/entry/server/index.d.ts

@@ -0,0 +1,6 @@
+import * as application from '../../app/server';
+import * as server from '@shuvi/app/user/server';
+import { default as apiRoutes } from '@shuvi/app/files/apiRoutes';
+import { default as middlewareRoutes } from '@shuvi/app/files/middlewareRoutes';
+export { server, application, apiRoutes, middlewareRoutes };
+export { view } from '@shuvi/app/core/platform';

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

@@ -0,0 +1,7 @@
+// This is the shuvi server-side main module exports collection
+import * as application from '../../app/server';
+import * as server from '@shuvi/app/user/server';
+import { default as apiRoutes } from '@shuvi/app/files/apiRoutes';
+import { default as middlewareRoutes } from '@shuvi/app/files/middlewareRoutes';
+export { server, application, apiRoutes, middlewareRoutes };
+export { view } from '@shuvi/app/core/platform';

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function App(): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof App>;
+export default _default;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { RouterView } from '@shuvi/router-react';
+function App() {
+    return <RouterView />;
+}
+export default React.memo(App);

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

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

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

@@ -0,0 +1,23 @@
+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();
+function ErrorGuard({ children = null }) {
+    const [errorState] = useSharedModel(errorModel);
+    if (errorState.error !== undefined) {
+        return (<ErrorPage code={errorState.error.code} message={errorState.error.message}/>);
+    }
+    return <>{children}</>;
+}
+export default function AppContainer({ children, app }) {
+    return (<ErrorBoundary>
+      <AppProvider app={app}>
+        <Provider storeManager={app.storeManager}>
+          <ErrorGuard>{children}</ErrorGuard>
+        </Provider>
+      </AppProvider>
+    </ErrorBoundary>);
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function Error({ errorCode, errorDesc }: {
+    errorCode?: number;
+    errorDesc?: string;
+}): JSX.Element;

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Head } from './head';
+const style = {
+    container: {
+        color: '#000',
+        background: '#fff',
+        fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    error: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    errorCode: {
+        fontSize: '24px',
+        fontWeight: 500
+    },
+    errorDesc: {
+        fontSize: '16px',
+        lineHeight: '1',
+        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
+        paddingLeft: '20px',
+        marginLeft: '20px'
+    }
+};
+export default function Error({ errorCode, errorDesc }) {
+    return (<div style={style.container}>
+      <Head>
+        <title>Page Error</title>
+      </Head>
+
+      <div style={style.error}>
+        <div style={style.errorCode}>{errorCode}</div>
+        <div style={style.errorDesc}>{errorDesc || 'Error'}</div>
+      </div>
+    </div>);
+}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+declare type ErrorBoundaryState = {
+    error: Error | null;
+};
+declare type ErrorInfo = {
+    componentStack?: string | null;
+};
+declare class ErrorBoundary extends React.PureComponent<PropsWithChildren<{}>, ErrorBoundaryState> {
+    state: {
+        error: null;
+    };
+    componentDidCatch(error: Error, errorInfo?: ErrorInfo): void;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
+}
+export { ErrorBoundary };