@shuvi/platform-web 1.0.60 → 1.0.62

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

@@ -22,6 +22,7 @@ import * as React from 'react';
 import { Link as LinkFromRouterReact, RouterContext } from '@shuvi/router-react';
 import { getFilesOfRoute } from '@shuvi/platform-shared/shared';
 import useIntersection from './utils/useIntersection';
+import { awaitPageLoadAndIdle } from '@shuvi/utils/idleCallback';
 const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/;
 const prefetched = {};
 function hasSupportPrefetch() {
@@ -64,7 +65,10 @@ function prefetchFn(router, to) {
             return;
         const canPrefetch = hasSupportPrefetch();
         yield Promise.all(canPrefetch
-            ? files.js.map(({ url, id }) => prefetchViaDom(url, id, 'script'))
+            ? files.js.map((_a) => __awaiter(this, [_a], void 0, function* ({ url, id }) {
+                yield awaitPageLoadAndIdle({ remainingTime: 49, timeout: 10 * 1000 });
+                yield prefetchViaDom(url, id, 'script');
+            }))
             : []);
     });
 }
@@ -77,7 +81,11 @@ export const Link = function LinkWithPrefetch(_a) {
     const previousHref = React.useRef(to);
     const [setIntersectionRef, isVisible, resetVisible] = useIntersection({});
     const { router } = React.useContext(RouterContext);
-    const setRef = React.useCallback((el) => {
+    const setRef = React.useCallback((el) => __awaiter(this, void 0, void 0, function* () {
+        /**
+         * Lazy prefetching to avoid negative performance impact for the first page.
+         */
+        yield awaitPageLoadAndIdle({ remainingTime: 49, timeout: 10 * 1000 });
         // Before the link getting observed, check if visible state need to be reset
         if (isHrefValid && previousHref.current !== to) {
             resetVisible();
@@ -92,7 +100,7 @@ export const Link = function LinkWithPrefetch(_a) {
                 ref.current = el;
             }
         }
-    }, [to, isHrefValid, prefetch, resetVisible, setIntersectionRef, ref]);
+    }), [to, isHrefValid, prefetch, resetVisible, setIntersectionRef, ref]);
     React.useEffect(() => {
         const shouldPrefetch = isHrefValid && prefetch !== false && isVisible;
         if (shouldPrefetch && !prefetched[to]) {

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { requestIdleCallback, cancelIdleCallback } from './requestIdleCallback';
+import { requestIdleCallback, cancelIdleCallback } from '@shuvi/utils/idleCallback';
 const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined';
 export default function useIntersection({ rootRef, rootMargin = '0px', disabled }) {
     const isDisabled = disabled || !hasIntersectionObserver;

package/lib/node/features/html-render/lib/renderToHTML.js

@@ -16,11 +16,13 @@ exports.renderToHTML = renderToHTML;
 const resources_1 = __importDefault(require("@shuvi/service/lib/resources"));
 const trace_1 = require("@shuvi/shared/constants/trace");
 const renderer_1 = require("./renderer");
+const AppConfigManager_1 = __importDefault(require("../../setup-app-config/AppConfigManager"));
 function renderToHTML(_a) {
     return __awaiter(this, arguments, void 0, function* ({ req, serverPluginContext }) {
         let result;
         const renderer = new renderer_1.Renderer({ serverPluginContext });
-        const { config: { ssr }, appConfig: { router: { basename } } } = serverPluginContext;
+        const { config: { ssr } } = serverPluginContext;
+        const { basename } = AppConfigManager_1.default.getAppConfig(req).router;
         const { serverCreateAppTrace } = req._traces;
         const { application } = resources_1.default.server;
         const app = serverCreateAppTrace

package/lib/node/features/html-render/lib/renderer/spa.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpaRenderer = void 0;
 const shuvi_singleton_runtimeConfig_1 = require("@shuvi/platform-shared/shared/shuvi-singleton-runtimeConfig");
 const base_1 = require("./base");
+const AppConfigManager_1 = __importDefault(require("../../../setup-app-config/AppConfigManager"));
 class SpaRenderer extends base_1.BaseRenderer {
     renderDocument({ req, app }) {
         const assets = this._getMainAssetTags(req);
-        const { router: { basename } } = this._serverPluginContext.appConfig;
+        const { basename } = AppConfigManager_1.default.getAppConfig(req).router;
         const appData = {
             ssr: false,
             pageData: {},

package/lib/node/features/html-render/serverHooks.d.ts

@@ -1,5 +1,5 @@
 import { ServerResponse } from 'http';
-import { ShuviRequest } from '@shuvi/service';
+import { ShuviRequest, IAppConfigByRequest } from '@shuvi/service';
 import { IAppContext } from '@shuvi/platform-shared/shared';
 import { IHtmlDocument } from '../html-render';
 export interface ModifyHtmlContext {
@@ -15,18 +15,10 @@ export type ISendHtml = (html: string, requestContext: RequestContext) => Promis
 type AppConfigCtx = {
     req: ShuviRequest;
 };
-export declare const getAppConfig: import("@shuvi/hook").SyncBailHook<void, AppConfigCtx, {
-    router: {
-        basename: string;
-    };
-}>;
+export declare const getAppConfig: import("@shuvi/hook").SyncBailHook<void, AppConfigCtx, IAppConfigByRequest>;
 export declare const extendedHooks: {
     getPageData: import("@shuvi/hook").AsyncParallelHook<void, IAppContext, Record<string, unknown>>;
-    getAppConfig: import("@shuvi/hook").SyncBailHook<void, AppConfigCtx, {
-        router: {
-            basename: string;
-        };
-    }>;
+    getAppConfig: import("@shuvi/hook").SyncBailHook<void, AppConfigCtx, IAppConfigByRequest>;
     handlePageRequest: import("@shuvi/hook").AsyncSeriesWaterfallHook<IHandlePageRequest, void>;
     modifyHtml: import("@shuvi/hook").AsyncSeriesHook<IHtmlDocument, ModifyHtmlContext, void>;
     sendHtml: import("@shuvi/hook").AsyncSeriesWaterfallHook<ISendHtml, void>;

package/lib/node/features/on-demand-compile-page/onDemandRouteManager.d.ts

@@ -1,4 +1,4 @@
-import { ShuviRequestHandler, IServerPluginContext } from '@shuvi/service';
+import { ShuviRequestHandler, IServerPluginContext, ShuviRequest } from '@shuvi/service';
 import { DevMiddleware } from '@shuvi/service/lib/server/middlewares/dev';
 export default class OnDemandRouteManager {
     devMiddleware: DevMiddleware | null;
@@ -7,6 +7,6 @@ export default class OnDemandRouteManager {
     constructor(serverPluginContext: IServerPluginContext);
     getServerMiddleware(): ShuviRequestHandler;
     ensureRoutesMiddleware(): ShuviRequestHandler;
-    ensureRoutes(pathname: string): Promise<void>;
+    ensureRoutes(pathname: string, req: ShuviRequest): Promise<void>;
     private _activateModules;
 }

package/lib/node/features/on-demand-compile-page/onDemandRouteManager.js

@@ -16,6 +16,7 @@ const router_1 = require("@shuvi/router");
 const utils_1 = require("@shuvi/router/lib/utils");
 const resources_1 = __importDefault(require("@shuvi/service/lib/resources"));
 const module_replace_plugin_1 = __importDefault(require("@shuvi/toolpack/lib/webpack/plugins/module-replace-plugin"));
+const AppConfigManager_1 = __importDefault(require("../setup-app-config/AppConfigManager"));
 function acceptsHtml(header, { htmlAcceptHeaders = ['text/html', '*/*'] } = {}) {
     for (var i = 0; i < htmlAcceptHeaders.length; i++) {
         if (header.indexOf(htmlAcceptHeaders[i]) !== -1) {
@@ -76,7 +77,7 @@ class OnDemandRouteManager {
             }
             let err = null;
             try {
-                yield this.ensureRoutes(req.pathname || '/');
+                yield this.ensureRoutes(req.pathname || '/', req);
             }
             catch (error) {
                 err = error;
@@ -84,9 +85,9 @@ class OnDemandRouteManager {
             next(err);
         });
     }
-    ensureRoutes(pathname) {
+    ensureRoutes(pathname, req) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { router: { basename } } = this._serverPluginContext.appConfig;
+            const { basename } = AppConfigManager_1.default.getAppConfig(req).router;
             const matchedRoutes = (0, router_1.matchRoutes)(resources_1.default.server.pageRoutes, pathname, (0, utils_1.normalizeBase)(basename)) || [];
             const modulesToActivate = matchedRoutes
                 .map(({ route: { __componentRawRequest__ } }) => __componentRawRequest__)

package/lib/node/features/setup-app-config/AppConfigManager.d.ts

@@ -0,0 +1,22 @@
+import { ShuviRequest, IAppConfigByRequest } from '@shuvi/service';
+export default class AppConfigManager {
+    /**
+     * A weakmap to store the appConfig by request
+     * Never share the same appConfig between requests! Race condition will happen.
+     */
+    private static _appConfigWeakMap;
+    /**
+     * default appConfig, can be override by `getAppConfig` hook
+     */
+    private static _DEFAULT_APP_CONFIG;
+    /**
+     * Retrieves the appConfig associated with the given request.
+     * @throws Error if appConfig is not set for the request.
+     */
+    static getAppConfig(req: ShuviRequest): IAppConfigByRequest;
+    /**
+     * Associates the appConfig with the given request.
+     * @throws Error if appConfig is already set for the request.
+     */
+    static setAppConfig(req: ShuviRequest, appConfig: IAppConfigByRequest): void;
+}

package/lib/node/features/setup-app-config/AppConfigManager.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class AppConfigManager {
+    /**
+     * Retrieves the appConfig associated with the given request.
+     * @throws Error if appConfig is not set for the request.
+     */
+    static getAppConfig(req) {
+        const appConfig = this._appConfigWeakMap.get(req);
+        if (!appConfig) {
+            return this._DEFAULT_APP_CONFIG;
+        }
+        return appConfig;
+    }
+    /**
+     * Associates the appConfig with the given request.
+     * @throws Error if appConfig is already set for the request.
+     */
+    static setAppConfig(req, appConfig) {
+        if (this._appConfigWeakMap.has(req)) {
+            // should only set appConfig once
+            return;
+        }
+        this._appConfigWeakMap.set(req, appConfig);
+    }
+}
+/**
+ * A weakmap to store the appConfig by request
+ * Never share the same appConfig between requests! Race condition will happen.
+ */
+AppConfigManager._appConfigWeakMap = new WeakMap();
+/**
+ * default appConfig, can be override by `getAppConfig` hook
+ */
+AppConfigManager._DEFAULT_APP_CONFIG = {
+    router: {
+        basename: ''
+    }
+};
+exports.default = AppConfigManager;

package/lib/node/features/setup-app-config/index.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSetupAppConfigMiddleware = void 0;
+const AppConfigManager_1 = __importDefault(require("./AppConfigManager"));
 const getSetupAppConfigMiddleware = (context) => {
     return (req, _res, next) => {
         const appConfig = context.serverPluginRunner.getAppConfig({ req });
@@ -8,7 +12,7 @@ const getSetupAppConfigMiddleware = (context) => {
             if (typeof appConfig.router.basename !== 'string') {
                 throw new Error('[ServerPlugin Hook getAppConfig] appConfig.router.basename must be a string');
             }
-            context.appConfig = appConfig;
+            AppConfigManager_1.default.setAppConfig(req, appConfig);
         }
         next();
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/platform-web",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -72,15 +72,15 @@
   },
   "dependencies": {
     "@next/react-refresh-utils": "12.1.6",
-    "@shuvi/error-overlay": "1.0.60",
-    "@shuvi/hook": "1.0.60",
-    "@shuvi/platform-shared": "1.0.60",
-    "@shuvi/router": "1.0.60",
-    "@shuvi/router-react": "1.0.60",
-    "@shuvi/runtime": "1.0.60",
-    "@shuvi/shared": "1.0.60",
-    "@shuvi/toolpack": "1.0.60",
-    "@shuvi/utils": "1.0.60",
+    "@shuvi/error-overlay": "1.0.62",
+    "@shuvi/hook": "1.0.62",
+    "@shuvi/platform-shared": "1.0.62",
+    "@shuvi/router": "1.0.62",
+    "@shuvi/router-react": "1.0.62",
+    "@shuvi/runtime": "1.0.62",
+    "@shuvi/shared": "1.0.62",
+    "@shuvi/toolpack": "1.0.62",
+    "@shuvi/utils": "1.0.62",
     "content-type": "1.0.4",
     "core-js": "3.6.5",
     "doura": "0.0.13",
@@ -98,7 +98,7 @@
     "whatwg-fetch": "3.0.0"
   },
   "peerDependencies": {
-    "@shuvi/service": "1.0.60"
+    "@shuvi/service": "1.0.62"
   },
   "devDependencies": {
     "@shuvi/service": "workspace:*",

package/esm/shuvi-app/react/utils/requestIdleCallback.d.ts

@@ -1,2 +0,0 @@
-export declare const requestIdleCallback: ((callback: IdleRequestCallback, options?: IdleRequestOptions) => number) & typeof globalThis.requestIdleCallback;
-export declare const cancelIdleCallback: ((handle: number) => void) & typeof globalThis.cancelIdleCallback;

package/esm/shuvi-app/react/utils/requestIdleCallback.js

@@ -1,20 +0,0 @@
-export const requestIdleCallback = (typeof self !== 'undefined' &&
-    self.requestIdleCallback &&
-    self.requestIdleCallback.bind(window)) ||
-    function (cb) {
-        let start = Date.now();
-        return setTimeout(function () {
-            cb({
-                didTimeout: false,
-                timeRemaining: function () {
-                    return Math.max(0, 50 - (Date.now() - start));
-                }
-            });
-        }, 1);
-    };
-export const cancelIdleCallback = (typeof self !== 'undefined' &&
-    self.cancelIdleCallback &&
-    self.cancelIdleCallback.bind(window)) ||
-    function (id) {
-        return clearTimeout(id);
-    };