kiru 0.54.0-preview.0 → 0.54.0

package/src/router/fileRouterController.ts

@@ -2,15 +2,9 @@ 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,
-  requestContext,
-  routerCache,
-} from "./globals.js"
+import { fileRouterInstance, fileRouterRoute, routerCache } from "./globals.js"
 import type {
   FileRouterConfig,
   PageConfig,
@@ -23,22 +17,17 @@ import type {
   CurrentPage,
   DevtoolsInterface,
   FormattedViteImportMap,
-  GuardModule,
   PageModule,
   ViteImportMap,
 } from "./types.internal.js"
 import {
   formatViteImportMap,
-  matchModules,
+  matchLayouts,
   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"
@@ -66,9 +55,9 @@ 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
+  private baseUrl = "/"
 
   constructor() {
     routerCache.current ??= new RouterCache()
@@ -80,7 +69,6 @@ export class FileRouterController {
     this.historyIndex = 0
     this.layouts = {}
     this.pages = {}
-    this.guards = {}
     this.state = {
       pathname: window.location.pathname,
       hash: window.location.hash,
@@ -88,27 +76,7 @@ export class FileRouterController {
       query: {},
       signal: this.abortController.signal,
     }
-    const __this = this
-    this.contextValue = {
-      invalidate: async (...paths: string[]) => {
-        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?: ReloadOptions) => {
-        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),
-    }
+    this.contextValue = this.createContextValue()
     if (__DEV__) {
       this.filePathToPageRoute = new Map()
       this.pageRouteToConfig = new Map()
@@ -200,7 +168,6 @@ export class FileRouterController {
     const {
       pages,
       layouts,
-      guards,
       dir = "/pages",
       baseUrl = "/",
       transition,
@@ -211,12 +178,12 @@ export class FileRouterController {
       normalizePrefixPath(dir),
       normalizePrefixPath(baseUrl),
     ]
+    this.baseUrl = normalizedBaseUrl.slice(0, -1)
 
     if (preloaded) {
       const {
         pages,
         layouts,
-        guards,
         page,
         pageProps,
         pageLayouts,
@@ -241,8 +208,6 @@ 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)
@@ -290,14 +255,6 @@ export class FileRouterController {
         normalizedDir,
         normalizedBaseUrl
       )
-      this.guards = !guards
-        ? {}
-        : (formatViteImportMap(
-            guards as ViteImportMap,
-            normalizedDir,
-            normalizedBaseUrl
-          ) as unknown as FormattedViteImportMap<GuardModule>)
-
       if (__DEV__) {
         validateRoutes(this.pages)
       }
@@ -340,31 +297,10 @@ export class FileRouterController {
       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)
+
       this.loadRoute().then(() => {
         if (e.state != null) {
           this.historyIndex = e.state.index
@@ -377,31 +313,6 @@ 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
@@ -452,38 +363,10 @@ 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 = matchModules(this.layouts, routeSegments).map(
+      const layoutPromises = matchLayouts(this.layouts, routeSegments).map(
         (layoutEntry) => layoutEntry.load()
       )
 
@@ -517,23 +400,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         }
       }
 
-      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,
-          })
-        }
-      }
+      const { loader } = config
 
       if (loader) {
         if (loader.mode !== "static" || __DEV__) {
@@ -590,6 +457,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
 
       return handleStateTransition(signal, enableTransition, () => {
         this.state = routerState
+        this.contextValue = this.createContextValue()
         this.currentPage.value = {
           component: page.default,
           config,
@@ -599,15 +467,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
-          )
-        })
       })
     } catch (error) {
       console.error("[kiru/router]: Failed to load route component:", error)
@@ -625,7 +484,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, context: { ...requestContext.current } })
+      .load(routerState)
       .then(
         (data) => {
           // Cache the data if caching is enabled
@@ -649,7 +508,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
             data: null,
             error: new FileRouterDataLoadError(error),
             loading: false,
-          } satisfies PageProps<PageConfig<unknown>>)
+          }) satisfies PageProps<PageConfig<unknown>>
       )
       .then((state) => {
         if (routerState.signal.aborted) return
@@ -694,9 +553,6 @@ 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(
@@ -730,7 +586,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(
+      const layoutPromises = matchLayouts(this.layouts, route.split("/")).map(
         (layoutEntry) => layoutEntry.load()
       )
       await Promise.all([pagePromise, ...layoutPromises])
@@ -776,15 +632,13 @@ 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 },
@@ -793,6 +647,32 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       )
     }
   }
+  private createContextValue() {
+    const __this = this
+    return {
+      get baseUrl() {
+        return __this.baseUrl
+      },
+      invalidate: async (...paths: string[]) => {
+        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?: ReloadOptions) => {
+        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(

package/src/router/globals.ts

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

package/src/router/head.ts

@@ -1,5 +1,5 @@
 import { Signal } from "../signals/base.js"
-import { isValidTextChild, isVNode, toArray } from "../utils/index.js"
+import { isValidTextChild, isVNode } 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 = toArray(children)
+    const asArray = Array.isArray(children) ? children : [children]
     const invalidNodes = asArray.filter(
       (c) =>
         !isVNode(c) ||
@@ -29,14 +29,16 @@ function HeadContent({ children }: { children: JSX.Children }): JSX.Element {
     }
   }
   if ("window" in globalThis) {
-    const c = toArray(children)
-    const titleNode = c.find(
+    const asArray = Array.isArray(children) ? children : [children]
+    const titleNode = asArray.find(
       (c) => isVNode(c) && c.type === "title"
     ) as Kiru.VNode
 
     if (titleNode) {
       const props = titleNode.props
-      const titleChildren = toArray(props.children)
+      const titleChildren = Array.isArray(props.children)
+        ? props.children
+        : [props.children]
 
       document.title = titleChildren
         .map((c) => (Signal.isSignal(c) ? c.value : c))

package/src/router/index.ts

@@ -1,20 +1,9 @@
 import { createElement } from "../element.js"
 import { __DEV__ } from "../env.js"
 
-export {
-  useRequestContext,
-  useFileRouter,
-  type FileRouterContextType,
-} from "./context.js"
+export { 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/link.ts

@@ -37,7 +37,7 @@ export const Link: Kiru.FC<LinkProps> = ({
   prefetchJs,
   ...props
 }) => {
-  const { navigate, prefetchRouteModules } = useFileRouter()
+  const { navigate, prefetchRouteModules, baseUrl } = useFileRouter()
 
   const handleMouseOver = useCallback(
     (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
@@ -63,13 +63,13 @@ export const Link: Kiru.FC<LinkProps> = ({
       onclick?.(e)
       if (e.defaultPrevented) return
       e.preventDefault()
-      navigate(to, { replace, transition })
+      navigate(baseUrl + to, { replace, transition })
     },
     [onclick, navigate, to, replace, transition]
   )
 
   return createElement("a", {
-    href: to,
+    href: baseUrl + to,
     onclick: handleClick,
     onmouseover: handleMouseOver,
     onfocus: handleFocus,

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

@@ -1,29 +1,25 @@
 import { createElement, Fragment } from "../../element.js"
+
 import {
-  matchModules,
+  matchLayouts,
   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<PageModule>
+  pages: FormattedViteImportMap
   layouts: FormattedViteImportMap
-  guards: FormattedViteImportMap<GuardModule>
   Document: Kiru.FC
   registerModule: (moduleId: string) => void
-  registerStaticProps: (props: Record<string, unknown>) => void
+  registerPreloadedPageProps: (props: Record<string, unknown>) => void
 }
 
 export interface RenderResult {
@@ -68,7 +64,7 @@ export async function render(
 
   const { pageEntry, routeSegments, params } = routeMatch
   const is404Route = routeMatch.routeSegments.includes("404")
-  const layoutEntries = matchModules(ctx.layouts, routeSegments)
+  const layoutEntries = matchLayouts(ctx.layouts, routeSegments)
 
   ;[pageEntry, ...layoutEntries].forEach((e) => {
     ctx.registerModule(e.filePath)
@@ -103,10 +99,7 @@ export async function render(
       }, 10000)
 
       try {
-        const data = await config.loader.load({
-          ...routerState,
-          context: {},
-        })
+        const data = await config.loader.load(routerState)
         props = {
           data,
           error: null,
@@ -120,7 +113,7 @@ export async function render(
         }
       } finally {
         clearTimeout(timeout)
-        ctx.registerStaticProps({ data: props.data, error: props.error })
+        ctx.registerPreloadedPageProps({ data: props.data, error: props.error })
       }
     }
   }
@@ -186,7 +179,7 @@ export async function render(
   // console.log("immediate", immediate)
 
   return {
-    status: is404Route ? 404 : result?.status ?? 200,
+    status: is404Route ? 404 : (result?.status ?? 200),
     body: `<!doctype html>${prePageOutlet}<body>${pageOutletContent}</body>${postPageOutlet}`,
   }
 }

package/src/router/types.internal.ts

@@ -1,6 +1,5 @@
 import type { FileRouterContextType } from "./context"
 import type { PageConfig } from "./types"
-import type { NavGuardBuilder } from "./guard"
 
 export interface CurrentPage {
   component: Kiru.FC<any>
@@ -21,10 +20,6 @@ export interface PageModule {
   >
 }
 
-export interface GuardModule {
-  guard: NavGuardBuilder
-}
-
 export interface ViteImportMap {
   [fp: string]: () => Promise<DefaultComponentModule>
 }

package/src/router/types.ts

@@ -3,14 +3,12 @@ import type { FileRouterDataLoadError } from "./errors"
 import type {
   DefaultComponentModule,
   FormattedViteImportMap,
-  GuardModule,
   PageModule,
 } from "./types.internal"
 
 export interface FileRouterPreloadConfig {
-  pages: FormattedViteImportMap<PageModule>
+  pages: FormattedViteImportMap
   layouts: FormattedViteImportMap
-  guards?: FormattedViteImportMap<GuardModule>
   page: PageModule
   pageProps: Record<string, unknown>
   pageLayouts: DefaultComponentModule[]
@@ -42,14 +40,6 @@ export interface FileRouterConfig {
    * ```
    */
   layouts: Record<string, unknown>
-  /**
-   * The import map to use for loading nav guards
-   * @example
-   * ```tsx
-   * <FileRouter config={{ guards: import.meta.glob("/∗∗/guard.{ts,js}"), ... }} />
-   * ```
-   */
-  guards?: Record<string, unknown>
 
   /**
    * The base url to use as a prefix for route matching
@@ -108,34 +98,18 @@ export interface RouterState {
   signal: AbortSignal
 }
 
+type PageDataLoaderContext = RouterState & {}
+
 export interface PageDataLoaderCacheConfig {
   type: "memory" | "localStorage" | "sessionStorage"
   ttl: number
 }
 
-interface LoaderContext extends RouterState {
-  /**
-   * The request context - in SSR, this is the data from the server
-   * that's passed to the `renderPage` function
-   * @example
-   * ```ts
-   * // server.ts
-   * renderPage({ url, context: { test: 123 } })
-   *
-   * // page.tsx
-   * loader: {
-   *   load: ({ context }) => context.test
-   * }
-   * ```
-   */
-  context: Kiru.RequestContext
-}
-
 export type PageDataLoaderConfig<T = unknown> = {
   /**
    * The function to load the page data
    */
-  load: (context: LoaderContext) => Promise<T>
+  load: (context: PageDataLoaderContext) => Promise<T>
 } & (
   | {
       /**
@@ -175,22 +149,6 @@ export type PageDataLoaderConfig<T = unknown> = {
     }
 )
 
-export type NavigationHook<T> = (
-  context: Kiru.RequestContext,
-  to: string,
-  from: string
-) => T
-
-export type OnBeforeEnterHook = NavigationHook<
-  string | void | Promise<string | void>
->
-export type OnBeforeLeaveHook = NavigationHook<false | void>
-
-interface PageContextHooks {
-  onBeforeEnter?: OnBeforeEnterHook | OnBeforeEnterHook[]
-  onBeforeLeave?: OnBeforeLeaveHook | OnBeforeLeaveHook[]
-}
-
 export interface PageConfig<T = unknown> {
   /**
    * The loader configuration for this page
@@ -201,8 +159,6 @@ export interface PageConfig<T = unknown> {
    * returned, a page will be generated
    */
   generateStaticParams?: () => RouteParams[] | Promise<RouteParams[]>
-
-  hooks?: PageContextHooks
 }
 
 export type PageProps<T extends PageConfig<any>> = T extends PageConfig<infer U>