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

package/src/scheduler.ts

@@ -52,10 +52,27 @@ let postEffects: Array<Function> = []
 let animationFrameHandle = -1
 
 /**
- * Runs a function after any existing work has been completed,
- * or immediately if the scheduler is already idle.
+ * Defers work until the scheduler becomes idle.
+ *
+ * This works in two modes:
+ *  - `await nextIdle()` resolves once idle, allowing async/await usage.
+ *  - `nextIdle(fn)` schedules a callback to run when idle.
+ *
+ * Callbacks are executed before promises resolve,
+ * and multiple calls queue until the scheduler becomes idle.
  */
-export function nextIdle(fn: () => void) {
+export function nextIdle(): Promise<void>
+
+/**
+ * Schedules `fn` to run once the scheduler becomes idle.
+ * If already idle, `fn` executes immediately.
+ */
+export function nextIdle<T extends () => void>(fn: T): void
+
+export function nextIdle(fn?: () => void): void | Promise<void> {
+  if (!fn) {
+    return new Promise<void>(nextIdle)
+  }
   if (isRunningOrQueued) {
     nextIdleEffects.push(fn)
     return

package/src/ssr/server.ts

@@ -20,33 +20,29 @@ d.currentScript.remove()
 </script>
 `.replace(/\s+/g, " ")
 
-export function renderToReadableStream(element: JSX.Element): {
+interface RenderToReadableStreamConfig {
+  /**
+   * Include additional data to stream - must be resolved on the client manually.
+   */
+  data?: Kiru.StatefulPromise<unknown>[]
+}
+
+export function renderToReadableStream(
+  element: JSX.Element,
+  config: RenderToReadableStreamConfig = {}
+): {
   immediate: string
   stream: ReadableStream | null
 } {
-  const streamPromises = new Set<Kiru.StatefulPromise<unknown>>()
-  const dataPromises: Promise<string>[] = []
-  let stream: ReadableStream | null = null
+  const streamData = createStreamDataHandler()
+  if (config.data) {
+    streamData.enqueue(config.data)
+  }
 
   let immediate = ""
-
   const ctx: HeadlessRenderContext = {
     write: (chunk) => (immediate += chunk),
-    onStreamData(data) {
-      for (const promise of data) {
-        if (streamPromises.has(promise)) continue
-        streamPromises.add(promise)
-
-        const dataPromise = promise
-          .then(() => ({ data: promise.value }))
-          .catch(() => ({ error: promise.error?.message }))
-          .then(
-            (value, content = JSON.stringify(value)) =>
-              `<script id="${promise.id}" k-data type="application/json">${content}</script>`
-          )
-        dataPromises.push(dataPromise)
-      }
-    },
+    onStreamData: streamData.enqueue,
   }
 
   const prev = renderMode.current
@@ -54,10 +50,11 @@ export function renderToReadableStream(element: JSX.Element): {
   headlessRender(ctx, Fragment({ children: element }), null, 0)
   renderMode.current = prev
 
-  if (dataPromises.length > 0) {
+  let stream: ReadableStream | null = null
+  if (streamData.chunks.length > 0) {
     stream = new ReadableStream({
       async pull(controller) {
-        for await (const chunk of dataPromises) {
+        for await (const chunk of streamData.chunks) {
           controller.enqueue(chunk)
         }
         controller.enqueue(STREAMED_DATA_SETUP)
@@ -68,3 +65,32 @@ export function renderToReadableStream(element: JSX.Element): {
 
   return { immediate, stream }
 }
+
+interface StreamDataHandler {
+  enqueue: NonNullable<HeadlessRenderContext["onStreamData"]>
+  chunks: Promise<string>[]
+}
+
+function createStreamDataHandler(): StreamDataHandler {
+  const seen = new Set<Kiru.StatefulPromise<unknown>>()
+  const chunks: Promise<string>[] = []
+
+  return {
+    chunks,
+    enqueue: (items) => {
+      for (const item of items) {
+        if (seen.has(item)) continue
+        seen.add(item)
+
+        const chunk = item
+          .then(() => ({ data: item.value }))
+          .catch(() => ({ error: item.error?.message }))
+          .then(
+            (value, content = JSON.stringify(value)) =>
+              `<script id="${item.id}" k-data type="application/json">${content}</script>`
+          )
+        chunks.push(chunk)
+      }
+    },
+  }
+}

package/src/utils/index.ts

@@ -1,6 +1,6 @@
 export * from "./compare.js"
 export * from "./dom.js"
 export * from "./format.js"
+export * from "./generateId.js"
 export * from "./runtime.js"
 export * from "./vdom.js"
-export * from "./generateId.js"

package/src/utils/promise.ts

@@ -1,4 +1,4 @@
-import { $STREAM_DATA } from "../constants.js"
+import { $STREAM_DATA, STREAMED_DATA_EVENT } from "../constants.js"
 
 export interface StreamDataThrowValue {
   [$STREAM_DATA]: {
@@ -24,3 +24,72 @@ export function isStatefulPromise(
 ): thing is Kiru.StatefulPromise<unknown> {
   return thing instanceof Promise && "id" in thing && "state" in thing
 }
+
+export function createStatefulPromise<T, U extends Record<string, unknown>>(
+  id: string,
+  promise: Promise<T>,
+  extra: U = {} as U,
+  _finally: null | (() => void) = null
+): Kiru.StatefulPromise<T> & U {
+  const state: Kiru.PromiseState<T> = { id, state: "pending" }
+  const p = Object.assign(promise, state, extra)
+  p.then(
+    (value) => {
+      p.state = "fulfilled"
+      p.value = value
+    },
+    (error) => {
+      p.state = "rejected"
+      p.error = error instanceof Error ? error : new Error(String(error))
+    }
+  ).finally(_finally)
+
+  return p
+}
+
+interface StreamedPromiseEventDetail<T> {
+  id: string
+  data?: T
+  error?: string
+}
+
+export async function resolveStreamedPromise<T>(
+  id: string,
+  signal?: AbortSignal
+): Promise<T> {
+  const deferralCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
+    (window[STREAMED_DATA_EVENT] ??= new Map())
+
+  const existing = deferralCache.get(id)
+  if (existing) {
+    deferralCache.delete(id)
+
+    const { data, error } = existing
+    if (error) {
+      return Promise.reject(error)
+    }
+    return Promise.resolve(data!)
+  }
+
+  return new Promise<T>((resolve, reject) => {
+    const onDataEvent = (event: Event) => {
+      const { detail } = event as CustomEvent<StreamedPromiseEventDetail<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("aborted")
+    })
+  })
+}