kiru 0.47.0 → 0.48.0

package/src/scheduler.ts

@@ -7,6 +7,9 @@ import {
   $CONTEXT_PROVIDER,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
+  FLAG_DIRTY,
+  FLAG_MEMO,
+  FLAG_NOOP,
 } from "./constants.js"
 import { commitDeletion, commitWork, createDom, hydrateDom } from "./dom.js"
 import { __DEV__ } from "./env.js"
@@ -16,10 +19,8 @@ import { hydrationStack } from "./hydration.js"
 import { assertValidElementProps } from "./props.js"
 import { reconcileChildren } from "./reconciler.js"
 import {
-  willMemoBlockUpdate,
   latest,
   traverseApply,
-  vNodeContains,
   isExoticType,
   getVNodeAppContext,
 } from "./utils.js"
@@ -28,9 +29,7 @@ import type { AppContext } from "./appContext"
 type VNode = Kiru.VNode
 
 let appCtx: AppContext | null
-let nextUnitOfWork: VNode | null = null
 let treesInProgress: VNode[] = []
-let currentTreeIndex = 0
 let isRunningOrQueued = false
 let nextIdleEffects: (() => void)[] = []
 let deletions: VNode[] = []
@@ -38,7 +37,6 @@ let isImmediateEffectsMode = false
 let immediateEffectDirtiedRender = false
 let isRenderDirtied = false
 let consecutiveDirtyCount = 0
-let pendingContextChanges = new Set<ContextProviderNode<any>>()
 let preEffects: Array<Function> = []
 let postEffects: Array<Function> = []
 let animationFrameHandle = -1
@@ -105,91 +103,14 @@ function queueUpdate(vNode: VNode) {
     return
   }
 
-  // If it's already the next unit of work, no need to queue again
-  if (nextUnitOfWork === vNode) {
-    return
-  }
+  if (vNode.flags & (FLAG_DIRTY | FLAG_DELETION)) return
+  vNode.flags |= FLAG_DIRTY
 
-  if (nextUnitOfWork === null) {
+  if (!treesInProgress.length) {
     treesInProgress.push(vNode)
-    nextUnitOfWork = vNode
     return queueBeginWork()
   }
 
-  for (let i = 0; i < treesInProgress.length; i++) {
-    const tree = treesInProgress[i]
-    if (tree !== vNode) continue
-    if (i < currentTreeIndex) {
-      // It was already processed; requeue it to the end
-      currentTreeIndex--
-      treesInProgress.splice(i, 1)
-      treesInProgress.push(tree)
-    }
-    return
-  }
-
-  // Check if this node is a descendant of any trees already queued
-  for (let i = 0; i < treesInProgress.length; i++) {
-    const tree = treesInProgress[i]
-    if (!vNodeContains(tree, vNode)) continue
-
-    if (i === currentTreeIndex) {
-      // It's a child of the currently worked-on tree
-      // If it's deeper within the same tree, we can skip
-      if (vNodeContains(nextUnitOfWork, vNode)) return
-      // If it's not in the current work subtree, move back up to it
-      nextUnitOfWork = vNode
-    } else if (i < currentTreeIndex) {
-      // It's a descendant of an already processed tree; treat as a new update
-      treesInProgress.push(vNode)
-    }
-
-    return
-  }
-
-  // Check if this node contains any of the currently queued trees
-  let didReplaceTree = false
-  let shouldQueueAtEnd = false
-  for (let i = 0; i < treesInProgress.length; ) {
-    const tree = treesInProgress[i]
-    if (!vNodeContains(vNode, tree)) {
-      i++
-      continue
-    }
-    // This node contains another update root, replace it
-
-    if (i === currentTreeIndex) {
-      if (!didReplaceTree) {
-        treesInProgress.splice(i, 1, vNode)
-        nextUnitOfWork = vNode
-        didReplaceTree = true
-        i++ // advance past replaced node
-      } else {
-        treesInProgress.splice(i, 1)
-        // no increment
-      }
-    } else if (i < currentTreeIndex) {
-      currentTreeIndex--
-      treesInProgress.splice(i, 1)
-      if (!didReplaceTree) {
-        shouldQueueAtEnd = true
-        didReplaceTree = true
-      }
-      // no increment
-    } else {
-      // i > currentTreeIndex
-      treesInProgress.splice(i, 1)
-      if (!didReplaceTree) {
-        shouldQueueAtEnd = true
-        didReplaceTree = true
-      }
-      // no increment
-    }
-  }
-  if (!shouldQueueAtEnd && didReplaceTree) {
-    return
-  }
-  // If it doesn't overlap with any queued tree, queue as new independent update root
   treesInProgress.push(vNode)
 }
 
@@ -198,9 +119,13 @@ function queueDelete(vNode: VNode) {
   deletions.push(vNode)
 }
 
+const depthSort = (a: VNode, b: VNode) => b.depth - a.depth
+
+let currentWorkRoot: VNode | null = null
+
 function doWork(): void {
   if (__DEV__) {
-    const n = nextUnitOfWork ?? deletions[0] ?? treesInProgress[0]
+    const n = deletions[0] ?? treesInProgress[0]
     if (n) {
       appCtx = getVNodeAppContext(n)!
       window.__kiru?.profilingContext?.beginTick(appCtx)
@@ -209,21 +134,29 @@ function doWork(): void {
     }
   }
 
-  while (nextUnitOfWork) {
-    nextUnitOfWork =
-      performUnitOfWork(nextUnitOfWork) ??
-      treesInProgress[++currentTreeIndex] ??
-      queueBlockedContextDependencyRoots()
-  }
+  let len = 1
 
-  while (deletions.length) {
-    commitDeletion(deletions.shift()!)
-  }
-  const workRoots = [...treesInProgress]
-  treesInProgress.length = 0
-  currentTreeIndex = 0
-  for (const root of workRoots) {
-    commitWork(root)
+  while (treesInProgress.length) {
+    if (treesInProgress.length > len) {
+      treesInProgress.sort(depthSort)
+    }
+
+    currentWorkRoot = treesInProgress.shift()!
+    len = treesInProgress.length
+
+    const flags = currentWorkRoot.flags
+    if (flags & FLAG_DELETION) continue
+    if (flags & FLAG_DIRTY) {
+      let n: VNode | void = currentWorkRoot
+      while ((n = performUnitOfWork(n))) {}
+
+      while (deletions.length) {
+        commitDeletion(deletions.pop()!)
+      }
+      commitWork(currentWorkRoot)
+
+      currentWorkRoot.flags &= ~FLAG_DIRTY
+    }
   }
 
   isImmediateEffectsMode = true
@@ -252,39 +185,6 @@ function doWork(): void {
   }
 }
 
-function queueBlockedContextDependencyRoots(): VNode | null {
-  if (pendingContextChanges.size === 0) return null
-
-  // TODO: it's possible that a 'job' created by this process is
-  // blocked by a parent memo after a queueUpdate -> replaceTree action.
-  // To prevent this, we might need to add these to a distinct queue.
-  const jobRoots: VNode[] = []
-  pendingContextChanges.forEach((provider) => {
-    provider.props.dependents.forEach((dep) => {
-      if (!willMemoBlockUpdate(provider, dep)) return
-      for (let i = 0; i < jobRoots.length; i++) {
-        const root = jobRoots[i]
-        if (vNodeContains(root, dep)) {
-          if (willMemoBlockUpdate(root, dep)) {
-            // root is a parent of dep and there's a memo between them, prevent consolidation and queue as new root
-            break
-          }
-          return
-        }
-        if (vNodeContains(dep, root)) {
-          jobRoots[i] = dep
-          return
-        }
-      }
-      jobRoots.push(dep)
-    })
-  })
-
-  pendingContextChanges.clear()
-  treesInProgress.push(...jobRoots)
-  return jobRoots[0] ?? null
-}
-
 function performUnitOfWork(vNode: VNode): VNode | void {
   let renderChild = true
   try {
@@ -292,15 +192,15 @@ function performUnitOfWork(vNode: VNode): VNode | void {
     if (typeof vNode.type === "string") {
       updateHostComponent(vNode as DomVNode)
     } else if (isExoticType(vNode.type)) {
-      if (vNode.type === $CONTEXT_PROVIDER) {
+      if (vNode?.type === $CONTEXT_PROVIDER) {
         const asProvider = vNode as ContextProviderNode<any>
-        const { dependents, value } = asProvider.props
-        if (
-          dependents.size &&
-          asProvider.prev &&
-          asProvider.prev.props.value !== value
-        ) {
-          pendingContextChanges.add(asProvider)
+        const {
+          props: { dependents, value },
+          prev,
+        } = asProvider
+
+        if (dependents.size && prev && prev.props.value !== value) {
+          dependents.forEach(queueUpdate)
         }
       }
       vNode.child = reconcileChildren(vNode, props.children)
@@ -350,7 +250,7 @@ function performUnitOfWork(vNode: VNode): VNode | void {
       nextNode.effects = undefined
     }
 
-    if (nextNode === treesInProgress[currentTreeIndex]) return
+    if (nextNode === currentWorkRoot) return
     if (nextNode.sibling) {
       return nextNode.sibling
     }
@@ -363,22 +263,25 @@ function performUnitOfWork(vNode: VNode): VNode | void {
 }
 
 function updateFunctionComponent(vNode: FunctionVNode) {
-  const { type, props, subs, prev, isMemoized } = vNode
-  if (isMemoized) {
+  const { type, props, subs, prev, flags } = vNode
+  if (flags & FLAG_MEMO) {
     vNode.memoizedProps = props
     if (
       prev?.memoizedProps &&
       vNode.arePropsEqual!(prev.memoizedProps, props) &&
       !vNode.hmrUpdated
     ) {
+      vNode.flags |= FLAG_NOOP
       return false
     }
+    vNode.flags &= ~FLAG_NOOP
   }
   try {
     node.current = vNode
     let newChild
     let renderTryCount = 0
     do {
+      vNode.flags &= ~FLAG_DIRTY
       isRenderDirtied = false
       hookIndex.current = 0
 

package/src/signals/base.ts

@@ -1,13 +1,13 @@
+import { latest, safeStringify, sideEffectsEnabled } from "../utils.js"
 import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
 import { __DEV__ } from "../env.js"
-import type { HMRAccept } from "../hmr.js"
-import { latest, safeStringify, sideEffectsEnabled } from "../utils.js"
-import { tracking, signalSubsMap } from "./globals.js"
-import { type SignalSubscriber, ReadonlySignal } from "./types.js"
 import { node } from "../globals.js"
 import { useHook } from "../hooks/utils.js"
 import { generateRandomID } from "../generateId.js"
 import { requestUpdate } from "../scheduler.js"
+import { tracking, signalSubsMap } from "./globals.js"
+import type { SignalSubscriber, ReadonlySignal } from "./types.js"
+import type { HMRAccept } from "../hmr.js"
 
 export class Signal<T> {
   [$SIGNAL] = true;

package/src/signals/computed.ts

@@ -1,11 +1,11 @@
 import { __DEV__ } from "../env.js"
-import { Signal } from "./index.js"
-import { effectQueue, signalSubsMap } from "./globals.js"
 import { $HMR_ACCEPT } from "../constants.js"
-import type { HMRAccept } from "../hmr.js"
 import { useHook } from "../hooks/utils.js"
-import { executeWithTracking } from "./effect.js"
 import { latest } from "../utils.js"
+import { effectQueue, signalSubsMap } from "./globals.js"
+import { executeWithTracking } from "./effect.js"
+import { Signal } from "./base.js"
+import type { HMRAccept } from "../hmr.js"
 
 export class ComputedSignal<T> extends Signal<T> {
   protected $getter: (prev?: T) => T

package/src/signals/effect.ts

@@ -1,7 +1,8 @@
 import { node } from "../globals.js"
 import { sideEffectsEnabled } from "../utils.js"
 import { tracking, effectQueue } from "./globals.js"
-import type { Signal } from "./index.js"
+import { tick } from "./utils.js"
+import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 
 type TrackedExecutionContext<T, Deps extends readonly Signal<unknown>[]> = {
@@ -42,8 +43,8 @@ export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
     }
 
     const effect = () => {
-      if (!effectQueue.has(id)) {
-        queueMicrotask(() => effectQueue.get(id)?.())
+      if (!effectQueue.size) {
+        queueMicrotask(tick)
       }
       effectQueue.set(id, onDepChanged)
     }

package/src/signals/globals.ts

@@ -1,4 +1,4 @@
-import type { Signal } from "./index.js"
+import type { Signal } from "./base.js"
 import type { SignalSubscriber } from "./types.js"
 
 export const tracking = {

package/src/signals/jsx.ts

@@ -1,4 +1,4 @@
-import type { Signal } from "./index.js"
+import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 
 type InferArraySignalItemType<T extends Signal<any[]>> = T extends Signal<

package/src/signals/types.ts

@@ -1,4 +1,4 @@
-import { type Signal } from "./index.js"
+import type { Signal } from "./base.js"
 
 export type ReadonlySignal<T> = Signal<T> & {
   readonly value: T

package/src/signals/utils.ts

@@ -1,4 +1,4 @@
-import { Signal } from "./index.js"
+import { Signal } from "./base.js"
 import { effectQueue } from "./globals.js"
 
 export function unwrap<T>(value: T | Signal<T>, reactive = false): T {

package/src/ssr/server.ts

@@ -7,7 +7,7 @@ import {
   propsToElementAttributes,
   isExoticType,
 } from "../utils.js"
-import { Signal } from "../signals/index.js"
+import { Signal } from "../signals/base.js"
 import { $HYDRATION_BOUNDARY, voidElements } from "../constants.js"
 import { assertValidElementProps } from "../props.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./hydrationBoundary.js"

package/src/swr.ts

@@ -1,6 +1,6 @@
 import { __DEV__ } from "./env.js"
 import { useHook } from "./hooks/utils.js"
-import { Signal } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
 import {
   noop,
   deepCompare,

package/src/types.ts

@@ -194,7 +194,6 @@ declare global {
       effects?: Array<Function>
       immediateEffects?: Array<Function>
       memoizedProps?: Record<string, any>
-      isMemoized?: boolean
       arePropsEqual?: (
         prev: Record<string, any>,
         next: Record<string, any>

package/src/utils.ts

@@ -5,12 +5,11 @@ import {
   $HYDRATION_BOUNDARY,
   booleanAttributes,
   FLAG_DELETION,
-  FLAG_HAS_MEMO_ANCESTOR,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
   REGEX_UNIT,
 } from "./constants.js"
-import { unwrap } from "./signals/index.js"
+import { unwrap } from "./signals/utils.js"
 import { __DEV__ } from "./env.js"
 import type { AppContext } from "./appContext"
 
@@ -24,12 +23,10 @@ export {
   isExoticType,
   isVNodeDeleted,
   vNodeContains,
-  willMemoBlockUpdate,
   getCurrentVNode,
   getVNodeAppContext,
   commitSnapshot,
   traverseApply,
-  postOrderApply,
   findParent,
   propToHtmlAttr,
   propValueToHtmlAttrValue,
@@ -157,25 +154,6 @@ function vNodeContains(haystack: VNode, needle: VNode): boolean {
   return false
 }
 
-function willMemoBlockUpdate(root: VNode, target: VNode): boolean {
-  let node: VNode | null = target
-
-  while (node && node !== root && node.flags & FLAG_HAS_MEMO_ANCESTOR) {
-    const parent = node.parent
-    if (
-      parent?.isMemoized &&
-      parent.prev?.memoizedProps &&
-      parent.arePropsEqual!(parent.prev.memoizedProps, parent.props)
-    ) {
-      return true
-    }
-
-    node = node.parent
-  }
-
-  return false
-}
-
 function traverseApply(vNode: VNode, func: (node: VNode) => void): void {
   let applyToSiblings = false
   const nodes: VNode[] = [vNode]
@@ -188,49 +166,6 @@ function traverseApply(vNode: VNode, func: (node: VNode) => void): void {
   while (nodes.length) apply(nodes.shift()!)
 }
 
-function postOrderApply(
-  tree: VNode,
-  callbacks: {
-    /** called upon traversing to the next parent, and on the root */
-    onAscent: (vNode: VNode) => void
-    /** called before traversing to the next parent */
-    onBeforeAscent?: (vNode: VNode) => void
-    /** called before traversing to the next child */
-    onDescent?: (vNode: VNode) => void
-  }
-): void {
-  const root = tree
-  const rootChild = root.child
-  if (!rootChild) {
-    callbacks.onAscent(root)
-    return
-  }
-
-  callbacks.onDescent?.(root)
-  let branch = rootChild
-  while (branch) {
-    let c = branch
-    while (c) {
-      if (!c.child) break
-      callbacks.onDescent?.(c)
-      c = c.child
-    }
-
-    while (c && c !== root) {
-      callbacks.onAscent(c)
-      if (c.sibling) {
-        branch = c.sibling
-        break
-      }
-      callbacks.onBeforeAscent?.(c)
-      c = c.parent!
-    }
-    if (c === root) break
-  }
-
-  callbacks.onAscent(root)
-}
-
 function findParent(vNode: Kiru.VNode, predicate: (n: Kiru.VNode) => boolean) {
   let n: Kiru.VNode | null = vNode.parent
   while (n) {