kiru 0.54.0-preview.1 → 0.54.1

package/src/scheduler.ts

@@ -7,6 +7,7 @@ import type {
 import {
   $CONTEXT_PROVIDER,
   $ERROR_BOUNDARY,
+  $MEMO,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
   FLAG_DIRTY,
@@ -33,8 +34,11 @@ import {
   isExoticType,
   getVNodeAppContext,
   findParentErrorBoundary,
+  call,
 } from "./utils/index.js"
 import type { AppContext } from "./appContext"
+import type { MemoFn } from "./components/memo"
+import { isHmrUpdate } from "./hmr.js"
 
 type VNode = Kiru.VNode
 
@@ -52,27 +56,10 @@ let postEffects: Array<Function> = []
 let animationFrameHandle = -1
 
 /**
- * Defers work until the scheduler becomes idle.
- *
- * This works in two modes:
- *  - `await nextIdle()` resolves once idle, allowing async/await usage.
- *  - `nextIdle(fn)` schedules a callback to run when idle.
- *
- * Callbacks are executed before promises resolve,
- * and multiple calls queue until the scheduler becomes idle.
+ * Runs a function after any existing work has been completed,
+ * or immediately if the scheduler is already idle.
  */
-export function nextIdle(): Promise<void>
-
-/**
- * Schedules `fn` to run once the scheduler becomes idle.
- * If already idle, `fn` executes immediately.
- */
-export function nextIdle<T extends () => void>(fn: T): void
-
-export function nextIdle(fn?: () => void): void | Promise<void> {
-  if (!fn) {
-    return new Promise<void>(nextIdle)
-  }
+export function nextIdle(fn: () => void): void {
   if (isRunningOrQueued) {
     nextIdleEffects.push(fn)
     return
@@ -83,13 +70,13 @@ export function nextIdle(fn?: () => void): void | Promise<void> {
 /**
  * Syncronously flushes any pending work.
  */
-export function flushSync() {
+export function flushSync(): void {
   if (!isRunningOrQueued) return
   window.cancelAnimationFrame(animationFrameHandle)
   doWork()
 }
 
-export function renderRootSync(rootNode: VNode) {
+export function renderRootSync(rootNode: VNode): void {
   rootNode.flags |= FLAG_DIRTY
   treesInProgress.push(rootNode)
 
@@ -107,20 +94,20 @@ export function requestUpdate(vNode: VNode): void {
   queueUpdate(vNode)
 }
 
-function queueBeginWork() {
+function queueBeginWork(): void {
   if (isRunningOrQueued) return
   isRunningOrQueued = true
   animationFrameHandle = window.requestAnimationFrame(doWork)
 }
 
-function onWorkFinished() {
+function onWorkFinished(): void {
   isRunningOrQueued = false
   while (nextIdleEffects.length) {
     nextIdleEffects.shift()!()
   }
 }
 
-function queueUpdate(vNode: VNode) {
+function queueUpdate(vNode: VNode): void {
   // In immediate effect mode (useLayoutEffect), immediately mark the render as dirty
   if (isImmediateEffectsMode) {
     immediateEffectDirtiedRender = true
@@ -146,12 +133,12 @@ function queueUpdate(vNode: VNode) {
   treesInProgress.push(vNode)
 }
 
-function queueDelete(vNode: VNode) {
+function queueDelete(vNode: VNode): void {
   traverseApply(vNode, (n) => (n.flags |= FLAG_DELETION))
   deletions.push(vNode)
 }
 
-const depthSort = (a: VNode, b: VNode) => b.depth - a.depth
+const depthSort = (a: VNode, b: VNode): number => b.depth - a.depth
 
 let currentWorkRoot: VNode | null = null
 
@@ -180,7 +167,7 @@ function doWork(): void {
     const flags = currentWorkRoot.flags
     if (flags & FLAG_DELETION) continue
     if (flags & FLAG_DIRTY) {
-      let n: VNode | void = currentWorkRoot
+      let n: VNode | null = currentWorkRoot
       while ((n = performUnitOfWork(n))) {}
 
       while (deletions.length) {
@@ -211,7 +198,7 @@ function doWork(): void {
   consecutiveDirtyCount = 0
 
   onWorkFinished()
-  flushEffects(postEffects)
+  queueMicrotask(() => flushEffects(postEffects))
   if (__DEV__) {
     window.__kiru.emit("update", appCtx!)
     window.__kiru.profilingContext?.emit("update", appCtx!)
@@ -219,15 +206,57 @@ function doWork(): void {
   }
 }
 
-function performUnitOfWork(vNode: VNode): VNode | void {
-  let renderChild = true
+function performUnitOfWork(vNode: VNode): VNode | null {
+  const next = updateVNode(vNode)
+
+  if (vNode.deletions !== null) {
+    vNode.deletions.forEach(queueDelete)
+    vNode.deletions = null
+  }
+
+  if (next) {
+    return next
+  }
+
+  let nextNode: VNode | null = vNode
+  while (nextNode) {
+    // queue effects upon ascent
+    if (nextNode.immediateEffects) {
+      preEffects.push(...nextNode.immediateEffects)
+      nextNode.immediateEffects = undefined
+    }
+    if (nextNode.effects) {
+      postEffects.push(...nextNode.effects)
+      nextNode.effects = undefined
+    }
+
+    if (nextNode === currentWorkRoot) return null
+    if (nextNode.sibling) {
+      return nextNode.sibling
+    }
+
+    nextNode = nextNode.parent
+    if (renderMode.current === "hydrate" && nextNode?.dom) {
+      hydrationStack.pop()
+    }
+  }
+
+  return null
+}
+
+function updateVNode(vNode: VNode): VNode | null {
+  const { type, props, prev, flags } = vNode
+  if (__DEV__ && isHmrUpdate()) {
+  } else if ((flags & FLAG_DIRTY) === 0 && props === prev?.props) {
+    return null
+  }
   try {
-    if (typeof vNode.type === "string") {
-      updateHostComponent(vNode as DomVNode)
-    } else if (isExoticType(vNode.type)) {
-      updateExoticComponent(vNode)
+    if (typeof type === "string") {
+      return updateHostComponent(vNode as DomVNode)
+    } else if (isExoticType(type)) {
+      return updateExoticComponent(vNode)
     } else {
-      renderChild = updateFunctionComponent(vNode as FunctionVNode)
+      return updateFunctionComponent(vNode as FunctionVNode)
     }
   } catch (error) {
     if (__DEV__) {
@@ -260,47 +289,16 @@ function performUnitOfWork(vNode: VNode): VNode | void {
         throw error
       }
       console.error(error)
-      return
+      return vNode.child
     }
     setTimeout(() => {
       throw error
     })
   }
-
-  if (vNode.deletions !== null) {
-    vNode.deletions.forEach(queueDelete)
-    vNode.deletions = null
-  }
-
-  if (renderChild && vNode.child) {
-    return vNode.child
-  }
-
-  let nextNode: VNode | null = vNode
-  while (nextNode) {
-    // queue effects upon ascent
-    if (nextNode.immediateEffects) {
-      preEffects.push(...nextNode.immediateEffects)
-      nextNode.immediateEffects = undefined
-    }
-    if (nextNode.effects) {
-      postEffects.push(...nextNode.effects)
-      nextNode.effects = undefined
-    }
-
-    if (nextNode === currentWorkRoot) return
-    if (nextNode.sibling) {
-      return nextNode.sibling
-    }
-
-    nextNode = nextNode.parent
-    if (renderMode.current === "hydrate" && nextNode?.dom) {
-      hydrationStack.pop()
-    }
-  }
+  return null
 }
 
-function updateExoticComponent(vNode: VNode) {
+function updateExoticComponent(vNode: VNode): VNode | null {
   const { props, type } = vNode
   let children = props.children
 
@@ -326,20 +324,19 @@ function updateExoticComponent(vNode: VNode) {
     }
   }
 
-  vNode.child = reconcileChildren(vNode, children)
+  return (vNode.child = reconcileChildren(vNode, children))
 }
 
-function updateFunctionComponent(vNode: FunctionVNode) {
+function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
   const { type, props, subs, prev, flags } = vNode
   if (flags & FLAG_MEMO) {
-    vNode.memoizedProps = props
     if (
-      prev?.memoizedProps &&
-      vNode.arePropsEqual!(prev.memoizedProps, props) &&
-      !vNode.hmrUpdated
+      prev &&
+      (type as MemoFn)[$MEMO](prev.props, props) &&
+      !(__DEV__ && isHmrUpdate())
     ) {
       vNode.flags |= FLAG_NOOP
-      return false
+      return null
     }
     vNode.flags &= ~FLAG_NOOP
   }
@@ -362,14 +359,14 @@ function updateFunctionComponent(vNode: FunctionVNode) {
        * and not clearing the entire set.
        */
       if (subs) {
-        subs.forEach((unsub) => unsub())
+        subs.forEach(call)
         subs.clear()
       }
 
       if (__DEV__) {
         newChild = latest(type)(props)
 
-        if (vNode.hmrUpdated && vNode.hooks && vNode.hookSig) {
+        if (isHmrUpdate() && vNode.hooks && vNode.hookSig) {
           const len = vNode.hooks.length
           if (hookIndex.current < len) {
             // clean up any hooks that were removed
@@ -382,7 +379,6 @@ function updateFunctionComponent(vNode: FunctionVNode) {
           }
         }
 
-        delete vNode.hmrUpdated
         if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
           throw new KiruError({
             message:
@@ -395,14 +391,14 @@ function updateFunctionComponent(vNode: FunctionVNode) {
       }
       newChild = type(props)
     } while (isRenderDirtied)
-    vNode.child = reconcileChildren(vNode, newChild)
-    return true
+
+    return (vNode.child = reconcileChildren(vNode, newChild))
   } finally {
     node.current = null
   }
 }
 
-function updateHostComponent(vNode: DomVNode) {
+function updateHostComponent(vNode: DomVNode): VNode | null {
   const { props, type } = vNode
   if (__DEV__) {
     assertValidElementProps(vNode)
@@ -413,10 +409,8 @@ function updateHostComponent(vNode: DomVNode) {
     } else {
       vNode.dom = createDom(vNode)
     }
-    if (__DEV__) {
-      if (vNode.dom instanceof Element) {
-        vNode.dom.__kiruNode = vNode
-      }
+    if (__DEV__ && vNode.dom instanceof Element) {
+      vNode.dom.__kiruNode = vNode
     }
   }
   // text should _never_ have children
@@ -426,9 +420,11 @@ function updateHostComponent(vNode: DomVNode) {
       hydrationStack.push(vNode.dom!)
     }
   }
+
+  return vNode.child
 }
 
-function checkForTooManyConsecutiveDirtyRenders() {
+function checkForTooManyConsecutiveDirtyRenders(): void {
   if (consecutiveDirtyCount > CONSECUTIVE_DIRTY_LIMIT) {
     throw new KiruError(
       "Maximum update depth exceeded. This can happen when a component repeatedly calls setState during render or in useLayoutEffect. Kiru limits the number of nested updates to prevent infinite loops."
@@ -436,7 +432,7 @@ function checkForTooManyConsecutiveDirtyRenders() {
   }
 }
 
-function flushEffects(effectArr: Function[]) {
+function flushEffects(effectArr: Function[]): void {
   for (let i = 0; i < effectArr.length; i++) {
     effectArr[i]()
   }

package/src/signals/base.ts

@@ -17,7 +17,6 @@ export class Signal<T> {
   [$SIGNAL] = true;
   [$HMR_ACCEPT]?: HMRAccept<Signal<any>>
   displayName?: string
-  private onBeforeRead?: () => void
   protected $subs?: Set<SignalSubscriber<any>>
   protected $id: string
   protected $value: T
@@ -60,7 +59,6 @@ export class Signal<T> {
   }
 
   get value() {
-    this.onBeforeRead?.()
     if (__DEV__) {
       const tgt = latest(this)
       Signal.entangle(tgt)
@@ -86,7 +84,6 @@ export class Signal<T> {
   }
 
   peek() {
-    this.onBeforeRead?.()
     if (__DEV__) {
       return latest(this).$value
     }
@@ -105,7 +102,6 @@ export class Signal<T> {
   }
 
   toString() {
-    this.onBeforeRead?.()
     if (__DEV__) {
       const tgt = latest(this)
       Signal.entangle(tgt)
@@ -192,10 +188,6 @@ export class Signal<T> {
     ;(vNode.subs ??= new Set()).add(unsub)
   }
 
-  static configure(signal: Signal<any>, onBeforeRead?: () => void) {
-    signal.onBeforeRead = onBeforeRead
-  }
-
   static dispose(signal: Signal<any>) {
     signal.$isDisposed = true
     if (__DEV__) {

package/src/signals/computed.ts

@@ -1,7 +1,7 @@
 import { __DEV__ } from "../env.js"
 import { $HMR_ACCEPT } from "../constants.js"
 import { depsRequireChange, useHook } from "../hooks/utils.js"
-import { latest } from "../utils/index.js"
+import { call, latest } from "../utils/index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
 import { Signal } from "./base.js"
@@ -32,28 +32,23 @@ export class ComputedSignal<T> extends Signal<T> {
         destroy: () => {},
       } satisfies HMRAccept<ComputedSignal<T>>
     }
-    Signal.configure(this, () => {
-      if (!this.$isDirty) return
-      if (__DEV__) {
-        /**
-         * This is a safeguard for dev-mode only, where a 'read' on an
-         * already-disposed signal during HMR update => `dom.setSignalProp`
-         * would throw due to invalid subs-map access.
-         *
-         * Perhaps in future we could handle this better by carrying over
-         * the previous signal's ID and not disposing it / deleting the
-         * map entry.
-         */
-        if (this.$isDisposed) return
-      }
-      ComputedSignal.run(this)
-    })
   }
 
   get value() {
+    this.ensureNotDirty()
     return super.value
   }
 
+  toString() {
+    this.ensureNotDirty()
+    return super.toString()
+  }
+
+  peek() {
+    this.ensureNotDirty()
+    return super.peek()
+  }
+
   // @ts-expect-error
   set value(next: T) {}
 
@@ -83,7 +78,7 @@ export class ComputedSignal<T> extends Signal<T> {
     const { $id, $unsubs } = latest(computed)
 
     effectQueue.delete($id)
-    $unsubs.forEach((unsub) => unsub())
+    $unsubs.forEach(call)
     $unsubs.clear()
     computed.$isDirty = true
   }
@@ -111,6 +106,23 @@ export class ComputedSignal<T> extends Signal<T> {
     $computed.sneak(value)
     $computed.$isDirty = false
   }
+
+  private ensureNotDirty() {
+    if (!this.$isDirty) return
+    if (__DEV__) {
+      /**
+       * This is a safeguard for dev-mode only, where a 'read' on an
+       * already-disposed signal during HMR update => `dom.setSignalProp`
+       * would throw due to invalid subs-map access.
+       *
+       * Perhaps in future we could handle this better by carrying over
+       * the previous signal's ID and not disposing it / deleting the
+       * map entry.
+       */
+      if (this.$isDisposed) return
+    }
+    ComputedSignal.run(this)
+  }
 }
 
 export function computed<T>(

package/src/signals/for.ts

@@ -1,25 +1,30 @@
 import type { Signal } from "./base.js"
+import { unwrap } from "./utils.js"
 
-type InferArraySignalItemType<T extends Signal<any[]>> = T extends Signal<
-  infer V
->
-  ? V extends Array<infer W>
-    ? W
-    : never
-  : never
+type InferArraySignalItemType<T extends Signal<any[]> | readonly unknown[]> =
+  T extends Signal<infer V>
+    ? V extends Array<infer W>
+      ? W
+      : never
+    : T extends unknown[]
+      ? T[number]
+      : never
 
-type ForProps<T extends Signal<any[]>, U = InferArraySignalItemType<T>> = {
+type ForProps<
+  T extends Signal<any[]> | readonly unknown[],
+  U = InferArraySignalItemType<T>,
+> = {
   each: T
   fallback?: JSX.Element
   children: (value: U, index: number, array: U[]) => JSX.Element
 }
 
-export function For<T extends Signal<any[]>>({
+export function For<T extends Signal<any[]> | unknown[]>({
   each,
   fallback,
   children,
 }: ForProps<T>) {
-  const items = each.value
+  const items = unwrap(each, true)
   if (items.length === 0) return fallback
   return items.map(children)
 }

package/src/signals/utils.ts

@@ -1,3 +1,4 @@
+import { call } from "../utils/index.js"
 import { Signal } from "./base.js"
 import { effectQueue } from "./globals.js"
 
@@ -7,6 +8,6 @@ export function unwrap<T>(value: T | Signal<T>, reactive = false): T {
 }
 
 export const tick = () => {
-  effectQueue.forEach((fn) => fn())
+  effectQueue.forEach(call)
   effectQueue.clear()
 }

package/src/signals/watch.ts

@@ -2,7 +2,12 @@ import { __DEV__ } from "../env.js"
 import { useHook } from "../hooks/utils.js"
 import { effectQueue } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
-import { latest, sideEffectsEnabled, generateRandomID } from "../utils/index.js"
+import {
+  latest,
+  sideEffectsEnabled,
+  generateRandomID,
+  call,
+} from "../utils/index.js"
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 
@@ -26,12 +31,12 @@ export class WatchEffect<const Deps extends readonly Signal<unknown>[] = []> {
     this.unsubs = new Map()
     this.isRunning = false
     this.cleanup = null
-    if (__DEV__) {
-      if ("window" in globalThis) {
-        const signals = window.__kiru.HMRContext!.signals
-        if (signals.isWaitingForNextWatchCall()) {
-          signals.pushWatch(this as WatchEffect)
-        }
+    if (__DEV__ && "window" in globalThis) {
+      const { isWaitingForNextWatchCall, pushWatch } =
+        window.__kiru.HMRContext!.signals
+
+      if (isWaitingForNextWatchCall()) {
+        pushWatch(this as WatchEffect)
       }
     }
     this.start()
@@ -44,22 +49,24 @@ export class WatchEffect<const Deps extends readonly Signal<unknown>[] = []> {
 
     this.isRunning = true
 
-    if (__DEV__) {
-      // postpone execution during HMR
-      if ("window" in globalThis && window.__kiru.HMRContext?.isReplacement()) {
-        return queueMicrotask(() => {
-          if (this.isRunning) {
-            WatchEffect.run(this as WatchEffect)
-          }
-        })
-      }
+    // postpone execution during HMR
+    if (
+      __DEV__ &&
+      "window" in globalThis &&
+      window.__kiru.HMRContext?.isReplacement()
+    ) {
+      return queueMicrotask(() => {
+        if (this.isRunning) {
+          WatchEffect.run(this as WatchEffect)
+        }
+      })
     }
     WatchEffect.run(this as WatchEffect)
   }
 
   stop() {
     effectQueue.delete(this.id)
-    this.unsubs.forEach((fn) => fn())
+    this.unsubs.forEach(call)
     this.unsubs.clear()
     this.cleanup?.()
     this.cleanup = null
@@ -117,11 +124,9 @@ export function useWatch<const Deps extends readonly Signal<unknown>[]>(
     "useWatch",
     { watcher: null as any as WatchEffect<Deps> },
     ({ hook, isInit, isHMR }) => {
-      if (__DEV__) {
-        if (isHMR) {
-          hook.cleanup?.()
-          isInit = true
-        }
+      if (__DEV__ && isHMR) {
+        hook.cleanup?.()
+        isInit = true
       }
       if (isInit) {
         const watcher = (hook.watcher = watch(depsOrGetter as Deps, getter!))

package/src/ssr/client.ts

@@ -10,7 +10,7 @@ interface HydrationAppContextOptions extends AppContextOptions {
    * - "dynamic": SSR with lazy promise hydration
    * @default "dynamic"
    */
-  hydrationMode?: Kiru.HydrationMode
+  hydrationMode?: "static" | "dynamic"
 }
 
 export function hydrate(
@@ -22,7 +22,6 @@ export function hydrate(
 
   const prevRenderMode = renderMode.current
   renderMode.current = "hydrate"
-  hydrationStack.captureEvents(container)
 
   const prevHydrationMode = hydrationMode.current
   hydrationMode.current = options?.hydrationMode ?? "dynamic"
@@ -30,8 +29,6 @@ export function hydrate(
   const app = mount(children, container, options)
 
   renderMode.current = prevRenderMode
-  hydrationStack.releaseEvents(container)
-
   hydrationMode.current = prevHydrationMode
 
   return app