kiru 0.47.0 → 0.48.0

package/src/dom.ts

@@ -3,18 +3,18 @@ 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, unwrap } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
+import { unwrap } from "./signals/utils.js"
 import { renderMode } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
 import { StyleObject } from "./types.dom.js"
@@ -34,7 +34,7 @@ export { commitWork, commitDeletion, createDom, hydrateDom }
 type VNode = Kiru.VNode
 type HostNode = {
   node: ElementVNode
-  lastChild?: DomVNode
+  lastChild?: SomeDom
 }
 type PlacementScope = {
   parent: VNode
@@ -550,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
@@ -607,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()
 }
 
@@ -691,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) {
@@ -729,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/element.ts

@@ -1,4 +1,4 @@
-import { $FRAGMENT, $MEMO } from "./constants.js"
+import { $FRAGMENT, $MEMO, FLAG_MEMO } from "./constants.js"
 import { isMemoFn } from "./memo.js"
 import { isValidElementKeyProp, isValidElementRefProp } from "./props.js"
 
@@ -23,7 +23,7 @@ export function createElement<T extends Kiru.VNode["type"]>(
     deletions: null,
   }
   if (isMemoFn(type)) {
-    node.isMemoized = true
+    node.flags |= FLAG_MEMO
     node.arePropsEqual = type[$MEMO].arePropsEqual
   }
 

package/src/hmr.ts

@@ -1,10 +1,11 @@
-import type { Store } from "./store"
 import { $HMR_ACCEPT } from "./constants.js"
 import { __DEV__ } from "./env.js"
 import { traverseApply } from "./utils.js"
 import { requestUpdate } from "./scheduler.js"
-import { Signal, type WatchEffect } from "./signals/index.js"
-import type { AppContext } from "./appContext"
+import { Signal } from "./signals/base.js"
+import type { WatchEffect } from "./signals/watch.js"
+import type { Store } from "./store.js"
+import type { AppContext } from "./appContext.js"
 
 export type HMRAccept<T = {}> = {
   provide: () => T

package/src/index.ts

@@ -2,6 +2,7 @@ import { createKiruGlobalContext } from "./globalContext.js"
 import { __DEV__ } from "./env.js"
 
 export type * from "./types"
+export * from "./signals/index.js"
 export * from "./appContext.js"
 export * from "./context.js"
 export * from "./cloneVNode.js"
@@ -11,7 +12,6 @@ export * from "./lazy.js"
 export { memo } from "./memo.js"
 export * from "./portal.js"
 export * from "./renderToString.js"
-export * from "./signals/index.js"
 export { nextIdle, flushSync, requestUpdate } from "./scheduler.js"
 export * from "./store.js"
 export * from "./transition.js"

package/src/memo.ts

@@ -41,8 +41,6 @@ export function memo<T extends Record<string, unknown> = {}>(
 
 export function isMemoFn(fn: any): fn is MemoFn {
   return (
-    typeof fn === "function" &&
-    fn[$MEMO] &&
-    typeof fn[$MEMO].arePropsEqual === "function"
+    typeof fn === "function" && typeof fn[$MEMO]?.arePropsEqual === "function"
   )
 }

package/src/props.ts

@@ -1,5 +1,5 @@
 import { KiruError } from "./error.js"
-import { Signal } from "./signals/index.js"
+import { Signal } from "./signals/base.js"
 
 export function assertValidElementProps(vNode: Kiru.VNode) {
   if ("children" in vNode.props && vNode.props.innerHTML) {

package/src/reconciler.ts

@@ -1,11 +1,6 @@
-import {
-  $FRAGMENT,
-  FLAG_HAS_MEMO_ANCESTOR,
-  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/index.js"
+import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
 import { createElement, Fragment } from "./element.js"
 import type { AppContext } from "./appContext.js"
@@ -31,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)
@@ -59,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
 
@@ -89,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) {
@@ -150,7 +143,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
     }
   }
 
-  existingChildren.forEach((child) => deletions.push(child))
+  existingChildren.forEach((child) => deleteChild(parent, child))
   return resultingChild
 }
 
@@ -459,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.isMemoized || parent.flags & FLAG_HAS_MEMO_ANCESTOR) {
-    child.flags |= FLAG_HAS_MEMO_ANCESTOR
-  }
 }
 
 function dev_emitUpdateNode() {
@@ -489,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/renderToString.ts

@@ -6,7 +6,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 "./ssr/hydrationBoundary.js"