kiru 1.4.0 → 1.5.0

package/src/dom/props.ts

@@ -733,8 +733,8 @@ function setStyleProp(
   // Avoid Set allocation for the common case where prevStyle is empty
   if (prevKeys.length === 0) {
     for (let i = 0; i < nextKeys.length; i++) {
-      const k = nextKeys[i] as keyof StyleObject
-      const rawNext = nextStyle[k]
+      const k = nextKeys[i]
+      const rawNext = nextStyle[k as keyof StyleObject]
       const nextVal = unwrap(rawNext)
       if (trackSignals && Signal.isSignal(rawNext)) {
         styleKeyToSignal.set(k, rawNext)
@@ -751,7 +751,7 @@ function setStyleProp(
   // Full merge path: iterate prevKeys for removals, nextKeys for additions/changes
   const nextStyleKeys = new Set(nextKeys)
   for (let i = 0; i < prevKeys.length; i++) {
-    const k = prevKeys[i] as keyof StyleObject
+    const k = prevKeys[i]
     if (!nextStyleKeys.has(k)) {
       // Property was removed
       if ((k as string).startsWith("--")) {
@@ -763,9 +763,9 @@ function setStyleProp(
   }
 
   for (let i = 0; i < nextKeys.length; i++) {
-    const k = nextKeys[i] as keyof StyleObject
-    const rawNext = nextStyle[k]
-    const prevVal = unwrap(prevStyle[k])
+    const k = nextKeys[i]
+    const rawNext = nextStyle[k as keyof StyleObject]
+    const prevVal = unwrap(prevStyle[k as keyof StyleObject])
     const nextVal = unwrap(rawNext)
     if (trackSignals && Signal.isSignal(rawNext)) {
       styleKeyToSignal.set(k, rawNext)

package/src/globalContext.ts

@@ -2,8 +2,8 @@ import { __DEV__ } from "./env.js"
 import { createHmrContext } from "./hmr.js"
 import { createProfilingContext } from "./profiling.js"
 import { fileRouterInstance } from "./router/globals.js"
-import type { FileRouterController } from "./router/fileRouterController"
-import type { AppHandle } from "./appHandle"
+import type { FileRouterController } from "./router/fileRouterController.js"
+import type { AppHandle } from "./appHandle.js"
 
 export { createKiruGlobalContext, type GlobalKiruEvent, type KiruGlobalContext }
 

package/src/headlessRender.ts

@@ -12,7 +12,7 @@ import {
 import { Signal } from "./signals/base.js"
 import { $ERROR_BOUNDARY, voidElements, $STREAM_DATA } from "./constants.js"
 import { __DEV__ } from "./env.js"
-import type { ErrorBoundaryNode } from "./types.utils"
+import type { ErrorBoundaryNode } from "./types.utils.js"
 
 export interface HeadlessRenderContext {
   write(chunk: string): void
@@ -37,6 +37,9 @@ export function headlessRender(
   if (el instanceof Array) {
     return el.forEach((c, i) => headlessRender(ctx, c, parent, i))
   }
+  if (typeof el === "function") {
+    return headlessRender(ctx, el(), parent, idx)
+  }
   if (Signal.isSignal(el)) {
     const value = el.peek()
     if (!isPrimitiveChild(value)) {

package/src/hooks/onCleanup.ts

@@ -1,3 +1,5 @@
+import { $INLINE_FN } from "../constants.js"
+import { __DEV__ } from "../env.js"
 import { node } from "../globals.js"
 import {
   generateRandomID,
@@ -14,7 +16,7 @@ import {
 export function onCleanup(fn: () => void): void {
   if (!sideEffectsEnabled()) return
   const vNode = node.current!
-  if (!vNode) {
+  if (!vNode || (__DEV__ && vNode.type === $INLINE_FN)) {
     throw new Error("Cannot queue onCleanup effect outside of a component")
   }
   registerVNodeCleanup(vNode, generateRandomID(10), fn)

package/src/hooks/setup.ts

@@ -1,18 +1,20 @@
 import { signal, Signal } from "../signals/base.js"
-import { createVNodeId } from "../utils/vdom.js"
+import { createVNodeId, isVNodeDeleted } from "../utils/vdom.js"
+import { $INLINE_FN } from "../constants.js"
 import { __DEV__ } from "../env.js"
 import { node, setups } from "../globals.js"
-import {
-  tracking,
-  type TrackingStackObservations,
-} from "../signals/tracking.js"
+import { executeWithTracking } from "../signals/tracking.js"
 import { registerVNodeCleanup } from "../utils/index.js"
 
+let currentAccessedPaths: Set<string[]> | null = null
+const OWN_KEYS = `__KEYS__`
+
 export interface Setup<Props extends {}> {
   readonly derive: <T>(
     selector: (props: Props extends Kiru.FC<infer P> ? P : Props) => T
   ) => Signal<T>
   readonly id: Signal<string>
+  // Not reactive — for use in render functions only
   readonly props: Readonly<Props extends Kiru.FC<infer P> ? P : Props>
 }
 
@@ -25,7 +27,7 @@ export interface Setup<Props extends {}> {
 export function setup<Props extends {}>(): Setup<Props> {
   const vNode = node.current!
   if (__DEV__) {
-    if (!vNode) {
+    if (!vNode || vNode.type === $INLINE_FN) {
       throw new Error("setup() must be called inside a Kiru component")
     }
     if (vNode.render) {
@@ -41,8 +43,10 @@ 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>
+  let propsProxy: InferredProps
 
   type InferredProps = Props extends Kiru.FC<infer R> ? R : Props
   const propSyncs = (vNode.propSyncs = []) as ((props: InferredProps) => void)[]
@@ -53,7 +57,7 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
   const currentProps = { current: { ...vNode.props } as InferredProps }
   const deriveCleanups: Array<() => void> = []
 
-  type DeriveEntry = { run: () => void; accessedPaths: Set<string> }
+  type DeriveEntry = { run: () => void; paths: Set<string[]> }
   const deriveEntries: DeriveEntry[] = []
 
   propSyncs.push((p) => {
@@ -61,12 +65,8 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
     const skip = new Set<DeriveEntry>()
     for (const entry of deriveEntries) {
       if (
-        entry.accessedPaths.size > 0 &&
-        propsUnchangedAtPaths(
-          old,
-          p as Record<string, unknown>,
-          entry.accessedPaths
-        )
+        entry.paths.size > 0 &&
+        propsUnchangedAtPaths(old, p as Record<string, unknown>, entry.paths)
       ) {
         skip.add(entry)
       }
@@ -88,41 +88,27 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
     ) {
       const resultSig = signal(undefined!) as Signal<T>
       const unsubs = new Map<string, () => void>()
-      const accessedPaths = new Set<string>()
+      const accessedPaths = new Set<string[]>()
 
       function sync() {
         accessedPaths.clear()
-        const propsProxy = createPropsProxy(
-          currentProps.current as Record<string, unknown>,
-          accessedPaths
+        currentAccessedPaths = accessedPaths
+
+        const propsProxy = createProxy(
+          currentProps.current as Record<string, unknown>
         ) 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
-            }
-          }
-        }
+
+        resultSig.value = executeWithTracking({
+          id: Signal.id(resultSig),
+          fn: () => selector(propsProxy),
+          onDepChanged: sync,
+          subs: unsubs,
+        })
+        currentAccessedPaths = null
       }
 
       sync()
-      const entry: DeriveEntry = { run: sync, accessedPaths }
+      const entry: DeriveEntry = { run: sync, paths: accessedPaths }
       deriveEntries.push(entry)
       deriveCleanups.push(() => {
         unsubs.forEach((u) => u())
@@ -136,6 +122,16 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
     get id() {
       if (!id) {
         id = signal(createVNodeId(vNode))
+        if (isVNodeDeleted(vNode)) {
+          return id
+        }
+        if (node.current !== vNode) {
+          registerVNodeCleanup(
+            vNode,
+            Signal.id(id),
+            Signal.dispose.bind(null, id)
+          )
+        }
         prevIndex = vNode.index
         propSyncs.push(() => {
           if (prevIndex !== vNode.index) {
@@ -148,61 +144,118 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
       return id
     },
     get props() {
-      return currentProps.current
+      return (propsProxy ??= new Proxy(
+        {},
+        {
+          get(_, key) {
+            if (typeof key === "symbol")
+              return Reflect.get(currentProps.current as any, key)
+            const v = (currentProps.current as any)[key]
+            if (v !== null && typeof v === "object" && !Signal.isSignal(v)) {
+              return createProxy(v)
+            }
+            return v
+          },
+        }
+      ) as InferredProps)
     },
   }
   return setupResult
 }
+
 function propsUnchangedAtPaths(
   oldProps: Record<string, unknown>,
   newProps: Record<string, unknown>,
-  paths: Set<string>
+  accessedPaths: Set<string[]>
 ): boolean {
-  for (const path of paths) {
-    if (!Object.is(getAtPath(oldProps, path), getAtPath(newProps, path))) {
-      return false
+  outer: for (const path of accessedPaths) {
+    let a: unknown = oldProps
+    let b: unknown = newProps
+
+    for (let i = 0; i < path.length; i++) {
+      const key = path[i]
+
+      // Sentinel: caller iterated keys of the object at this path —
+      // re-run if the key sets differ
+      if (key === OWN_KEYS) {
+        if (a === b) continue outer
+        if (
+          a == null ||
+          b == null ||
+          typeof a !== "object" ||
+          typeof b !== "object"
+        ) {
+          return false
+        }
+        const aKeys = Object.keys(a)
+        const bKeys = Object.keys(b)
+        if (aKeys.length !== bKeys.length) return false
+        for (const k of aKeys) {
+          if (!(k in (b as object))) return false
+        }
+        continue outer
+      }
+
+      if (a === b) continue outer
+      if (
+        a == null ||
+        b == null ||
+        typeof a !== "object" ||
+        typeof b !== "object"
+      ) {
+        if (!Object.is(a, b)) return false
+        continue outer
+      }
+      a = (a as Record<string, unknown>)[key]
+      b = (b as Record<string, unknown>)[key]
     }
+
+    if (!Object.is(a, b)) 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
-}
+const proxyCache = new WeakMap<object, any>()
 
 /**
- * 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.
+ * Proxy that records accessed paths and primitives into the current
+ * tracking context (currentAccessedPaths).
  */
-function createPropsProxy<P extends Record<string, unknown>>(
-  props: P,
-  accessedPaths: Set<string>,
-  pathPrefix?: string
+function createProxy<P extends Record<string, unknown>>(
+  source: P,
+  path: 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
+  let cached = proxyCache.get(source)
+
+  if (!cached) {
+    cached = new Proxy(source, {
+      get(holder, key: string | symbol) {
+        if (typeof key === "symbol") return Reflect.get(holder, key)
+
+        const keyPath = [...path, key as string]
+        const v = holder[key as string]
+
+        if (v !== null && typeof v === "object" && !Signal.isSignal(v)) {
+          return createProxy(v as Record<string, unknown>, keyPath)
+        }
+
+        currentAccessedPaths?.add(keyPath)
         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
+      },
+      has(holder, key: string | symbol) {
+        if (typeof key === "symbol") return Reflect.has(holder, key)
+        currentAccessedPaths?.add([...path, key as string])
+        return key in holder
+      },
+      ownKeys(holder) {
+        currentAccessedPaths?.add([...path, OWN_KEYS])
+        return Reflect.ownKeys(holder)
+      },
+    })
+
+    proxyCache.set(source, cached)
+  }
+
+  return cached
 }

package/src/hooks/utils.ts

@@ -1,10 +1,11 @@
+import { $INLINE_FN } from "../constants.js"
 import { node } from "../globals.js"
 
 export function getVNodeLifecycleHooks(): null | NonNullable<
   Kiru.VNode["hooks"]
 > {
   const vNode = node.current!
-  if (!vNode) return null
+  if (!vNode || vNode.type === $INLINE_FN) return null
 
   return (vNode.hooks ??= {
     pre: [],

package/src/hydration.ts

@@ -1,4 +1,4 @@
-import type { MaybeDom, SomeDom } from "./types.utils"
+import type { MaybeDom, SomeDom } from "./types.utils.js"
 
 const parents: SomeDom[] = []
 const childIdx: number[] = []

package/src/index.ts

@@ -1,7 +1,7 @@
 import { createKiruGlobalContext } from "./globalContext.js"
 import { isBrowser } from "./env.js"
 
-export type * from "./types"
+export type * from "./types.js"
 export * from "./signals/index.js"
 export * from "./action.js"
 export * from "./appHandle.js"

package/src/profiling.ts

@@ -1,4 +1,4 @@
-import type { AppHandle } from "./appHandle"
+import type { AppHandle } from "./appHandle.js"
 
 const MAX_TICKS = 100
 

package/src/reconciler.ts

@@ -1,4 +1,9 @@
-import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
+import {
+  $FRAGMENT,
+  $INLINE_FN,
+  FLAG_PLACEMENT,
+  FLAG_UPDATE,
+} from "./constants.js"
 import {
   getVNodeApp,
   isElement,
@@ -189,6 +194,10 @@ function updateSlot(
     }
     return updateFragment(parent, oldChild, child)
   }
+  if (typeof child === "function") {
+    if (key !== null) return null
+    return updateInlineFnChild(parent, oldChild, child)
+  }
   return null
 }
 
@@ -263,6 +272,23 @@ function updateFragment(
   return oldChild
 }
 
+function updateInlineFnChild(
+  parent: VNode,
+  oldChild: VNode | null,
+  expr: Function
+) {
+  if (oldChild === null || oldChild.type !== $INLINE_FN) {
+    return createVNode(parent, $INLINE_FN, { expr })
+  }
+  if (__DEV__) {
+    dev_emitUpdateNode()
+  }
+  oldChild.props = { expr }
+  oldChild.flags |= FLAG_UPDATE
+  oldChild.sibling = null
+  return oldChild
+}
+
 function createChild(parent: VNode, child: unknown): VNode | null {
   if (isValidTextChild(child)) {
     return createVNode(parent, "#text", { nodeValue: "" + child })
@@ -283,6 +309,10 @@ function createChild(parent: VNode, child: unknown): VNode | null {
     return createVNode(parent, $FRAGMENT, { children: child })
   }
 
+  if (typeof child === "function") {
+    return createVNode(parent, $INLINE_FN, { expr: child })
+  }
+
   return null
 }
 
@@ -316,14 +346,11 @@ function updateFromMap(
   const isSig = Signal.isSignal(child)
   if (isSig || isValidTextChild(child)) {
     const oldChild = existingChildren.get(index)
-    if (oldChild) {
+    if (oldChild?.type === "#text") {
       if (oldChild.props.nodeValue === child) {
         return oldChild
       }
-      if (
-        oldChild.type === "#text" &&
-        Signal.isSignal(oldChild.props.nodeValue)
-      ) {
+      if (Signal.isSignal(oldChild.props.nodeValue)) {
         oldChild.cleanups?.["nodeValue"]?.()
       }
     }
@@ -356,11 +383,11 @@ function updateFromMap(
 
   if (Array.isArray(child)) {
     const props = { children: child }
-    const oldChild = existingChildren.get(index)
     if (__DEV__) {
       markListChild(child)
     }
-    if (oldChild) {
+    const oldChild = existingChildren.get(index)
+    if (oldChild?.type === $FRAGMENT) {
       if (__DEV__) {
         dev_emitUpdateNode()
       }
@@ -372,6 +399,21 @@ function updateFromMap(
     return createVNode(parent, $FRAGMENT, props, null, index)
   }
 
+  if (typeof child === "function") {
+    const props = { expr: child }
+    const oldChild = existingChildren.get(index)
+    if (oldChild?.type === $INLINE_FN) {
+      if (__DEV__) {
+        dev_emitUpdateNode()
+      }
+      oldChild.flags |= FLAG_UPDATE
+      oldChild.props = props
+      return oldChild
+    }
+
+    return createVNode(parent, $INLINE_FN, props, null, index)
+  }
+
   return null
 }
 
@@ -472,7 +514,7 @@ function getNearestParentFcTag(vNode: VNode) {
 function createVNode(
   parent: VNode,
   type: VNode["type"],
-  props: VNode["props"],
+  props?: VNode["props"],
   key: VNode["key"] = null,
   index = 0
 ): VNode {