kiru 1.2.0 → 1.2.1

package/src/dom/nodes.ts

@@ -5,6 +5,7 @@ import { hydrationStack } from "../hydration.js"
 import {
   getVNodeApp,
   isValidTextChild,
+  latest,
   registerVNodeCleanup,
 } from "../utils/index.js"
 import { KiruError } from "../error.js"
@@ -27,8 +28,8 @@ function createDom(vNode: DomVNode): SomeDom {
     t == "#text"
       ? createTextNode(vNode)
       : svgTags.has(t)
-        ? document.createElementNS("http://www.w3.org/2000/svg", t)
-        : document.createElement(t)
+      ? document.createElementNS("http://www.w3.org/2000/svg", t)
+      : document.createElement(t)
 
   return dom
 }
@@ -175,6 +176,7 @@ function getOrCreateTextNode(vNode: VNode): MaybeDom {
 }
 
 function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
+  if (__DEV__) signal = latest(signal)
   const cleanup = signal.subscribe((value, prev) => {
     if (value === prev) return
     textNode.nodeValue = value
@@ -198,6 +200,7 @@ function createTextNode(vNode: VNode): Text {
 }
 
 function createSignalTextNode(vNode: VNode, nodeValue: Signal<string>): Text {
+  if (__DEV__) nodeValue = latest(nodeValue) as Signal<string>
   const value = nodeValue.peek() ?? ""
   const textNode = document.createTextNode(value)
   subTextNode(vNode, textNode, nodeValue)

package/src/dom/props.ts

@@ -3,6 +3,7 @@ import {
   getVNodeApp,
   setRef,
   registerVNodeCleanup,
+  latest,
 } from "../utils/index.js"
 import { Signal } from "../signals/base.js"
 import { unwrap } from "../signals/utils.js"
@@ -47,9 +48,33 @@ function updateDomProps(vNode: DomVNode) {
   const nextProps = props ?? {}
 
   if (isTextNode(dom)) {
-    const nextVal = nextProps.nodeValue
-    if (!Signal.isSignal(nextVal) && dom.nodeValue !== nextVal) {
-      dom.nodeValue = nextVal
+    let nextVal = nextProps.nodeValue
+    if (__DEV__ && Signal.isSignal(nextVal)) nextVal = latest(nextVal)
+
+    if (!Signal.isSignal(nextVal)) {
+      if (dom.nodeValue !== nextVal) {
+        dom.nodeValue = nextVal
+      }
+      return
+    }
+    if (prevProps.nodeValue === nextVal) return
+    dom.nodeValue = String(nextVal.peek() ?? "")
+    if (__DEV__) {
+      cleanups?.nodeValue?.()
+      registerVNodeCleanup(
+        vNode,
+        "nodeValue",
+        nextVal.subscribe((value, prev) => {
+          if (value === prev) return
+          dom.nodeValue = String(value ?? "")
+          if (isBrowser) {
+            window.__kiru?.profilingContext?.emit(
+              "signalTextUpdate",
+              getVNodeApp(vNode)!
+            )
+          }
+        })
+      )
     }
     return
   }

package/src/hooks/setup.ts

@@ -1,8 +1,12 @@
-import { computed, signal } from "../signals/index.js"
+import { signal, Signal } from "../signals/base.js"
 import { createVNodeId } from "../utils/vdom.js"
 import { __DEV__ } from "../env.js"
 import { node, setups } from "../globals.js"
-import type { Signal } from "../signals/base.js"
+import {
+  tracking,
+  type TrackingStackObservations,
+} from "../signals/tracking.js"
+import { registerVNodeCleanup } from "../utils/index.js"
 
 export interface Setup<Props extends {}> {
   readonly derive: <T>(
@@ -36,7 +40,6 @@ export function setup<Props extends {}>(): Setup<Props> {
   setups.set(vNode, setup)
   return setup
 }
-
 function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
   let id: Signal<string>
 
@@ -45,12 +48,89 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
 
   let prevIndex = -1
 
-  return {
-    derive(selector) {
-      const props = { ...vNode.props } as InferredProps
-      const sig = computed(() => selector(props))
-      propSyncs.push((p) => (sig.value = selector(p)))
-      return sig
+  // Always points at latest props (updated in propSync) so selector and subs see current props
+  const currentProps = { current: { ...vNode.props } as InferredProps }
+  const deriveCleanups: Array<() => void> = []
+
+  type DeriveEntry = { run: () => void; accessedPaths: Set<string> }
+  const deriveEntries: DeriveEntry[] = []
+
+  propSyncs.push((p) => {
+    const old = currentProps.current as Record<string, unknown>
+    const skip = new Set<DeriveEntry>()
+    for (const entry of deriveEntries) {
+      if (
+        entry.accessedPaths.size > 0 &&
+        propsUnchangedAtPaths(
+          old,
+          p as Record<string, unknown>,
+          entry.accessedPaths
+        )
+      ) {
+        skip.add(entry)
+      }
+    }
+    currentProps.current = p
+    for (const entry of deriveEntries) {
+      if (!skip.has(entry)) entry.run()
+    }
+  })
+
+  registerVNodeCleanup(vNode, "vnode:setup", () => {
+    for (const cleanup of deriveCleanups) cleanup()
+    setups.delete(vNode)
+  })
+
+  const setupResult: Setup<Props> = {
+    derive<T>(
+      selector: (props: Props extends Kiru.FC<infer P> ? P : Props) => T
+    ) {
+      const resultSig = signal(undefined!) as Signal<T>
+      const unsubs = new Map<string, () => void>()
+      const accessedPaths = new Set<string>()
+
+      function sync() {
+        accessedPaths.clear()
+        const propsProxy = createPropsProxy(
+          currentProps.current as Record<string, unknown>,
+          accessedPaths
+        ) as InferredProps
+        const observations: TrackingStackObservations = new Map()
+        tracking.stack.push(observations)
+        const value = selector(propsProxy)
+        tracking.stack.pop()
+        // Always assign and notify so the component re-renders when the derived value changes
+        // (e.g. when parent passes a different signal ref like toggle switching count/double).
+        resultSig.value = value
+
+        for (const [sid, unsub] of unsubs) {
+          if (!observations.has(sid)) {
+            unsub()
+            unsubs.delete(sid)
+          }
+        }
+        for (const [sid, observedSig] of observations) {
+          if (!unsubs.has(sid)) {
+            try {
+              unsubs.set(sid, observedSig.subscribe(sync))
+            } catch {
+              // Signal may be disposed after HMR; skip subscribing
+            }
+          }
+        }
+      }
+
+      sync()
+      const entry: DeriveEntry = { run: sync, accessedPaths }
+      deriveEntries.push(entry)
+      deriveCleanups.push(() => {
+        unsubs.forEach((u) => u())
+        unsubs.clear()
+        const i = deriveEntries.indexOf(entry)
+        if (i !== -1) deriveEntries.splice(i, 1)
+      })
+
+      return resultSig
     },
     get id() {
       if (!id) {
@@ -67,4 +147,58 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
       return id
     },
   }
+  return setupResult
+}
+function propsUnchangedAtPaths(
+  oldProps: Record<string, unknown>,
+  newProps: Record<string, unknown>,
+  paths: Set<string>
+): boolean {
+  for (const path of paths) {
+    if (!Object.is(getAtPath(oldProps, path), getAtPath(newProps, path))) {
+      return false
+    }
+  }
+  return true
+}
+
+function getAtPath(obj: Record<string, unknown>, path: string): unknown {
+  let cur: unknown = obj
+  for (const key of path.split(".")) {
+    if (cur == null || typeof cur !== "object") return undefined
+    cur = (cur as Record<string, unknown>)[key]
+  }
+  return cur
+}
+
+/**
+ * Proxy that records paths and wraps signals. We only add to accessedPaths when
+ * we hit a signal (the leaf we subscribe to), so propSync skip only compares
+ * signal refs. Container objects (e.g. "data") are new every render and would
+ * always fail the skip.
+ */
+function createPropsProxy<P extends Record<string, unknown>>(
+  props: P,
+  accessedPaths: Set<string>,
+  pathPrefix?: string
+): P {
+  return new Proxy(props, {
+    get(holder, key: string) {
+      const path = pathPrefix ? `${pathPrefix}.${key}` : key
+      const v = holder[key]
+      if (Signal.isSignal(v)) {
+        accessedPaths.add(path) // only record path for signal leaves
+        return v
+      }
+      if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+        return createPropsProxy(
+          v as Record<string, unknown>,
+          accessedPaths,
+          path
+        ) as P[keyof P]
+      }
+      accessedPaths.add(path) // primitive leaf
+      return v
+    },
+  }) as P
 }

package/src/scheduler.ts

@@ -22,6 +22,7 @@ import {
   findParentErrorBoundary,
   call,
   propsChanged,
+  depthSort,
 } from "./utils/index.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
@@ -129,8 +130,6 @@ function queueDelete(vNode: VNode): void {
   deletions.push(vNode)
 }
 
-const depthSort = (a: VNode, b: VNode): number => b.depth - a.depth
-
 let currentWorkRoot: VNode | null = null
 
 function doWork(): void {
@@ -402,7 +401,7 @@ function renderFunctionComponent(
 
   let newChild = latest(type)(props)
   if (typeof newChild === "function") {
-    vNode.subs?.forEach(call) // unsub from signals observered during setup
+    vNode.subs?.forEach(call) // unsub from signals observed during setup
     vNode.render = newChild
     if (shouldSyncProps) {
       const p = { ...props }

package/src/signals/base.ts

@@ -5,7 +5,7 @@ import {
   generateRandomID,
   registerVNodeCleanup,
 } from "../utils/index.js"
-import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
+import { $DEV_FILE_LINK, $HMR_ACCEPT, $SIGNAL } from "../constants.js"
 import { __DEV__, isBrowser } from "../env.js"
 import { node } from "../globals.js"
 import { requestUpdate } from "../scheduler.js"
@@ -120,9 +120,19 @@ export class Signal<T> {
 
   subscribe(cb: (state: T, prevState?: T) => void): () => void {
     if (__DEV__) {
-      const subs = signalSubsMap.get(this.$id)!
-      subs!.add(cb)
-      return () => signalSubsMap.get(this.$id)?.delete(cb)
+      const tgt = latest(this)
+      const subs = signalSubsMap.get(tgt.$id)!
+      if (__DEV__ && !subs) {
+        const name = tgt.displayName ?? tgt.$id
+        let message = `Attempting to subscribe to a signal that has been disposed: ${name}`
+        if ($DEV_FILE_LINK in tgt) {
+          message += `\nFile: ${tgt[$DEV_FILE_LINK]}`
+        }
+        message += `\nInitial value: ${tgt.$initialValue}`
+        throw new Error(message)
+      }
+      subs.add(cb)
+      return () => subs.delete(cb)
     }
     this.$subs!.add(cb)
     return () => this.$subs!.delete(cb)
@@ -130,7 +140,8 @@ export class Signal<T> {
 
   notify(filter?: (sub: SignalSubscriber) => boolean) {
     if (__DEV__) {
-      return signalSubsMap.get(this.$id)?.forEach((sub) => {
+      const tgt = latest(this)
+      return signalSubsMap.get(tgt.$id)?.forEach((sub) => {
         if (filter && !filter(sub)) return
         const { $value, $prevValue } = latest(this)
         return sub($value, $prevValue)
@@ -148,12 +159,14 @@ export class Signal<T> {
 
   static subscribers(signal: Signal<any>) {
     if (__DEV__) {
+      signal = latest(signal)
       return signalSubsMap.get(signal.$id)!
     }
     return signal.$subs
   }
 
   static makeReadonly<T>(signal: Signal<T>): ReadonlySignal<T> {
+    if (__DEV__) signal = latest(signal)
     const desc = Object.getOwnPropertyDescriptor(signal, "value")
     if (desc && !desc.writable) return signal
     return Object.defineProperty(signal, "value", {
@@ -166,6 +179,7 @@ export class Signal<T> {
   }
 
   static makeWritable<T>(signal: Signal<T>): Signal<T> {
+    if (__DEV__) signal = latest(signal)
     const desc = Object.getOwnPropertyDescriptor(signal, "value")
     if (desc && desc.writable) return signal
     return Object.defineProperty(signal, "value", {
@@ -183,6 +197,7 @@ export class Signal<T> {
 
   static entangle<T>(signal: Signal<T>) {
     if (tracking.enabled === false) return
+    if (__DEV__) signal = latest(signal)
 
     const vNode = node.current
     const trackedSignalObservations = tracking.current()
@@ -200,6 +215,7 @@ export class Signal<T> {
   static dispose(signal: Signal<any>) {
     signal.$isDisposed = true
     if (__DEV__) {
+      signal = latest(signal)
       signalSubsMap.delete(signal.$id)
       if (isBrowser) window.__kiru.devtools?.untrack(signal)
       return

package/src/signals/computed.ts

@@ -25,8 +25,16 @@ export class ComputedSignal<T> extends Signal<T> {
         },
         inject: (prev) => {
           inject(prev)
+          // Stop any pending reactions on the previous instance and mark
+          // this computed as dirty so it will recompute with the latest
+          // dependencies after HMR.
           ComputedSignal.stop(prev)
-          this.$isDirty = prev.$isDirty
+          this.$isDirty = true
+          // Force a recompute immediately so any active subscribers (like
+          // text nodes bound to a computed signal) see the updated value
+          // after a hot reload where only its dependencies changed.
+          ComputedSignal.run(this)
+          this.notify()
         },
         destroy: () => {},
       } satisfies HMRAccept<ComputedSignal<T>>

package/src/utils/vdom.ts

@@ -34,6 +34,7 @@ export {
   createVNodeId,
   registerVNodeCleanup,
   propsChanged,
+  depthSort,
 }
 
 function cloneElement(vNode: Kiru.VNode): Kiru.Element {
@@ -219,3 +220,7 @@ function propsChanged(
   }
   return false
 }
+
+function depthSort(a: Kiru.VNode, b: Kiru.VNode): number {
+  return a.depth - b.depth
+}