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

package/esm/shuvi-app/react/utils/useIntersection.jsx

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { requestIdleCallback, cancelIdleCallback } from './requestIdleCallback';
+const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined';
+export default function useIntersection({ rootRef, rootMargin = '0px', disabled }) {
+    const isDisabled = disabled || !hasIntersectionObserver;
+    const unobserve = useRef();
+    const [visible, setVisible] = useState(false);
+    const [root, setRoot] = useState(rootRef ? rootRef.current : null);
+    const setRef = useCallback((el) => {
+        if (unobserve.current) {
+            unobserve.current();
+            unobserve.current = undefined;
+        }
+        if (isDisabled || visible)
+            return;
+        if (el && el.tagName) {
+            unobserve.current = observe(el, isVisible => isVisible && setVisible(isVisible), { root, rootMargin });
+        }
+    }, [isDisabled, root, rootMargin, visible]);
+    const resetVisible = useCallback(() => {
+        setVisible(false);
+    }, []);
+    useEffect(() => {
+        if (!hasIntersectionObserver) {
+            if (!visible) {
+                const idleCallback = requestIdleCallback(() => setVisible(true));
+                return () => cancelIdleCallback(idleCallback);
+            }
+        }
+        return () => { };
+    }, [visible]);
+    useEffect(() => {
+        if (rootRef)
+            setRoot(rootRef.current);
+    }, [rootRef]);
+    return [setRef, visible, resetVisible];
+}
+function observe(element, callback, options) {
+    const { id, observer, elements } = createObserver(options);
+    elements.set(element, callback);
+    observer.observe(element);
+    return function unobserve() {
+        elements.delete(element);
+        observer.unobserve(element);
+        // Destroy observer when there's nothing left to watch:
+        if (elements.size === 0) {
+            observer.disconnect();
+            observers.delete(id);
+            let index = idList.findIndex(obj => obj.root === id.root && obj.margin === id.margin);
+            if (index > -1) {
+                idList.splice(index, 1);
+            }
+        }
+    };
+}
+const observers = new Map();
+const idList = [];
+function createObserver(options) {
+    const id = {
+        root: options.root || null,
+        margin: options.rootMargin || ''
+    };
+    let existing = idList.find(obj => obj.root === id.root && obj.margin === id.margin);
+    let instance;
+    if (existing) {
+        instance = observers.get(existing);
+    }
+    else {
+        instance = observers.get(id);
+        idList.push(id);
+    }
+    if (instance) {
+        return instance;
+    }
+    const elements = new Map();
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            const callback = elements.get(entry.target);
+            const isVisible = entry.isIntersecting || entry.intersectionRatio > 0;
+            if (callback && isVisible) {
+                callback(isVisible);
+            }
+        });
+    }, options);
+    observers.set(id, (instance = {
+        id,
+        observer,
+        elements
+    }));
+    return instance;
+}

package/esm/shuvi-app/react/view/ReactView.client.d.ts

@@ -0,0 +1,5 @@
+import { IReactClientView } from '../types';
+export declare class ReactClientView implements IReactClientView {
+    private _isInitialRender;
+    renderApp: IReactClientView['renderApp'];
+}

package/esm/shuvi-app/react/view/ReactView.client.jsx

@@ -0,0 +1,64 @@
+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 * as React from 'react';
+import { SHUVI_ERROR } from '@shuvi/shared/lib/constants';
+import { Router } from '@shuvi/router-react';
+import AppContainer from '../AppContainer';
+import { HeadManager, HeadManagerContext } from '../head';
+import Loadable from '../loadable';
+import { renderAction } from './render-action';
+const headManager = new HeadManager();
+export class ReactClientView {
+    constructor() {
+        this._isInitialRender = true;
+        this.renderApp = ({ appContainer, app, appData }) => __awaiter(this, void 0, void 0, function* () {
+            const { _isInitialRender: isInitialRender } = this;
+            const { router, appComponent: AppComponent, error } = app;
+            let { ssr, appProps, dynamicIds } = appData;
+            // For e2e test
+            if (window.__SHUVI) {
+                window.__SHUVI.router = router;
+            }
+            else {
+                window.__SHUVI = { router };
+            }
+            const TypedAppComponent = AppComponent;
+            if (ssr) {
+                yield Loadable.preloadReady(dynamicIds);
+                yield router.ready;
+            }
+            else {
+                yield router.ready;
+                const { matches } = router.current;
+                if (!matches.length) {
+                    // no handler no matches
+                    error.error(SHUVI_ERROR.PAGE_NOT_FOUND);
+                }
+            }
+            const root = (<Router router={router}>
+        <AppContainer app={app}>
+          <HeadManagerContext.Provider value={headManager.updateHead}>
+            <TypedAppComponent {...appProps}/>
+          </HeadManagerContext.Provider>
+        </AppContainer>
+      </Router>);
+            const ssrCallback = () => {
+                this._isInitialRender = false;
+            };
+            renderAction({
+                ssr,
+                isInitialRender,
+                root,
+                callback: ssrCallback,
+                appContainer
+            });
+        });
+    }
+}

package/esm/shuvi-app/react/view/ReactView.server.d.ts

@@ -0,0 +1,4 @@
+import { IReactServerView } from '../types';
+export declare class ReactServerView implements IReactServerView {
+    renderApp: IReactServerView['renderApp'];
+}

package/esm/shuvi-app/react/view/ReactView.server.jsx

@@ -0,0 +1,109 @@
+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 * as React from 'react';
+import { renderToString } from 'react-dom/server';
+import { getLoaderManager, redirect } from '@shuvi/platform-shared/shared';
+import { SHUVI_ERROR } from '@shuvi/shared/lib/constants';
+import { Router } from '@shuvi/router-react';
+import Loadable, { LoadableContext } from '../loadable';
+import AppContainer from '../AppContainer';
+import { Head } from '../head';
+export class ReactServerView {
+    constructor() {
+        this.renderApp = ({ app, manifest, getAssetPublicUrl }) => __awaiter(this, void 0, void 0, function* () {
+            yield Loadable.preloadAll();
+            const { storeManager, router, error: appError, appComponent: AppComponent } = app;
+            yield router.ready;
+            // todo: move these into renderer
+            let { pathname, matches, redirected } = router.current;
+            // handler no matches
+            if (!matches.length) {
+                appError.error(SHUVI_ERROR.PAGE_NOT_FOUND);
+            }
+            if (redirected) {
+                return redirect(pathname);
+            }
+            // todo: move loader into app, avoid using global module
+            const loaderManager = getLoaderManager();
+            const loadersData = yield loaderManager.getAllData();
+            const loadableModules = [];
+            let htmlContent;
+            let head;
+            const RootApp = (<Router static router={router}>
+        <AppContainer app={app}>
+          <LoadableContext.Provider value={moduleName => loadableModules.push(moduleName)}>
+            <AppComponent />
+          </LoadableContext.Provider>
+        </AppContainer>
+      </Router>);
+            try {
+                htmlContent = renderToString(RootApp);
+            }
+            finally {
+                loaderManager.clearAllData();
+                head = Head.rewind() || [];
+            }
+            const { loadble } = manifest;
+            const dynamicImportIdSet = new Set();
+            const dynamicImportChunkSet = new Set();
+            for (const mod of loadableModules) {
+                const manifestItem = loadble[mod];
+                if (manifestItem) {
+                    manifestItem.files.forEach(file => {
+                        dynamicImportChunkSet.add(file);
+                    });
+                    manifestItem.children.forEach(item => {
+                        dynamicImportIdSet.add(item.id);
+                    });
+                }
+            }
+            const preloadDynamicChunks = [];
+            const styles = [];
+            for (const file of dynamicImportChunkSet) {
+                if (/\.js$/.test(file)) {
+                    preloadDynamicChunks.push({
+                        tagName: 'link',
+                        attrs: {
+                            rel: 'preload',
+                            href: getAssetPublicUrl(file),
+                            as: 'script'
+                        }
+                    });
+                }
+                else if (/\.css$/.test(file)) {
+                    styles.push({
+                        tagName: 'link',
+                        attrs: {
+                            rel: 'stylesheet',
+                            href: getAssetPublicUrl(file)
+                        }
+                    });
+                }
+            }
+            const appData = {
+                dynamicIds: [...dynamicImportIdSet],
+                loadersData
+            };
+            if (dynamicImportIdSet.size) {
+                appData.dynamicIds = Array.from(dynamicImportIdSet);
+            }
+            appData.appState = storeManager.getState();
+            return {
+                appData,
+                content: htmlContent,
+                htmlAttrs: {},
+                headBeginTags: [...head, ...preloadDynamicChunks],
+                headEndTags: [...styles],
+                bodyBeginTags: [],
+                bodyEndTags: []
+            };
+        });
+    }
+}

package/esm/shuvi-app/react/view/clientView.d.ts

@@ -0,0 +1,3 @@
+import { ReactClientView } from './ReactView.client';
+declare const _default: ReactClientView;
+export default _default;

package/esm/shuvi-app/react/view/clientView.js

@@ -0,0 +1,2 @@
+import { ReactClientView } from './ReactView.client';
+export default new ReactClientView();

package/esm/shuvi-app/react/view/index.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: typeof import("./clientView") | typeof import("./serverView");
+export = _exports;

package/esm/shuvi-app/react/view/index.js

@@ -0,0 +1,7 @@
+"use strict";
+if (__BROWSER__) {
+    module.exports = require('./clientView');
+}
+else {
+    module.exports = require('./serverView');
+}

package/esm/shuvi-app/react/view/render-action.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+declare type RenderActionParam = {
+    ssr?: boolean;
+    isInitialRender?: boolean;
+    root?: ReactNode;
+    callback?: () => unknown;
+    appContainer?: Element | Document;
+};
+declare let renderAction: (options: RenderActionParam) => void;
+export { renderAction };

package/esm/shuvi-app/react/view/render-action.js

@@ -0,0 +1,29 @@
+let renderAction;
+if (process.env.__SHUVI__AFTER__REACT__18__) {
+    const { createRoot, hydrateRoot } = require('react-dom/client');
+    let renderRoot;
+    renderAction = ({ ssr, isInitialRender, root, callback, appContainer }) => {
+        if (ssr && isInitialRender) {
+            renderRoot = hydrateRoot(appContainer, root);
+            callback === null || callback === void 0 ? void 0 : callback();
+        }
+        else {
+            if (!renderRoot) {
+                renderRoot = createRoot(appContainer);
+            }
+            renderRoot.render(root);
+        }
+    };
+}
+else {
+    const { hydrate, render } = require('react-dom');
+    renderAction = ({ ssr, isInitialRender, root, callback, appContainer }) => {
+        if (ssr && isInitialRender) {
+            hydrate(root, appContainer, callback);
+        }
+        else {
+            render(root, appContainer);
+        }
+    };
+}
+export { renderAction };

package/esm/shuvi-app/react/view/serverView.d.ts

@@ -0,0 +1,3 @@
+import { ReactServerView } from './ReactView.server';
+declare const _default: ReactServerView;
+export default _default;

package/esm/shuvi-app/react/view/serverView.js

@@ -0,0 +1,2 @@
+import { ReactServerView } from './ReactView.server';
+export default new ReactServerView();

package/esm/shuvi-app/react/view/transformRoutes.d.ts

@@ -0,0 +1,2 @@
+import { IPageRouteRecord } from '@shuvi/platform-shared/shared';
+export declare const transformRoutes: (routes: IPageRouteRecord[]) => IPageRouteRecord[];

package/esm/shuvi-app/react/view/transformRoutes.js

@@ -0,0 +1,3 @@
+export const transformRoutes = (routes) => {
+    return routes;
+};

package/esm/shuvi-app/shuvi-runtime-index.d.ts

@@ -0,0 +1,4 @@
+import { IRequestHandlerWithNext } from '@shuvi/service';
+import { IApiRequestHandler } from '../shared';
+export declare type MiddlewareHandler = IRequestHandlerWithNext;
+export declare type APIHandler = IApiRequestHandler;

package/esm/shuvi-app/shuvi-runtime-index.js

@@ -0,0 +1,2 @@
+// exported by @shuvi/runtme
+export {};

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

@@ -0,0 +1,6 @@
+import { IServerModule as _IServerModule } from '../shared';
+declare type ServerModule = Required<_IServerModule>;
+export declare type GetPageDataFunction = ServerModule['getPageData'];
+export declare type HandlePageRequestFunction = ServerModule['handlePageRequest'];
+export declare type ModifyHtmlFunction = ServerModule['modifyHtml'];
+export {};

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

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

package/lib/node/features/custom-server/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    server: import("@shuvi/hook").IPluginInstance<import("@shuvi/service/lib/server/plugin").BuiltInServerPluginHooks & import("@shuvi/service/lib/server/pluginTypes").CustomServerPluginHooks, import("@shuvi/service").IServerPluginContext>;
+};
+export default _default;

package/lib/node/features/custom-server/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const server_1 = __importDefault(require("./server"));
+exports.default = {
+    server: server_1.default
+};

package/lib/node/features/custom-server/server.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@shuvi/hook").IPluginInstance<import("@shuvi/service/lib/server/plugin").BuiltInServerPluginHooks & import("@shuvi/service/lib/server/pluginTypes").CustomServerPluginHooks, import("@shuvi/service").IServerPluginContext>;
+export default _default;

package/lib/node/features/custom-server/server.js

@@ -0,0 +1,28 @@
+"use strict";
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const service_1 = require("@shuvi/service");
+const resources_1 = require("@shuvi/service/lib/resources");
+exports.default = (0, service_1.createServerPlugin)({
+    getPageData: (appContext, context) => {
+        var _a, _b;
+        return ((_b = (_a = resources_1.server === null || resources_1.server === void 0 ? void 0 : resources_1.server.server) === null || _a === void 0 ? void 0 : _a.getPageData) === null || _b === void 0 ? void 0 : _b.call(_a, appContext, context)) || {};
+    },
+    handlePageRequest: (originalHandlePageRequest, context) => {
+        var _a, _b;
+        return (((_b = (_a = resources_1.server === null || resources_1.server === void 0 ? void 0 : resources_1.server.server) === null || _a === void 0 ? void 0 : _a.handlePageRequest) === null || _b === void 0 ? void 0 : _b.call(_a, originalHandlePageRequest, context)) ||
+            originalHandlePageRequest);
+    },
+    modifyHtml: (document, context, pluginContext) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        yield ((_b = (_a = resources_1.server === null || resources_1.server === void 0 ? void 0 : resources_1.server.server) === null || _a === void 0 ? void 0 : _a.modifyHtml) === null || _b === void 0 ? void 0 : _b.call(_a, document, context, pluginContext));
+    })
+});

package/lib/node/features/filesystem-routes/api/apiRouteHandler.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="node" />
+import { IncomingMessage } from 'http';
+import { IResponse, IRequest } from '@shuvi/service';
+import { IApiRequestHandler, IApiResponse } from '../../../../shared';
+export { IApiRequestHandler };
+export declare function apiRouteHandler(req: IRequest, res: IResponse, resolver: IApiRequestHandler, apiRoutesConfig: any): Promise<void>;
+/**
+ * Parse incoming message like `json` or `urlencoded`
+ * @param req request object
+ */
+export declare function parseBody(req: IRequest, limit: string | number): Promise<any>;
+/**
+ * Parse cookies from `req` header
+ * @param req request object
+ */
+export declare function getCookieParser(req: IncomingMessage): {
+    [key: string]: string;
+};
+/**
+ *
+ * @param res ServerResponse object
+ * @param statusCode `HTTP` status code of response
+ */
+export declare function sendStatusCode<IRes extends IApiResponse>(res: IResponse, statusCode: number): IRes;
+/**
+ *
+ * @param res response object
+ * @param [statusOrUrl] `HTTP` status code of redirect
+ * @param url URL of redirect
+ */
+export declare function redirect<IRes extends IApiResponse>(res: IResponse, statusOrUrl: string | number, url?: string): IRes;
+/**
+ * Send `any` body to response
+ * @param req request object
+ * @param res response object
+ * @param body of response
+ */
+export declare function sendData(req: IRequest, res: IResponse, body: any): void;
+/**
+ * Send `JSON` object
+ * @param res response object
+ * @param jsonBody of data
+ */
+export declare function sendJson(req: IRequest, res: IResponse, jsonBody: any): void;
+/**
+ * Custom error class
+ */
+export declare class ApiError extends Error {
+    readonly statusCode: number;
+    constructor(statusCode: number, message: string);
+}