vike 0.4.196-commit-df033dd → 0.4.197-commit-9db6c02

package/dist/esm/client/client-routing-runtime/getPageContextFromHooks.js

@@ -1,6 +1,8 @@
 export { getPageContextFromHooks_isHydration };
-export { getPageContextFromHooks_isNotHydration };
 export { getPageContextFromHooks_serialized };
+export { getPageContextFromServerHooks };
+export { getPageContextFromClientHooks };
+export { setPageContextInitIsPassedToClient };
 import { assert, assertUsage, hasProp, objectAssign, getProjectError, redirectHard, executeHook, isObject, getGlobalObject } from './utils.js';
 import { parse } from '@brillout/json-serializer/parse';
 import { getPageContextSerializedInHtml } from '../shared/getPageContextSerializedInHtml.js';
@@ -17,6 +19,7 @@ import { AbortRender, isAbortPageContext } from '../../shared/route/abort.js';
 import { pageContextInitIsPassedToClient } from '../../shared/misc/pageContextInitIsPassedToClient.js';
 import { isServerSideError } from '../../shared/misc/isServerSideError.js';
 const globalObject = getGlobalObject('router/getPageContext.ts', {});
+// TODO/eventually: rename
 function getPageContextFromHooks_serialized() {
     const pageContextSerialized = getPageContextSerializedInHtml();
     assertUsage(!('urlOriginal' in pageContextSerialized), "Adding 'urlOriginal' to passToClient is forbidden");
@@ -26,28 +29,27 @@ function getPageContextFromHooks_serialized() {
     });
     return pageContextSerialized;
 }
+// TODO/eventually: rename
 async function getPageContextFromHooks_isHydration(pageContext) {
     objectAssign(pageContext, {
         isHydration: true,
-        _hasPageContextFromClient: false,
-        _hasPageContextFromServer: true
+        _hasPageContextFromClient: false
     });
     for (const hookName of ['data', 'onBeforeRender']) {
         if (hookClientOnlyExists(hookName, pageContext)) {
             const pageContextFromHook = await executeHookClientSide(hookName, pageContext);
-            if (pageContextFromHook)
-                assert(!('urlOriginal' in pageContextFromHook));
+            assert(!('urlOriginal' in pageContextFromHook));
             Object.assign(pageContext, pageContextFromHook);
         }
     }
     return pageContext;
 }
-async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage) {
-    objectAssign(pageContext, {
+async function getPageContextFromServerHooks(pageContext, isErrorPage) {
+    const pageContextFromServerHooks = {
+        // TODO/eventually: move this upstream
         isHydration: false,
-        _hasPageContextFromClient: false
-    });
-    let hasPageContextFromServer = false;
+        _hasPageContextFromServer: false
+    };
     // If pageContextInit has some client data or if one of the hooks guard(), data() or onBeforeRender() is server-side
     // only, then we need to fetch pageContext from the server.
     // We do it before executing any client-side hook, because it contains pageContextInit which may be needed for guard() / data() / onBeforeRender(), for example pageContextInit.user is crucial for guard()
@@ -60,13 +62,19 @@ async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage)
         if ('is404ServerSideRouted' in res)
             return { is404ServerSideRouted: true };
         const { pageContextFromServer } = res;
-        hasPageContextFromServer = true;
+        pageContextFromServerHooks._hasPageContextFromServer = true;
         // Already handled
         assert(!(isServerSideError in pageContextFromServer));
         assert(!('serverSideError' in pageContextFromServer));
-        objectAssign(pageContext, pageContextFromServer);
+        objectAssign(pageContextFromServerHooks, pageContextFromServer);
     }
-    objectAssign(pageContext, { _hasPageContextFromServer: hasPageContextFromServer });
+    // We cannot return the whole pageContext because this function is used for prefetching `pageContext` (which requires a partial pageContext to be merged with the future pageContext created upon rendering the page in the future).
+    return { pageContextFromServerHooks };
+}
+async function getPageContextFromClientHooks(pageContext, isErrorPage) {
+    objectAssign(pageContext, {
+        _hasPageContextFromClient: false
+    });
     // At this point, we need to call the client-side guard(), data() and onBeforeRender() hooks, if they exist on client
     // env. However if we have fetched pageContext from the server, some of them might have run already on the
     // server-side, so we run only the client-only ones in this case.
@@ -76,7 +84,7 @@ async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage)
         if (hookName === 'guard') {
             if (!isErrorPage &&
                 // We don't need to call guard() on the client-side if we fetch pageContext from the server side. (Because the `${url}.pageContext.json` HTTP request will already trigger the routing and guard() hook on the server-side.)
-                !hasPageContextFromServer) {
+                !pageContext._hasPageContextFromServer) {
                 // Should we really call the guard() hook on the client-side? Shouldn't we make the guard() hook a server-side
                 // only hook? Or maybe make its env configurable like data() and onBeforeRender()?
                 await executeGuardHook(pageContext, (pageContext) => preparePageContextForUserConsumptionClientSide(pageContext, true));
@@ -84,28 +92,22 @@ async function getPageContextFromHooks_isNotHydration(pageContext, isErrorPage)
         }
         else {
             assert(hookName === 'data' || hookName === 'onBeforeRender');
-            if (hookClientOnlyExists(hookName, pageContext) || !hasPageContextFromServer) {
+            if (hookClientOnlyExists(hookName, pageContext) || !pageContext._hasPageContextFromServer) {
                 // This won't do anything if no hook has been defined or if the hook's env.client is false.
                 const pageContextFromHook = await executeHookClientSide(hookName, pageContext);
-                if (pageContextFromHook)
-                    assert(!('urlOriginal' in pageContextFromHook));
+                assert(!('urlOriginal' in pageContextFromHook));
                 Object.assign(pageContext, pageContextFromHook);
             }
-            else {
-                assert(hasPageContextFromServer);
-            }
         }
     }
-    objectAssign(pageContext, {
-        _hasPageContextFromServer: hasPageContextFromServer
-    });
-    return { pageContextAugmented: pageContext };
+    const pageContextFromClientHooks = pageContext;
+    return pageContextFromClientHooks;
 }
 async function executeHookClientSide(hookName, pageContext) {
     const hook = getHook(pageContext, hookName);
     if (!hook) {
         // No hook defined or hook's env.client is false
-        return null;
+        return {};
     }
     const pageContextForUserConsumption = preparePageContextForUserConsumptionClientSide(pageContext, true);
     const hookResult = await executeHook(() => hook.hookFn(pageContextForUserConsumption), hook, pageContext);
@@ -164,10 +166,16 @@ async function hasPageContextServer(pageContext) {
 async function hookServerOnlyExists(hookName, pageContext) {
     if (pageContext._pageConfigs.length > 0) {
         // V1
-        const pageConfig = getPageConfig(pageContext._pageId, pageContext._pageConfigs);
-        const hookEnv = getConfigValueRuntime(pageConfig, `${hookName}Env`)?.value ?? {};
+        const pageConfig = getPageConfig(pageContext.pageId, pageContext._pageConfigs);
+        const hookEnv = getConfigValueRuntime(pageConfig, `${hookName}Env`)?.value;
+        if (hookEnv === null)
+            return false;
         assert(isObject(hookEnv));
-        return !!hookEnv.server && !hookEnv.client;
+        const { client, server } = hookEnv;
+        assert(client === true || client === undefined);
+        assert(server === true || server === undefined);
+        assert(client || server);
+        return !!server && !client;
     }
     else {
         // TODO/v1-release: remove
@@ -176,7 +184,7 @@ async function hookServerOnlyExists(hookName, pageContext) {
         if (hookName === 'data')
             return false;
         assert(hookName === 'onBeforeRender');
-        const { hasOnBeforeRenderServerSideOnlyHook } = await analyzePageServerSide(pageContext._pageFilesAll, pageContext._pageId);
+        const { hasOnBeforeRenderServerSideOnlyHook } = await analyzePageServerSide(pageContext._pageFilesAll, pageContext.pageId);
         return hasOnBeforeRenderServerSideOnlyHook;
     }
 }
@@ -188,7 +196,7 @@ async function hookServerOnlyExists(hookName, pageContext) {
 function hookClientOnlyExists(hookName, pageContext) {
     if (pageContext._pageConfigs.length > 0) {
         // V1
-        const pageConfig = getPageConfig(pageContext._pageId, pageContext._pageConfigs);
+        const pageConfig = getPageConfig(pageContext.pageId, pageContext._pageConfigs);
         const hookEnv = getConfigValueRuntime(pageConfig, `${hookName}Env`)?.value ?? {};
         assert(isObject(hookEnv));
         return !!hookEnv.client && !hookEnv.server;
@@ -223,11 +231,10 @@ async function fetchPageContextFromServer(pageContext) {
     if ('serverSideError' in pageContextFromServer || isServerSideError in pageContextFromServer) {
         throw getProjectError(`pageContext couldn't be fetched because an error occurred on the server-side`);
     }
-    assert(hasProp(pageContextFromServer, '_pageId', 'string'));
+    assert(hasProp(pageContextFromServer, 'pageId', 'string'));
     processPageContextFromServer(pageContextFromServer);
     return { pageContextFromServer };
 }
 function processPageContextFromServer(pageContextFromServer) {
-    setPageContextInitIsPassedToClient(pageContextFromServer);
     removeBuiltInOverrides(pageContextFromServer);
 }

package/dist/esm/client/client-routing-runtime/history.js

@@ -4,7 +4,7 @@ import { assert, assertUsage, hasProp, isObject } from './utils.js';
 //  - `history.state` can uninitialized (i.e. `null`):
 //    - The very first render
 //    - The user's code runs `location.hash = '#section'`
-//    - The user clicks on an anchor link `<a href="#section">Section</a>` (Vike's `onLinkClick()` handler skips hash links).
+//    - The user clicks on an anchor link `<a href="#section">Section</a>` (Vike's `initOnLinkClick()` handler skips hash links).
 //  - State information may be incomplete if `history.state` is set by an old Vike version. (E.g. `state.timestamp` was introduced for `pageContext.isBackwardNavigation` in `0.4.19`.)
 function initHistoryState() {
     // No way found to add TypeScript types to `window.history.state`: https://github.com/microsoft/TypeScript/issues/36178

package/dist/esm/client/client-routing-runtime/initClientRouter.d.ts

@@ -0,0 +1,2 @@
+export { initClientRouter };
+declare function initClientRouter(): Promise<void>;

package/dist/esm/client/client-routing-runtime/{installClientRouter.js → initClientRouter.js}

@@ -1,22 +1,25 @@
-export { installClientRouter };
+export { initClientRouter };
 import { assert } from './utils.js';
 import { initHistoryState, monkeyPatchHistoryPushState } from './history.js';
 import { getRenderCount, renderPageClientSide } from './renderPageClientSide.js';
 import { onBrowserHistoryNavigation } from './onBrowserHistoryNavigation.js';
-import { onLinkClick } from './onLinkClick.js';
+import { initOnLinkClick } from './initOnLinkClick.js';
 import { setupNativeScrollRestoration } from './scrollRestoration.js';
 import { autoSaveScrollPosition } from './setScrollPosition.js';
-async function installClientRouter() {
+import { initLinkPrefetchHandlers } from './prefetch.js';
+async function initClientRouter() {
     // Init navigation history and scroll restoration
     initHistoryAndScroll();
-    // Render initial page
-    const renderPromise = render();
+    // Render/hydrate
+    const renderFirstPagePromise = renderFirstPage();
     // Intercept <a> clicks
-    onLinkClick();
+    initOnLinkClick();
+    // Add <a> prefetch handlers
+    initLinkPrefetchHandlers();
     // Preserve stack track
-    await renderPromise;
+    await renderFirstPagePromise;
 }
-async function render() {
+async function renderFirstPage() {
     assert(getRenderCount() === 0);
     await renderPageClientSide({
         scrollTarget: { preserveScroll: true },

package/dist/esm/client/client-routing-runtime/initOnLinkClick.d.ts

@@ -0,0 +1,2 @@
+export { initOnLinkClick };
+declare function initOnLinkClick(): void;

package/dist/esm/client/client-routing-runtime/{onLinkClick.js → initOnLinkClick.js}

@@ -1,9 +1,9 @@
 // Code adapted from https://github.com/HenrikJoreteg/internal-nav-helper/blob/5199ec5448d0b0db7ec63cf76d88fa6cad878b7d/src/index.js#L11-L29
-export { onLinkClick };
+export { initOnLinkClick };
 import { assert } from './utils.js';
 import { skipLink } from './skipLink.js';
 import { renderPageClientSide } from './renderPageClientSide.js';
-function onLinkClick() {
+function initOnLinkClick() {
     document.addEventListener('click', handler);
 }
 async function handler(ev) {

package/dist/esm/client/client-routing-runtime/isClientSideRoutable.js

@@ -2,6 +2,7 @@ export { isClientSideRoutable };
 import { analyzePageClientSideInit } from '../../shared/getPageFiles/analyzePageClientSide.js';
 import { findPageConfig } from '../../shared/page-configs/findPageConfig.js';
 import { analyzeClientSide } from '../../shared/getPageFiles/analyzeClientSide.js';
+// TODO/next-major-release: make it sync
 async function isClientSideRoutable(pageId, pageContext) {
     await analyzePageClientSideInit(pageContext._pageFilesAll, pageId, {
         sharedPageFilesAlreadyLoaded: false

package/dist/esm/client/client-routing-runtime/onBrowserHistoryNavigation.js

@@ -27,7 +27,7 @@ function onBrowserHistoryNavigation() {
         if (isHashNavigation && !isUserLandPushStateNavigation) {
             // - `history.state` is uninitialized (`null`) when:
             //   - The user's code runs `window.location.hash = '#section'`.
-            //   - The user clicks on an anchor link `<a href="#section">Section</a>` (because Vike's `onLinkClick()` handler skips hash links).
+            //   - The user clicks on an anchor link `<a href="#section">Section</a>` (because Vike's `initOnLinkClick()` handler skips hash links).
             // - `history.state` is `null` when uninitialized: https://developer.mozilla.org/en-US/docs/Web/API/History/state
             // - Alternatively, we completely take over hash navigation and reproduce the browser's native behavior upon hash navigation.
             //   - Problem: we cannot intercept `window.location.hash = '#section'`. (Or maybe we can with the `hashchange` event?)

package/dist/esm/client/client-routing-runtime/prefetch/PrefetchSetting.d.ts

@@ -0,0 +1,7 @@
+export type { PrefetchStaticAssets };
+export type { PrefetchSetting };
+type PrefetchSetting = false | true | {
+    staticAssets?: false | 'hover' | 'viewport';
+    pageContext?: boolean | number;
+};
+type PrefetchStaticAssets = false | 'hover' | 'viewport';

package/dist/esm/client/client-routing-runtime/prefetch/PrefetchSetting.js

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

package/dist/esm/client/client-routing-runtime/prefetch/getPrefetchSettings.d.ts

@@ -1,9 +1,10 @@
 export { getPrefetchSettings };
-import type { PrefetchStaticAssets } from '../../../shared/types/PrefetchStaticAssets.js';
-type PageContextPrefetch = {
-    exports: Record<string, unknown>;
+export { PAGE_CONTEXT_MAX_AGE_DEFAULT };
+export type { PrefetchSettingResolved };
+import type { PageContextExports } from '../../../shared/getPageFiles.js';
+declare const PAGE_CONTEXT_MAX_AGE_DEFAULT = 5000;
+type PrefetchSettingResolved = {
+    staticAssets: false | 'hover' | 'viewport';
+    pageContext: false | number;
 };
-type PrefetchSettings = {
-    prefetchStaticAssets: PrefetchStaticAssets;
-};
-declare function getPrefetchSettings(pageContext: PageContextPrefetch, linkTag: HTMLElement): PrefetchSettings;
+declare function getPrefetchSettings(pageContext: PageContextExports, linkTag: null | HTMLElement): PrefetchSettingResolved;

package/dist/esm/client/client-routing-runtime/prefetch/getPrefetchSettings.js

@@ -1,82 +1,89 @@
+// TODO/pageContext-prefetch: rename this file to getPrefetchSettingResolved.ts
 export { getPrefetchSettings };
-import { assert, assertUsage, assertInfo, assertWarning, isPlainObject } from '../utils.js';
+export { PAGE_CONTEXT_MAX_AGE_DEFAULT };
+import { assertUsage, assertInfo } from '../utils.js';
+const PAGE_CONTEXT_MAX_AGE_DEFAULT = 5000;
+const prefetchSettingTrue = {
+    staticAssets: 'hover',
+    pageContext: PAGE_CONTEXT_MAX_AGE_DEFAULT
+};
+const prefetchSettingFalse = {
+    staticAssets: 'hover',
+    pageContext: false
+};
+// TODO/v1-release: change to `prefetchSettingTrue`?
+const prefetchSettingDefault = prefetchSettingFalse;
 function getPrefetchSettings(pageContext, linkTag) {
-    let prefetchStaticAssets = getPrefetchStaticAssets(pageContext, linkTag);
-    if (prefetchStaticAssets === 'viewport' && import.meta.env.DEV) {
-        assertInfo(false, 'Viewport prefetching is disabled in development', { onlyOnce: true });
-        prefetchStaticAssets = 'hover';
-    }
-    return {
-        prefetchStaticAssets
-    };
-}
-function getPrefetchStaticAssets(pageContext, linkTag) {
-    {
-        const prefetchAttribute = getPrefetchAttribute(linkTag);
-        if (prefetchAttribute !== null)
-            return prefetchAttribute;
-    }
+    let prefetchSetting = prefetchSettingDefault;
     // TODO/v1-release: remove
     if ('prefetchLinks' in pageContext.exports) {
         assertUsage(false, '`export { prefetchLinks }` is deprecated, use `export { prefetchStaticAssets }` instead.');
     }
+    // TODO/v1-release: remove
     if ('prefetchStaticAssets' in pageContext.exports) {
-        const { prefetchStaticAssets } = pageContext.exports;
-        if (prefetchStaticAssets === false) {
-            return false;
-        }
-        if (prefetchStaticAssets === 'hover') {
-            return 'hover';
-        }
-        if (prefetchStaticAssets === 'viewport') {
-            return 'viewport';
-        }
-        const wrongUsageMsg = "prefetchStaticAssets value should be false, 'hover', or 'viewport'";
-        // TODO/v1-release: remove
-        assertUsage(isPlainObject(prefetchStaticAssets), wrongUsageMsg);
-        const keys = Object.keys(prefetchStaticAssets);
-        assertUsage(keys.length === 1 && keys[0] === 'when', wrongUsageMsg);
-        const { when } = prefetchStaticAssets;
-        if (when === 'HOVER' || when === 'VIEWPORT') {
-            const correctValue = when.toLowerCase();
-            assertWarning(false, `prefetchStaticAssets value \`{ when: '${when}' }\` is outdated: set prefetchStaticAssets to '${correctValue}' instead`, { onlyOnce: true });
-            return correctValue;
+        const prefetchStaticAssets = pageContext.exports.prefetchStaticAssets;
+        /* TODO/pageContext-prefetch: uncomment
+        const msg = `The 'prefetchStaticAssets' setting is deprecated in favor of the 'prefetch' setting, see https://vike.dev/prefetch`
+        assertWarning(false, msg, { onlyOnce: true })
+        assertUsage(
+          prefetchStaticAssets === false || prefetchStaticAssets === 'hover' || prefetchStaticAssets === 'viewport',
+          msg
+        )
+        //*/
+        prefetchSetting.staticAssets = prefetchStaticAssets;
+    }
+    if ('prefetch' in pageContext.exports) {
+        const { prefetch } = pageContext.exports;
+        if (prefetch === true)
+            prefetchSetting = prefetchSettingTrue;
+        if (prefetch === false)
+            prefetchSetting = prefetchSettingFalse;
+        // No validation in order to save client-side KBs
+        Object.assign(prefetchSetting, prefetch);
+        if (prefetchSetting.pageContext === true) {
+            prefetchSetting.pageContext = PAGE_CONTEXT_MAX_AGE_DEFAULT;
         }
-        assertUsage(false, wrongUsageMsg);
     }
-    return 'hover';
-}
-function getPrefetchAttribute(linkTag) {
-    const attr = linkTag.getAttribute('data-prefetch-static-assets');
-    const attrOld = linkTag.getAttribute('data-prefetch');
-    if (attr === null && attrOld === null) {
-        return null;
+    if (prefetchSetting.staticAssets === 'viewport' && import.meta.env.DEV) {
+        assertInfo(false, 'Viewport prefetching is disabled in development', { onlyOnce: true });
+        prefetchSetting.staticAssets = 'hover';
     }
-    // TODO/v1-release: remove
-    const deprecationNotice = 'The attribute data-prefetch is outdated, use data-prefetch-static-assets instead.';
-    if (attr) {
-        assertUsage(attrOld === null, deprecationNotice);
-        if (attr === 'hover' || attr === 'viewport') {
-            return attr;
+    if (linkTag) {
+        {
+            let attr = linkTag.getAttribute('data-prefetch');
+            if (attr !== null) {
+                if (attr === '')
+                    attr = 'true';
+                if (attr === 'true')
+                    prefetchSetting = prefetchSettingTrue;
+                if (attr === 'false')
+                    prefetchSetting = prefetchSettingFalse;
+            }
         }
-        if (attr === 'false') {
-            return false;
-        }
-        assertUsage(false, `data-prefetch-static-assets has value "${attr}" but it should instead be "false", "hover", or "viewport"`);
-    }
-    // TODO/v1-release: remove
-    if (attrOld) {
-        assert(!attr);
-        assertWarning(false, deprecationNotice, {
-            onlyOnce: true
-        });
-        if (attrOld === 'true') {
-            return 'viewport';
+        {
+            let attr = linkTag.getAttribute('data-prefetch-static-assets');
+            if (attr !== null) {
+                if (attr === 'false')
+                    prefetchSetting.staticAssets = false;
+                // No validation in order to save client-side KBs
+                prefetchSetting.staticAssets = attr;
+            }
         }
-        if (attrOld === 'false') {
-            return 'hover';
+        {
+            let attr = linkTag.getAttribute('data-prefetch-page-context');
+            if (attr !== null) {
+                if (attr === '')
+                    attr = 'true';
+                if (attr === 'true')
+                    prefetchSetting.pageContext = PAGE_CONTEXT_MAX_AGE_DEFAULT;
+                if (attr === 'false')
+                    prefetchSetting.pageContext = false;
+                const n = parseInt(attr, 10);
+                if (!Number.isNaN(n))
+                    prefetchSetting.pageContext = n;
+                // No validation in order to save client-side KBs
+            }
         }
-        assertUsage(false, `data-prefetch has value "${attrOld}" but it should instead be "true" or "false"`);
     }
-    assert(false);
+    return prefetchSetting;
 }

package/dist/esm/client/client-routing-runtime/prefetch.d.ts

@@ -1,5 +1,13 @@
 export { prefetch };
+export { getPageContextPrefetched };
+export { initLinkPrefetchHandlers };
 export { addLinkPrefetchHandlers };
+export { addLinkPrefetchHandlers_watch };
+export { addLinkPrefetchHandlers_unwatch };
+import { type PageContextFromServerHooks } from './getPageContextFromHooks.js';
+declare function getPageContextPrefetched(pageContext: {
+    urlOriginal: string;
+}): null | PageContextFromServerHooks;
 /**
  * Programmatically prefetch client assets.
  *
@@ -7,8 +15,11 @@ export { addLinkPrefetchHandlers };
  *
  * @param url - The URL of the page you want to prefetch.
  */
-declare function prefetch(url: string): Promise<void>;
-declare function addLinkPrefetchHandlers(pageContext: {
-    exports: Record<string, unknown>;
-    urlPathname: string;
-}): void;
+declare function prefetch(url: string, options?: {
+    pageContext?: boolean;
+    staticAssets?: boolean;
+}): Promise<void>;
+declare function addLinkPrefetchHandlers(): void;
+declare function initLinkPrefetchHandlers(): void;
+declare function addLinkPrefetchHandlers_watch(): void;
+declare function addLinkPrefetchHandlers_unwatch(): void;