kiru 0.54.0-preview.0 → 0.54.0-preview.1

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

@@ -2,6 +2,7 @@ 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 {
   matchModules,
   matchRoute,
@@ -28,6 +29,8 @@ 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
@@ -73,6 +76,7 @@ export async function initClient(options: InitClientOptions) {
   }
 
   const children = createElement(FileRouter, { config })
+
   const app =
     hydrationMode === "static"
       ? children
@@ -91,7 +95,7 @@ export async function initClient(options: InitClientOptions) {
 async function preparePreloadConfig(
   options: InitClientOptions,
   isStatic404 = false,
-  _isSSR = false
+  isSSR = false
 ): Promise<FileRouterPreloadConfig> {
   let pageProps = {}
   let cacheData: null | { value: unknown } = null
@@ -145,7 +149,7 @@ async function preparePreloadConfig(
       { ...requestContext.current },
       url.pathname
     )
-    if (redirectPath) {
+    if (redirectPath !== null) {
       window.location.href = redirectPath
       // @ts-ignore
       return
@@ -154,6 +158,10 @@ async function preparePreloadConfig(
 
   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]
@@ -172,8 +180,11 @@ 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,
@@ -198,6 +209,7 @@ async function preparePreloadConfig(
     guards: options.guards,
     page: page,
     pageProps: pageProps,
+    pagePropsPromise,
     pageLayouts: layouts,
     params: routeMatch.params,
     query: query,

package/src/router/constants.ts

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