kiru 0.54.0-preview.1 → 0.54.0

package/dist/router/fileRouterController.js

@@ -2,16 +2,14 @@ import { Signal } from "../signals/base.js";
 import { watch } from "../signals/watch.js";
 import { __DEV__ } from "../env.js";
 import { flushSync, nextIdle } from "../scheduler.js";
-import { toArray } from "../utils/format.js";
 import { FileRouterDataLoadError } from "./errors.js";
-import { fileRouterInstance, fileRouterRoute, requestContext, routerCache, } from "./globals.js";
-import { formatViteImportMap, matchModules, matchRoute, match404Route, normalizePrefixPath, parseQuery, wrapWithLayouts, runAfterEachGuards, runBeforeEachGuards, runBeforeEnterHooks, runBeforeLeaveHooks, } from "./utils/index.js";
+import { fileRouterInstance, fileRouterRoute, routerCache } from "./globals.js";
+import { formatViteImportMap, matchLayouts, matchRoute, match404Route, normalizePrefixPath, parseQuery, wrapWithLayouts, } from "./utils/index.js";
 import { RouterCache } from "./cache.js";
 import { scrollStack } from "./scrollStack.js";
-let transitionId = 0;
-let currentTransition = null;
 export class FileRouterController {
     constructor() {
+        this.baseUrl = "/";
         routerCache.current ?? (routerCache.current = new RouterCache());
         this.abortController = new AbortController();
         this.currentPage = new Signal(null);
@@ -21,7 +19,6 @@ export class FileRouterController {
         this.historyIndex = 0;
         this.layouts = {};
         this.pages = {};
-        this.guards = {};
         this.state = {
             pathname: window.location.pathname,
             hash: window.location.hash,
@@ -29,27 +26,7 @@ export class FileRouterController {
             query: {},
             signal: this.abortController.signal,
         };
-        const __this = this;
-        this.contextValue = {
-            invalidate: async (...paths) => {
-                if (this.invalidate(...paths)) {
-                    return this.loadRoute();
-                }
-            },
-            get state() {
-                return { ...__this.state };
-            },
-            navigate: this.navigate.bind(this),
-            prefetchRouteModules: this.prefetchRouteModules.bind(this),
-            reload: async (options) => {
-                if (options?.invalidate ?? true) {
-                    this.invalidate(this.state.pathname);
-                }
-                return this.loadRoute({ transition: options?.transition });
-            },
-            setQuery: this.setQuery.bind(this),
-            setHash: this.setHash.bind(this),
-        };
+        this.contextValue = this.createContextValue();
         if (__DEV__) {
             this.filePathToPageRoute = new Map();
             this.pageRouteToConfig = new Map();
@@ -66,10 +43,11 @@ export class FileRouterController {
                 const loader = config.loader;
                 if (curPage?.route === existing.route && loader) {
                     const p = this.currentPageProps.value;
-                    const transition = (!loader.static && loader.transition) ?? this.enableTransitions;
+                    const transition = (loader.mode !== "static" && loader.transition) ??
+                        this.enableTransitions;
                     // Check cache first if caching is enabled
                     let cachedData = null;
-                    if (!loader.static && loader.cache) {
+                    if (loader.mode !== "static" && loader.cache) {
                         const cacheKey = {
                             path: this.state.pathname,
                             params: this.state.params,
@@ -85,7 +63,9 @@ export class FileRouterController {
                             error: null,
                             loading: false,
                         };
-                        handleStateTransition(transition, transitionId, () => (this.currentPageProps.value = props));
+                        handleStateTransition(this.state.signal, transition, () => {
+                            this.currentPageProps.value = props;
+                        });
                     }
                     else {
                         // No cached data - show loading state and load data
@@ -95,8 +75,10 @@ export class FileRouterController {
                             data: null,
                             error: null,
                         };
-                        handleStateTransition(transition, transitionId, () => (this.currentPageProps.value = props));
-                        this.loadRouteData(config, this.state, transition);
+                        handleStateTransition(this.state.signal, transition, () => {
+                            this.currentPageProps.value = props;
+                        });
+                        this.loadRouteData(config, props, this.state, transition);
                     }
                 }
                 this.pageRouteToConfig?.set(existing.route, config);
@@ -121,25 +103,15 @@ export class FileRouterController {
         }
     }
     init(config) {
-        const { pages, layouts, guards, dir = "/pages", baseUrl = "/", transition, preloaded, } = config;
+        const { pages, layouts, dir = "/pages", baseUrl = "/", transition, preloaded, } = config;
         this.enableTransitions = !!transition;
         const [normalizedDir, normalizedBaseUrl] = [
             normalizePrefixPath(dir),
             normalizePrefixPath(baseUrl),
         ];
-        if (!preloaded) {
-            this.pages = formatViteImportMap(pages, normalizedDir, normalizedBaseUrl);
-            this.layouts = formatViteImportMap(layouts, normalizedDir, normalizedBaseUrl);
-            this.guards = !guards
-                ? {}
-                : formatViteImportMap(guards, normalizedDir, normalizedBaseUrl);
-            if (__DEV__) {
-                validateRoutes(this.pages);
-            }
-            this.loadRoute();
-        }
-        else {
-            const { pages, layouts, guards, page, pageProps, pagePropsPromise, pageLayouts, route, params, query, cacheData, } = preloaded;
+        this.baseUrl = normalizedBaseUrl.slice(0, -1);
+        if (preloaded) {
+            const { pages, layouts, page, pageProps, pageLayouts, route, params, query, cacheData, } = preloaded;
             this.state = {
                 params,
                 query,
@@ -156,42 +128,45 @@ export class FileRouterController {
             this.currentLayouts.value = pageLayouts.map((l) => l.default);
             this.pages = pages;
             this.layouts = layouts;
-            this.guards = (guards ??
-                {});
             if (__DEV__) {
-                validateRoutes(this.pages);
                 if (page.config) {
                     this.dev_onPageConfigDefined(route, page.config);
                 }
             }
-            const loader = page.config?.loader;
-            const transition = (!loader?.static && loader?.transition) ?? this.enableTransitions;
-            if (loader && pagePropsPromise) {
-                const prevState = this.state;
-                pagePropsPromise.then(({ data, error }) => {
-                    if (this.state !== prevState)
-                        return;
-                    handleStateTransition(transition, transitionId, () => (this.currentPageProps.value = { loading: false, data, error }));
-                });
+            if (__DEV__) {
+                validateRoutes(this.pages);
             }
-            else if (loader &&
-                ((!loader.static && pageProps.loading === true) || __DEV__)) {
+            const loader = page.config?.loader;
+            if (loader &&
+                ((loader.mode !== "static" && pageProps.loading === true) || __DEV__)) {
                 if (cacheData === null) {
-                    this.loadRouteData(page.config, this.state);
+                    this.loadRouteData(page.config, pageProps, this.state);
                 }
                 else {
                     nextIdle(() => {
-                        handleStateTransition(transition, transitionId, () => {
-                            this.currentPageProps.value = {
-                                data: cacheData.value,
-                                error: null,
-                                loading: false,
-                            };
+                        const props = {
+                            ...pageProps,
+                            data: cacheData.value,
+                            error: null,
+                            loading: false,
+                        };
+                        // @ts-ignore
+                        const transition = loader.transition ?? this.enableTransitions;
+                        handleStateTransition(this.state.signal, transition, () => {
+                            this.currentPageProps.value = props;
                         });
                     });
                 }
             }
         }
+        else {
+            this.pages = formatViteImportMap(pages, normalizedDir, normalizedBaseUrl);
+            this.layouts = formatViteImportMap(layouts, normalizedDir, normalizedBaseUrl);
+            if (__DEV__) {
+                validateRoutes(this.pages);
+            }
+            this.loadRoute();
+        }
         window.history.scrollRestoration = "manual";
         const historyState = window.history.state;
         if (typeof historyState !== "object" ||
@@ -219,59 +194,20 @@ export class FileRouterController {
             scrollStack.replace(this.historyIndex, window.scrollX, window.scrollY);
             window.history.scrollRestoration = "auto";
         });
-        let ignorePopState = false;
         window.addEventListener("popstate", (e) => {
             e.preventDefault();
-            if (!ignorePopState &&
-                this.onBeforeLeave(window.location.pathname) === false) {
-                ignorePopState = true;
-                if (e.state !== null) {
-                    if (e.state.index > this.historyIndex) {
-                        window.history.go(-1);
-                    }
-                    else if (e.state.index < this.historyIndex) {
-                        window.history.go(1);
-                    }
-                }
-                return;
-            }
-            if (ignorePopState) {
-                ignorePopState = false;
-                return;
-            }
             scrollStack.replace(this.historyIndex, window.scrollX, window.scrollY);
-            // prep 'on painted' callback for scroll-to-offset action
-            // this will fire once the page has rendered but before (loader?) kicks off.
-            let onPaint;
-            if (e.state != null) {
-                onPaint = () => {
+            this.loadRoute().then(() => {
+                if (e.state != null) {
                     this.historyIndex = e.state.index;
                     const offset = scrollStack.getItem(e.state.index);
                     if (offset !== undefined) {
                         window.scrollTo(...offset);
                     }
-                };
-            }
-            this.loadRoute({ onPaint });
+                }
+            });
         });
     }
-    onBeforeLeave(to) {
-        const currentPage = this.currentPage.peek();
-        if (!currentPage) {
-            return true;
-        }
-        let config = currentPage.config ?? {};
-        if (__DEV__) {
-            if (this.pageRouteToConfig?.has(currentPage.route)) {
-                config = this.pageRouteToConfig.get(currentPage.route);
-            }
-        }
-        const onBeforeLeave = config.hooks?.onBeforeLeave;
-        if (onBeforeLeave) {
-            return runBeforeLeaveHooks(toArray(onBeforeLeave), { ...requestContext.current }, to, this.state.pathname);
-        }
-        return true;
-    }
     getChildren() {
         const page = this.currentPage.value;
         if (!page)
@@ -288,8 +224,7 @@ export class FileRouterController {
         fileRouterRoute.current = null;
         fileRouterInstance.current = null;
     }
-    async loadRoute(options) {
-        const { transition: enableTransition = this.enableTransitions, isStatic404 = false, path = window.location.pathname, onPaint, } = options ?? {};
+    async loadRoute(path = window.location.pathname, props = {}, enableTransition = this.enableTransitions, isStatic404 = false) {
         this.abortController?.abort();
         const signal = (this.abortController = new AbortController()).signal;
         try {
@@ -308,22 +243,9 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
                 routeMatch = _404Match;
             }
             const { route, pageEntry, params, routeSegments } = routeMatch;
-            // Apply beforeEach guards before loading route
-            const guardEntries = matchModules(this.guards, routeSegments);
-            const guardModules = await Promise.all(guardEntries.map((entry) => entry.load()));
-            const fromPath = this.state.pathname;
-            const redirectPath = await runBeforeEachGuards(guardModules, { ...requestContext.current }, path, fromPath);
-            // If redirect was requested, navigate to that path instead
-            if (redirectPath !== null) {
-                this.state.pathname = path;
-                return this.navigate(redirectPath, {
-                    replace: true,
-                    transition: enableTransition,
-                });
-            }
             fileRouterRoute.current = route;
             const pagePromise = pageEntry.load();
-            const layoutPromises = matchModules(this.layouts, routeSegments).map((layoutEntry) => layoutEntry.load());
+            const layoutPromises = matchLayouts(this.layouts, routeSegments).map((layoutEntry) => layoutEntry.load());
             const [page, ...layouts] = await Promise.all([
                 pagePromise,
                 ...layoutPromises,
@@ -348,67 +270,56 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
                     config = this.pageRouteToConfig.get(route);
                 }
             }
-            const { loader, hooks } = config;
-            if (hooks?.onBeforeEnter) {
-                const redirectPath = await runBeforeEnterHooks(toArray(hooks.onBeforeEnter), requestContext, path, fromPath);
-                if (redirectPath !== null) {
-                    this.state.pathname = path;
-                    return this.navigate(redirectPath, {
-                        replace: true,
-                        transition: enableTransition,
-                    });
-                }
-            }
-            let props = {};
-            if (!!loader) {
-                props = {
-                    data: null,
-                    error: null,
-                    loading: true,
-                };
-            }
-            if (loader?.static && !__DEV__) {
-                const staticProps = page.__KIRU_STATIC_PROPS__?.[path];
-                if (!staticProps) {
-                    // 404
-                    return this.loadRoute({
-                        path,
-                        transition: enableTransition,
-                        isStatic404: true,
-                    });
+            const { loader } = config;
+            if (loader) {
+                if (loader.mode !== "static" || __DEV__) {
+                    // Check cache first if caching is enabled
+                    let cachedData = null;
+                    if (loader.mode !== "static" && loader.cache) {
+                        const cacheKey = {
+                            path: routerState.pathname,
+                            params: routerState.params,
+                            query: routerState.query,
+                        };
+                        cachedData = routerCache.current.get(cacheKey, loader.cache);
+                    }
+                    if (cachedData !== null) {
+                        // Use cached data immediately - no loading state needed
+                        props = {
+                            ...props,
+                            data: cachedData.value,
+                            error: null,
+                            loading: false,
+                        };
+                    }
+                    else {
+                        // No cached data - show loading state and load data
+                        props = {
+                            ...props,
+                            loading: true,
+                            data: null,
+                            error: null,
+                        };
+                        this.loadRouteData(config, props, routerState, enableTransition);
+                    }
                 }
-                const { data, error } = staticProps;
-                props = error
-                    ? {
-                        data: null,
-                        error: new FileRouterDataLoadError(error),
-                        loading: false,
+                else {
+                    const staticProps = page.__KIRU_STATIC_PROPS__?.[path];
+                    if (!staticProps) {
+                        return this.loadRoute(path, props, enableTransition, true);
                     }
-                    : {
-                        data: data,
-                        error: null,
-                        loading: false,
-                    };
-            }
-            else if (!loader?.static && loader?.cache) {
-                const cacheKey = {
-                    path: routerState.pathname,
-                    params: routerState.params,
-                    query: routerState.query,
-                };
-                const cachedData = routerCache.current.get(cacheKey, loader.cache);
-                if (cachedData !== null) {
+                    const { data, error } = staticProps;
                     props = {
-                        data: cachedData.value,
-                        error: null,
+                        ...props,
+                        data: data,
+                        error: error ? new FileRouterDataLoadError(error) : null,
                         loading: false,
                     };
                 }
             }
-            // loader transition must use the same id as page transition in order to prevent skipping it.
-            let tId = transitionId++;
-            return await handleStateTransition(enableTransition, tId, () => {
+            return handleStateTransition(signal, enableTransition, () => {
                 this.state = routerState;
+                this.contextValue = this.createContextValue();
                 this.currentPage.value = {
                     component: page.default,
                     config,
@@ -418,15 +329,6 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
                 this.currentLayouts.value = layouts
                     .filter((m) => typeof m.default === "function")
                     .map((m) => m.default);
-                nextIdle(() => {
-                    runAfterEachGuards(guardModules, { ...requestContext.current }, path, fromPath);
-                    if (props.loading) {
-                        this.loadRouteData(config, routerState, enableTransition, tId).then(() => signal.aborted || onPaint?.());
-                    }
-                    else {
-                        onPaint?.();
-                    }
-                });
             });
         }
         catch (error) {
@@ -434,14 +336,14 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
             this.currentPage.value = null;
         }
     }
-    async loadRouteData(config, routerState, enableTransition = this.enableTransitions, id = transitionId) {
+    async loadRouteData(config, props, routerState, enableTransition = this.enableTransitions) {
         const { loader } = config;
         // Load data from loader (cache check is now done earlier in loadRoute)
-        return loader
-            .load({ ...routerState, context: { ...requestContext.current } })
+        loader
+            .load(routerState)
             .then((data) => {
             // Cache the data if caching is enabled
-            if (!loader.static && loader.cache) {
+            if (loader.mode !== "static" && loader.cache) {
                 const cacheKey = {
                     path: routerState.pathname,
                     params: routerState.params,
@@ -462,8 +364,13 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
             .then((state) => {
             if (routerState.signal.aborted)
                 return;
-            const transition = (!loader.static && loader.transition) ?? enableTransition;
-            return handleStateTransition(transition, id, () => (this.currentPageProps.value = state));
+            const transition = (loader.mode !== "static" && loader.transition) ?? enableTransition;
+            handleStateTransition(routerState.signal, transition, () => {
+                this.currentPageProps.value = {
+                    ...props,
+                    ...state,
+                };
+            });
         });
     }
     invalidate(...paths) {
@@ -478,13 +385,11 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
         const url = new URL(path, "http://localhost");
         const { hash: nextHash, pathname: nextPath } = url;
         const { hash: prevHash, pathname: prevPath } = this.state;
-        if ((nextHash === prevHash && nextPath === prevPath) ||
-            this.onBeforeLeave(prevPath) === false) {
+        if (nextHash === prevHash && nextPath === prevPath) {
             return;
         }
         this.updateHistoryState(path, options);
-        const transition = options?.transition ?? this.enableTransitions;
-        this.loadRoute({ transition }).then(() => {
+        this.loadRoute(void 0, void 0, options?.transition ?? this.enableTransitions).then(() => {
             if (nextHash !== prevHash) {
                 window.dispatchEvent(new HashChangeEvent("hashchange"));
             }
@@ -507,7 +412,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
             const { pageEntry, route } = routeMatch;
             fileRouterRoute.current = route;
             const pagePromise = pageEntry.load();
-            const layoutPromises = matchModules(this.layouts, route.split("/")).map((layoutEntry) => layoutEntry.load());
+            const layoutPromises = matchLayouts(this.layouts, route.split("/")).map((layoutEntry) => layoutEntry.load());
             await Promise.all([pagePromise, ...layoutPromises]);
             fileRouterRoute.current = null;
         }
@@ -542,10 +447,10 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
             window.history.replaceState({ ...window.history.state, index: this.historyIndex }, "", path);
         }
         else {
-            const current = scrollStack.get();
             // if we've gone back and are now going forward, we need to
             // truncate the scroll stack so it doesn't just permanently grow.
             // this should keep it at the same length as the history stack.
+            const current = scrollStack.get();
             if (this.historyIndex < window.history.length - 1) {
                 current.length = this.historyIndex;
             }
@@ -553,6 +458,32 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`);
             window.history.pushState({ ...window.history.state, index: ++this.historyIndex }, "", path);
         }
     }
+    createContextValue() {
+        const __this = this;
+        return {
+            get baseUrl() {
+                return __this.baseUrl;
+            },
+            invalidate: async (...paths) => {
+                if (this.invalidate(...paths)) {
+                    return this.loadRoute(void 0, void 0, true);
+                }
+            },
+            get state() {
+                return { ...__this.state };
+            },
+            navigate: this.navigate.bind(this),
+            prefetchRouteModules: this.prefetchRouteModules.bind(this),
+            reload: async (options) => {
+                if (options?.invalidate ?? true) {
+                    this.invalidate(this.state.pathname);
+                }
+                return this.loadRoute(void 0, void 0, options?.transition);
+            },
+            setQuery: this.setQuery.bind(this),
+            setHash: this.setHash.bind(this),
+        };
+    }
 }
 function buildQueryString(query) {
     const params = new URLSearchParams();
@@ -568,29 +499,19 @@ function buildQueryString(query) {
     }
     return params.toString();
 }
-async function handleStateTransition(enableTransition, id, callback) {
-    if (currentTransition) {
-        const { id: currentId, transition } = currentTransition;
-        // for cross-page navigations, we skip any existing transitions.
-        // otherwise (eg. loaders), we wait for the existing transition to finish
-        if (id !== currentId) {
-            transition.skipTransition();
-        }
-        await transition.finished;
-    }
+async function handleStateTransition(signal, enableTransition, callback) {
     if (!enableTransition || typeof document.startViewTransition !== "function") {
         return new Promise((resolve) => {
             callback();
             nextIdle(resolve);
         });
     }
-    const transition = document.startViewTransition(() => {
+    const vt = document.startViewTransition(() => {
         callback();
         flushSync();
     });
-    currentTransition = { id, transition };
-    await transition.finished;
-    currentTransition = null;
+    signal.addEventListener("abort", () => vt.skipTransition());
+    await vt.ready;
 }
 function validateRoutes(pageMap) {
     const routeConflicts = [];