@shuvi/platform-web 1.0.61 → 1.0.63

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

@@ -1,3 +1,4 @@
+import { getAppData } from '@shuvi/platform-shared/shared';
 let source;
 const eventCallbacks = [];
 let lastActivity = Date.now();
@@ -9,7 +10,8 @@ function getSocketProtocol(assetPublicPath) {
         protocol = new URL(assetPublicPath).protocol;
     }
     catch (_) { }
-    return protocol === 'http:' ? 'ws' : 'wss';
+    // use ws by default
+    return protocol === 'https:' ? 'wss' : 'ws';
 }
 export function addMessageListener(cb) {
     eventCallbacks.push(cb);
@@ -34,12 +36,17 @@ export function connectHMR(options) {
     function init() {
         if (source)
             source.close();
-        const { hostname, port } = window.location;
+        let { devServer } = getAppData();
+        if (!devServer) {
+            // fallback case
+            const { hostname, port } = window.location;
+            devServer = `${hostname}:${port}`;
+        }
         const protocol = getSocketProtocol(options.assetPublicPath);
         const assetPublicPath = options.assetPublicPath
             .replace(/^\/+/, '')
             .replace(/\/+$/, '');
-        let url = `${protocol}://${hostname}:${port}${assetPublicPath ? `/${assetPublicPath}` : ''}`;
+        let url = `${protocol}://${devServer}${assetPublicPath ? `/${assetPublicPath}` : ''}`;
         if (assetPublicPath.startsWith('http')) {
             url = `${protocol}://${assetPublicPath.split('://')[1]}`;
         }

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/renderer/base.js

@@ -68,7 +68,9 @@ class BaseRenderer {
     }
     _getInlineAppData(app, appData) {
         const routes = app.router.routes || [];
-        const data = JSON.stringify(Object.assign(Object.assign({}, appData), { filesByRoutId: (0, generateFilesByRoutId_1.default)(resources_1.default.clientManifest, routes), publicPath: this._serverPluginContext.assetPublicPath }));
+        const data = JSON.stringify(Object.assign(Object.assign({}, appData), { filesByRoutId: (0, generateFilesByRoutId_1.default)(resources_1.default.clientManifest, routes), publicPath: this._serverPluginContext.assetPublicPath, 
+            // process.env.DEV_SERVER is undefined in production, and the key devServer will be removed
+            devServer: process.env.DEV_SERVER }));
         return (0, htmlTag_1.tag)('script', {
             id: constants_1.CLIENT_APPDATA_ID,
             type: 'application/json'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/platform-web",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "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.61",
-    "@shuvi/hook": "1.0.61",
-    "@shuvi/platform-shared": "1.0.61",
-    "@shuvi/router": "1.0.61",
-    "@shuvi/router-react": "1.0.61",
-    "@shuvi/runtime": "1.0.61",
-    "@shuvi/shared": "1.0.61",
-    "@shuvi/toolpack": "1.0.61",
-    "@shuvi/utils": "1.0.61",
+    "@shuvi/error-overlay": "1.0.63",
+    "@shuvi/hook": "1.0.63",
+    "@shuvi/platform-shared": "1.0.63",
+    "@shuvi/router": "1.0.63",
+    "@shuvi/router-react": "1.0.63",
+    "@shuvi/runtime": "1.0.63",
+    "@shuvi/shared": "1.0.63",
+    "@shuvi/toolpack": "1.0.63",
+    "@shuvi/utils": "1.0.63",
     "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.61"
+    "@shuvi/service": "1.0.63"
   },
   "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);
-    };