kiru 0.54.0-preview.1 → 0.54.1

package/src/dom.ts

@@ -5,6 +5,7 @@ import {
   propToHtmlAttr,
   getVNodeAppContext,
   setRef,
+  isValidTextChild,
 } from "./utils/index.js"
 import {
   booleanAttributes,
@@ -87,43 +88,35 @@ function createDom(vNode: DomVNode): SomeDom {
 }
 function createTextNode(vNode: VNode): Text {
   const { nodeValue } = vNode.props
-  if (!Signal.isSignal(nodeValue)) {
-    return document.createTextNode(nodeValue)
+  if (Signal.isSignal(nodeValue)) {
+    return createSignalTextNode(vNode, nodeValue)
   }
 
+  return document.createTextNode(nodeValue)
+}
+
+function createSignalTextNode(vNode: VNode, nodeValue: Signal<string>): Text {
   const value = nodeValue.peek() ?? ""
   const textNode = document.createTextNode(value)
   subTextNode(vNode, textNode, nodeValue)
   return textNode
 }
 
-function wrapFocusEventHandler(
-  vNode: VNode,
-  evtName: "focus" | "blur",
-  callback: (event: FocusEvent) => void
-) {
-  const wrappedHandlers = vNodeToWrappedFocusEventHandlersMap.get(vNode) ?? {}
-  const handler = (wrappedHandlers[evtName] = (event: FocusEvent) => {
+function wrapFocusEventHandler(callback: (event: FocusEvent) => void) {
+  return (event: FocusEvent) => {
     if (persistingFocus) {
       event.preventDefault()
       event.stopPropagation()
       return
     }
     callback(event)
-  })
-  vNodeToWrappedFocusEventHandlersMap.set(vNode, wrappedHandlers)
-  return handler
+  }
 }
 
-type WrappedFocusEventMap = {
-  focus?: (event: FocusEvent) => void
-  blur?: (event: FocusEvent) => void
+interface VNodeEventListenerObjects {
+  [key: string]: EventListenerObject
 }
-
-const vNodeToWrappedFocusEventHandlersMap = new WeakMap<
-  VNode,
-  WrappedFocusEventMap
->()
+const eventListenerObjects = new WeakMap<VNode, VNodeEventListenerObjects>()
 
 function updateDom(vNode: DomVNode) {
   const { dom, prev, props, cleanups } = vNode
@@ -146,30 +139,39 @@ function updateDom(vNode: DomVNode) {
     if (!(k in prevProps)) keys.push(k)
   }
 
+  let events: VNodeEventListenerObjects | undefined
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i]
     const prevVal = prevProps[key]
     const nextVal = nextProps[key]
 
     if (propFilters.isEvent(key)) {
+      events ??= eventListenerObjects.get(vNode)
+      if (!events) eventListenerObjects.set(vNode, (events = {}))
+
       if (prevVal !== nextVal || isHydration) {
         const evtName = key.replace(EVENT_PREFIX_REGEX, "")
-        const isFocus = evtName === "focus" || evtName === "blur"
-        const wrappedMap = vNodeToWrappedFocusEventHandlersMap.get(vNode)
-
-        if (key in prevProps) {
-          dom.removeEventListener(
-            evtName,
-            isFocus ? wrappedMap?.[evtName] : prevVal
-          )
+        const evtListenerObj = events[evtName]
+
+        if (!nextVal) {
+          if (evtListenerObj) {
+            dom.removeEventListener(evtName, evtListenerObj)
+            delete events[evtName]
+          }
+          continue
+        }
+
+        let handleEvent = nextVal.bind(void 0)
+        if (evtName === "focus" || evtName === "blur") {
+          handleEvent = wrapFocusEventHandler(handleEvent)
         }
 
-        if (key in nextProps) {
-          dom.addEventListener(
-            evtName,
-            isFocus ? wrapFocusEventHandler(vNode, evtName, nextVal) : nextVal
-          )
+        if (evtListenerObj) {
+          evtListenerObj.handleEvent = handleEvent
+          continue
         }
+
+        dom.addEventListener(evtName, (events[evtName] = { handleEvent }))
       }
       continue
     }
@@ -206,7 +208,7 @@ function updateDom(vNode: DomVNode) {
   }
 }
 
-function deriveSelectElementValue(dom: HTMLSelectElement) {
+function getSelectElementValue(dom: HTMLSelectElement) {
   if (dom.multiple) {
     return Array.from(dom.selectedOptions).map((option) => option.value)
   }
@@ -231,7 +233,7 @@ const bindAttrToEventMap: Record<string, string> = {
   playbackRate: "ratechange",
   currentTime: "timeupdate",
 }
-const numericValueElements = ["progress", "meter", "number", "range"]
+const numericValueInputTypes = new Set(["progress", "meter", "number", "range"])
 
 function setSignalProp(
   vNode: VNode,
@@ -240,71 +242,80 @@ function setSignalProp(
   signal: Signal<any>,
   prevValue: unknown
 ) {
-  const cleanups = (vNode.cleanups ??= {})
   const [modifier, attr] = key.split(":")
+  const cleanups = (vNode.cleanups ??= {})
   if (modifier !== "bind") {
     cleanups[key] = signal.subscribe((value, prev) => {
       if (value === prev) return
       setProp(dom, key, value, prev)
       if (__DEV__) {
-        window.__kiru.profilingContext?.emit(
-          "signalAttrUpdate",
-          getVNodeAppContext(vNode)!
-        )
+        emitSignalAttrUpdate(vNode)
       }
     })
+  } else {
+    const evtName = bindAttrToEventMap[attr]
+    if (!evtName) {
+      if (__DEV__) {
+        console.error(
+          `[kiru]: ${attr} is not a valid element binding attribute.`
+        )
+      }
+      return
+    }
+    cleanups[key] = bindElementProp(vNode, dom, attr, evtName, signal)
+  }
 
-    const value = signal.peek()
-    const prev = unwrap(prevValue)
-    if (value === prev) return
-    setProp(dom, key, value, prev)
-    return
+  const value = signal.peek()
+  const prev = unwrap(prevValue)
+  if (value !== prev) {
+    setProp(dom, attr ?? modifier, value, prev)
   }
+}
 
-  const evtName = bindAttrToEventMap[attr]
-  if (!evtName) {
-    if (__DEV__) {
-      console.error(`[kiru]: ${attr} is not a valid element binding attribute.`)
-    }
-    return
+function createElementValueReader(
+  dom: Exclude<SomeDom, Text>,
+  signal: Signal<any>
+) {
+  if (dom instanceof HTMLInputElement) {
+    return createInputValueReader(dom, signal)
   }
+  if (dom instanceof HTMLSelectElement) {
+    return () => getSelectElementValue(dom)
+  }
+  return () => (dom as any).value
+}
 
-  const isSelect = dom instanceof HTMLSelectElement
-  const setAttr = isSelect
-    ? (value: any) => setSelectElementValue(dom, value)
-    : (value: any) => ((dom as any)[attr] = value)
+function bindElementProp(
+  vNode: VNode,
+  dom: Exclude<SomeDom, Text>,
+  attr: string,
+  evtName: string,
+  signal: Signal<any>
+): () => void {
+  const writeToSignal = (val: any) => {
+    signal.sneak(val)
+    signal.notify((sub) => sub !== updateFromSignal)
+  }
+
+  const writeToElement =
+    dom instanceof HTMLSelectElement && attr === "value"
+      ? (value: any) => setSelectElementValue(dom, value)
+      : (value: any) => ((dom as any)[attr] = value)
 
-  const signalUpdateCallback = (value: any) => {
-    setAttr(value)
+  const updateFromSignal = (value: any) => {
+    writeToElement(value)
     if (__DEV__) {
-      window.__kiru.profilingContext?.emit(
-        "signalAttrUpdate",
-        getVNodeAppContext(vNode)!
-      )
+      emitSignalAttrUpdate(vNode)
     }
   }
 
-  const setSigFromElement = (val: any) => {
-    signal.sneak(val)
-    signal.notify((sub) => sub !== signalUpdateCallback)
-  }
-
-  let evtHandler: (evt: Event) => void
+  let evtHandler: EventListener
   if (attr === "value") {
-    const useNumericValue =
-      numericValueElements.indexOf((dom as HTMLInputElement).type) !== -1
-    evtHandler = () => {
-      let val: any = (dom as HTMLInputElement | HTMLSelectElement).value
-      if (isSelect) {
-        val = deriveSelectElementValue(dom)
-      } else if (typeof signal.peek() === "number" && useNumericValue) {
-        val = (dom as HTMLInputElement).valueAsNumber
-      }
-      setSigFromElement(val)
-    }
+    const readValue = createElementValueReader(dom, signal)
+    evtHandler = () => writeToSignal(readValue())
   } else {
-    evtHandler = (e: Event) => {
-      const val = (e.target as any)[attr]
+    evtHandler = () => {
+      const val = (dom as any)[attr]
       /**
        * the 'timeupdate' event is fired when the currentTime property is
        * set (from code OR playback), so we need to prevent unnecessary
@@ -312,22 +323,42 @@ function setSignalProp(
        * elements with the same signal bound to 'currentTime'
        */
       if (attr === "currentTime" && signal.peek() === val) return
-      setSigFromElement(val)
+      writeToSignal(val)
     }
   }
 
   dom.addEventListener(evtName, evtHandler)
-  const unsub = signal.subscribe(signalUpdateCallback)
+  const unsub = signal.subscribe(updateFromSignal)
 
-  cleanups[key] = () => {
+  return () => {
     dom.removeEventListener(evtName, evtHandler)
     unsub()
   }
+}
 
-  const value = signal.peek()
-  const prev = unwrap(prevValue)
-  if (value === prev) return
-  setProp(dom, attr, value, prev)
+function createInputValueReader(
+  dom: HTMLInputElement,
+  signal: Signal<any>
+): () => any {
+  const t = dom.type
+  const v = signal.peek()
+
+  if (t === "date" && v instanceof Date) {
+    return () => dom.valueAsDate
+  }
+
+  if (numericValueInputTypes.has(t) && typeof v === "number") {
+    return () => dom.valueAsNumber
+  }
+
+  return () => dom.value
+}
+
+function emitSignalAttrUpdate(vNode: VNode) {
+  window.__kiru.profilingContext?.emit(
+    "signalAttrUpdate",
+    getVNodeAppContext(vNode)!
+  )
 }
 
 function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
@@ -343,21 +374,39 @@ function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
   })
 }
 
-function tryHydrateNullableSignalChild(vNode: VNode): MaybeDom {
-  if (vNode.type !== "#text" || !Signal.isSignal(vNode.props.nodeValue)) {
-    return
+/**
+ * Creates and inserts an empty signal-bound text node into
+ * the dom tree if the signal value is null or undefined.
+ */
+function getOrCreateTextNode(vNode: VNode): MaybeDom {
+  const sig = vNode.props.nodeValue
+  if (!Signal.isSignal(sig)) {
+    return hydrationStack.getCurrentChild()
   }
-  const value = unwrap(vNode.props.nodeValue)
-  if (value !== null && value !== undefined) {
-    return
+
+  const value = sig.peek()
+  if (isValidTextChild(value)) {
+    return hydrationStack.getCurrentChild()
+  }
+
+  const dom = createSignalTextNode(vNode, sig)
+  const currentChild = hydrationStack.getCurrentChild()
+
+  if (!currentChild) {
+    return hydrationStack.getCurrentParent().appendChild(dom)
   }
-  const dom = createTextNode(vNode)
-  hydrationStack.parent().appendChild(dom)
+
+  currentChild.before(dom)
   return dom
 }
 
 function hydrateDom(vNode: VNode) {
-  const dom = hydrationStack.nextChild() ?? tryHydrateNullableSignalChild(vNode)
+  const dom =
+    vNode.type === "#text"
+      ? getOrCreateTextNode(vNode)
+      : hydrationStack.getCurrentChild()
+
+  hydrationStack.bumpChildIndex()
 
   if (!dom) {
     throw new KiruError({
@@ -699,11 +748,7 @@ function commitDeletion(vNode: VNode) {
 
     subs?.forEach((unsub) => unsub())
     if (cleanups) Object.values(cleanups).forEach((c) => c())
-    while (hooks?.length) {
-      try {
-        hooks.pop()!.cleanup?.()
-      } catch {}
-    }
+    while (hooks?.length) hooks.pop()!.cleanup?.()
 
     if (__DEV__) {
       window.__kiru.profilingContext?.emit("removeNode", ctx)

package/src/error.ts

@@ -25,10 +25,8 @@ export class KiruError extends Error {
         : optionsOrMessage.message
     super(message)
     if (typeof optionsOrMessage !== "string") {
-      if (__DEV__) {
-        if (optionsOrMessage?.vNode) {
-          this.customNodeStack = captureErrorStack(optionsOrMessage.vNode)
-        }
+      if (__DEV__ && optionsOrMessage?.vNode) {
+        this.customNodeStack = captureErrorStack(optionsOrMessage.vNode)
       }
       this.fatal = optionsOrMessage?.fatal
     }

package/src/form/index.ts

@@ -4,6 +4,7 @@ import {
   safeStringify,
   shallowCompare,
   generateRandomID,
+  call,
 } from "../utils/index.js"
 import { useEffect } from "../hooks/useEffect.js"
 import { useMemo } from "../hooks/useMemo.js"
@@ -260,7 +261,7 @@ function createFormController<T extends Record<string, unknown>>(
       }
     }
 
-    formFieldUpdaters.get(name)?.forEach((update) => update())
+    formFieldUpdaters.get(name)?.forEach(call)
   }
 
   const setFieldValue = <K extends RecordKey<T>>(
@@ -410,9 +411,7 @@ function createFormController<T extends Record<string, unknown>>(
       delete formFieldErrors[fieldName as RecordKey<T>]
     }
     updateSubscribers()
-    formFieldUpdaters.forEach((updaters) => {
-      updaters.forEach((update) => update())
-    })
+    formFieldUpdaters.forEach((updaters) => updaters.forEach(call))
   }
 
   const validateForm = async () => {
@@ -634,11 +633,9 @@ export function useForm<T extends Record<string, unknown> = {}>(
             "useFormSubscription",
             { sub: null! as FormStateSubscriber<T> },
             ({ hook, isInit, isHMR, update }) => {
-              if (__DEV__) {
-                if (isHMR) {
-                  isInit = true
-                  hook.cleanup?.()
-                }
+              if (__DEV__ && isHMR) {
+                isInit = true
+                hook.cleanup?.()
               }
               if (isInit) {
                 hook.sub = {

package/src/globals.ts

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

package/src/hmr.ts

@@ -1,7 +1,6 @@
 import { $HMR_ACCEPT, $DEV_FILE_LINK } from "./constants.js"
-import { __DEV__ } from "./env.js"
 import { traverseApply } from "./utils/index.js"
-import { requestUpdate } from "./scheduler.js"
+import { flushSync, requestUpdate } from "./scheduler.js"
 import { Signal } from "./signals/base.js"
 import type { WatchEffect } from "./signals/watch.js"
 import type { Store } from "./store.js"
@@ -25,6 +24,11 @@ type HotVarDesc = {
   link: string
 }
 
+let _isHmrUpdate = false
+export function isHmrUpdate() {
+  return _isHmrUpdate
+}
+
 export function isGenericHmrAcceptor(
   thing: unknown
 ): thing is GenericHMRAcceptor<any> {
@@ -128,15 +132,20 @@ export function createHMRContext() {
             if (vNode.type === oldEntry.value) {
               vNode.type = newEntry.value as any
               dirtiedApps.add(ctx)
-              vNode.hmrUpdated = true
             }
           })
         })
       }
     }
-    dirtiedApps.forEach((ctx) => ctx.rootNode && requestUpdate(ctx.rootNode))
-    isModuleReplacementExecution = false
 
+    if (dirtiedApps.size) {
+      _isHmrUpdate = true
+      dirtiedApps.forEach((ctx) => requestUpdate(ctx.rootNode))
+      flushSync()
+      _isHmrUpdate = false
+    }
+
+    isModuleReplacementExecution = false
     currentModuleMemory = null
     currentModuleFilePath = null
   }

package/src/hooks/useEffectEvent.ts

@@ -1,6 +1,5 @@
 import { sideEffectsEnabled } from "../utils/index.js"
 import { node } from "../globals.js"
-import { __DEV__ } from "../env.js"
 import { useHook } from "./utils.js"
 
 /**

package/src/hooks/usePromise.ts

@@ -1,21 +1,15 @@
-import { __DEV__ } from "../env.js"
+import { STREAMED_DATA_EVENT } from "../constants.js"
 import { hydrationMode, renderMode } from "../globals.js"
 import { Signal, useSignal } from "../signals/base.js"
-import { depsRequireChange, useHook } from "./utils.js"
+import { cleanupHook, 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: (mutator?: PromiseMutator) => void
+  refresh: () => void
   isPending: Signal<boolean>
 }
 
@@ -23,7 +17,7 @@ function usePromise<T>(
   callback: (signal: AbortSignal) => Promise<T>,
   deps: unknown[]
 ): UsePromiseResult<T> {
-  const vNodeId = useId()
+  const id = useId()
   const isPending = useSignal(true)
 
   return useHook(
@@ -32,54 +26,24 @@ function usePromise<T>(
       promise: UsePromiseResult<T>
       abortController?: AbortController
       deps?: unknown[]
-      refresh: (mutator?: PromiseMutator) => void
-      promiseId: string
-      epoch: number
     },
     ({ hook, isInit, vNode, update }) => {
-      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()
-        })
-      }
-
       if (isInit || depsRequireChange(deps, hook.deps)) {
         isPending.value = true
         hook.deps = deps
-        hook.cleanup!()
+        cleanupHook(hook)
 
-        const signal = (hook.abortController = new AbortController()).signal
-        const { promiseId, refresh } = hook
+        const controller = (hook.abortController = new AbortController())
+        hook.cleanup = () => controller.abort()
+
+        const index = nodeToPromiseIndex.get(vNode) ?? 0
+        nodeToPromiseIndex.set(vNode, index + 1)
+
+        const promiseId = `${id}:data:${index}`
 
         let promise: Promise<T>
         if (renderMode.current === "string") {
-          // if we're rendering to string, there's no need to fire the callback
+          // if we're rendering to a string, there's no need to fire the callback
           promise = Promise.resolve() as Promise<T>
         } else if (
           renderMode.current === "hydrate" &&
@@ -87,21 +51,76 @@ function usePromise<T>(
         ) {
           // if we're hydrating and the hydration mode is not static,
           // we need to resolve the promise from cache/event
-          promise = resolveStreamedPromise<T>(promiseId, signal)
+          promise = resolveDeferredPromise<T>(promiseId, controller.signal)
         } else {
           // dom / stream / (hydrate + static)
-          promise = callback(signal)
+          promise = callback(controller.signal)
         }
 
-        const epoch = ++hook.epoch
-        hook.promise = createStatefulPromise(
-          promiseId,
-          promise,
-          { isPending, refresh },
-          () => epoch === hook.epoch && (isPending.value = false)
-        )
+        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)
+          })
       }
       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()
+    })
+  })
+}