wip: redesign static assets prefetching

vikejs · May 12, 2024 · d7bc96e · d7bc96e
1 parent bbb131e
commit d7bc96e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/vike/client/client-routing-runtime/installClientRouter.ts b/vike/client/client-routing-runtime/installClientRouter.ts
@@ -7,11 +7,15 @@ import { onBrowserHistoryNavigation } from './onBrowserHistoryNavigation.js'
 import { onLinkClick } from './onLinkClick.js'
 import { setupNativeScrollRestoration } from './scrollRestoration.js'
 import { autoSaveScrollPosition } from './setScrollPosition.js'
+import { initPrefetch } from './prefetch.js'
 
 async function installClientRouter() {
   // Init navigation history and scroll restoration
   initHistoryAndScroll()
 
+  // Prefetch page upon mouse hover hovering links or links entering viewport
+  initPrefetch()
+
   // Render initial page
   const renderPromise = render()
 

diff --git a/vike/client/client-routing-runtime/prefetch.ts b/vike/client/client-routing-runtime/prefetch.ts
@@ -1,5 +1,6 @@
 export { prefetch }
-export { addLinkPrefetchHandlers }
+export { initPrefetch }
+export { setPrefetchSettings }
 
 import {
   assert,
@@ -16,7 +17,7 @@ import {
   loadUserFilesClientSide
 } from '../shared/loadUserFilesClientSide.js'
 import { skipLink } from './skipLink.js'
-import { getPrefetchSettings } from './prefetch/getPrefetchSettings.js'
+import { type PrefetchSettings, getPrefetchSettings } from './prefetch/getPrefetchSettings.js'
 import { isAlreadyPrefetched, markAsAlreadyPrefetched } from './prefetch/alreadyPrefetched.js'
 import { disableClientRouting } from './renderPageClientSide.js'
 import { isClientSideRoutable } from './isClientSideRoutable.js'
@@ -27,7 +28,8 @@ import { noRouteMatch } from '../../shared/route/noRouteMatch.js'
 assertClientRouting()
 const globalObject = getGlobalObject<{
   linkPrefetchHandlerAdded: WeakMap<HTMLElement, true>
-}>('prefetch.ts', { linkPrefetchHandlerAdded: new WeakMap() })
+  prefetchSettings: PrefetchSettings
+}>('prefetch.ts', { linkPrefetchHandlerAdded: new WeakMap(), prefetchSettings: { prefetchStaticAssets: false } })
 
 async function prefetchAssets(pageId: string, pageContext: PageContextUserFiles): Promise<void> {
   try {
@@ -79,7 +81,8 @@ async function prefetch(url: string): Promise<void> {
   await prefetchAssets(pageId, pageContext)
 }
 
-function addLinkPrefetchHandlers(pageContext: { exports: Record<string, unknown>; urlPathname: string }) {
+function setPrefetchSettings(pageContext: { exports: Record<string, unknown>; urlPathname: string }) {}
+function initPrefetch() {
   // Current URL is already prefetched
   markAsAlreadyPrefetched(pageContext.urlPathname)
 
@@ -111,16 +114,16 @@ function addLinkPrefetchHandlers(pageContext: { exports: Record<string, unknown>
       )
     }
 
-    if (prefetchStaticAssets === 'viewport') {
+    if (prefetchStaticAssets === 'viewport' && !globalObject.observer) {
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
-          if (entry.isIntersecting) {
+          if (entry.isIntersecting && entry.target) {
             prefetchIfPossible(url)
             observer.disconnect()
           }
         })
       })
-      observer.observe(linkTag)
+      observer.observe(document.documentElement)
     }
   })
 }

diff --git a/vike/client/client-routing-runtime/prefetch/getPrefetchSettings.ts b/vike/client/client-routing-runtime/prefetch/getPrefetchSettings.ts
@@ -1,4 +1,5 @@
 export { getPrefetchSettings }
+export type { PrefetchSettings }
 
 import type { PrefetchStaticAssets } from '../../../shared/types/PrefetchStaticAssets.js'
 import { assert, assertUsage, assertInfo, assertWarning, isPlainObject } from '../utils.js'

diff --git a/vike/client/client-routing-runtime/renderPageClientSide.ts b/vike/client/client-routing-runtime/renderPageClientSide.ts
@@ -18,7 +18,6 @@ import {
   getPageContextFromHooks_serialized
 } from './getPageContextFromHooks.js'
 import { createPageContext } from './createPageContext.js'
-import { addLinkPrefetchHandlers } from './prefetch.js'
 import { assertInfo, assertWarning, isReact } from './utils.js'
 import { type PageContextBeforeRenderClient, executeOnRenderClientHook } from '../shared/executeOnRenderClientHook.js'
 import { assertHook, getHook } from '../../shared/hooks/getHook.js'
@@ -38,6 +37,7 @@ import { updateState } from './onBrowserHistoryNavigation.js'
 import { browserNativeScrollRestoration_disable, setInitialRenderIsDone } from './scrollRestoration.js'
 import { getErrorPageId } from '../../shared/error-page.js'
 import type { PageContextExports } from '../../shared/getPageFiles.js'
+import { setPrefetchSettings } from './prefetch.js'
 
 const globalObject = getGlobalObject<{
   clientRoutingIsDisabled?: true
@@ -408,7 +408,7 @@ async function renderPageClientSide(renderArgs: RenderArgs): Promise<void> {
     if (isRenderOutdated(true)) return
     */
 
-    addLinkPrefetchHandlers(pageContext)
+    setPrefetchSettings(pageContext)
 
     // onHydrationEnd()
     if (isHydrationRender && !onRenderClientError) {