kiru 0.53.0 → 0.54.0-preview.1

package/dist/utils/runtime.js

@@ -39,7 +39,7 @@ function setRef(ref, value) {
     ref.current = value;
 }
 /**
- * Returns false if called during "stream" or "string" render modes.
+ * Returns true if called during 'dom' or 'hydrate' mode.
  */
 function sideEffectsEnabled() {
     return renderMode.current === "dom" || renderMode.current === "hydrate";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kiru",
-  "version": "0.53.0",
+  "version": "0.54.0-preview.1",
   "description": "A batteries-included, easy-to-use rendering library with a tiny footprint",
   "main": "dist/index.js",
   "type": "module",
@@ -34,9 +34,13 @@
       "types": "./dist/router/client/index.d.ts",
       "default": "./dist/router/client/index.js"
     },
-    "./router/server": {
-      "types": "./dist/router/server/index.d.ts",
-      "default": "./dist/router/server/index.js"
+    "./router/ssg": {
+      "types": "./dist/router/ssg/index.d.ts",
+      "default": "./dist/router/ssg/index.js"
+    },
+    "./router/ssr": {
+      "types": "./dist/router/ssr/index.d.ts",
+      "default": "./dist/router/ssr/index.js"
     },
     "./router/utils": {
       "types": "./dist/router/utils/index.d.ts",

package/src/components/derive.ts

@@ -7,6 +7,8 @@ import { sideEffectsEnabled } from "../utils/index.js"
 import type { RecordHas } from "../types.utils"
 import { isStatefulPromise, StreamDataThrowValue } from "../utils/promise.js"
 
+const $NO_VALUE = Symbol("no value")
+
 export type Derivable =
   | Kiru.Signal<unknown>
   | Kiru.StatefulPromise<unknown>
@@ -36,7 +38,7 @@ export type DeriveFallbackMode = "swr" | "fallback"
 
 export interface DeriveProps<
   T extends Derivable,
-  Mode extends DeriveFallbackMode = "fallback"
+  Mode extends DeriveFallbackMode = "swr"
 > {
   from: T
   mode?: Mode
@@ -65,7 +67,7 @@ export function Derive<
   U extends DeriveFallbackMode = "swr"
 >(props: DeriveProps<T, U>) {
   const { from, children, fallback, mode } = props
-  const prevSuccess = useRef<UnwrapDerive<T> | null>(null)
+  const prevSuccess = useRef<UnwrapDerive<T> | typeof $NO_VALUE>($NO_VALUE)
 
   const promises = new Set<Kiru.StatefulPromise<any>>()
   let value: UnwrapDerive<T>
@@ -106,7 +108,7 @@ export function Derive<
       const nodeRef = node.current!
       Promise.allSettled(promises).then(() => requestUpdate(nodeRef))
 
-      if (mode !== "fallback" && prevSuccess.current) {
+      if (mode !== "fallback" && prevSuccess.current !== $NO_VALUE) {
         return (children as ChildFnWithStale<UnwrapDerive<T>>)(
           prevSuccess.current,
           true

package/src/dom.ts

@@ -699,7 +699,11 @@ function commitDeletion(vNode: VNode) {
 
     subs?.forEach((unsub) => unsub())
     if (cleanups) Object.values(cleanups).forEach((c) => c())
-    while (hooks?.length) hooks.pop()!.cleanup?.()
+    while (hooks?.length) {
+      try {
+        hooks.pop()!.cleanup?.()
+      } catch {}
+    }
 
     if (__DEV__) {
       window.__kiru.profilingContext?.emit("removeNode", ctx)

package/src/globals.ts

@@ -13,5 +13,5 @@ const renderMode = {
 }
 
 const hydrationMode = {
-  current: "dynamic" as "static" | "dynamic",
+  current: "dynamic" as Kiru.HydrationMode,
 }

package/src/hooks/usePromise.ts

@@ -1,16 +1,21 @@
-import { STREAMED_DATA_EVENT } from "../constants.js"
 import { __DEV__ } from "../env.js"
 import { hydrationMode, renderMode } from "../globals.js"
 import { Signal, useSignal } from "../signals/base.js"
-import { cleanupHook, depsRequireChange, useHook } from "./utils.js"
+import { depsRequireChange, useHook } from "./utils.js"
 import { useId } from "./useId.js"
+import {
+  createStatefulPromise,
+  resolveStreamedPromise,
+} from "../utils/promise.js"
 
 export { usePromise }
 
 const nodeToPromiseIndex = new WeakMap<Kiru.VNode, number>()
 
+type PromiseMutator = (signal: AbortSignal) => unknown | Promise<unknown>
+
 type UsePromiseResult<T> = Kiru.StatefulPromise<T> & {
-  refresh: () => void
+  refresh: (mutator?: PromiseMutator) => void
   isPending: Signal<boolean>
 }
 
@@ -18,7 +23,7 @@ function usePromise<T>(
   callback: (signal: AbortSignal) => Promise<T>,
   deps: unknown[]
 ): UsePromiseResult<T> {
-  const id = useId()
+  const vNodeId = useId()
   const isPending = useSignal(true)
 
   return useHook(
@@ -27,24 +32,54 @@ function usePromise<T>(
       promise: UsePromiseResult<T>
       abortController?: AbortController
       deps?: unknown[]
+      refresh: (mutator?: PromiseMutator) => void
+      promiseId: string
+      epoch: number
     },
     ({ hook, isInit, vNode, update }) => {
-      if (isInit || depsRequireChange(deps, hook.deps)) {
-        isPending.value = true
-        hook.deps = deps
-        cleanupHook(hook)
-
-        const controller = (hook.abortController = new AbortController())
-        hook.cleanup = () => controller.abort()
+      if (isInit) {
+        hook.epoch = 0
+        hook.cleanup = () => hook.abortController?.abort("aborted")
 
         const index = nodeToPromiseIndex.get(vNode) ?? 0
         nodeToPromiseIndex.set(vNode, index + 1)
+        const promiseId = (hook.promiseId = `${vNodeId}:data:${index}`)
+
+        const refresh = (hook.refresh = (mutator?: PromiseMutator) => {
+          if (typeof mutator !== "function") {
+            delete hook.deps
+            return update()
+          }
+
+          hook.cleanup!()
+          const signal = (hook.abortController = new AbortController()).signal
+          const promise = Promise.try(mutator, signal).then(() =>
+            callback(signal)
+          )
+          const epoch = ++hook.epoch
+          hook.promise = createStatefulPromise(
+            promiseId,
+            promise,
+            { isPending, refresh },
+            () => epoch === hook.epoch && (isPending.value = false)
+          )
+
+          isPending.value = true
+          update()
+        })
+      }
 
-        const promiseId = `${id}:data:${index}`
+      if (isInit || depsRequireChange(deps, hook.deps)) {
+        isPending.value = true
+        hook.deps = deps
+        hook.cleanup!()
+
+        const signal = (hook.abortController = new AbortController()).signal
+        const { promiseId, refresh } = hook
 
         let promise: Promise<T>
         if (renderMode.current === "string") {
-          // if we're rendering to a string, there's no need to fire the callback
+          // if we're rendering to string, there's no need to fire the callback
           promise = Promise.resolve() as Promise<T>
         } else if (
           renderMode.current === "hydrate" &&
@@ -52,76 +87,21 @@ function usePromise<T>(
         ) {
           // if we're hydrating and the hydration mode is not static,
           // we need to resolve the promise from cache/event
-          promise = resolveDeferredPromise<T>(promiseId, controller.signal)
+          promise = resolveStreamedPromise<T>(promiseId, signal)
         } else {
           // dom / stream / (hydrate + static)
-          promise = callback(controller.signal)
+          promise = callback(signal)
         }
 
-        const state: Kiru.PromiseState<T> = { id: promiseId, state: "pending" }
-        const statefulPromise: Kiru.StatefulPromise<T> = (hook.promise =
-          Object.assign(promise, state, {
-            isPending,
-            refresh: () => {
-              hook.deps = undefined
-              update()
-            },
-          }))
-
-        statefulPromise
-          .then((value) => {
-            statefulPromise.state = "fulfilled"
-            statefulPromise.value = value
-            isPending.value = false
-          })
-          .catch((error) => {
-            statefulPromise.state = "rejected"
-            statefulPromise.error =
-              error instanceof Error ? error : new Error(error)
-          })
+        const epoch = ++hook.epoch
+        hook.promise = createStatefulPromise(
+          promiseId,
+          promise,
+          { isPending, refresh },
+          () => epoch === hook.epoch && (isPending.value = false)
+        )
       }
       return hook.promise
     }
   )
 }
-
-interface DeferredPromiseEventDetail<T> {
-  id: string
-  data?: T
-  error?: string
-}
-
-function resolveDeferredPromise<T>(
-  id: string,
-  signal: AbortSignal
-): Promise<T> {
-  return new Promise<T>((resolve, reject) => {
-    const deferralCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
-      (window[STREAMED_DATA_EVENT] ??= new Map())
-
-    const existing = deferralCache.get(id)
-    if (existing) {
-      const { data, error } = existing
-      deferralCache.delete(id)
-      if (error) return reject(error)
-      return resolve(data!)
-    }
-
-    const onDataEvent = (event: Event) => {
-      const { detail } = event as CustomEvent<DeferredPromiseEventDetail<T>>
-      if (detail.id === id) {
-        deferralCache.delete(id)
-        window.removeEventListener(STREAMED_DATA_EVENT, onDataEvent)
-        const { data, error } = detail
-        if (error) return reject(error)
-        resolve(data!)
-      }
-    }
-
-    window.addEventListener(STREAMED_DATA_EVENT, onDataEvent)
-    signal.addEventListener("abort", () => {
-      window.removeEventListener(STREAMED_DATA_EVENT, onDataEvent)
-      reject()
-    })
-  })
-}

package/src/index.ts

@@ -16,5 +16,5 @@ export * from "./store.js"
 
 // @ts-ignore
 if ("window" in globalThis && !globalThis.__KIRU_DEVTOOLS__) {
-  globalThis.window.__kiru ??= createKiruGlobalContext()
+  window.__kiru ??= createKiruGlobalContext()
 }

package/src/router/client/index.ts

@@ -1,45 +1,91 @@
-// initClient({ dir, baseUrl, pages, layouts })
-
 import { createElement } from "../../element.js"
 import { hydrate } from "../../ssr/client.js"
 import { FileRouter } from "../fileRouter.js"
+import { toArray } from "../../utils/format.js"
+import { resolveStreamedPromise } from "../../utils/promise.js"
 import {
-  matchLayouts,
+  matchModules,
   matchRoute,
   match404Route,
   parseQuery,
+  runBeforeEachGuards,
+  runAfterEachGuards,
+  runBeforeEnterHooks,
 } from "../utils/index.js"
-import type { FormattedViteImportMap, PageModule } from "../types.internal"
+import type {
+  FormattedViteImportMap,
+  GuardModule,
+  PageModule,
+} from "../types.internal"
 import type { FileRouterConfig, FileRouterPreloadConfig } from "../types"
-import { fileRouterInstance, fileRouterRoute, routerCache } from "../globals.js"
+import {
+  fileRouterInstance,
+  fileRouterRoute,
+  requestContext,
+  routerCache,
+} from "../globals.js"
 import { FileRouterController } from "../fileRouterController.js"
 import { FileRouterDataLoadError } from "../errors.js"
 import { __DEV__ } from "../../env.js"
 import { RouterCache } from "../cache.js"
+import { RequestContext } from "../context.js"
+import { PAGE_DATA_PROMISE_ID } from "../constants.js"
+import { AsyncTaskState } from "../../types.js"
 
 interface InitClientOptions {
   dir: string
   baseUrl: string
-  pages: FormattedViteImportMap
+  pages: FormattedViteImportMap<PageModule>
   layouts: FormattedViteImportMap
+  guards?: FormattedViteImportMap<GuardModule>
   transition: boolean
+  hydrationMode?: Kiru.HydrationMode
 }
 
 export async function initClient(options: InitClientOptions) {
   routerCache.current = new RouterCache()
-  const { dir, baseUrl, pages, layouts, transition } = options
+  const {
+    dir,
+    baseUrl,
+    pages,
+    layouts,
+    guards,
+    transition,
+    hydrationMode = "static",
+  } = options
 
+  try {
+    requestContext.current = JSON.parse(
+      document.querySelector("[k-request-context]")!.innerHTML
+    )
+  } catch {}
+
+  const preloaded = await preparePreloadConfig(
+    options,
+    false,
+    hydrationMode === "dynamic"
+  )
   const config: FileRouterConfig = {
     dir,
     baseUrl,
     pages,
     layouts,
+    guards,
     transition,
-    preloaded: await preparePreloadConfig(options),
+    preloaded,
   }
 
-  const app = createElement(FileRouter, { config })
-  hydrate(app, document.body, { hydrationMode: "static" })
+  const children = createElement(FileRouter, { config })
+
+  const app =
+    hydrationMode === "static"
+      ? children
+      : createElement(RequestContext.Provider, {
+          value: requestContext.current,
+          children,
+        })
+
+  hydrate(app, document.body, { hydrationMode })
 
   if (__DEV__) {
     onLoadedDev()
@@ -48,7 +94,8 @@ export async function initClient(options: InitClientOptions) {
 
 async function preparePreloadConfig(
   options: InitClientOptions,
-  isStatic404 = false
+  isStatic404 = false,
+  isSSR = false
 ): Promise<FileRouterPreloadConfig> {
   let pageProps = {}
   let cacheData: null | { value: unknown } = null
@@ -68,7 +115,25 @@ async function preparePreloadConfig(
     throw new Error(`No route defined (path: ${url.pathname}).`)
   }
 
-  const layoutEntries = matchLayouts(options.layouts, routeMatch.routeSegments)
+  const layoutEntries = matchModules(options.layouts, routeMatch.routeSegments)
+
+  // Load and run guards before loading page
+  // if SSR, do we even need to do this?
+  let guardModules: GuardModule[] = []
+  if (options.guards) {
+    const guardEntries = matchModules(options.guards, routeMatch.routeSegments)
+    guardModules = await Promise.all(guardEntries.map((entry) => entry.load()))
+
+    const redirectPath = await runBeforeEachGuards(
+      guardModules,
+      { ...requestContext.current },
+      url.pathname
+    )
+    if (redirectPath !== null) {
+      window.location.href = redirectPath
+    }
+  }
+
   fileRouterInstance.current = new FileRouterController()
   fileRouterRoute.current = routeMatch.route
   const [page, ...layouts] = await Promise.all([
@@ -77,6 +142,26 @@ async function preparePreloadConfig(
   ])
   fileRouterRoute.current = null
 
+  const onBeforeEnter = page.config?.hooks?.onBeforeEnter
+  if (onBeforeEnter) {
+    const redirectPath = await runBeforeEnterHooks(
+      toArray(onBeforeEnter),
+      { ...requestContext.current },
+      url.pathname
+    )
+    if (redirectPath !== null) {
+      window.location.href = redirectPath
+      // @ts-ignore
+      return
+    }
+  }
+
+  const query = parseQuery(window.location.search)
+
+  let pagePropsPromise:
+    | Promise<AsyncTaskState<unknown, FileRouterDataLoadError>>
+    | undefined
+
   // Check if page has static props pre-loaded at build time
   if (page.__KIRU_STATIC_PROPS__) {
     const staticProps = page.__KIRU_STATIC_PROPS__[window.location.pathname]
@@ -95,26 +180,39 @@ async function preparePreloadConfig(
     pageProps = { loading: true, data: null, error: null }
 
     const loader = page.config.loader
-    // Check cache first if caching is enabled
-    if (loader.mode !== "static" && loader.cache) {
+    if (isSSR) {
+      pagePropsPromise = resolveStreamedPromise(PAGE_DATA_PROMISE_ID)
+        .then((data) => ({ data, error: null, loading: false } as const))
+        .catch((error) => ({ data: null, error, loading: false } as const))
+    } else if (!loader.static && loader.cache) {
       const cacheKey = {
         path: window.location.pathname,
         params: routeMatch.params,
-        query: parseQuery(url.search),
+        query,
       }
 
       cacheData = routerCache.current!.get(cacheKey, loader.cache)
     }
   }
 
+  window.__kiru.on("mount", () => {
+    runAfterEachGuards(
+      guardModules,
+      { ...requestContext.current },
+      url.pathname
+    )
+  })
+
   return {
     pages: options.pages,
     layouts: options.layouts,
+    guards: options.guards,
     page: page,
     pageProps: pageProps,
+    pagePropsPromise,
     pageLayouts: layouts,
     params: routeMatch.params,
-    query: parseQuery(url.search),
+    query: query,
     route: routeMatch.route,
     cacheData,
   }

package/src/router/constants.ts

@@ -0,0 +1 @@
+export const PAGE_DATA_PROMISE_ID = "__KIRU_PAGE_DATA__"

package/src/router/context.ts

@@ -1,6 +1,6 @@
+import { useContext } from "../hooks/index.js"
 import { createContext } from "../context.js"
 import { __DEV__ } from "../env.js"
-import { useContext } from "../hooks/index.js"
 import type { RouteQuery, RouterState } from "./types.js"
 
 export interface ReloadOptions {
@@ -74,3 +74,9 @@ if (__DEV__) {
 export function useFileRouter(): FileRouterContextType {
   return useContext(RouterContext)
 }
+
+export const RequestContext = createContext<Kiru.RequestContext>({})
+
+export function useRequestContext() {
+  return useContext(RequestContext)
+}