vike 0.4.198-commit-77f6a27 → 0.4.199-commit-3be497f

package/dist/cjs/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/transpileAndExecuteFile.js

@@ -88,7 +88,7 @@ async function transpileWithEsbuild(filePath, userRootDir, transformImports) {
         metafile: true,
         bundle: true
     };
-    let pointerImports = {};
+    const pointerImports = {};
     options.plugins = [
         // Determine whether an import should be:
         //  - A pointer import

package/dist/cjs/utils/PROJECT_VERSION.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PROJECT_VERSION = void 0;
 // Automatically updated by @brillout/release-me
-exports.PROJECT_VERSION = '0.4.198-commit-77f6a27';
+exports.PROJECT_VERSION = '0.4.199-commit-3be497f';

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

@@ -1,16 +1,17 @@
-export { initHistoryState, getHistoryState, pushHistory, ScrollPosition, saveScrollPosition, monkeyPatchHistoryPushState };
-type HistoryState = {
-    timestamp?: number;
-    scrollPosition?: null | ScrollPosition;
-    triggeredBy?: 'user' | 'vike' | 'browser';
+export { enhanceHistoryState, getHistoryState, pushHistory, type ScrollPosition, saveScrollPosition, monkeyPatchHistoryPushState };
+type StateVikeEnhanced = {
+    timestamp: number;
+    scrollPosition: null | ScrollPosition;
+    triggeredBy: 'user' | 'vike' | 'browser';
     _isVikeEnhanced: true;
 };
 type ScrollPosition = {
     x: number;
     y: number;
 };
-declare function initHistoryState(): void;
-declare function getHistoryState(): HistoryState;
+type StateNotInitialized = null | undefined | Partial<StateVikeEnhanced> | StateVikeEnhanced;
+declare function enhanceHistoryState(): void;
+declare function getHistoryState(): StateNotInitialized;
 declare function saveScrollPosition(): void;
 declare function pushHistory(url: string, overwriteLastHistoryEntry: boolean): void;
 declare function monkeyPatchHistoryPushState(): void;

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

@@ -1,37 +1,48 @@
-export { initHistoryState, getHistoryState, pushHistory, saveScrollPosition, monkeyPatchHistoryPushState };
+export { enhanceHistoryState, getHistoryState, pushHistory, saveScrollPosition, monkeyPatchHistoryPushState };
 import { assert, assertUsage, hasProp, isObject } from './utils.js';
-// Fill missing state information:
-//  - `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 `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
-    let state = window.history.state;
-    if (!state) {
-        state = { _isVikeEnhanced: true };
-    }
-    let hasModifications = false;
-    if (!('timestamp' in state)) {
-        hasModifications = true;
-        state.timestamp = getTimestamp();
-    }
-    if (!('scrollPosition' in state)) {
-        hasModifications = true;
-        state.scrollPosition = getScrollPosition();
-    }
-    if (!('triggeredBy' in state)) {
-        state.triggeredBy = 'browser';
+// `window.history.state === null` when:
+// - The very first render
+// - Click on `<a href="#some-hash" />`
+// - `location.hash = 'some-hash'`
+function enhanceHistoryState() {
+    const stateNotInitialized = window.history.state;
+    if (isVikeEnhanced(stateNotInitialized))
+        return;
+    const stateVikeEnhanced = enhance(stateNotInitialized);
+    replaceHistoryState(stateVikeEnhanced);
+}
+function enhance(stateNotInitialized) {
+    const timestamp = getTimestamp();
+    const scrollPosition = getScrollPosition();
+    const triggeredBy = 'browser';
+    let stateVikeEnhanced;
+    if (!stateNotInitialized) {
+        stateVikeEnhanced = {
+            timestamp,
+            scrollPosition,
+            triggeredBy,
+            _isVikeEnhanced: true
+        };
     }
-    assertState(state);
-    if (hasModifications) {
-        replaceHistoryState(state);
+    else {
+        // State information may be incomplete if `window.history.state` is set by an old Vike version. (E.g. `state.timestamp` was introduced for `pageContext.isBackwardNavigation` in `0.4.19`.)
+        stateVikeEnhanced = {
+            timestamp: stateNotInitialized.timestamp ?? timestamp,
+            scrollPosition: stateNotInitialized.scrollPosition ?? scrollPosition,
+            triggeredBy: stateNotInitialized.triggeredBy ?? triggeredBy,
+            _isVikeEnhanced: true
+        };
     }
+    assert(isVikeEnhanced(stateVikeEnhanced));
+    return stateVikeEnhanced;
+}
+function getState_alreadyEnhanced() {
+    const state = getHistoryState();
+    assert(isVikeEnhanced(state));
+    return state;
 }
 function getHistoryState() {
-    const state = window.history.state || {};
-    assertState(state);
+    const state = window.history.state;
     return state;
 }
 function getScrollPosition() {
@@ -43,29 +54,22 @@ function getTimestamp() {
 }
 function saveScrollPosition() {
     const scrollPosition = getScrollPosition();
-    const state = getHistoryState();
+    const state = getState_alreadyEnhanced();
     replaceHistoryState({ ...state, scrollPosition });
 }
 function pushHistory(url, overwriteLastHistoryEntry) {
     if (!overwriteLastHistoryEntry) {
         const timestamp = getTimestamp();
-        pushHistoryState({ timestamp, scrollPosition: null, triggeredBy: 'vike', _isVikeEnhanced: true }, url);
+        pushHistoryState({
+            timestamp,
+            // I don't remember why I set it to `null`, maybe because setting it now would be too early? (Maybe there is a delay between renderPageClientSide() is finished and the browser updating the scroll position.) Anyways, it seems like autoSaveScrollPosition() is enough.
+            scrollPosition: null,
+            triggeredBy: 'vike',
+            _isVikeEnhanced: true
+        }, url);
     }
     else {
-        replaceHistoryState(getHistoryState(), url);
-    }
-}
-function assertState(state) {
-    assert(isObject(state));
-    if ('timestamp' in state) {
-        const { timestamp } = state;
-        assert(typeof timestamp === 'number');
-    }
-    if ('scrollPosition' in state) {
-        const { scrollPosition } = state;
-        if (scrollPosition !== null) {
-            assert(hasProp(scrollPosition, 'x', 'number') && hasProp(scrollPosition, 'y', 'number'));
-        }
+        replaceHistoryState(getState_alreadyEnhanced(), url);
     }
 }
 function replaceHistoryState(state, url) {
@@ -89,9 +93,24 @@ function monkeyPatchHistoryPushState() {
                 triggeredBy: 'user',
                 ...stateOriginal
             };
+        assert(isVikeEnhanced(stateEnhanced));
         return pushStateOriginal(stateEnhanced, ...rest);
     };
 }
 function isVikeEnhanced(state) {
-    return isObject(state) && '_isVikeEnhanced' in state;
+    const yes = isObject(state) && '_isVikeEnhanced' in state;
+    if (yes)
+        assertStateVikeEnhanced(state);
+    return yes;
+}
+function assertStateVikeEnhanced(state) {
+    assert(isObject(state));
+    assert(hasProp(state, '_isVikeEnhanced', 'true'));
+    // TODO/eventually: remove assert() below to save client-side KBs
+    assert(hasProp(state, 'timestamp', 'number'));
+    assert(hasProp(state, 'scrollPosition'));
+    if (state.scrollPosition !== null) {
+        assert(hasProp(state, 'scrollPosition', 'object'));
+        assert(hasProp(state.scrollPosition, 'x', 'number') && hasProp(state.scrollPosition, 'y', 'number'));
+    }
 }

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

@@ -1,5 +1,6 @@
 export { navigate, reload } from './navigate.js';
 export { prefetch } from './prefetch.js';
+export { onPopState } from './initOnPopState.js';
 export { PROJECT_VERSION as version } from './utils.js';
 import type { PageContextBuiltInClientWithClientRouting } from '../../shared/types.js';
 /** @deprecated

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

@@ -5,4 +5,5 @@
 // Use package.json#exports to make the imports isomorphic.
 export { navigate, reload } from './navigate.js';
 export { prefetch } from './prefetch.js';
+export { onPopState } from './initOnPopState.js';
 export { PROJECT_VERSION as version } from './utils.js';

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

@@ -1,8 +1,8 @@
 export { initClientRouter };
 import { assert } from './utils.js';
-import { initHistoryState, monkeyPatchHistoryPushState } from './history.js';
+import { enhanceHistoryState, monkeyPatchHistoryPushState } from './history.js';
 import { getRenderCount, renderPageClientSide } from './renderPageClientSide.js';
-import { onBrowserHistoryNavigation } from './onBrowserHistoryNavigation.js';
+import { initOnPopState } from './initOnPopState.js';
 import { initOnLinkClick } from './initOnLinkClick.js';
 import { setupNativeScrollRestoration } from './scrollRestoration.js';
 import { autoSaveScrollPosition } from './setScrollPosition.js';
@@ -29,9 +29,9 @@ async function renderFirstPage() {
 }
 function initHistoryAndScroll() {
     setupNativeScrollRestoration();
-    initHistoryState();
+    enhanceHistoryState();
     autoSaveScrollPosition();
     monkeyPatchHistoryPushState();
     // Handle back-/forward navigation
-    onBrowserHistoryNavigation();
+    initOnPopState();
 }

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

@@ -0,0 +1,29 @@
+export { initOnPopState };
+export { updateState };
+export { onPopState };
+declare function initOnPopState(): void;
+type Listener = (arg: {
+    _experimental: {
+        previousState: ReturnType<typeof getState>;
+    };
+}) => undefined | boolean;
+/** Control client-side navigation.
+ *
+ * https://vike.dev/onPopState
+ */
+declare function onPopState(listener: Listener): void;
+declare function getState(): {
+    urlWithoutHash: string;
+    historyState: {
+        timestamp: number;
+        scrollPosition: null | import("./history.js").ScrollPosition;
+        triggeredBy: "user" | "vike" | "browser";
+        _isVikeEnhanced: true;
+    } | Partial<{
+        timestamp: number;
+        scrollPosition: null | import("./history.js").ScrollPosition;
+        triggeredBy: "user" | "vike" | "browser";
+        _isVikeEnhanced: true;
+    }> | null | undefined;
+};
+declare function updateState(): void;

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

@@ -0,0 +1,79 @@
+export { initOnPopState };
+export { updateState };
+export { onPopState };
+import { assert, getCurrentUrl, getGlobalObject } from './utils.js';
+import { enhanceHistoryState, getHistoryState } from './history.js';
+import { renderPageClientSide } from './renderPageClientSide.js';
+import { setScrollPosition } from './setScrollPosition.js';
+const globalObject = getGlobalObject('initOnPopState.ts', { previousState: getState(), listeners: [] });
+function initOnPopState() {
+    // - The popstate event is trigged upon:
+    //   - Back-/forward navigation.
+    //     - By user clicking on his browser's back-/forward navigation (or using a shortcut)
+    //     - By JavaScript: `history.back()` / `history.forward()`
+    //   - URL hash change.
+    //     - Click on `<a href="#some-hash" />`
+    //       - The popstate event is *only* triggered if `href` starts with '#' (even if `href` is '/#some-hash' while the current URL's pathname is '/' then the popstate still isn't triggered)
+    //     - `location.hash = 'some-hash'`
+    // - The `event` argument of `window.addEventListener('popstate', (event) => /*...*/)` is useless: the History API doesn't provide the previous state (the popped state), see https://stackoverflow.com/questions/48055323/is-history-state-always-the-same-as-popstate-event-state
+    window.addEventListener('popstate', async () => {
+        const { previousState } = globalObject;
+        const currentState = getState();
+        globalObject.previousState = currentState;
+        const scrollTarget = currentState.historyState?.scrollPosition || undefined;
+        const isUserLandPushStateNavigation = currentState.historyState?.triggeredBy === 'user';
+        const isHashNavigation = currentState.urlWithoutHash === previousState.urlWithoutHash;
+        const isBackwardNavigation = !currentState.historyState?.timestamp || !previousState.historyState?.timestamp
+            ? null
+            : currentState.historyState.timestamp < previousState.historyState.timestamp;
+        // - `history.state === null` when:
+        //   - Click on `<a href="#some-hash" />` (note that Vike's `initOnLinkClick()` handler skips hash links)
+        //   - `location.hash = 'some-hash'`
+        // - `history.state !== null` when `popstate` was triggered by the user clicking on his browser's forward/backward history button.
+        let isHashNavigationNew = isHashNavigation && window.history.state === null;
+        if (window.history.state === null) {
+            assert(isHashNavigation);
+            // The browser already scrolled to `#${hash}` => the current scroll position is the right one => we save it with `enhanceHistoryState()`.
+            enhanceHistoryState();
+            globalObject.previousState = getState();
+        }
+        // We have to scroll ourselves because we use `window.history.scrollRestoration = 'manual'`. So far this seems to work. Alternatives in case it doesn't work:
+        // - Alternative: we use `window.history.scrollRestoration = 'auto'`
+        //   - Problem: I don't think it's possbible to set `window.history.scrollRestoration = 'auto'` only for hash navigation and not for non-hash navigations?
+        //   - Problem: inconsistencies between browsers? For example specification says that setting `window.history.scrollRestoration` only affects the current entry in the session history but this contradicts what people are experiencing in practice.
+        //     - Specification: https://html.spec.whatwg.org/multipage/history.html#the-history-interface
+        //     - Practice: https://stackoverflow.com/questions/70188241/history-scrollrestoration-manual-doesnt-prevent-safari-from-restoring-scrol
+        // - Alternative: we completely take over hash navigation and reproduce the browser's native behavior upon hash navigation.
+        //   - By using the `hashchange` event.
+        //   - Problem: conflict if user wants to override the browser's default behavior? E.g. for smooth scrolling, or when using hashes for saving states of some fancy animations.
+        if (isHashNavigation && !isUserLandPushStateNavigation) {
+            if (!isHashNavigationNew) {
+                setScrollPosition(scrollTarget);
+            }
+            return;
+        }
+        let abort;
+        globalObject.listeners.forEach(listener => {
+            abort || (abort = listener({ _experimental: { previousState } }));
+        });
+        if (abort)
+            return;
+        await renderPageClientSide({ scrollTarget, isBackwardNavigation, isUserLandPushStateNavigation });
+    });
+}
+/** Control client-side navigation.
+ *
+ * https://vike.dev/onPopState
+ */
+function onPopState(listener) {
+    globalObject.listeners.push(listener);
+}
+function getState() {
+    return {
+        urlWithoutHash: getCurrentUrl({ withoutHash: true }),
+        historyState: getHistoryState()
+    };
+}
+function updateState() {
+    globalObject.previousState = getState();
+}

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

@@ -15,7 +15,7 @@ import { assertNoInfiniteAbortLoop, getPageContextFromAllRewrites, isAbortError,
 import { route } from '../../shared/route/index.js';
 import { isClientSideRoutable } from './isClientSideRoutable.js';
 import { setScrollPosition } from './setScrollPosition.js';
-import { updateState } from './onBrowserHistoryNavigation.js';
+import { updateState } from './initOnPopState.js';
 import { browserNativeScrollRestoration_disable, setInitialRenderIsDone } from './scrollRestoration.js';
 import { getErrorPageId } from '../../shared/error-page.js';
 import { setPageContextCurrent } from './getPageContextCurrent.js';

package/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/transpileAndExecuteFile.js

@@ -83,7 +83,7 @@ async function transpileWithEsbuild(filePath, userRootDir, transformImports) {
         metafile: true,
         bundle: true
     };
-    let pointerImports = {};
+    const pointerImports = {};
     options.plugins = [
         // Determine whether an import should be:
         //  - A pointer import

package/dist/esm/utils/PROJECT_VERSION.d.ts

@@ -1 +1 @@
-export declare const PROJECT_VERSION: "0.4.198-commit-77f6a27";
+export declare const PROJECT_VERSION: "0.4.199-commit-3be497f";

package/dist/esm/utils/PROJECT_VERSION.js

@@ -1,2 +1,2 @@
 // Automatically updated by @brillout/release-me
-export const PROJECT_VERSION = '0.4.198-commit-77f6a27';
+export const PROJECT_VERSION = '0.4.199-commit-3be497f';

package/dist/esm/utils/projectInfo.d.ts

@@ -1,4 +1,4 @@
 export declare const projectInfo: {
     projectName: "Vike";
-    projectVersion: "0.4.198-commit-77f6a27";
+    projectVersion: "0.4.199-commit-3be497f";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike",
-  "version": "0.4.198-commit-77f6a27",
+  "version": "0.4.199-commit-3be497f",
   "repository": "https://github.com/vikejs/vike",
   "exports": {
     "./server": {

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

@@ -1,4 +0,0 @@
-export { onBrowserHistoryNavigation };
-export { updateState };
-declare function onBrowserHistoryNavigation(): void;
-declare function updateState(): void;

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

@@ -1,63 +0,0 @@
-export { onBrowserHistoryNavigation };
-export { updateState };
-import { getCurrentUrl, getGlobalObject } from './utils.js';
-import { initHistoryState, getHistoryState } from './history.js';
-import { renderPageClientSide } from './renderPageClientSide.js';
-import { setScrollPosition } from './setScrollPosition.js';
-const globalObject = getGlobalObject('onBrowserHistoryNavigation.ts', { previousState: getState() });
-function onBrowserHistoryNavigation() {
-    // - The popstate event is trigged upon:
-    //   - Back-/forward navigation.
-    //     - By user clicking on his browser's back-/forward navigation (or using a shortcut)
-    //     - By JavaScript: `history.back()` / `history.forward()`
-    //   - URL hash change.
-    //     - By user clicking on a hash link `<a href="#some-hash" />`
-    //       - The popstate event is *only* triggered if `href` starts with '#' (even if `href` is '/#some-hash' while the current URL's pathname is '/' then the popstate still isn't triggered)
-    //     - By JavaScript: `location.hash = 'some-hash'`
-    // - The `event` argument of `window.addEventListener('popstate', (event) => /*...*/)` is useless: the History API doesn't provide the previous state (the popped state), see https://stackoverflow.com/questions/48055323/is-history-state-always-the-same-as-popstate-event-state
-    window.addEventListener('popstate', async () => {
-        const currentState = getState();
-        const scrollTarget = currentState.historyState.scrollPosition || undefined;
-        const isUserLandPushStateNavigation = currentState.historyState.triggeredBy === 'user';
-        const isHashNavigation = currentState.urlWithoutHash === globalObject.previousState.urlWithoutHash;
-        const isBackwardNavigation = !currentState.historyState.timestamp || !globalObject.previousState.historyState.timestamp
-            ? null
-            : currentState.historyState.timestamp < globalObject.previousState.historyState.timestamp;
-        globalObject.previousState = currentState;
-        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 `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?)
-            //   - Other potential problem: would there be a conflict when the user wants to override the browser's default behavior? E.g. for smooth scrolling, or when using hashes for saving states of some fancy animations.
-            // - Another alternative: we use the browser's scroll restoration mechanism (see `browserNativeScrollRestoration_enable()` below).
-            //   - Problem: not clear when to call `browserNativeScrollRestoration_disable()`/`browserNativeScrollRestoration_enable()`
-            //   - Other potential problem are inconsistencies between browsers: specification says that setting `window.history.scrollRestoration` only affects the current entry in the session history. But this seems to contradict what folks saying.
-            //     - Specification: https://html.spec.whatwg.org/multipage/history.html#the-history-interface
-            //     - https://stackoverflow.com/questions/70188241/history-scrollrestoration-manual-doesnt-prevent-safari-from-restoring-scrol
-            if (window.history.state === null) {
-                // The browser already scrolled to `#${hash}` => the current scroll position is the right one => we save it with `initHistoryState()`.
-                initHistoryState();
-                globalObject.previousState = getState();
-            }
-            else {
-                // If `history.state !== null` then it means that `popstate` was triggered by the user clicking on his browser's forward/backward history button.
-                setScrollPosition(scrollTarget);
-            }
-        }
-        else {
-            await renderPageClientSide({ scrollTarget, isBackwardNavigation, isUserLandPushStateNavigation });
-        }
-    });
-}
-function getState() {
-    return {
-        urlWithoutHash: getCurrentUrl({ withoutHash: true }),
-        historyState: getHistoryState()
-    };
-}
-function updateState() {
-    globalObject.previousState = getState();
-}