kiru 0.50.6 → 0.50.8

package/src/router/fileRouterController.ts

@@ -1,7 +1,6 @@
 import { Signal } from "../signals/base.js"
 import { flushSync } from "../scheduler.js"
 import { __DEV__ } from "../env.js"
-import { createElement } from "../element.js"
 import { type FileRouterContextType } from "./context.js"
 import { FileRouterDataLoadError } from "./errors.js"
 import { fileRouterInstance } from "./globals.js"
@@ -14,26 +13,26 @@ import type {
   RouterState,
 } from "./types.js"
 import type {
-  DefaultComponentModule,
+  FormattedViteImportMap,
   PageModule,
   ViteImportMap,
 } from "./types.internal.js"
-
-interface FormattedViteImportMap {
-  [key: string]: {
-    load: () => Promise<DefaultComponentModule>
-    specificity: number
-    segments: string[]
-    filePath?: string
-  }
-}
+import {
+  formatViteImportMap,
+  matchLayouts,
+  matchRoute,
+  normalizePrefixPath,
+  parseQuery,
+  wrapWithLayouts,
+} from "./utils/index.js"
 
 export class FileRouterController {
+  public contextValue: FileRouterContextType
   private enableTransitions: boolean
   private pages: FormattedViteImportMap
   private layouts: FormattedViteImportMap
   private abortController: AbortController
-  private currentPage: Signal<{
+  private routeState: Signal<{
     component: Kiru.FC<any>
     config?: PageConfig
     route: string
@@ -41,7 +40,6 @@ export class FileRouterController {
   private currentPageProps: Signal<PageProps<PageConfig>>
   private currentLayouts: Signal<Kiru.FC[]>
   private state: RouterState
-  private contextValue: FileRouterContextType
   private cleanups: (() => void)[] = []
   private filePathToPageRoute?: Map<
     string,
@@ -55,7 +53,7 @@ export class FileRouterController {
     this.pages = {}
     this.layouts = {}
     this.abortController = new AbortController()
-    this.currentPage = new Signal(null)
+    this.routeState = new Signal(null)
     this.currentPageProps = new Signal({})
     this.currentLayouts = new Signal([])
     this.state = {
@@ -64,18 +62,17 @@ export class FileRouterController {
       query: {},
       signal: this.abortController.signal,
     }
-
     const __this = this
     this.contextValue = {
       get state() {
         return __this.state
       },
       navigate: this.navigate.bind(this),
-      setQuery: this.setQuery.bind(this),
+      prefetchRouteModules: this.prefetchRouteModules.bind(this),
       reload: (options?: { transition?: boolean }) =>
         this.loadRoute(void 0, void 0, options?.transition),
+      setQuery: this.setQuery.bind(this),
     }
-
     if (__DEV__) {
       this.filePathToPageRoute = new Map()
       this.pageRouteToConfig = new Map()
@@ -119,7 +116,7 @@ export class FileRouterController {
       this.filePathToPageRoute?.set(fp, { route, config })
       return
     }
-    const curPage = this.currentPage.value
+    const curPage = this.routeState.value
     if (curPage?.route === existing.route && config.loader) {
       const p = this.currentPageProps.value
       let transition = this.enableTransitions
@@ -142,104 +139,20 @@ export class FileRouterController {
     this.pageRouteToConfig?.set(existing.route, config)
   }
 
-  public getContextValue() {
-    return this.contextValue
-  }
-
   public getChildren() {
-    const page = this.currentPage.value,
-      props = this.currentPageProps.value,
-      layouts = this.currentLayouts.value
+    const page = this.routeState.value
+    if (!page) return null
 
-    if (page) {
-      // Wrap component with layouts (outermost first)
-      return layouts.reduceRight(
-        (children, Layout) => createElement(Layout, { children }),
-        createElement(page.component, props)
-      )
-    }
+    const props = this.currentPageProps.value,
+      layouts = this.currentLayouts.value
 
-    return null
+    return wrapWithLayouts(layouts, page.component, props)
   }
 
   public dispose() {
     this.cleanups.forEach((cleanup) => cleanup())
   }
 
-  private matchRoute(pathSegments: string[]) {
-    const matches: Array<{
-      route: string
-      pageEntry: FormattedViteImportMap[string]
-      params: Record<string, string>
-      routeSegments: string[]
-    }> = []
-
-    // Find all matching routes
-    outer: for (const [route, pageEntry] of Object.entries(this.pages)) {
-      const routeSegments = pageEntry.segments
-      const pathMatchingSegments = routeSegments.filter(
-        (seg) => !seg.startsWith("(") && !seg.endsWith(")")
-      )
-
-      const params: Record<string, string> = {}
-      let hasCatchall = false
-
-      // Check if route matches
-      for (
-        let i = 0;
-        i < pathMatchingSegments.length && i < pathSegments.length;
-        i++
-      ) {
-        const routeSeg = pathMatchingSegments[i]
-
-        if (routeSeg.startsWith(":")) {
-          const key = routeSeg.slice(1)
-
-          if (routeSeg.endsWith("*")) {
-            // Catchall route - matches remaining segments
-            hasCatchall = true
-            const catchallKey = key.slice(0, -1) // Remove the *
-            params[catchallKey] = pathSegments.slice(i).join("/")
-            break
-          } else {
-            // Regular dynamic segment
-            if (i >= pathSegments.length) {
-              continue outer
-            }
-            params[key] = pathSegments[i]
-          }
-        } else {
-          // Static segment
-          if (routeSeg !== pathSegments[i]) {
-            continue outer
-          }
-        }
-      }
-
-      // For non-catchall routes, ensure exact length match
-      if (!hasCatchall && pathMatchingSegments.length !== pathSegments.length) {
-        continue
-      }
-
-      matches.push({
-        route,
-        pageEntry,
-        params,
-        routeSegments,
-      })
-    }
-
-    // Sort by specificity (highest first) and return the best match
-    if (matches.length === 0) {
-      return null
-    }
-
-    matches.sort((a, b) => b.pageEntry.specificity - a.pageEntry.specificity)
-    const bestMatch = matches[0]
-
-    return bestMatch
-  }
-
   private async loadRoute(
     path: string = window.location.pathname,
     props: PageProps<PageConfig> = {},
@@ -250,10 +163,10 @@ export class FileRouterController {
 
     try {
       const pathSegments = path.split("/").filter(Boolean)
-      const routeMatch = this.matchRoute(pathSegments)
+      const routeMatch = matchRoute(this.pages, pathSegments)
 
       if (!routeMatch) {
-        const _404 = this.matchRoute(["404"])
+        const _404 = matchRoute(this.pages, ["404"])
         if (!_404) {
           if (__DEV__) {
             console.error(
@@ -275,23 +188,16 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       this.currentRoute = route
       const pagePromise = pageEntry.load()
 
-      const layoutPromises = ["/", ...routeSegments].reduce((acc, _, i) => {
-        const layoutPath = "/" + routeSegments.slice(0, i).join("/")
-        const layout = this.layouts[layoutPath]
-
-        if (!layout) {
-          return acc
-        }
-
-        return [...acc, layout.load()]
-      }, [] as Promise<DefaultComponentModule>[])
+      const layoutPromises = matchLayouts(this.layouts, routeSegments).map(
+        (layoutEntry) => layoutEntry.load()
+      )
 
-      const query = parseQuery(window.location.search)
       const [page, ...layouts] = await Promise.all([
         pagePromise,
         ...layoutPromises,
       ])
 
+      const query = parseQuery(window.location.search)
       this.currentRoute = null
       if (signal.aborted) return
 
@@ -322,7 +228,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
 
       this.state = routerState
       handleStateTransition(signal, enableTransition, () => {
-        this.currentPage.value = {
+        this.routeState.value = {
           component: page.default,
           config,
           route: "/" + routeSegments.join("/"),
@@ -334,7 +240,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       })
     } catch (error) {
       console.error("[kiru/router]: Failed to load route component:", error)
-      this.currentPage.value = null
+      this.routeState.value = null
     }
   }
 
@@ -382,10 +288,28 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
   ) {
     const f = options?.replace ? "replaceState" : "pushState"
     window.history[f]({}, "", path)
-    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }))
     return this.loadRoute(path, options?.props, options?.transition)
   }
 
+  private async prefetchRouteModules(path: string) {
+    try {
+      const routeMatch = matchRoute(this.pages, path.split("/").filter(Boolean))
+      if (!routeMatch) {
+        throw new Error(`No route defined (path: ${path}).`)
+      }
+      const { pageEntry, route } = routeMatch
+      this.currentRoute = route
+      const pagePromise = pageEntry.load()
+      const layoutPromises = matchLayouts(this.layouts, route.split("/")).map(
+        (layoutEntry) => layoutEntry.load()
+      )
+      await Promise.all([pagePromise, ...layoutPromises])
+      this.currentRoute = null
+    } catch (error) {
+      console.error("[kiru/router]: Failed to prefetch route:", error)
+    }
+  }
+
   private setQuery(query: RouteQuery) {
     const queryString = buildQueryString(query)
     const newUrl = `${this.state.path}${queryString ? `?${queryString}` : ""}`
@@ -395,28 +319,6 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
   }
 }
 
-function parseQuery(
-  search: string
-): Record<string, string | string[] | undefined> {
-  const params = new URLSearchParams(search)
-  const query: Record<string, string | string[] | undefined> = {}
-
-  for (const [key, value] of params.entries()) {
-    if (query[key]) {
-      // Convert to array if multiple values
-      if (Array.isArray(query[key])) {
-        ;(query[key] as string[]).push(value)
-      } else {
-        query[key] = [query[key] as string, value]
-      }
-    } else {
-      query[key] = value
-    }
-  }
-
-  return query
-}
-
 function buildQueryString(
   query: Record<string, string | string[] | undefined>
 ): string {
@@ -435,77 +337,6 @@ function buildQueryString(
   return params.toString()
 }
 
-function formatViteImportMap(
-  map: ViteImportMap,
-  dir: string,
-  baseUrl: string
-): FormattedViteImportMap {
-  return Object.keys(map).reduce<FormattedViteImportMap>((acc, key) => {
-    const dirIndex = key.indexOf(dir)
-    if (dirIndex === -1) {
-      return acc
-    }
-
-    let specificity = 0
-    let k = key.slice(dirIndex + dir.length)
-    while (k.startsWith("/")) {
-      k = k.slice(1)
-    }
-    const segments: string[] = []
-    const parts = k.split("/").slice(0, -1)
-
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i]
-      if (part.startsWith("[...") && part.endsWith("]")) {
-        if (i !== parts.length - 1) {
-          throw new Error(
-            `[kiru/router]: Catchall must be the folder name. Got "${key}"`
-          )
-        }
-        segments.push(`:${part.slice(4, -1)}*`)
-        specificity += 1
-        break
-      }
-      if (part.startsWith("[") && part.endsWith("]")) {
-        segments.push(`:${part.slice(1, -1)}`)
-        specificity += 10
-        continue
-      }
-      specificity += 100
-      segments.push(part)
-    }
-
-    const value: FormattedViteImportMap[string] = {
-      load: map[key],
-      specificity,
-      segments,
-    }
-
-    if (__DEV__) {
-      value.filePath = key
-    }
-
-    return {
-      ...acc,
-      [baseUrl + segments.join("/")]: value,
-    }
-  }, {})
-}
-
-function normalizePrefixPath(path: string) {
-  while (path.startsWith(".")) {
-    path = path.slice(1)
-  }
-  path = `/${path}/`
-  while (path.startsWith("//")) {
-    path = path.slice(1)
-  }
-  while (path.endsWith("//")) {
-    path = path.slice(0, -1)
-  }
-  return path
-}
-
 function handleStateTransition(
   signal: AbortSignal,
   enableTransition: boolean,

package/src/router/link.ts

@@ -6,26 +6,57 @@ import { useFileRouter } from "./context.js"
 export interface LinkProps extends ElementProps<"a"> {
   /**
    * The path to navigate to
+   * @example
+   * <Link to="/about">About</Link>
    */
   to: string
   /**
    * Whether to replace the current history entry
+   * @default false
    */
   replace?: boolean
   /**
    * Whether to trigger a view transition
+   * @default false (overrides transition from config)
    */
   transition?: boolean
+  /**
+   * Whether to prefetch the route's javascript dependencies when hovered or focused
+   * @default true
+   */
+  prefetchJs?: boolean
 }
 
 export const Link: Kiru.FC<LinkProps> = ({
   to,
   onclick,
+  onmouseover,
+  onfocus,
   replace,
   transition,
+  prefetchJs,
   ...props
 }) => {
-  const { navigate } = useFileRouter()
+  const { navigate, prefetchRouteModules } = useFileRouter()
+
+  const handleMouseOver = useCallback(
+    (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
+      if (prefetchJs !== false) {
+        prefetchRouteModules(to)
+      }
+      onmouseover?.(e)
+    },
+    [onmouseover]
+  )
+  const handleFocus = useCallback(
+    (e: Kiru.FocusEvent<HTMLAnchorElement>) => {
+      if (prefetchJs !== false) {
+        prefetchRouteModules(to)
+      }
+      onfocus?.(e)
+    },
+    [onfocus]
+  )
 
   const handleClick = useCallback(
     (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
@@ -37,5 +68,11 @@ export const Link: Kiru.FC<LinkProps> = ({
     [to, navigate, onclick, replace]
   )
 
-  return createElement("a", { href: to, onclick: handleClick, ...props })
+  return createElement("a", {
+    href: to,
+    onclick: handleClick,
+    onmouseover: handleMouseOver,
+    onfocus: handleFocus,
+    ...props,
+  })
 }

package/src/router/types.internal.ts

@@ -12,3 +12,19 @@ export interface PageModule {
 export interface ViteImportMap {
   [fp: string]: () => Promise<DefaultComponentModule>
 }
+
+export interface FormattedViteImportMap {
+  [key: string]: {
+    load: () => Promise<DefaultComponentModule>
+    specificity: number
+    segments: string[]
+    filePath?: string
+  }
+}
+
+export interface RouteMatch {
+  route: string
+  pageEntry: FormattedViteImportMap[string]
+  params: Record<string, string>
+  routeSegments: string[]
+}

package/src/router/utils/index.ts

@@ -0,0 +1,206 @@
+import { createElement } from "../../element.js"
+import { __DEV__ } from "../../env.js"
+import type {
+  FormattedViteImportMap,
+  RouteMatch,
+  ViteImportMap,
+} from "../types.internal"
+import { PageConfig, PageProps } from "../types.js"
+
+export {
+  formatViteImportMap,
+  matchRoute,
+  matchLayouts,
+  normalizePrefixPath,
+  parseQuery,
+  wrapWithLayouts,
+}
+
+function formatViteImportMap(
+  map: ViteImportMap,
+  dir: string,
+  baseUrl: string
+): FormattedViteImportMap {
+  return Object.keys(map).reduce<FormattedViteImportMap>((acc, key) => {
+    const dirIndex = key.indexOf(dir)
+    if (dirIndex === -1) {
+      console.warn(`[kiru/router]: File "${key}" does not start with "${dir}".`)
+      return acc
+    }
+
+    let specificity = 0
+    let k = key.slice(dirIndex + dir.length)
+    while (k.startsWith("/")) {
+      k = k.slice(1)
+    }
+    const segments: string[] = []
+    const parts = k.split("/").slice(0, -1)
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      if (part.startsWith("[...") && part.endsWith("]")) {
+        if (i !== parts.length - 1) {
+          throw new Error(
+            `[kiru/router]: Catchall must be the folder name. Got "${key}"`
+          )
+        }
+        segments.push(`:${part.slice(4, -1)}*`)
+        specificity += 1
+        break
+      }
+      if (part.startsWith("[") && part.endsWith("]")) {
+        segments.push(`:${part.slice(1, -1)}`)
+        specificity += 10
+        continue
+      }
+      specificity += 100
+      segments.push(part)
+    }
+
+    const value: FormattedViteImportMap[string] = {
+      load: map[key],
+      specificity,
+      segments,
+    }
+
+    if (__DEV__) {
+      value.filePath = key
+    }
+
+    return {
+      ...acc,
+      [baseUrl + segments.join("/")]: value,
+    }
+  }, {})
+}
+
+function matchRoute(
+  pages: FormattedViteImportMap,
+  pathSegments: string[]
+): RouteMatch | null {
+  const matches: RouteMatch[] = []
+  outer: for (const [route, pageEntry] of Object.entries(pages)) {
+    const routeSegments = pageEntry.segments
+    const pathMatchingSegments = routeSegments.filter(
+      (seg) => !seg.startsWith("(") && !seg.endsWith(")")
+    )
+
+    const params: Record<string, string> = {}
+    let hasCatchall = false
+
+    // Check if route matches
+    for (
+      let i = 0;
+      i < pathMatchingSegments.length && i < pathSegments.length;
+      i++
+    ) {
+      const routeSeg = pathMatchingSegments[i]
+
+      if (routeSeg.startsWith(":")) {
+        const key = routeSeg.slice(1)
+
+        if (routeSeg.endsWith("*")) {
+          // Catchall route - matches remaining segments
+          hasCatchall = true
+          const catchallKey = key.slice(0, -1) // Remove the *
+          params[catchallKey] = pathSegments.slice(i).join("/")
+          break
+        } else {
+          // Regular dynamic segment
+          if (i >= pathSegments.length) {
+            continue outer
+          }
+          params[key] = pathSegments[i]
+        }
+      } else {
+        // Static segment
+        if (routeSeg !== pathSegments[i]) {
+          continue outer
+        }
+      }
+    }
+
+    // For non-catchall routes, ensure exact length match
+    if (!hasCatchall && pathMatchingSegments.length !== pathSegments.length) {
+      continue
+    }
+
+    matches.push({
+      route,
+      pageEntry,
+      params,
+      routeSegments,
+    })
+  }
+
+  // Sort by specificity (highest first) and return the best match
+  if (matches.length === 0) {
+    return null
+  }
+
+  matches.sort((a, b) => b.pageEntry.specificity - a.pageEntry.specificity)
+  return matches[0] || null
+}
+
+function matchLayouts(
+  layouts: FormattedViteImportMap,
+  routeSegments: string[]
+) {
+  return ["/", ...routeSegments].reduce((acc, _, i) => {
+    const layoutPath = "/" + routeSegments.slice(0, i).join("/")
+    const layout = layouts[layoutPath]
+
+    if (!layout) {
+      return acc
+    }
+
+    return [...acc, layout]
+  }, [] as FormattedViteImportMap[string][])
+}
+
+function normalizePrefixPath(path: string) {
+  while (path.startsWith(".")) {
+    path = path.slice(1)
+  }
+  path = `/${path}/`
+  while (path.startsWith("//")) {
+    path = path.slice(1)
+  }
+  while (path.endsWith("//")) {
+    path = path.slice(0, -1)
+  }
+  return path
+}
+
+function parseQuery(
+  search: string
+): Record<string, string | string[] | undefined> {
+  const params = new URLSearchParams(search)
+  const query: Record<string, string | string[] | undefined> = {}
+
+  for (const [key, value] of params.entries()) {
+    if (query[key]) {
+      // Convert to array if multiple values
+      if (Array.isArray(query[key])) {
+        ;(query[key] as string[]).push(value)
+      } else {
+        query[key] = [query[key] as string, value]
+      }
+    } else {
+      query[key] = value
+    }
+  }
+
+  return query
+}
+
+function wrapWithLayouts(
+  layouts: Kiru.FC[],
+  page: Kiru.FC,
+  props: PageProps<PageConfig>
+) {
+  return layouts.reduceRight(
+    (children, Layout) => createElement(Layout, { children }),
+    createElement(page, props)
+  )
+}

package/src/types.dom.ts

@@ -365,7 +365,7 @@ declare global {
       bivarianceHack(event: E): void
     }["bivarianceHack"]
 
-    interface BaseEventHandler<T extends Element = Element>
+    interface BaseEvent<T extends Element = Element>
       extends DOMEvent<Event, T> {}
 
     interface AnimationEvent<T extends Element = Element>
@@ -413,6 +413,10 @@ declare global {
     interface WheelEvent<T extends Element = Element>
       extends DOMEvent<NativeWheelEvent, T> {}
 
+    type BaseEventHandler<T extends Element = Element> = EventHandler<
+      BaseEvent<T>
+    >
+
     type ClipboardEventHandler<T extends Element = Element> = EventHandler<
       ClipboardEvent<T>
     >