kiru 0.50.8 → 0.51.0-preview.1

package/src/router/fileRouterController.ts

@@ -3,11 +3,11 @@ import { flushSync } from "../scheduler.js"
 import { __DEV__ } from "../env.js"
 import { type FileRouterContextType } from "./context.js"
 import { FileRouterDataLoadError } from "./errors.js"
-import { fileRouterInstance } from "./globals.js"
+import { fileRouterInstance, fileRouterRoute } from "./globals.js"
 import type {
-  ErrorPageProps,
   FileRouterConfig,
   PageConfig,
+  PageDataLoaderConfig,
   PageProps,
   RouteQuery,
   RouterState,
@@ -21,23 +21,28 @@ import {
   formatViteImportMap,
   matchLayouts,
   matchRoute,
+  match404Route,
   normalizePrefixPath,
   parseQuery,
   wrapWithLayouts,
 } from "./utils/index.js"
 
+interface PageConfigWithLoader<T = unknown> extends PageConfig {
+  loader: PageDataLoaderConfig<T>
+}
+
 export class FileRouterController {
   public contextValue: FileRouterContextType
   private enableTransitions: boolean
   private pages: FormattedViteImportMap
   private layouts: FormattedViteImportMap
   private abortController: AbortController
-  private routeState: Signal<{
+  private currentPage: Signal<{
     component: Kiru.FC<any>
     config?: PageConfig
     route: string
   } | null>
-  private currentPageProps: Signal<PageProps<PageConfig>>
+  private currentPageProps: Signal<Record<string, unknown>>
   private currentLayouts: Signal<Kiru.FC[]>
   private state: RouterState
   private cleanups: (() => void)[] = []
@@ -46,14 +51,13 @@ export class FileRouterController {
     { route: string; config: PageConfig }
   >
   private pageRouteToConfig?: Map<string, PageConfig>
-  private currentRoute: string | null
 
-  constructor(config: FileRouterConfig) {
-    fileRouterInstance.current = this
+  constructor() {
+    this.enableTransitions = false
     this.pages = {}
     this.layouts = {}
     this.abortController = new AbortController()
-    this.routeState = new Signal(null)
+    this.currentPage = new Signal(null)
     this.currentPageProps = new Signal({})
     this.currentLayouts = new Signal([])
     this.state = {
@@ -77,46 +81,107 @@ export class FileRouterController {
       this.filePathToPageRoute = new Map()
       this.pageRouteToConfig = new Map()
     }
-    this.currentRoute = null
 
-    const { pages, layouts, dir = "/pages", baseUrl = "/", transition } = config
+    const handlePopState = () => this.loadRoute()
+    window.addEventListener("popstate", handlePopState)
+    this.cleanups.push(() =>
+      window.removeEventListener("popstate", handlePopState)
+    )
+  }
+
+  public init(config: FileRouterConfig) {
+    const {
+      pages,
+      layouts,
+      dir = "/pages",
+      baseUrl = "/",
+      transition,
+      preloaded,
+    } = config
     this.enableTransitions = !!transition
     const [normalizedDir, normalizedBaseUrl] = [
       normalizePrefixPath(dir),
       normalizePrefixPath(baseUrl),
     ]
-    this.pages = formatViteImportMap(
-      pages as ViteImportMap,
-      normalizedDir,
-      normalizedBaseUrl
-    )
-    if (__DEV__) {
-      validateRoutes(this.pages)
-    }
-    this.layouts = formatViteImportMap(
-      layouts as ViteImportMap,
-      normalizedDir,
-      normalizedBaseUrl
-    )
 
-    this.loadRoute()
+    if (preloaded) {
+      const {
+        pages,
+        layouts,
+        page,
+        pageProps,
+        pageLayouts,
+        route,
+        params,
+        query,
+      } = preloaded
+      this.state = {
+        params,
+        query,
+        path: route,
+        signal: this.abortController.signal,
+      }
+      this.currentPage.value = {
+        component: page.default,
+        config: page.config,
+        route,
+      }
+      this.currentPageProps.value = pageProps
+      this.currentLayouts.value = pageLayouts.map((l) => l.default)
+      this.pages = pages
+      this.layouts = layouts
+      if (__DEV__) {
+        if (page.config) {
+          this.onPageConfigDefined(route, page.config)
+        }
+      }
+      if (__DEV__) {
+        validateRoutes(this.pages)
+      }
+      const loader = page.config?.loader
+      if (__DEV__) {
+        if (loader) {
+          this.loadRouteData(
+            page.config as PageConfigWithLoader,
+            pageProps,
+            this.state
+          )
+        }
+      } else if (loader && loader.mode !== "static") {
+        this.loadRouteData(
+          page.config as PageConfigWithLoader,
+          pageProps,
+          this.state
+        )
+      }
+    } else {
+      this.pages = formatViteImportMap(
+        pages as ViteImportMap,
+        normalizedDir,
+        normalizedBaseUrl
+      )
 
-    const handlePopState = () => this.loadRoute()
-    window.addEventListener("popstate", handlePopState)
-    this.cleanups.push(() =>
-      window.removeEventListener("popstate", handlePopState)
-    )
+      this.layouts = formatViteImportMap(
+        layouts as ViteImportMap,
+        normalizedDir,
+        normalizedBaseUrl
+      )
+      if (__DEV__) {
+        validateRoutes(this.pages)
+      }
+      this.loadRoute()
+    }
   }
 
-  public onPageConfigDefined<T extends PageConfig>(fp: string, config: T) {
+  public onPageConfigDefined<T extends PageConfig<any>>(fp: string, config: T) {
     const existing = this.filePathToPageRoute?.get(fp)
     if (existing === undefined) {
-      const route = this.currentRoute
+      const route = fileRouterRoute.current
       if (!route) return
       this.filePathToPageRoute?.set(fp, { route, config })
       return
     }
-    const curPage = this.routeState.value
+    const curPage = this.currentPage.value
     if (curPage?.route === existing.route && config.loader) {
       const p = this.currentPageProps.value
       let transition = this.enableTransitions
@@ -133,14 +198,19 @@ export class FileRouterController {
         this.currentPageProps.value = props
       })
 
-      this.loadRouteData(config.loader, props, this.state, transition)
+      this.loadRouteData(
+        config as PageConfigWithLoader,
+        props,
+        this.state,
+        transition
+      )
     }
 
     this.pageRouteToConfig?.set(existing.route, config)
   }
 
   public getChildren() {
-    const page = this.routeState.value
+    const page = this.currentPage.value
     if (!page) return null
 
     const props = this.currentPageProps.value,
@@ -150,24 +220,34 @@ export class FileRouterController {
   }
 
   public dispose() {
+    this.abortController?.abort()
     this.cleanups.forEach((cleanup) => cleanup())
+    this.cleanups.length = 0
+    if (__DEV__) {
+      this.filePathToPageRoute?.clear()
+      this.pageRouteToConfig?.clear()
+    }
+    fileRouterRoute.current = null
+    fileRouterInstance.current = null
   }
 
   private async loadRoute(
     path: string = window.location.pathname,
-    props: PageProps<PageConfig> = {},
-    enableTransition = this.enableTransitions
+    props: Record<string, unknown> = {},
+    enableTransition = this.enableTransitions,
+    isStatic404 = false
   ): Promise<void> {
     this.abortController?.abort()
     const signal = (this.abortController = new AbortController()).signal
 
     try {
       const pathSegments = path.split("/").filter(Boolean)
-      const routeMatch = matchRoute(this.pages, pathSegments)
+      let routeMatch = matchRoute(this.pages, pathSegments)
 
-      if (!routeMatch) {
-        const _404 = matchRoute(this.pages, ["404"])
-        if (!_404) {
+      if (!routeMatch || isStatic404) {
+        // Try to find a 404 page in parent directories
+        const _404Match = match404Route(this.pages, pathSegments)
+        if (!_404Match) {
           if (__DEV__) {
             console.error(
               `[kiru/router]: No 404 route defined (path: ${path}). 
@@ -176,16 +256,12 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
           }
           return
         }
-        const errorProps = {
-          source: { path },
-        } satisfies ErrorPageProps
-
-        return this.navigate("/404", { replace: true, props: errorProps })
+        routeMatch = _404Match
       }
 
       const { route, pageEntry, params, routeSegments } = routeMatch
 
-      this.currentRoute = route
+      fileRouterRoute.current = route
       const pagePromise = pageEntry.load()
 
       const layoutPromises = matchLayouts(this.layouts, routeSegments).map(
@@ -193,12 +269,12 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       )
 
       const [page, ...layouts] = await Promise.all([
-        pagePromise,
+        pagePromise as Promise<PageModule>,
         ...layoutPromises,
       ])
 
       const query = parseQuery(window.location.search)
-      this.currentRoute = null
+      fileRouterRoute.current = null
       if (signal.aborted) return
 
       if (typeof page.default !== "function") {
@@ -214,21 +290,49 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         signal,
       }
 
-      let config = (page as unknown as PageModule).config
+      let config = page.config ?? ({} as PageConfig)
       if (__DEV__) {
         if (this.pageRouteToConfig?.has(route)) {
-          config = this.pageRouteToConfig.get(route)
+          config = this.pageRouteToConfig.get(route)!
         }
       }
 
-      if (config?.loader) {
-        props = { ...props, loading: true, data: null, error: null }
-        this.loadRouteData(config.loader, props, routerState, enableTransition)
+      const { loader } = config
+
+      if (loader) {
+        if (loader.mode !== "static" || __DEV__) {
+          props = {
+            ...props,
+            loading: true,
+            data: null,
+            error: null,
+          } satisfies PageProps<PageConfig<unknown>>
+
+          this.loadRouteData(
+            config as PageConfigWithLoader,
+            props,
+            routerState,
+            enableTransition
+          )
+        } else {
+          const staticProps = page.__KIRU_STATIC_PROPS__?.[path]
+          if (!staticProps) {
+            return this.loadRoute(path, props, enableTransition, true)
+          }
+
+          const { data, error } = staticProps
+          props = {
+            ...props,
+            data: data,
+            error: error ? new FileRouterDataLoadError(error) : null,
+            loading: false,
+          } as PageProps<PageConfig<unknown>>
+        }
       }
 
-      this.state = routerState
       handleStateTransition(signal, enableTransition, () => {
-        this.routeState.value = {
+        this.state = routerState
+        this.currentPage.value = {
           component: page.default,
           config,
           route: "/" + routeSegments.join("/"),
@@ -240,26 +344,34 @@ 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.routeState.value = null
+      this.currentPage.value = null
     }
   }
 
   private async loadRouteData(
-    loader: NonNullable<PageConfig["loader"]>,
-    props: PageProps<PageConfig>,
+    config: PageConfigWithLoader,
+    props: Record<string, unknown>,
     routerState: RouterState,
     enableTransition = this.enableTransitions
   ) {
+    const { loader } = config
     loader
       .load(routerState)
       .then(
-        (data) => ({ data, error: null }),
-        (error) => ({
-          data: null,
-          error: new FileRouterDataLoadError(error),
-        })
+        (data) =>
+          ({
+            data,
+            error: null,
+            loading: false,
+          } satisfies PageProps<PageConfig<unknown>>),
+        (error) =>
+          ({
+            data: null,
+            error: new FileRouterDataLoadError(error),
+            loading: false,
+          } satisfies PageProps<PageConfig<unknown>>)
       )
-      .then(({ data, error }) => {
+      .then((state) => {
         if (routerState.signal.aborted) return
 
         let transition = enableTransition
@@ -270,10 +382,8 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         handleStateTransition(routerState.signal, transition, () => {
           this.currentPageProps.value = {
             ...props,
-            loading: false,
-            data,
-            error,
-          }
+            ...state,
+          } satisfies PageProps<PageConfig<unknown>>
         })
       })
   }
@@ -298,13 +408,13 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         throw new Error(`No route defined (path: ${path}).`)
       }
       const { pageEntry, route } = routeMatch
-      this.currentRoute = route
+      fileRouterRoute.current = route
       const pagePromise = pageEntry.load()
       const layoutPromises = matchLayouts(this.layouts, route.split("/")).map(
         (layoutEntry) => layoutEntry.load()
       )
       await Promise.all([pagePromise, ...layoutPromises])
-      this.currentRoute = null
+      fileRouterRoute.current = null
     } catch (error) {
       console.error("[kiru/router]: Failed to prefetch route:", error)
     }
@@ -370,9 +480,11 @@ function validateRoutes(pageMap: FormattedViteImportMap) {
 
   if (routeConflicts.length > 0) {
     let warning = "[kiru/router]: Route conflicts detected:\n"
-    warning += routeConflicts.map(([route1, route2]) => {
-      return `  - "${route1.filePath}" conflicts with "${route2.filePath}"\n`
-    })
+    warning += routeConflicts
+      .map(([route1, route2]) => {
+        return `  - "${route1.filePath}" conflicts with "${route2.filePath}"\n`
+      })
+      .join("")
     warning += "Routes are ordered by specificity (higher specificity wins)"
     console.warn(warning)
   }

package/src/router/globals.ts

@@ -3,3 +3,7 @@ import type { FileRouterController } from "./fileRouterController"
 export const fileRouterInstance = {
   current: null as FileRouterController | null,
 }
+
+export const fileRouterRoute = {
+  current: null as string | null,
+}

package/src/router/head.ts

@@ -0,0 +1,66 @@
+import { createElement } from "../index.js"
+import { Signal } from "../signals/base.js"
+import { isValidTextChild, isVNode } from "../utils/index.js"
+
+export { Content, Outlet }
+
+/**
+ * Used with SSG. Renders content to the document head via a corresponding `<Head.Outlet>` component placed in your `document.tsx`.
+ * @example
+ * // src/pages/index.tsx
+ * export default function Index() {
+ *   return (
+ *     <div>
+ *       <Head.Content>
+ *         <title>My App - Home</title>
+ *       </Head.Content>
+ *       <h1>Home</h1>
+ *     </div>
+ *   )
+ }
+ */
+function Content({ children }: { children: JSX.Children }) {
+  if ("window" in globalThis) {
+    ;(Array.isArray(children) ? children : [children])
+      .filter(isVNode)
+      .forEach(({ type, props }) => {
+        switch (type) {
+          case "title":
+            const title = (
+              Array.isArray(props.children) ? props.children : [props.children]
+            )
+              .map((c) => (Signal.isSignal(c) ? c.value : c))
+              .filter(isValidTextChild)
+              .join("")
+            return (document.title = title)
+          case "meta":
+            return document
+              .querySelector(`meta[name="${props.name}"]`)
+              ?.setAttribute("content", String(props.content))
+        }
+      })
+    return null
+  }
+  return createElement("kiru-head-content", { children })
+}
+
+/**
+ * Used with SSG. Renders content to the document head from a `<Head>` component in the currently rendered page.
+ * @example
+ * // document.tsx
+ * export default function Document() {
+ *   return (
+ *     <html lang="en">
+ *       <head>
+ *         <meta charset="utf-8" />
+ *         <meta name="viewport" content="width=device-width, initial-scale=1" />
+ *         <Head.Outlet />
+ *       </head>
+ *       <body>{children}</body>
+ *     </html>
+ *   )
+ }
+ */
+function Outlet() {
+  return createElement("kiru-head-outlet")
+}

package/src/router/index.ts

@@ -4,3 +4,10 @@ export { FileRouter, type FileRouterProps } from "./fileRouter.js"
 export * from "./link.js"
 export * from "./pageConfig.js"
 export type * from "./types.js"
+
+import { Content, Outlet } from "./head.js"
+
+export const Head = {
+  Content,
+  Outlet,
+}

package/src/router/pageConfig.ts

@@ -2,8 +2,8 @@ import { __DEV__ } from "../env.js"
 import { fileRouterInstance } from "./globals.js"
 import type { PageConfig } from "./types"
 
-export function definePageConfig<T extends PageConfig>(config: T): T {
-  if (__DEV__) {
+export function definePageConfig<T>(config: PageConfig<T>): PageConfig<T> {
+  if (__DEV__ && "window" in globalThis) {
     const filePath = window.__kiru?.HMRContext?.getCurrentFilePath()
     const fileRouter = fileRouterInstance.current
     if (filePath && fileRouter) {