kiru 0.47.1 → 0.48.0

package/src/dom.ts

@@ -3,16 +3,15 @@ import {
   commitSnapshot,
   propFilters,
   propToHtmlAttr,
-  postOrderApply,
   getVNodeAppContext,
 } from "./utils.js"
 import {
   booleanAttributes,
-  FLAG_DELETION,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
   FLAG_STATIC_DOM,
   svgTags,
+  FLAG_NOOP,
 } from "./constants.js"
 import { Signal } from "./signals/base.js"
 import { unwrap } from "./signals/utils.js"
@@ -35,7 +34,7 @@ export { commitWork, commitDeletion, createDom, hydrateDom }
 type VNode = Kiru.VNode
 type HostNode = {
   node: ElementVNode
-  lastChild?: DomVNode
+  lastChild?: SomeDom
 }
 type PlacementScope = {
   parent: VNode
@@ -551,7 +550,7 @@ function placeDom(vNode: DomVNode, hostNode: HostNode) {
   const { node: parentVNodeWithDom, lastChild } = hostNode
   const dom = vNode.dom
   if (lastChild) {
-    lastChild.dom.after(dom)
+    lastChild.after(dom)
     return
   }
   // TODO: we can probably skip the 'next sibling search' if we're appending
@@ -608,72 +607,124 @@ function commitWork(vNode: VNode) {
   handlePrePlacementFocusPersistence()
 
   const hostNodes: HostNode[] = []
-  let currentHostNode: HostNode
+  let currentHostNode: HostNode | undefined
   const placementScopes: PlacementScope[] = []
   let currentPlacementScope: PlacementScope | undefined
 
-  postOrderApply(vNode, {
-    onDescent: (node) => {
-      if (node.dom) {
-        // collect host nodes as we go
-        currentHostNode = { node: node as ElementVNode }
+  const root = vNode
+  const rootChild = root.child
+
+  const onAscent = (node: VNode) => {
+    let inheritsPlacement = false
+    if (currentPlacementScope?.child === node) {
+      currentPlacementScope.active = true
+      inheritsPlacement = true
+    }
+    if (node.dom) {
+      if (!currentHostNode) {
+        currentHostNode = { node: getDomParent(node) }
         hostNodes.push(currentHostNode)
+      }
+      if (!(node.flags & FLAG_STATIC_DOM)) {
+        commitDom(node as DomVNode, currentHostNode, inheritsPlacement)
+      }
+    }
+    commitSnapshot(node)
+  }
 
-        if (node.prev && "innerHTML" in node.prev.props) {
-          /**
-           * We need to update innerHTML during descent in cases
-           * where we previously set innerHTML on this element but
-           * now we provide children. Setting innerHTML _after_
-           * appending children will yeet em into the abyss.
-           */
-          delete node.props.innerHTML
-          setInnerHTML(node.dom as SomeElement, "")
-          // remove innerHTML from prev to prevent our ascension pass from doing this again
-          delete node.prev.props.innerHTML
-        }
+  if (!rootChild) {
+    onAscent(root)
+    return
+  }
 
-        if (currentPlacementScope?.active) {
-          currentPlacementScope.child = node
-          // prevent scope applying to descendants of this element node
-          currentPlacementScope.active = false
-        }
-      } else if (node.flags & FLAG_PLACEMENT) {
-        currentPlacementScope = { parent: node, active: true }
-        placementScopes.push(currentPlacementScope)
+  const onDescent = (node: VNode) => {
+    if (node.dom) {
+      // collect host nodes as we go
+      currentHostNode = { node: node as ElementVNode }
+      hostNodes.push(currentHostNode)
+
+      if (node.prev && "innerHTML" in node.prev.props) {
+        /**
+         * We need to update innerHTML during descent in cases
+         * where we previously set innerHTML on this element but
+         * now we provide children. Setting innerHTML _after_
+         * appending children will yeet em into the abyss.
+         */
+        delete node.props.innerHTML
+        setInnerHTML(node.dom as SomeElement, "")
+        // remove innerHTML from prev to prevent our ascension pass from doing this again
+        delete node.prev.props.innerHTML
       }
-    },
-    onAscent: (node) => {
-      let inheritsPlacement = false
-      if (currentPlacementScope?.child === node) {
-        currentPlacementScope.active = true
-        inheritsPlacement = true
-      }
-      if (node.flags & FLAG_DELETION) {
-        return commitDeletion(node)
+
+      if (currentPlacementScope?.active) {
+        currentPlacementScope.child = node
+        // prevent scope applying to descendants of this element node
+        currentPlacementScope.active = false
       }
-      if (node.dom) {
-        if (!currentHostNode) {
-          currentHostNode = { node: getDomParent(node) }
-          hostNodes.push(currentHostNode)
-        }
-        if (!(node.flags & FLAG_STATIC_DOM)) {
-          commitDom(node as DomVNode, currentHostNode, inheritsPlacement)
+    } else if (node.flags & FLAG_PLACEMENT) {
+      currentPlacementScope = { parent: node, active: true }
+      placementScopes.push(currentPlacementScope)
+    }
+  }
+
+  onDescent(root)
+  let branch = rootChild
+  while (branch) {
+    let c = branch
+    while (c) {
+      if (!c.child) break
+      if (c.flags & FLAG_NOOP) {
+        if (c.flags & FLAG_PLACEMENT) {
+          const directDomChildren = findDirectDomChildren(c)
+          if (directDomChildren.length === 0) {
+            break
+          }
+          if (!currentHostNode) {
+            currentHostNode = { node: getDomParent(c) }
+            hostNodes.push(currentHostNode)
+          }
+          const { node, lastChild } = currentHostNode
+          if (lastChild) {
+            lastChild.after(...directDomChildren)
+          } else {
+            const nextSiblingDom = getNextSiblingDom(c, node)
+            const parentDom = node.dom
+            if (nextSiblingDom) {
+              const [first, ...rest] = directDomChildren
+              parentDom.insertBefore(first, nextSiblingDom)
+              first.after(...rest)
+            } else {
+              parentDom.append(...directDomChildren)
+            }
+          }
+          currentHostNode.lastChild =
+            directDomChildren[directDomChildren.length - 1]
         }
+        break
       }
-      commitSnapshot(node)
-    },
-    onBeforeAscent(node) {
-      if (currentPlacementScope?.parent === node) {
+      onDescent(c)
+      c = c.child
+    }
+
+    while (c && c !== root) {
+      onAscent(c)
+      if (c.sibling) {
+        branch = c.sibling
+        break
+      }
+      if (currentPlacementScope?.parent === c) {
         placementScopes.pop()
         currentPlacementScope = placementScopes[placementScopes.length - 1]
       }
-      if (currentHostNode?.node === node.parent) {
+      if (currentHostNode?.node === c.parent) {
         hostNodes.pop()
         currentHostNode = hostNodes[hostNodes.length - 1]
       }
-    },
-  })
-
+      c = c.parent!
+    }
+    if (c === root) break
+  }
+  onAscent(root)
   handlePostPlacementFocusPersistence()
 }
 
@@ -692,7 +743,7 @@ function commitDom(
   if (!vNode.prev || vNode.flags & FLAG_UPDATE) {
     updateDom(vNode)
   }
-  hostNode.lastChild = vNode
+  hostNode.lastChild = vNode.dom
 }
 
 function commitDeletion(vNode: VNode) {
@@ -730,3 +781,25 @@ function commitDeletion(vNode: VNode) {
 
   vNode.parent = null
 }
+
+function findDirectDomChildren(vNode: VNode): SomeDom[] {
+  const domChildren: SomeDom[] = []
+
+  function collectDomNodes(node: VNode | null): void {
+    while (node) {
+      if (node.dom) {
+        // Found a DOM node, add it to the collection
+        domChildren.push(node.dom)
+      } else if (node.child) {
+        // This is a component or fragment, traverse its children
+        collectDomNodes(node.child)
+      }
+      node = node.sibling
+    }
+  }
+
+  // Start collecting from the memo's children
+  collectDomNodes(vNode.child)
+
+  return domChildren
+}

package/src/reconciler.ts

@@ -1,10 +1,4 @@
-import {
-  $FRAGMENT,
-  FLAG_HAS_MEMO_ANCESTOR,
-  FLAG_MEMO,
-  FLAG_PLACEMENT,
-  FLAG_UPDATE,
-} from "./constants.js"
+import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
 import { getVNodeAppContext, isVNode, latest } from "./utils.js"
 import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
@@ -32,7 +26,6 @@ export function reconcileChildren(parent: VNode, children: unknown) {
 }
 
 function reconcileSingleChild(parent: VNode, child: unknown) {
-  const deletions: VNode[] = (parent.deletions = [])
   const oldChild = parent.child
   if (oldChild === null) {
     return createChild(parent, child)
@@ -60,13 +53,12 @@ function reconcileSingleChild(parent: VNode, child: unknown) {
       }
       placeChild(newNode, 0, 0)
     }
-    existingChildren.forEach((child) => deletions.push(child))
+    existingChildren.forEach((child) => deleteChild(parent, child))
     return newNode
   }
 }
 
 function reconcileChildrenArray(parent: VNode, children: unknown[]) {
-  const deletions: VNode[] = (parent.deletions = [])
   let resultingChild: VNode | null = null
   let prevNewChild: VNode | null = null
 
@@ -90,7 +82,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
       break
     }
     if (oldChild && !newChild.prev) {
-      deletions.push(oldChild)
+      deleteChild(parent, oldChild)
     }
     lastPlacedIndex = placeChild(newChild, lastPlacedIndex, newIdx)
     if (prevNewChild === null) {
@@ -151,7 +143,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
     }
   }
 
-  existingChildren.forEach((child) => deletions.push(child))
+  existingChildren.forEach((child) => deleteChild(parent, child))
   return resultingChild
 }
 
@@ -460,9 +452,6 @@ function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
 function setParent(child: VNode, parent: VNode) {
   child.parent = parent
   child.depth = parent.depth + 1
-  if (parent.flags & (FLAG_MEMO | FLAG_HAS_MEMO_ANCESTOR)) {
-    child.flags |= FLAG_HAS_MEMO_ANCESTOR
-  }
 }
 
 function dev_emitUpdateNode() {
@@ -490,9 +479,17 @@ function mapRemainingChildren(child: VNode | null) {
   return map
 }
 
+function deleteChild(parent: VNode, child: VNode) {
+  if (parent.deletions === null) {
+    parent.deletions = [child]
+  } else {
+    parent.deletions.push(child)
+  }
+}
+
 function deleteRemainingChildren(parent: VNode, child: VNode | null) {
   while (child) {
-    parent.deletions!.push(child)
+    deleteChild(parent, child)
     child = child.sibling
   }
 }

package/src/scheduler.ts

@@ -7,7 +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"
@@ -17,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"
@@ -29,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[] = []
@@ -39,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
@@ -106,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)
 }
 
@@ -199,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)
@@ -210,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
@@ -253,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 {
@@ -293,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)
@@ -351,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
     }
@@ -372,14 +271,17 @@ function updateFunctionComponent(vNode: FunctionVNode) {
       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/utils.ts

@@ -5,10 +5,8 @@ import {
   $HYDRATION_BOUNDARY,
   booleanAttributes,
   FLAG_DELETION,
-  FLAG_HAS_MEMO_ANCESTOR,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
-  FLAG_MEMO,
   REGEX_UNIT,
 } from "./constants.js"
 import { unwrap } from "./signals/utils.js"
@@ -25,12 +23,10 @@ export {
   isExoticType,
   isVNodeDeleted,
   vNodeContains,
-  willMemoBlockUpdate,
   getCurrentVNode,
   getVNodeAppContext,
   commitSnapshot,
   traverseApply,
-  postOrderApply,
   findParent,
   propToHtmlAttr,
   propValueToHtmlAttrValue,
@@ -158,26 +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) return false
-    if (
-      parent.flags & FLAG_MEMO &&
-      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]
@@ -190,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) {