kiru 0.52.4 → 0.54.0-preview.0

package/src/hooks/usePromise.ts

@@ -1,43 +1,36 @@
-import { PREFETCHED_DATA_EVENT } from "../constants.js"
+import { STREAMED_DATA_EVENT } from "../constants.js"
 import { __DEV__ } from "../env.js"
 import { hydrationMode, renderMode } from "../globals.js"
-import { requestUpdate } from "../scheduler.js"
 import { Signal, useSignal } from "../signals/base.js"
 import { cleanupHook, depsRequireChange, useHook } from "./utils.js"
 import { useId } from "./useId.js"
 
 export { usePromise }
-export type { UsePromiseCallbackContext, UsePromiseState }
 
 const nodeToPromiseIndex = new WeakMap<Kiru.VNode, number>()
 
-interface UsePromiseCallbackContext {
-  signal: AbortSignal
-}
-
-interface UsePromiseState<T> {
-  data: Kiru.StatefulPromise<T>
+type UsePromiseResult<T> = Kiru.StatefulPromise<T> & {
   refresh: () => void
-  pending: Signal<boolean>
+  isPending: Signal<boolean>
 }
 
 function usePromise<T>(
-  callback: (ctx: UsePromiseCallbackContext) => Promise<T>,
+  callback: (signal: AbortSignal) => Promise<T>,
   deps: unknown[]
-): UsePromiseState<T> {
+): UsePromiseResult<T> {
   const id = useId()
-  const pending = useSignal(true)
+  const isPending = useSignal(true)
 
   return useHook(
     "usePromise",
     {} as {
-      promise: Kiru.StatefulPromise<T>
+      promise: UsePromiseResult<T>
       abortController?: AbortController
       deps?: unknown[]
     },
-    ({ hook, isInit, vNode }) => {
+    ({ hook, isInit, vNode, update }) => {
       if (isInit || depsRequireChange(deps, hook.deps)) {
-        pending.value = true
+        isPending.value = true
         hook.deps = deps
         cleanupHook(hook)
 
@@ -59,77 +52,75 @@ function usePromise<T>(
         ) {
           // if we're hydrating and the hydration mode is not static,
           // we need to resolve the promise from cache/event
-          promise = resolvePrefetchedPromise<T>(promiseId, controller.signal)
+          promise = resolveDeferredPromise<T>(promiseId, controller.signal)
         } else {
           // dom / stream / (hydrate + static)
-          promise = callback({ signal: controller.signal })
+          promise = callback(controller.signal)
         }
 
         const state: Kiru.PromiseState<T> = { id: promiseId, state: "pending" }
-        const statefulPromise = (hook.promise = Object.assign(promise, state))
+        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)
           })
-          .finally(() => {
-            pending.value = false
-          })
-      }
-      return {
-        data: hook.promise,
-        refresh: () => {
-          hook.deps = undefined
-          requestUpdate(vNode)
-        },
-        pending,
       }
+      return hook.promise
     }
   )
 }
 
-interface PrefetchedPromiseEventDetail<T> {
+interface DeferredPromiseEventDetail<T> {
   id: string
   data?: T
   error?: string
 }
 
-function resolvePrefetchedPromise<T>(
+function resolveDeferredPromise<T>(
   id: string,
   signal: AbortSignal
 ): Promise<T> {
   return new Promise<T>((resolve, reject) => {
-    const prefetchCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
-      (window[PREFETCHED_DATA_EVENT] ??= new Map())
+    const deferralCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
+      (window[STREAMED_DATA_EVENT] ??= new Map())
 
-    const existing = prefetchCache.get(id)
+    const existing = deferralCache.get(id)
     if (existing) {
       const { data, error } = existing
-      prefetchCache.delete(id)
+      deferralCache.delete(id)
       if (error) return reject(error)
       return resolve(data!)
     }
 
     const onDataEvent = (event: Event) => {
-      const { detail } = event as CustomEvent<PrefetchedPromiseEventDetail<T>>
+      const { detail } = event as CustomEvent<DeferredPromiseEventDetail<T>>
       if (detail.id === id) {
-        prefetchCache.delete(id)
-        window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
+        deferralCache.delete(id)
+        window.removeEventListener(STREAMED_DATA_EVENT, onDataEvent)
         const { data, error } = detail
         if (error) return reject(error)
         resolve(data!)
       }
     }
 
-    window.addEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
+    window.addEventListener(STREAMED_DATA_EVENT, onDataEvent)
     signal.addEventListener("abort", () => {
-      window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
+      window.removeEventListener(STREAMED_DATA_EVENT, onDataEvent)
       reject()
     })
   })

package/src/hooks/useRef.ts

@@ -8,9 +8,9 @@ import { useHook } from "./utils.js"
  *
  * @see https://kirujs.dev/docs/hooks/useRef
  */
-export function useRef<T>(initialValue: T): Kiru.MutableRefObject<T>
+export function useRef<T>(initialValue: T): Kiru.RefObject<T>
 export function useRef<T>(initialValue: T | null): Kiru.RefObject<T>
-export function useRef<T = undefined>(): Kiru.MutableRefObject<T | undefined>
+export function useRef<T = undefined>(): Kiru.RefObject<T | undefined>
 export function useRef<T>(initialValue?: T | null) {
   if (!sideEffectsEnabled()) return { current: initialValue }
   return useHook(

package/src/reconciler.ts

@@ -1,19 +1,30 @@
-import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
+import {
+  $FRAGMENT,
+  $MEMO,
+  FLAG_MEMO,
+  FLAG_PLACEMENT,
+  FLAG_UPDATE,
+} from "./constants.js"
 import {
   getVNodeAppContext,
+  isElement,
   isValidTextChild,
-  isVNode,
   latest,
 } from "./utils/index.js"
 import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
-import { createElement, Fragment } from "./element.js"
 import type { AppContext } from "./appContext.js"
+import { isMemoFn } from "./components/memo.js"
+import { createVNode as createBaseVNode } from "./vNode.js"
 
 type VNode = Kiru.VNode
+type KElement = Kiru.Element
 let appCtx: AppContext
 
-export function reconcileChildren(parent: VNode, children: unknown) {
+export function reconcileChildren(
+  parent: VNode,
+  children: unknown
+): VNode | null {
   if (__DEV__) {
     appCtx = getVNodeAppContext(parent)!
   }
@@ -30,7 +41,7 @@ export function reconcileChildren(parent: VNode, children: unknown) {
   return reconcileSingleChild(parent, children)
 }
 
-function reconcileSingleChild(parent: VNode, child: unknown) {
+function reconcileSingleChild(parent: VNode, child: unknown): VNode | null {
   const oldChild = parent.child
   if (oldChild === null) {
     return createChild(parent, child)
@@ -52,9 +63,9 @@ function reconcileSingleChild(parent: VNode, child: unknown) {
     if (newNode !== null) {
       const prev = newNode.prev
       if (prev !== null) {
-        const key = prev.props.key
+        const key = prev.key
         // node persisted, remove it from the list so it doesn't get deleted
-        existingChildren.delete(key === undefined ? prev.index : key)
+        existingChildren.delete(key === null ? prev.index : key)
       }
       placeChild(newNode, 0, 0)
     }
@@ -134,9 +145,9 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
     if (newNode !== null) {
       const prev = newNode.prev
       if (prev !== null) {
-        const key = prev.props.key
+        const key = prev.key
         // node persisted, remove it from the list so it doesn't get deleted
-        existingChildren.delete(key === undefined ? prev.index : key)
+        existingChildren.delete(key === null ? prev.index : key)
       }
       lastPlacedIndex = placeChild(newNode, lastPlacedIndex, newIdx)
       if (prevNewChild === null) {
@@ -152,11 +163,15 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
   return resultingChild
 }
 
-function updateSlot(parent: VNode, oldChild: VNode | null, child: unknown) {
+function updateSlot(
+  parent: VNode,
+  oldChild: VNode | null,
+  child: unknown
+): VNode | null {
   // Update the node if the keys match, otherwise return null.
-  const key = oldChild?.props.key
+  const key = oldChild === null ? null : oldChild.key
   if (isValidTextChild(child)) {
-    if (key !== undefined) return null
+    if (key !== null) return null
     if (
       oldChild?.type === "#text" &&
       Signal.isSignal(oldChild.props.nodeValue)
@@ -169,12 +184,12 @@ function updateSlot(parent: VNode, oldChild: VNode | null, child: unknown) {
     if (!!oldChild && oldChild.props.nodeValue !== child) return null
     return updateTextNode(parent, oldChild, child)
   }
-  if (isVNode(child)) {
-    if (child.props.key !== key) return null
+  if (isElement(child)) {
+    if (child.key !== key) return null
     return updateNode(parent, oldChild, child)
   }
   if (Array.isArray(child)) {
-    if (key !== undefined) return null
+    if (key !== null) return null
     if (__DEV__) {
       markListChild(child)
     }
@@ -187,14 +202,9 @@ function updateTextNode(
   parent: VNode,
   oldChild: VNode | null,
   content: string | Signal<JSX.PrimitiveChild>
-) {
+): VNode {
   if (oldChild === null || oldChild.type !== "#text") {
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const newChild = createElement("#text", { nodeValue: content })
-    setParent(newChild, parent)
-    return newChild
+    return createVNode(parent, "#text", { nodeValue: content })
   }
 
   if (__DEV__) {
@@ -209,44 +219,38 @@ function updateTextNode(
   return oldChild
 }
 
-function updateNode(parent: VNode, oldChild: VNode | null, newChild: VNode) {
-  let { type: nodeType, props: newProps } = newChild
+function updateNode(parent: VNode, oldChild: VNode | null, newChild: KElement) {
+  let { type, props, key } = newChild
   if (__DEV__) {
-    if (typeof nodeType === "function") {
-      nodeType = latest(nodeType)
+    if (typeof type === "function") {
+      type = latest(type)
     }
   }
-  if (nodeType === $FRAGMENT) {
+  if (type === $FRAGMENT) {
     return updateFragment(
       parent,
       oldChild,
-      (newProps.children as VNode[]) || [],
-      newProps
+      (props.children as VNode[]) || [],
+      props
     )
   }
-  if (oldChild?.type === nodeType) {
+  if (oldChild?.type === type) {
     if (__DEV__) {
       dev_emitUpdateNode()
     }
     oldChild.index = 0
     oldChild.sibling = null
-    if (typeof nodeType === "string") {
-      if (propsChanged(oldChild.props, newProps)) {
+    if (typeof type === "string") {
+      if (propsChanged(oldChild.props, props)) {
         oldChild.flags |= FLAG_UPDATE
       }
     } else {
       oldChild.flags |= FLAG_UPDATE
     }
-    oldChild.props = newProps
-    oldChild.memoizedProps = newChild.memoizedProps
+    oldChild.props = props
     return oldChild
   }
-  if (__DEV__) {
-    dev_emitCreateNode()
-  }
-  const created = createElement(nodeType, newProps)
-  setParent(created, parent)
-  return created
+  return createVNode(parent, type, props, key)
 }
 
 function updateFragment(
@@ -256,12 +260,7 @@ function updateFragment(
   newProps = {}
 ) {
   if (oldChild === null || oldChild.type !== $FRAGMENT) {
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const el = createElement($FRAGMENT, { children, ...newProps })
-    setParent(el, parent)
-    return el
+    return createVNode(parent, $FRAGMENT, { children, ...newProps })
   }
   if (__DEV__) {
     dev_emitUpdateNode()
@@ -274,45 +273,22 @@ function updateFragment(
 
 function createChild(parent: VNode, child: unknown): VNode | null {
   if (isValidTextChild(child)) {
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const el = createElement("#text", {
-      nodeValue: "" + child,
-    })
-    setParent(el, parent)
-    return el
+    return createVNode(parent, "#text", { nodeValue: "" + child })
   }
 
   if (Signal.isSignal(child)) {
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const el = createElement("#text", {
-      nodeValue: child,
-    })
-    setParent(el, parent)
-    return el
+    return createVNode(parent, "#text", { nodeValue: child })
   }
 
-  if (isVNode(child)) {
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const newNode = createElement(child.type, child.props)
-    setParent(newNode, parent)
-    newNode.flags |= FLAG_PLACEMENT
-    return newNode
+  if (isElement(child)) {
+    return createVNode(parent, child.type, child.props, child.key)
   }
 
   if (Array.isArray(child)) {
     if (__DEV__) {
-      dev_emitCreateNode()
       markListChild(child)
     }
-    const el = Fragment({ children: child })
-    setParent(el, parent)
-    return el
+    return createVNode(parent, $FRAGMENT, { children: child })
   }
 
   return null
@@ -360,47 +336,30 @@ function updateFromMap(
       }
     }
 
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const newChild = createElement("#text", {
-      nodeValue: child,
-    })
-    setParent(newChild, parent)
-    newChild.flags |= FLAG_PLACEMENT
-    newChild.index = index
-    return newChild
-  }
-
-  if (isVNode(child)) {
-    const { type, props: newProps } = child
-    const key = newProps.key
-    const oldChild = existingChildren.get(key === undefined ? index : key)
+    return createVNode(parent, "#text", { nodeValue: child }, null, index)
+  }
+
+  if (isElement(child)) {
+    const { type, props, key } = child
+    const oldChild = existingChildren.get(key === null ? index : key)
     if (oldChild?.type === type) {
       if (__DEV__) {
         dev_emitUpdateNode()
       }
       if (typeof type === "string") {
-        if (propsChanged(oldChild.props, newProps)) {
+        if (propsChanged(oldChild.props, props)) {
           oldChild.flags |= FLAG_UPDATE
         }
       } else {
         oldChild.flags |= FLAG_UPDATE
       }
-      oldChild.props = newProps
+      oldChild.props = props
       oldChild.sibling = null
       oldChild.index = index
       return oldChild
     }
 
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const newChild = createElement(child.type, child.props)
-    setParent(newChild, parent)
-    newChild.flags |= FLAG_PLACEMENT
-    newChild.index = index
-    return newChild
+    return createVNode(parent, type, props, key, index)
   }
 
   if (Array.isArray(child)) {
@@ -417,14 +376,7 @@ function updateFromMap(
       return oldChild
     }
 
-    if (__DEV__) {
-      dev_emitCreateNode()
-    }
-    const newChild = Fragment({ children: child })
-    setParent(newChild, parent)
-    newChild.flags |= FLAG_PLACEMENT
-    newChild.index = index
-    return newChild
+    return createVNode(parent, $FRAGMENT, { children: child }, null, index)
   }
 
   return null
@@ -441,21 +393,11 @@ function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
   return false
 }
 
-function setParent(child: VNode, parent: VNode) {
-  child.parent = parent
-  child.depth = parent.depth + 1
-}
-
 function dev_emitUpdateNode() {
   if (!("window" in globalThis)) return
   window.__kiru.profilingContext?.emit("updateNode", appCtx)
 }
 
-function dev_emitCreateNode() {
-  if (!("window" in globalThis)) return
-  window.__kiru.profilingContext?.emit("createNode", appCtx)
-}
-
 const $LIST_CHILD = Symbol("kiru:marked-list-child")
 function markListChild(children: unknown[]) {
   Object.assign(children, { [$LIST_CHILD]: true })
@@ -464,8 +406,8 @@ function markListChild(children: unknown[]) {
 function mapRemainingChildren(child: VNode | null) {
   const map: Map<JSX.ElementKey, VNode> = new Map()
   while (child) {
-    const key = child.props.key
-    map.set(key === undefined ? child.index : key, child)
+    const key = child.key
+    map.set(key === null ? child.index : key, child)
     child = child.sibling
   }
   return map
@@ -490,8 +432,8 @@ function checkForDuplicateKeys(parent: VNode, children: unknown[]) {
   const keys = new Set<string>()
   let warned = false
   for (const child of children) {
-    if (!isVNode(child)) continue
-    const key = child.props.key
+    if (!isElement(child)) continue
+    const key = child.key
     if (typeof key === "string") {
       if (!warned && keys.has(key)) {
         const fn = getNearestParentFcTag(parent)
@@ -509,9 +451,8 @@ function checkForMissingKeys(parent: VNode, children: unknown[]) {
   let hasKey = false
   let hasMissingKey = false
   for (const child of children) {
-    if (!isVNode(child)) continue
-    const key = child.props.key
-    if (typeof key === "string") {
+    if (!isElement(child)) continue
+    if (typeof child.key === "string") {
       hasKey = true
     } else {
       hasMissingKey = true
@@ -545,3 +486,24 @@ function getNearestParentFcTag(vNode: VNode) {
   parentFcTagLookups.set(vNode, tag)
   return tag
 }
+
+function createVNode(
+  parent: VNode,
+  type: VNode["type"],
+  props: VNode["props"],
+  key: VNode["key"] = null,
+  index = 0
+): VNode {
+  const node = createBaseVNode(type, parent, props, key, index)
+  node.flags |= FLAG_PLACEMENT
+
+  if (typeof type === "function" && isMemoFn(type)) {
+    node.flags |= FLAG_MEMO
+    node.arePropsEqual = type[$MEMO].arePropsEqual
+  }
+
+  if (__DEV__ && "window" in globalThis) {
+    window.__kiru.profilingContext?.emit("createNode", appCtx)
+  }
+  return node
+}

package/src/recursiveRender.ts

@@ -7,19 +7,21 @@ import {
   assertValidElementProps,
   isPrimitiveChild,
 } from "./utils/index.js"
+import { isStreamDataThrowValue } from "./utils/promise.js"
 import { Signal } from "./signals/base.js"
-import { $ERROR_BOUNDARY, voidElements, $SUSPENSE_THROW } from "./constants.js"
+import { $ERROR_BOUNDARY, voidElements, $STREAM_DATA } from "./constants.js"
 import { __DEV__ } from "./env.js"
-import { isSuspenseThrowValue } from "./components/suspense.js"
 import type { ErrorBoundaryNode } from "./types.utils"
 
-export interface RecursiveRenderContext {
+export interface HeadlessRenderContext {
   write(chunk: string): void
-  onPending?: (data: Kiru.StatefulPromise<unknown>[]) => void
+  onStreamData?: (data: Kiru.StatefulPromise<unknown>[]) => void
 }
 
-export function recursiveRender(
-  ctx: RecursiveRenderContext,
+export { render as headlessRender }
+
+function render(
+  ctx: HeadlessRenderContext,
   el: unknown,
   parent: Kiru.VNode | null,
   idx: number
@@ -34,7 +36,7 @@ export function recursiveRender(
     return ctx.write(el.toString())
   }
   if (el instanceof Array) {
-    return el.forEach((c, i) => recursiveRender(ctx, c, parent, i))
+    return el.forEach((c, i) => render(ctx, c, parent, i))
   }
   if (Signal.isSignal(el)) {
     const value = el.peek()
@@ -65,22 +67,22 @@ export function recursiveRender(
   if (isExoticType(type)) {
     if (type === $ERROR_BOUNDARY) {
       let boundaryBuffer = ""
-      const pending = new Set<Kiru.StatefulPromise<unknown>>()
-      const boundaryCtx: RecursiveRenderContext = {
+      const streamPromises = new Set<Kiru.StatefulPromise<unknown>>()
+      const boundaryCtx: HeadlessRenderContext = {
         write(chunk) {
           boundaryBuffer += chunk
         },
-        onPending(data) {
-          data.forEach((p) => pending.add(p))
+        onStreamData(data) {
+          data.forEach((p) => streamPromises.add(p))
         },
       }
       try {
-        recursiveRender(boundaryCtx, children, el, idx)
+        render(boundaryCtx, children, el, idx)
         // flush successful render
         ctx.write(boundaryBuffer)
-        ctx.onPending?.([...pending])
+        ctx.onStreamData?.([...streamPromises])
       } catch (error) {
-        if (isSuspenseThrowValue(error)) {
+        if (isStreamDataThrowValue(error)) {
           throw error
         }
         const e = error instanceof Error ? error : new Error(String(error))
@@ -88,12 +90,12 @@ export function recursiveRender(
         onError?.(e)
         const fallbackContent =
           typeof fallback === "function" ? fallback(e) : fallback
-        recursiveRender(ctx, fallbackContent, el, 0)
+        render(ctx, fallbackContent, el, 0)
       }
       return
     }
 
-    recursiveRender(ctx, children, el, idx)
+    render(ctx, children, el, idx)
     return
   }
 
@@ -102,13 +104,13 @@ export function recursiveRender(
       hookIndex.current = 0
       node.current = el
       const res = type(props)
-      recursiveRender(ctx, res, el, idx)
+      render(ctx, res, el, idx)
       return
     } catch (error) {
-      if (isSuspenseThrowValue(error)) {
-        const { fallback, pending } = error[$SUSPENSE_THROW]
-        ctx.onPending?.(pending)
-        return recursiveRender(ctx, fallback, el, 0)
+      if (isStreamDataThrowValue(error)) {
+        const { fallback, data } = error[$STREAM_DATA]
+        ctx.onStreamData?.(data)
+        return render(ctx, fallback, el, 0)
       }
       throw error
     } finally {
@@ -131,9 +133,9 @@ export function recursiveRender(
       )
     )
   } else if (Array.isArray(children)) {
-    children.forEach((c, i) => recursiveRender(ctx, c, el, i))
+    children.forEach((c, i) => render(ctx, c, el, i))
   } else {
-    recursiveRender(ctx, children, el, 0)
+    render(ctx, children, el, 0)
   }
   ctx.write(`</${type}>`)
 }

package/src/renderToString.ts

@@ -1,18 +1,18 @@
 import { renderMode } from "./globals.js"
 import { Fragment } from "./element.js"
 import { __DEV__ } from "./env.js"
-import { recursiveRender, RecursiveRenderContext } from "./recursiveRender.js"
+import { headlessRender, HeadlessRenderContext } from "./recursiveRender.js"
 
 export function renderToString(element: JSX.Element) {
   const prev = renderMode.current
   renderMode.current = "string"
   let result = ""
-  const ctx: RecursiveRenderContext = {
+  const ctx: HeadlessRenderContext = {
     write(chunk) {
       result += chunk
     },
   }
-  recursiveRender(ctx, Fragment({ children: element }), null, 0)
+  headlessRender(ctx, Fragment({ children: element }), null, 0)
   renderMode.current = prev
   return result
 }