kiru 0.54.0-preview.0 → 0.54.0

package/src/components/memo.ts

@@ -1,6 +1,5 @@
 import { $MEMO } from "../constants.js"
 import { createElement } from "../element.js"
-import { __DEV__ } from "../env.js"
 
 function _arePropsEqual<T extends Record<string, unknown>>(
   prevProps: T,
@@ -17,12 +16,7 @@ function _arePropsEqual<T extends Record<string, unknown>>(
 
 export interface MemoFn<T extends Record<string, unknown> = {}> {
   (props: T): JSX.Element
-  [$MEMO]: {
-    arePropsEqual: (
-      prevProps: Record<string, unknown>,
-      nextProps: Record<string, unknown>
-    ) => boolean
-  }
+  [$MEMO]: (prevProps: T, nextProps: T) => boolean
 }
 
 export function memo<T extends Record<string, unknown> = {}>(
@@ -34,14 +28,12 @@ export function memo<T extends Record<string, unknown> = {}>(
       return createElement(fn, props)
     },
     {
-      [$MEMO]: { arePropsEqual },
+      [$MEMO]: arePropsEqual,
       displayName: "Kiru.memo",
     }
   )
 }
 
 export function isMemoFn(fn: Function & { [$MEMO]?: any }): fn is MemoFn {
-  return (
-    typeof fn === "function" && typeof fn[$MEMO]?.arePropsEqual === "function"
-  )
+  return typeof fn[$MEMO] === "function"
 }

package/src/context.ts

@@ -1,10 +1,6 @@
-import { $CONTEXT, $CONTEXT_PROVIDER, $HMR_ACCEPT } from "./constants.js"
+import { $CONTEXT, $CONTEXT_PROVIDER } from "./constants.js"
 import { createElement } from "./element.js"
-import { __DEV__ } from "./env.js"
-import { GenericHMRAcceptor } from "./hmr.js"
 import { useState } from "./hooks/useState.js"
-import { requestUpdate } from "./scheduler.js"
-import { traverseApply } from "./utils/index.js"
 
 export function createContext<T>(defaultValue: T): Kiru.Context<T> {
   const ctx: Kiru.Context<T> = {
@@ -25,25 +21,6 @@ export function createContext<T>(defaultValue: T): Kiru.Context<T> {
       return this.Provider.displayName || "Anonymous Context"
     },
   }
-  if (__DEV__) {
-    const asHmrAcceptor = ctx as any as GenericHMRAcceptor<Kiru.Context<T>>
-    asHmrAcceptor[$HMR_ACCEPT] = {
-      inject: (prev) => {
-        const newProvider = ctx.Provider
-        window.__kiru.apps.forEach((ctx) => {
-          traverseApply(ctx.rootNode, (vNode) => {
-            if (vNode.type === prev.Provider) {
-              vNode.type = newProvider
-              vNode.hmrUpdated = true
-              requestUpdate(vNode)
-            }
-          })
-        })
-      },
-      destroy: () => {},
-      provide: () => ctx,
-    }
-  }
 
   return ctx
 }

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
         }
 
-        if (key in nextProps) {
-          dom.addEventListener(
-            evtName,
-            isFocus ? wrapFocusEventHandler(vNode, evtName, nextVal) : nextVal
-          )
+        let handleEvent = nextVal.bind(void 0)
+        if (evtName === "focus" || evtName === "blur") {
+          handleEvent = wrapFocusEventHandler(handleEvent)
         }
+
+        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
+}
+
+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 isSelect = dom instanceof HTMLSelectElement
-  const setAttr = isSelect
-    ? (value: any) => setSelectElementValue(dom, value)
-    : (value: any) => ((dom as any)[attr] = value)
+  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({

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,5 +1,4 @@
 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"

package/src/hooks/utils.ts

@@ -3,6 +3,7 @@ import { __DEV__ } from "../env.js"
 import { hookIndex, node } from "../globals.js"
 import { noop } from "../utils/index.js"
 import { requestUpdate } from "../scheduler.js"
+import { isHmrUpdate } from "../hmr.js"
 export {
   cleanupHook,
   depsRequireChange,
@@ -115,17 +116,16 @@ function useHook<
 ): ReturnType<U> {
   const vNode = getVNodeOrError(hookName)
 
-  if (__DEV__) {
-    if (
-      currentHookName !== null &&
-      !nestedHookWarnings.has(hookName + currentHookName)
-    ) {
-      nestedHookWarnings.add(hookName + currentHookName)
-      throw new KiruError({
-        message: `Nested primitive "useHook" calls are not supported. "${hookName}" was called inside "${currentHookName}". Strange will most certainly happen.`,
-        vNode,
-      })
-    }
+  if (
+    __DEV__ &&
+    currentHookName !== null &&
+    !nestedHookWarnings.has(hookName + currentHookName)
+  ) {
+    nestedHookWarnings.add(hookName + currentHookName)
+    throw new KiruError({
+      message: `Nested primitive "useHook" calls are not supported. "${hookName}" was called inside "${currentHookName}". Strange will most certainly happen.`,
+      vNode,
+    })
   }
 
   const queueEffect = (callback: Function, opts?: { immediate?: boolean }) => {
@@ -177,7 +177,7 @@ function useHook<
       const res = (callback as HookCallback<T>)({
         hook,
         isInit: !oldHook,
-        isHMR: vNode.hmrUpdated,
+        isHMR: isHmrUpdate(),
         update: () => requestUpdate(vNode),
         queueEffect,
         vNode,