kiru 0.54.0-preview.1 → 0.54.1

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,26 @@
 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>
+  baseUrl: string
+  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 +65,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)
@@ -86,7 +83,7 @@ export async function render(
   const abortController = new AbortController()
 
   if (config.loader) {
-    if (!config.loader.static || __DEV__) {
+    if (config.loader.mode !== "static" || __DEV__) {
       props = { loading: true, data: null, error: null }
     } else {
       const routerState: RouterState = {
@@ -103,10 +100,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 +114,7 @@ export async function render(
         }
       } finally {
         clearTimeout(timeout)
-        ctx.registerStaticProps({ data: props.data, error: props.error })
+        ctx.registerPreloadedPageProps({ data: props.data, error: props.error })
       }
     }
   }
@@ -147,6 +141,7 @@ export async function render(
   const app = createElement(RouterContext.Provider, {
     children: Fragment({ children }),
     value: {
+      baseUrl: ctx.baseUrl,
       state: {
         params,
         query,
@@ -186,7 +181,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,17 +3,14 @@ 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>
-  pagePropsPromise?: Promise<AsyncTaskState<unknown, FileRouterDataLoadError>>
   pageLayouts: DefaultComponentModule[]
   params: RouteParams
   query: RouteQuery
@@ -43,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
@@ -109,40 +98,28 @@ 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>
 } & (
   | {
       /**
-       * Indicates that the page data should only be loaded at build time
+       * The mode to use for the page data loader
+       * @default "client"
+       * @description
+       * - **static**: The page data is loaded at build time and never updated
+       * - **client**: The page data is loaded upon navigation and updated on subsequent navigations
        */
-      static?: false
+      mode?: "client"
       /**
        * Enable transitions when swapping between "load", "error" and "data" states
        */
@@ -162,28 +139,16 @@ export type PageDataLoaderConfig<T = unknown> = {
     }
   | {
       /**
-       * Indicates that the page data should only be loaded at build time
+       * The mode to use for the page data loader
+       * @default "client"
+       * @description
+       * - **static**: The page data is loaded at build time and never updated
+       * - **client**: The page data is loaded upon navigation and updated on subsequent navigations
        */
-      static: true
+      mode: "static"
     }
 )
 
-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
@@ -194,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>

package/src/router/utils/index.ts

@@ -1,27 +1,19 @@
 import { createElement } from "../../element.js"
 import { __DEV__ } from "../../env.js"
-import { resolveNavguard } from "../guard.js"
 import type {
-  DefaultComponentModule,
   FormattedViteImportMap,
-  GuardModule,
   RouteMatch,
   ViteImportMap,
 } from "../types.internal"
-import { OnBeforeEnterHook, OnBeforeLeaveHook } from "../types.js"
 
 export {
   formatViteImportMap,
   matchRoute,
   match404Route,
-  matchModules,
+  matchLayouts,
   normalizePrefixPath,
   parseQuery,
   wrapWithLayouts,
-  runBeforeLeaveHooks,
-  runBeforeEnterHooks,
-  runBeforeEachGuards,
-  runAfterEachGuards,
 }
 
 function formatViteImportMap(
@@ -41,7 +33,7 @@ function formatViteImportMap(
     }
 
     let specificity = 0
-    let k = key.slice(dirIndex + dir.length)
+    let k = baseUrl + key.slice(dirIndex + dir.length)
     while (k.startsWith("/")) {
       k = k.slice(1)
     }
@@ -95,7 +87,7 @@ function formatViteImportMap(
 
     return {
       ...acc,
-      [baseUrl + segments.join("/")]: value,
+      [segments.join("/")]: value,
     }
   }, {})
 }
@@ -185,20 +177,23 @@ function match404Route(
   return null
 }
 
-function matchModules<T = DefaultComponentModule>(
-  modules: FormattedViteImportMap<T>,
+function matchLayouts(
+  layouts: FormattedViteImportMap,
   routeSegments: string[]
 ) {
-  return ["/", ...routeSegments].reduce((acc, _, i) => {
-    const modulePath = "/" + routeSegments.slice(0, i).join("/")
-    const module = modules[modulePath]
+  return ["/", ...routeSegments].reduce(
+    (acc, _, i) => {
+      const layoutPath = routeSegments.slice(0, i).join("/")
+      const layout = layouts[layoutPath]
 
-    if (!module) {
-      return acc
-    }
+      if (!layout) {
+        return acc
+      }
 
-    return [...acc, module]
-  }, [] as FormattedViteImportMap<T>[string][])
+      return [...acc, layout]
+    },
+    [] as FormattedViteImportMap[string][]
+  )
 }
 
 function normalizePrefixPath(path: string) {
@@ -247,61 +242,3 @@ function wrapWithLayouts(
     createElement(page, props)
   )
 }
-
-function runBeforeLeaveHooks(
-  hooks: OnBeforeLeaveHook[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-): false | void {
-  for (const hook of hooks) {
-    const res = hook(context, to, from)
-    if (res === false) {
-      return false
-    }
-  }
-}
-
-async function runBeforeEnterHooks(
-  hooks: OnBeforeEnterHook[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-) {
-  for (const hook of hooks) {
-    const result = await hook(context, to, from)
-    if (typeof result === "string") {
-      return result
-    }
-  }
-
-  return null
-}
-
-async function runBeforeEachGuards(
-  guardModules: GuardModule[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-): Promise<string | null> {
-  const beforeHooks = guardModules
-    .map((guardModule) => resolveNavguard(guardModule)?.beforeEach)
-    .filter((x) => typeof x === "function")
-
-  return runBeforeEnterHooks(beforeHooks, context, to, from)
-}
-
-async function runAfterEachGuards(
-  guardModules: GuardModule[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-): Promise<void> {
-  const afterHooks = guardModules
-    .map((guardModule) => resolveNavguard(guardModule)?.afterEach)
-    .filter((x) => typeof x === "function")
-
-  for (const hook of afterHooks) {
-    await hook(context, to, from)
-  }
-}