vike 0.4.144-commit-de18325 → 0.4.145-commit-2520555

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

@@ -1,499 +1,22 @@
 export { installClientRouter };
-export { disableClientRouting };
-export { isDisableAutomaticLinkInterception };
-export { renderPageClientSide };
-import { assert, getCurrentUrl, isEquivalentError, objectAssign, serverSideRouteTo, throttle, sleep, getGlobalObject, executeHook } from './utils.js';
-import { navigationState } from './navigationState.js';
-import { checkIf404, getPageContext, getPageContextErrorPage, isAlreadyServerSideRouted } from './getPageContext.js';
-import { createPageContext } from './createPageContext.js';
-import { addLinkPrefetchHandlers } from './prefetch.js';
-import { assertInfo, assertWarning, isReact } from './utils.js';
-import { executeOnRenderClientHook } from '../shared/executeOnRenderClientHook.js';
-import { assertHook } from '../../shared/hooks/getHook.js';
-import { skipLink } from './skipLink.js';
-import { isErrorFetchingStaticAssets } from '../shared/loadPageFilesClientSide.js';
-import { initHistoryState, getHistoryState, pushHistory, saveScrollPosition, monkeyPatchHistoryPushState } from './history.js';
-import { assertNoInfiniteAbortLoop, getPageContextFromAllRewrites, isAbortError, logAbortErrorHandled } from '../../shared/route/abort.js';
-import { route } from '../../shared/route/index.js';
-import { isClientSideRoutable } from './isClientSideRoutable.js';
-const globalObject = getGlobalObject('installClientRouter.ts', { previousState: getState(), renderCounter: 0 });
+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 { setupNativeScrollRestoration } from './scrollRestoration.js';
+import { autoSaveScrollPosition } from './setScrollPosition.js';
 function installClientRouter() {
     setupNativeScrollRestoration();
     initHistoryState();
     autoSaveScrollPosition();
     monkeyPatchHistoryPushState();
+    // First initial render
+    assert(getRenderCount() === 0);
+    renderPageClientSide({ scrollTarget: 'preserve-scroll', isBackwardNavigation: null, isClientSideNavigation: false });
+    assert(getRenderCount() === 1);
     // Intercept <a> links
     onLinkClick();
     // Handle back-/forward navigation
     onBrowserHistoryNavigation();
-    // Intial render
-    renderPageClientSide({ scrollTarget: 'preserve-scroll', isBackwardNavigation: null });
-}
-async function renderPageClientSide(renderArgs) {
-    const { scrollTarget, urlOriginal = getCurrentUrl(), overwriteLastHistoryEntry = false, isBackwardNavigation, checkIfClientSideRenderable, pageContextsFromRewrite = [], redirectCount = 0, isUserLandNavigation } = renderArgs;
-    assertNoInfiniteAbortLoop(pageContextsFromRewrite.length, redirectCount);
-    if (globalObject.clientRoutingIsDisabled) {
-        serverSideRouteTo(urlOriginal);
-        return;
-    }
-    const pageContext = await createPageContext(urlOriginal);
-    objectAssign(pageContext, {
-        isBackwardNavigation
-    });
-    {
-        const pageContextFromAllRewrites = getPageContextFromAllRewrites(pageContextsFromRewrite);
-        objectAssign(pageContext, pageContextFromAllRewrites);
-    }
-    let hasError = false;
-    let err;
-    {
-        let pageContextFromRoute;
-        try {
-            pageContextFromRoute = await route(pageContext);
-        }
-        catch (err_) {
-            hasError = true;
-            err = err_;
-        }
-        if (pageContextFromRoute) {
-            objectAssign(pageContext, pageContextFromRoute);
-            if (checkIfClientSideRenderable) {
-                const isClientRoutable = await isClientSideRoutable(pageContext);
-                if (!isClientRoutable) {
-                    serverSideRouteTo(urlOriginal);
-                    return;
-                }
-            }
-            if (isUserLandNavigation && pageContextFromRoute._pageId === globalObject.previousPageContext?._pageId) {
-                // Skip's Vike's rendering; let the user handle the navigation
-                return;
-            }
-        }
-    }
-    const { renderNumber, shouldAbort, setHydrationCanBeAborted } = getRenderNumber();
-    const isFirstRenderAttempt = renderNumber === 1;
-    objectAssign(pageContext, { _isFirstRenderAttempt: isFirstRenderAttempt });
-    // Start transition before any await's
-    if (renderNumber > 1) {
-        if (!globalObject.isTransitioning) {
-            await globalObject.onPageTransitionStart?.(pageContext);
-            globalObject.isTransitioning = true;
-        }
-    }
-    if (shouldAbort()) {
-        return;
-    }
-    let pageContextAddendum;
-    if (!hasError) {
-        try {
-            pageContextAddendum = await getPageContext(pageContext);
-        }
-        catch (err_) {
-            hasError = true;
-            err = err_;
-        }
-    }
-    if (hasError) {
-        if (!isAbortError(err)) {
-            // We don't swallow 404 errors:
-            //  - On the server-side, Vike swallows / doesn't show any 404 error log because it's expected that a user may go to some random non-existent URL. (We don't want to flood the app's error tracking with 404 logs.)
-            //  - On the client-side, if the user navigates to a 404 then it means that the UI has a broken link. (It isn't expected that users can go to some random URL using the client-side router, as it would require, for example, the user to manually change the URL of a link by manually manipulating the DOM which highly unlikely.)
-            console.error(err);
-        }
-        else {
-            // We swallow throw redirect()/render() called by client-side hooks onBeforeRender() and guard()
-            // We handle the abort error down below.
-        }
-        if (shouldSwallowAndInterrupt(err, pageContext))
-            return;
-        if (isAbortError(err)) {
-            const errAbort = err;
-            logAbortErrorHandled(err, pageContext._isProduction, pageContext);
-            const pageContextAbort = errAbort._pageContextAbort;
-            // throw render('/some-url')
-            if (pageContextAbort._urlRewrite) {
-                await renderPageClientSide({
-                    ...renderArgs,
-                    scrollTarget: 'scroll-to-top-or-hash',
-                    checkIfClientSideRenderable: true,
-                    pageContextsFromRewrite: [...pageContextsFromRewrite, pageContextAbort]
-                });
-                return;
-            }
-            // throw redirect('/some-url')
-            if (pageContextAbort._urlRedirect) {
-                const urlRedirect = pageContextAbort._urlRedirect.url;
-                if (urlRedirect.startsWith('http')) {
-                    // External redirection
-                    window.location.href = urlRedirect;
-                    return;
-                }
-                else {
-                    await renderPageClientSide({
-                        ...renderArgs,
-                        scrollTarget: 'scroll-to-top-or-hash',
-                        urlOriginal: urlRedirect,
-                        overwriteLastHistoryEntry: false,
-                        isBackwardNavigation: false,
-                        checkIfClientSideRenderable: true,
-                        redirectCount: redirectCount + 1
-                    });
-                }
-                return;
-            }
-            // throw render(statusCode)
-            assert(pageContextAbort.abortStatusCode);
-            objectAssign(pageContext, pageContextAbort);
-            if (pageContextAbort.abortStatusCode === 404) {
-                objectAssign(pageContext, { is404: true });
-            }
-        }
-        else {
-            objectAssign(pageContext, { is404: checkIf404(err) });
-        }
-        try {
-            pageContextAddendum = await getPageContextErrorPage(pageContext);
-        }
-        catch (err2) {
-            // - When user hasn't defined a `_error.page.js` file
-            // - Some unpexected vike internal error
-            if (shouldSwallowAndInterrupt(err2, pageContext))
-                return;
-            if (!isFirstRenderAttempt) {
-                setTimeout(() => {
-                    // We let the server show the 404 page
-                    window.location.pathname = urlOriginal;
-                }, 0);
-            }
-            if (!isEquivalentError(err, err2)) {
-                throw err2;
-            }
-            else {
-                // Abort
-                return;
-            }
-        }
-    }
-    assert(pageContextAddendum);
-    objectAssign(pageContext, pageContextAddendum);
-    assertHook(pageContext, 'onPageTransitionStart');
-    globalObject.onPageTransitionStart = pageContext.exports.onPageTransitionStart;
-    if (pageContext.exports.hydrationCanBeAborted) {
-        setHydrationCanBeAborted();
-    }
-    else {
-        assertWarning(!isReact(), 'You seem to be using React; we recommend setting hydrationCanBeAborted to true, see https://vike.dev/clientRouting', { onlyOnce: true });
-    }
-    if (shouldAbort()) {
-        return;
-    }
-    if (globalObject.renderPromise) {
-        // Always make sure that the previous render has finished,
-        // otherwise that previous render may finish after this one.
-        await globalObject.renderPromise;
-    }
-    if (shouldAbort()) {
-        return;
-    }
-    changeUrl(urlOriginal, overwriteLastHistoryEntry);
-    navigationState.markNavigationChange();
-    globalObject.previousPageContext = pageContext;
-    assert(globalObject.renderPromise === undefined);
-    globalObject.renderPromise = (async () => {
-        await executeOnRenderClientHook(pageContext, true);
-        addLinkPrefetchHandlers(pageContext);
-    })();
-    await globalObject.renderPromise;
-    globalObject.renderPromise = undefined;
-    if (pageContext._isFirstRenderAttempt) {
-        assertHook(pageContext, 'onHydrationEnd');
-        const { onHydrationEnd } = pageContext.exports;
-        if (onHydrationEnd) {
-            const hookFilePath = pageContext.exportsAll.onHydrationEnd[0].exportSource;
-            assert(hookFilePath);
-            await executeHook(() => onHydrationEnd(pageContext), 'onHydrationEnd', hookFilePath);
-        }
-    }
-    else if (renderNumber === globalObject.renderCounter) {
-        if (pageContext.exports.onPageTransitionEnd) {
-            assertHook(pageContext, 'onPageTransitionEnd');
-            await pageContext.exports.onPageTransitionEnd(pageContext);
-        }
-        globalObject.isTransitioning = undefined;
-    }
-    setScrollPosition(scrollTarget);
-    browserNativeScrollRestoration_disable();
-    globalObject.initialRenderIsDone = true;
-}
-function onLinkClick() {
-    document.addEventListener('click', onClick);
-    return;
-    // Code adapted from https://github.com/HenrikJoreteg/internal-nav-helper/blob/5199ec5448d0b0db7ec63cf76d88fa6cad878b7d/src/index.js#L11-L29
-    function onClick(ev) {
-        if (!isNormalLeftClick(ev))
-            return;
-        const linkTag = findLinkTag(ev.target);
-        if (!linkTag)
-            return;
-        const url = linkTag.getAttribute('href');
-        if (skipLink(linkTag))
-            return;
-        assert(url);
-        ev.preventDefault();
-        const keepScrollPosition = ![null, 'false'].includes(linkTag.getAttribute('keep-scroll-position'));
-        const scrollTarget = keepScrollPosition ? 'preserve-scroll' : 'scroll-to-top-or-hash';
-        renderPageClientSide({
-            scrollTarget,
-            urlOriginal: url,
-            isBackwardNavigation: false,
-            checkIfClientSideRenderable: true
-        });
-    }
-    function isNormalLeftClick(ev) {
-        return ev.button === 0 && !ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey;
-    }
-    function findLinkTag(target) {
-        while (target.tagName !== 'A') {
-            const { parentNode } = target;
-            if (!parentNode) {
-                return null;
-            }
-            target = parentNode;
-        }
-        return target;
-    }
-}
-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` 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', () => {
-        const currentState = getState();
-        const scrollTarget = currentState.historyState.scrollPosition || 'scroll-to-top-or-hash';
-        const isUserLandNavigation = currentState.historyState.triggedBy === '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 && !isUserLandNavigation) {
-            // - `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).
-            // - `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 {
-            renderPageClientSide({ scrollTarget, isBackwardNavigation, isUserLandNavigation });
-        }
-    });
-}
-function changeUrl(url, overwriteLastHistoryEntry) {
-    if (getCurrentUrl() === url)
-        return;
-    browserNativeScrollRestoration_disable();
-    pushHistory(url, overwriteLastHistoryEntry);
-    globalObject.previousState = getState();
-}
-function getState() {
-    return {
-        urlWithoutHash: getCurrentUrl({ withoutHash: true }),
-        historyState: getHistoryState()
-    };
-}
-function setScrollPosition(scrollTarget) {
-    if (scrollTarget === 'preserve-scroll') {
-        return;
-    }
-    let scrollPosition;
-    if (scrollTarget === 'scroll-to-top-or-hash') {
-        const hash = getUrlHash();
-        // We replicate the browser's native behavior
-        if (hash && hash !== 'top') {
-            const hashTarget = document.getElementById(hash) || document.getElementsByName(hash)[0];
-            if (hashTarget) {
-                hashTarget.scrollIntoView();
-                return;
-            }
-        }
-        scrollPosition = { x: 0, y: 0 };
-    }
-    else {
-        assert('x' in scrollTarget && 'y' in scrollTarget);
-        scrollPosition = scrollTarget;
-    }
-    setScroll(scrollPosition);
-}
-/** Change the browser's scoll position, in a way that works during a repaint. */
-function setScroll(scrollPosition) {
-    const scroll = () => window.scrollTo(scrollPosition.x, scrollPosition.y);
-    const done = () => window.scrollX === scrollPosition.x && window.scrollY === scrollPosition.y;
-    // In principle, this `done()` call should force the repaint to be finished. But that doesn't seem to be the case with `Firefox 97.0.1`.
-    if (done())
-        return;
-    scroll();
-    // Because `done()` doesn't seem to always force the repaint to be finished, we potentially need to retry again.
-    if (done())
-        return;
-    requestAnimationFrame(() => {
-        scroll();
-        if (done())
-            return;
-        setTimeout(async () => {
-            scroll();
-            if (done())
-                return;
-            // In principle, `requestAnimationFrame() -> setTimeout(, 0)` should be enough.
-            //  - https://stackoverflow.com/questions/61281139/waiting-for-repaint-in-javascript
-            //  - But it's not enough for `Firefox 97.0.1`.
-            //  - The following strategy is very agressive. It doesn't need to be that aggressive for Firefox. But we do it to be safe.
-            const start = new Date().getTime();
-            while (true) {
-                await sleep(10);
-                scroll();
-                if (done())
-                    return;
-                const millisecondsElapsed = new Date().getTime() - start;
-                if (millisecondsElapsed > 100)
-                    return;
-            }
-        }, 0);
-    });
-}
-// Save scroll position (needed for back-/forward navigation)
-function autoSaveScrollPosition() {
-    // Safari cannot handle more than 100 `history.replaceState()` calls within 30 seconds (https://github.com/vikejs/vike/issues/46)
-    window.addEventListener('scroll', throttle(saveScrollPosition, Math.ceil(1000 / 3)), { passive: true });
-    onPageHide(saveScrollPosition);
-}
-function getUrlHash() {
-    let { hash } = window.location;
-    if (hash === '')
-        return null;
-    assert(hash.startsWith('#'));
-    hash = hash.slice(1);
-    return hash;
-}
-// We use the browser's native scroll restoration mechanism only for the first render
-function setupNativeScrollRestoration() {
-    browserNativeScrollRestoration_enable();
-    onPageHide(browserNativeScrollRestoration_enable);
-    onPageShow(() => globalObject.initialRenderIsDone && browserNativeScrollRestoration_disable());
-}
-function browserNativeScrollRestoration_disable() {
-    if ('scrollRestoration' in window.history) {
-        window.history.scrollRestoration = 'manual';
-    }
-}
-function browserNativeScrollRestoration_enable() {
-    if ('scrollRestoration' in window.history) {
-        window.history.scrollRestoration = 'auto';
-    }
-}
-function onPageHide(listener) {
-    window.addEventListener('visibilitychange', () => {
-        if (document.visibilityState === 'hidden') {
-            listener();
-        }
-    });
-}
-function onPageShow(listener) {
-    window.addEventListener('visibilitychange', () => {
-        if (document.visibilityState === 'visible') {
-            listener();
-        }
-    });
-}
-function shouldSwallowAndInterrupt(err, pageContext) {
-    if (isAlreadyServerSideRouted(err))
-        return true;
-    if (handleErrorFetchingStaticAssets(err, pageContext))
-        return true;
-    return false;
-}
-function handleErrorFetchingStaticAssets(err, pageContext) {
-    if (!isErrorFetchingStaticAssets(err)) {
-        return false;
-    }
-    if (pageContext._isFirstRenderAttempt) {
-        disableClientRouting(err, false);
-        // This may happen if the frontend was newly deployed during hydration.
-        // Ideally: re-try a couple of times by reloading the page (not entirely trivial to implement since `localStorage` is needed.)
-        throw err;
-    }
-    else {
-        disableClientRouting(err, true);
-    }
-    serverSideRouteTo(pageContext.urlOriginal);
-    return true;
-}
-function isDisableAutomaticLinkInterception() {
-    // @ts-ignore
-    return !!window._disableAutomaticLinkInterception;
-    /* globalObject should be used if we want to make disableAutomaticLinkInterception a page-by-page setting
-    return globalObject.disableAutomaticLinkInterception ?? false
-    */
-}
-function disableClientRouting(err, log) {
-    assert(isErrorFetchingStaticAssets(err));
-    globalObject.clientRoutingIsDisabled = true;
-    if (log) {
-        // We don't use console.error() to avoid flooding error trackers such as Sentry
-        console.log(err);
-    }
-    // @ts-ignore Since dist/cjs/client/ is never used, we can ignore this error.
-    const isProd = import.meta.env.PROD;
-    assertInfo(false, [
-        'Failed to fetch static asset.',
-        isProd ? 'This usually happens when a new frontend is deployed.' : null,
-        'Falling back to Server Routing.',
-        '(The next page navigation will use Server Routing instead of Client Routing.)'
-    ]
-        .filter(Boolean)
-        .join(' '), { onlyOnce: true });
-}
-function getRenderNumber() {
-    const renderNumber = ++globalObject.renderCounter;
-    assert(renderNumber >= 1);
-    let hydrationCanBeAborted = false;
-    const setHydrationCanBeAborted = () => {
-        hydrationCanBeAborted = true;
-    };
-    const shouldAbort = () => {
-        {
-            // We should never abort the hydration if `hydrationCanBeAborted` isn't `true`
-            const isHydration = renderNumber === 1;
-            if (isHydration && hydrationCanBeAborted === false) {
-                return false;
-            }
-        }
-        // If there is a newer rendering, we should abort all previous renderings
-        if (renderNumber !== globalObject.renderCounter) {
-            return true;
-        }
-        return false;
-    };
-    return { renderNumber, shouldAbort, setHydrationCanBeAborted };
 }

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

@@ -1,8 +1,8 @@
 export { isClientSideRoutable };
 import type { PageFile } from '../../shared/getPageFiles.js';
 import type { PageConfigRuntime } from '../../shared/page-configs/PageConfig.js';
-declare function isClientSideRoutable(pageContext: {
-    _pageId: string | null;
+type PageContextPageFiles = {
     _pageFilesAll: PageFile[];
     _pageConfigs: PageConfigRuntime[];
-}): Promise<boolean>;
+};
+declare function isClientSideRoutable(pageId: string, pageContext: PageContextPageFiles): Promise<boolean>;

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

@@ -2,14 +2,11 @@ export { isClientSideRoutable };
 import { analyzePageClientSideInit } from '../../shared/getPageFiles/analyzePageClientSide.js';
 import { findPageConfig } from '../../shared/page-configs/findPageConfig.js';
 import { analyzeClientSide } from '../../shared/getPageFiles/analyzeClientSide.js';
-async function isClientSideRoutable(pageContext) {
-    if (!pageContext._pageId) {
-        return false;
-    }
-    await analyzePageClientSideInit(pageContext._pageFilesAll, pageContext._pageId, {
+async function isClientSideRoutable(pageId, pageContext) {
+    await analyzePageClientSideInit(pageContext._pageFilesAll, pageId, {
         sharedPageFilesAlreadyLoaded: false
     });
-    const pageConfig = findPageConfig(pageContext._pageConfigs, pageContext._pageId);
-    const { isClientSideRenderable, isClientRouting } = analyzeClientSide(pageConfig, pageContext._pageFilesAll, pageContext._pageId);
+    const pageConfig = findPageConfig(pageContext._pageConfigs, pageId);
+    const { isClientSideRenderable, isClientRouting } = analyzeClientSide(pageConfig, pageContext._pageFilesAll, pageId);
     return isClientSideRenderable && isClientRouting;
 }

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

@@ -1,6 +1,6 @@
 export { navigate };
 export { reload };
-import { renderPageClientSide } from './installClientRouter.js';
+import { renderPageClientSide } from './renderPageClientSide.js';
 import { assertUsage, isBrowser, assertClientRouting, checkIfClientRouting, getCurrentUrl } from './utils.js';
 assertClientRouting();
 /** Programmatically navigate to a new page.
@@ -27,8 +27,7 @@ async function navigate(url, { keepScrollPosition = false, overwriteLastHistoryE
         scrollTarget,
         urlOriginal: url,
         overwriteLastHistoryEntry,
-        isBackwardNavigation: false,
-        checkIfClientSideRenderable: true
+        isBackwardNavigation: false
     });
 }
 async function reload() {

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

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

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

@@ -0,0 +1,63 @@
+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` 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', () => {
+        const currentState = getState();
+        const scrollTarget = currentState.historyState.scrollPosition || 'scroll-to-top-or-hash';
+        const isUserLandPushStateNavigation = currentState.historyState.triggedBy === '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 `onLinkClick()` 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 {
+            renderPageClientSide({ scrollTarget, isBackwardNavigation, isUserLandPushStateNavigation });
+        }
+    });
+}
+function getState() {
+    return {
+        urlWithoutHash: getCurrentUrl({ withoutHash: true }),
+        historyState: getHistoryState()
+    };
+}
+function updateState() {
+    globalObject.previousState = getState();
+}

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

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