kiru 0.53.0 → 0.54.0-preview.0

package/src/router/fileRouterController.ts

@@ -2,9 +2,15 @@ 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 { ReloadOptions, type FileRouterContextType } from "./context.js"
 import { FileRouterDataLoadError } from "./errors.js"
-import { fileRouterInstance, fileRouterRoute, routerCache } from "./globals.js"
+import {
+  fileRouterInstance,
+  fileRouterRoute,
+  requestContext,
+  routerCache,
+} from "./globals.js"
 import type {
   FileRouterConfig,
   PageConfig,
@@ -17,17 +23,22 @@ import type {
   CurrentPage,
   DevtoolsInterface,
   FormattedViteImportMap,
+  GuardModule,
   PageModule,
   ViteImportMap,
 } from "./types.internal.js"
 import {
   formatViteImportMap,
-  matchLayouts,
+  matchModules,
   matchRoute,
   match404Route,
   normalizePrefixPath,
   parseQuery,
   wrapWithLayouts,
+  runAfterEachGuards,
+  runBeforeEachGuards,
+  runBeforeEnterHooks,
+  runBeforeLeaveHooks,
 } from "./utils/index.js"
 import { RouterCache, type CacheKey } from "./cache.js"
 import { scrollStack } from "./scrollStack.js"
@@ -55,6 +66,7 @@ export class FileRouterController {
   private historyIndex: number
   private layouts: FormattedViteImportMap
   private pages: FormattedViteImportMap<PageModule>
+  private guards: FormattedViteImportMap<GuardModule>
   private pageRouteToConfig?: Map<string, PageConfig>
   private state: RouterState
 
@@ -68,6 +80,7 @@ export class FileRouterController {
     this.historyIndex = 0
     this.layouts = {}
     this.pages = {}
+    this.guards = {}
     this.state = {
       pathname: window.location.pathname,
       hash: window.location.hash,
@@ -187,6 +200,7 @@ export class FileRouterController {
     const {
       pages,
       layouts,
+      guards,
       dir = "/pages",
       baseUrl = "/",
       transition,
@@ -202,6 +216,7 @@ export class FileRouterController {
       const {
         pages,
         layouts,
+        guards,
         page,
         pageProps,
         pageLayouts,
@@ -226,6 +241,8 @@ export class FileRouterController {
       this.currentLayouts.value = pageLayouts.map((l) => l.default)
       this.pages = pages
       this.layouts = layouts
+      this.guards = (guards ??
+        {}) as unknown as FormattedViteImportMap<GuardModule>
       if (__DEV__) {
         if (page.config) {
           this.dev_onPageConfigDefined!(route, page.config)
@@ -273,6 +290,14 @@ export class FileRouterController {
         normalizedDir,
         normalizedBaseUrl
       )
+      this.guards = !guards
+        ? {}
+        : (formatViteImportMap(
+            guards as ViteImportMap,
+            normalizedDir,
+            normalizedBaseUrl
+          ) as unknown as FormattedViteImportMap<GuardModule>)
+
       if (__DEV__) {
         validateRoutes(this.pages)
       }
@@ -315,10 +340,31 @@ export class FileRouterController {
       window.history.scrollRestoration = "auto"
     })
 
+    let ignorePopState = false
+
     window.addEventListener("popstate", (e) => {
       e.preventDefault()
-      scrollStack.replace(this.historyIndex, window.scrollX, window.scrollY)
 
+      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)
       this.loadRoute().then(() => {
         if (e.state != null) {
           this.historyIndex = e.state.index
@@ -331,6 +377,31 @@ export class FileRouterController {
     })
   }
 
+  private onBeforeLeave(to: string) {
+    const currentPage = this.currentPage.peek()
+    if (!currentPage) {
+      return true
+    }
+
+    let config = currentPage.config ?? ({} as PageConfig)
+    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
+  }
+
   public getChildren() {
     const page = this.currentPage.value
     if (!page) return null
@@ -381,10 +452,38 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
 
       const { route, pageEntry, params, routeSegments } = routeMatch
 
+      // Apply beforeEach guards before loading route
+      const guardEntries = matchModules(
+        this.guards as unknown as FormattedViteImportMap,
+        routeSegments
+      )
+      const guardModules = await Promise.all(
+        guardEntries.map(
+          (entry) => entry.load() as unknown as Promise<GuardModule>
+        )
+      )
+
+      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 = matchLayouts(this.layouts, routeSegments).map(
+      const layoutPromises = matchModules(this.layouts, routeSegments).map(
         (layoutEntry) => layoutEntry.load()
       )
 
@@ -418,7 +517,23 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         }
       }
 
-      const { loader } = config
+      const { loader, hooks } = config
+
+      if (hooks?.onBeforeEnter) {
+        const redirectPath = await runBeforeEnterHooks(
+          toArray(hooks.onBeforeEnter),
+          requestContext,
+          path,
+          fromPath
+        )
+        if (redirectPath) {
+          this.state.pathname = path
+          return this.navigate(redirectPath, {
+            replace: true,
+            transition: enableTransition,
+          })
+        }
+      }
 
       if (loader) {
         if (loader.mode !== "static" || __DEV__) {
@@ -484,6 +599,15 @@ 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
+          )
+        })
       })
     } catch (error) {
       console.error("[kiru/router]: Failed to load route component:", error)
@@ -501,7 +625,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
 
     // Load data from loader (cache check is now done earlier in loadRoute)
     loader
-      .load(routerState)
+      .load({ ...routerState, context: { ...requestContext.current } })
       .then(
         (data) => {
           // Cache the data if caching is enabled
@@ -570,6 +694,9 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       return
     }
 
+    if (this.onBeforeLeave(prevPath) === false) {
+      return
+    }
     this.updateHistoryState(path, options)
 
     this.loadRoute(
@@ -603,7 +730,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 = matchLayouts(this.layouts, route.split("/")).map(
+      const layoutPromises = matchModules(this.layouts, route.split("/")).map(
         (layoutEntry) => layoutEntry.load()
       )
       await Promise.all([pagePromise, ...layoutPromises])
@@ -649,13 +776,15 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         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
       }
+
       scrollStack.save([...current, [window.scrollX, window.scrollY]])
       window.history.pushState(
         { ...window.history.state, index: ++this.historyIndex },

package/src/router/globals.ts

@@ -12,3 +12,7 @@ export const fileRouterRoute = {
 export const routerCache = {
   current: null as RouterCache | null,
 }
+
+export const requestContext = {
+  current: {} as Kiru.RequestContext,
+}

package/src/router/guard.ts

@@ -0,0 +1,72 @@
+import type { NavigationHook } from "./types"
+import type { GuardModule } from "./types.internal"
+
+export type GuardBeforeEach = NavigationHook<
+  void | string | Promise<void | string>
+>
+export type GuardAfterEach = NavigationHook<void | Promise<void>>
+
+export interface NavGuard {
+  beforeEach: GuardBeforeEach
+  afterEach: GuardAfterEach
+}
+
+export const $NAVGUARD_INTERNAL = Symbol.for("kiru:navguard")
+
+export function resolveNavguard(module: GuardModule): NavGuard | null {
+  if (
+    "guard" in module &&
+    $NAVGUARD_INTERNAL in ((module.guard ?? {}) as NavGuardBuilder)
+  ) {
+    return (module.guard as NavGuardBuilder)[$NAVGUARD_INTERNAL]
+  }
+  return null
+}
+
+export interface NavGuardBuilder {
+  beforeEach(...fns: GuardBeforeEach[]): NavGuardBuilder
+  afterEach(...fns: GuardAfterEach[]): NavGuardBuilder
+  get [$NAVGUARD_INTERNAL](): NavGuard
+}
+
+function createNavGuard_impl(
+  beforeEach: GuardBeforeEach[],
+  afterEach: GuardAfterEach[]
+): NavGuard {
+  return {
+    beforeEach: async (ctx, to, from) => {
+      for (const fn of beforeEach) {
+        const res = await fn(ctx, to, from)
+        if (typeof res === "string") {
+          return res
+        }
+      }
+      return
+    },
+    afterEach: async (ctx, to, from) => {
+      for (const fn of afterEach) {
+        await fn(ctx, to, from)
+      }
+    },
+  }
+}
+
+export function createNavGuard(): NavGuardBuilder {
+  const beforeEach: GuardBeforeEach[] = []
+  const afterEach: GuardAfterEach[] = []
+  const guard = createNavGuard_impl(beforeEach, afterEach)
+
+  return {
+    beforeEach(...fns: GuardBeforeEach[]) {
+      beforeEach.push(...fns)
+      return this
+    },
+    afterEach(...fns: GuardAfterEach[]) {
+      afterEach.push(...fns)
+      return this
+    },
+    get [$NAVGUARD_INTERNAL]() {
+      return guard
+    },
+  }
+}

package/src/router/head.ts

@@ -1,5 +1,5 @@
 import { Signal } from "../signals/base.js"
-import { isValidTextChild, isVNode } from "../utils/index.js"
+import { isValidTextChild, isVNode, toArray } from "../utils/index.js"
 import { createElement } from "../element.js"
 import { __DEV__ } from "../env.js"
 import { KiruError } from "../error.js"
@@ -12,7 +12,7 @@ const validHeadChildren = ["title", "base", "link", "meta", "style", "script"]
 function HeadContent({ children }: { children: JSX.Children }): JSX.Element {
   if (__DEV__) {
     const n = node.current!
-    const asArray = Array.isArray(children) ? children : [children]
+    const asArray = toArray(children)
     const invalidNodes = asArray.filter(
       (c) =>
         !isVNode(c) ||
@@ -29,16 +29,14 @@ function HeadContent({ children }: { children: JSX.Children }): JSX.Element {
     }
   }
   if ("window" in globalThis) {
-    const asArray = Array.isArray(children) ? children : [children]
-    const titleNode = asArray.find(
+    const c = toArray(children)
+    const titleNode = c.find(
       (c) => isVNode(c) && c.type === "title"
     ) as Kiru.VNode
 
     if (titleNode) {
       const props = titleNode.props
-      const titleChildren = Array.isArray(props.children)
-        ? props.children
-        : [props.children]
+      const titleChildren = toArray(props.children)
 
       document.title = titleChildren
         .map((c) => (Signal.isSignal(c) ? c.value : c))

package/src/router/index.ts

@@ -1,9 +1,20 @@
 import { createElement } from "../element.js"
 import { __DEV__ } from "../env.js"
 
-export { useFileRouter, type FileRouterContextType } from "./context.js"
+export {
+  useRequestContext,
+  useFileRouter,
+  type FileRouterContextType,
+} from "./context.js"
 export * from "./errors.js"
 export { FileRouter, type FileRouterProps } from "./fileRouter.js"
+export {
+  createNavGuard,
+  type GuardBeforeEach,
+  type GuardAfterEach,
+  type NavGuard,
+  type NavGuardBuilder,
+} from "./guard.js"
 export * from "./link.js"
 export * from "./pageConfig.js"
 export type * from "./types.js"

package/src/router/{server → ssg}/index.ts

@@ -1,25 +1,29 @@
 import { createElement, Fragment } from "../../element.js"
-
 import {
-  matchLayouts,
+  matchModules,
   matchRoute,
   match404Route,
   parseQuery,
   wrapWithLayouts,
 } from "../utils/index.js"
 import { RouterContext } from "../context.js"
-import type { PageConfig, PageProps, RouterState } from "../types.js"
-import { FormattedViteImportMap, PageModule } from "../types.internal.js"
 import { __DEV__ } from "../../env.js"
 import { FileRouterDataLoadError } from "../errors.js"
 import { renderToString } from "../../renderToString.js"
+import type { PageConfig, PageProps, RouterState } from "../types.js"
+import type {
+  FormattedViteImportMap,
+  GuardModule,
+  PageModule,
+} from "../types.internal.js"
 
 export interface RenderContext {
-  pages: FormattedViteImportMap
+  pages: FormattedViteImportMap<PageModule>
   layouts: FormattedViteImportMap
+  guards: FormattedViteImportMap<GuardModule>
   Document: Kiru.FC
   registerModule: (moduleId: string) => void
-  registerPreloadedPageProps: (props: Record<string, unknown>) => void
+  registerStaticProps: (props: Record<string, unknown>) => void
 }
 
 export interface RenderResult {
@@ -64,7 +68,7 @@ export async function render(
 
   const { pageEntry, routeSegments, params } = routeMatch
   const is404Route = routeMatch.routeSegments.includes("404")
-  const layoutEntries = matchLayouts(ctx.layouts, routeSegments)
+  const layoutEntries = matchModules(ctx.layouts, routeSegments)
 
   ;[pageEntry, ...layoutEntries].forEach((e) => {
     ctx.registerModule(e.filePath)
@@ -99,7 +103,10 @@ export async function render(
       }, 10000)
 
       try {
-        const data = await config.loader.load(routerState)
+        const data = await config.loader.load({
+          ...routerState,
+          context: {},
+        })
         props = {
           data,
           error: null,
@@ -113,7 +120,7 @@ export async function render(
         }
       } finally {
         clearTimeout(timeout)
-        ctx.registerPreloadedPageProps({ data: props.data, error: props.error })
+        ctx.registerStaticProps({ data: props.data, error: props.error })
       }
     }
   }