@shuvi/platform-web 1.0.61 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/platform-web",
-  "version": "1.0.61",
+  "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.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.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.61"
+    "@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);
-    };