kiru 0.45.3 → 0.46.0

package/src/hmr.ts

@@ -2,8 +2,9 @@ import type { Store } from "./store"
 import type { WatchEffect } from "./signals/watch"
 import { $HMR_ACCEPT } from "./constants.js"
 import { __DEV__ } from "./env.js"
-import { Signal } from "./signals/base.js"
 import { traverseApply } from "./utils.js"
+import { requestUpdate } from "./scheduler.js"
+import { Signal } from "./signals/index.js"
 import type { AppContext } from "./appContext"
 
 export type HMRAccept<T = {}> = {
@@ -124,15 +125,12 @@ export function createHMRContext() {
               vNode.type = newEntry.value as any
               dirtiedApps.add(ctx)
               vNode.hmrUpdated = true
-              if (vNode.prev) {
-                vNode.prev.type = newEntry.value as any
-              }
             }
           })
         })
       }
     }
-    dirtiedApps.forEach((ctx) => ctx.requestUpdate())
+    dirtiedApps.forEach((ctx) => ctx.rootNode && requestUpdate(ctx.rootNode))
     isModuleReplacementExecution = false
 
     if (tmpUnnamedWatchers.length) {

package/src/hooks/useViewTransition.ts

@@ -1,4 +1,5 @@
-import { ctx, node } from "../globals.js"
+import { flushSync } from "../scheduler.js"
+import { node } from "../globals.js"
 import { noop } from "../utils.js"
 import { sideEffectsEnabled } from "./utils.js"
 
@@ -12,7 +13,6 @@ import { sideEffectsEnabled } from "./utils.js"
  */
 export function useViewTransition() {
   if (!sideEffectsEnabled()) return noop
-  const appCtx = ctx.current
   return (callback: () => void) => {
     if (node.current) {
       throw new Error("useViewTransition can't be called during rendering.")
@@ -20,7 +20,7 @@ export function useViewTransition() {
     if (!document.startViewTransition) return callback()
     document.startViewTransition(() => {
       callback()
-      appCtx.flushSync()
+      flushSync()
     })
   }
 }

package/src/hooks/utils.ts

@@ -1,14 +1,14 @@
 import { KiruError } from "../error.js"
 import { __DEV__ } from "../env.js"
-import { ctx, hookIndex, node, nodeToCtxMap } from "../globals.js"
-import { getVNodeAppContext, noop } from "../utils.js"
+import { hookIndex, node } from "../globals.js"
+import { noop } from "../utils.js"
+import { requestUpdate } from "../scheduler.js"
 export { sideEffectsEnabled } from "../utils.js"
 export {
   cleanupHook,
   depsRequireChange,
   useHook,
   useVNode,
-  useAppContext,
   useHookDebugGroup,
   useRequestUpdate,
   HookDebugGroupAction,
@@ -46,19 +46,7 @@ const useHookDebugGroup = (name: string, action: HookDebugGroupAction) => {
 const useRequestUpdate = () => {
   const n = node.current
   if (!n) error_hookMustBeCalledTopLevel("useRequestUpdate")
-  const ctx = getVNodeAppContext(n)
-  return () => ctx.requestUpdate(n)
-}
-
-/**
- * Used to obtain the 'AppContext' for the current component.
- */
-const useAppContext = () => {
-  if (!node.current) error_hookMustBeCalledTopLevel("useAppContext")
-  const ctx = nodeToCtxMap.get(node.current)
-  if (!ctx)
-    error_hookMustBeCalledTopLevel("[kiru]: unable to find node's AppContext")
-  return ctx
+  return () => requestUpdate(n)
 }
 
 /**
@@ -153,12 +141,9 @@ function useHook<
     ;(vNode.effects ??= []).push(callback)
   }
 
-  const appCtx = ctx.current
   const index = hookIndex.current++
 
-  let oldHook = (
-    vNode.prev ? vNode.prev.hooks?.at(index) : vNode.hooks?.at(index)
-  ) as HookState<T> | undefined
+  let oldHook = vNode.hooks?.at(index) as HookState<T> | undefined
 
   if (__DEV__) {
     currentHookName = hookName
@@ -197,7 +182,7 @@ function useHook<
         hook,
         isInit: !oldHook,
         isHMR: vNode.hmrUpdated,
-        update: () => appCtx.requestUpdate(vNode),
+        update: () => requestUpdate(vNode),
         queueEffect,
         vNode,
         index,
@@ -223,7 +208,7 @@ function useHook<
     const res = (callback as HookCallback<T>)({
       hook,
       isInit: !oldHook,
-      update: () => appCtx.requestUpdate(vNode),
+      update: () => requestUpdate(vNode),
       queueEffect,
       vNode,
       index,

package/src/index.ts

@@ -3,7 +3,6 @@ import {
   type AppContext,
   type AppContextOptions,
 } from "./appContext.js"
-import { ctx } from "./globals.js"
 import { createKiruGlobalContext } from "./globalContext.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
@@ -19,6 +18,7 @@ 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"
 
@@ -56,6 +56,6 @@ export function mount<T extends Record<string, unknown>>(
       }
     }
   }
-  ctx.current = createAppContext<T>(appFunc, appProps, opts)
-  return ctx.current.mount()
+
+  return createAppContext<T>(appFunc, appProps, opts).mount()
 }

package/src/lazy.ts

@@ -4,8 +4,9 @@ import { KiruError } from "./error.js"
 import { node, renderMode } from "./globals.js"
 import { useContext } from "./hooks/useContext.js"
 import { useRef } from "./hooks/useRef.js"
-import { useAppContext, useRequestUpdate } from "./hooks/utils.js"
+import { useRequestUpdate } from "./hooks/utils.js"
 import { hydrationStack } from "./hydration.js"
+import { flushSync, nextIdle } from "./scheduler.js"
 import {
   HYDRATION_BOUNDARY_MARKER,
   HydrationBoundaryContext,
@@ -85,7 +86,6 @@ export function lazy<T extends LazyImportValue>(
 ): Kiru.FC<LazyComponentProps<T>> {
   function LazyComponent(props: LazyComponentProps<T>) {
     const { fallback = null, ...rest } = props
-    const appCtx = useAppContext()
     const hydrationCtx = useContext(HydrationBoundaryContext, false)
     const needsHydration = useRef(
       hydrationCtx && renderMode.current === "hydrate"
@@ -154,7 +154,7 @@ export function lazy<T extends LazyImportValue>(
       const hydrate = () => {
         if (needsHydration.current === false) return
 
-        appCtx.scheduler?.nextIdle(() => {
+        nextIdle(() => {
           delete thisNode.lastChildDom
           needsHydration.current = false
           hydrationStack.push(parent)
@@ -169,7 +169,7 @@ export function lazy<T extends LazyImportValue>(
            */
           requestUpdate()
           renderMode.current = "hydrate"
-          appCtx.flushSync()
+          flushSync()
           renderMode.current = prev
           for (const child of childNodes) {
             if (child instanceof Element) {

package/src/portal.ts

@@ -2,7 +2,7 @@ import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import { renderMode } from "./globals.js"
 import { useVNode } from "./hooks/utils.js"
-import { getVNodeAppContext } from "./utils.js"
+import { nextIdle, requestUpdate } from "./scheduler.js"
 
 export { Portal, isPortal }
 
@@ -27,8 +27,7 @@ function Portal({ children, container }: PortalProps) {
       }
       return children
     case "hydrate":
-      const ctx = getVNodeAppContext(vNode)
-      ctx.scheduler?.nextIdle(() => ctx.requestUpdate(vNode))
+      nextIdle(() => requestUpdate(vNode))
       return null
     case "stream":
     case "string":

package/src/props.ts

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

package/src/reconciler.ts

@@ -1,14 +1,22 @@
-import { FLAG, $FRAGMENT } from "./constants.js"
-import { isVNode, latest } from "./utils.js"
-import { Signal } from "./signals/base.js"
+import {
+  $FRAGMENT,
+  FLAG_HAS_MEMO_ANCESTOR,
+  FLAG_PLACEMENT,
+  FLAG_UPDATE,
+} from "./constants.js"
+import { getVNodeAppContext, isVNode, latest } from "./utils.js"
+import { Signal } from "./signals/index.js"
 import { __DEV__ } from "./env.js"
 import { createElement, Fragment } from "./element.js"
-import { flags } from "./flags.js"
-import { ctx } from "./globals.js"
+import type { AppContext } from "./appContext.js"
 
 type VNode = Kiru.VNode
+let appCtx: AppContext
 
 export function reconcileChildren(parent: VNode, children: unknown) {
+  if (__DEV__) {
+    appCtx = getVNodeAppContext(parent)!
+  }
   if (Array.isArray(children)) {
     if (__DEV__) {
       // array children are 'tagged' during parent reconciliation pass
@@ -43,13 +51,11 @@ function reconcileSingleChild(parent: VNode, child: unknown) {
     const existingChildren = mapRemainingChildren(oldChild)
     const newNode = updateFromMap(existingChildren, parent, 0, child)
     if (newNode !== null) {
-      if (newNode.prev !== null) {
+      const prev = newNode.prev
+      if (prev !== null) {
+        const key = prev.props.key
         // node persisted, remove it from the list so it doesn't get deleted
-        existingChildren.delete(
-          newNode.prev.props.key === undefined
-            ? newNode.prev.index
-            : newNode.prev.props.key
-        )
+        existingChildren.delete(key === undefined ? prev.index : key)
       }
       placeChild(newNode, 0, 0)
     }
@@ -68,7 +74,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
   let lastPlacedIndex = 0
   let newIdx = 0
 
-  for (; !!oldChild && newIdx < children.length; newIdx++) {
+  for (; oldChild !== null && newIdx < children.length; newIdx++) {
     if (oldChild.index > newIdx) {
       nextOldChild = oldChild
       oldChild = null
@@ -128,13 +134,11 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
       children[newIdx]
     )
     if (newNode !== null) {
-      if (newNode.prev !== null) {
+      const prev = newNode.prev
+      if (prev !== null) {
+        const key = prev.props.key
         // node persisted, remove it from the list so it doesn't get deleted
-        existingChildren.delete(
-          newNode.prev.props.key === undefined
-            ? newNode.prev.index
-            : newNode.prev.props.key
-        )
+        existingChildren.delete(key === undefined ? prev.index : key)
       }
       lastPlacedIndex = placeChild(newNode, lastPlacedIndex, newIdx)
       if (prevNewChild === null) {
@@ -192,24 +196,27 @@ function updateTextNode(
 ) {
   if (oldChild === null || oldChild.type !== "#text") {
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
     }
     const newChild = createElement("#text", { nodeValue: content })
     setParent(newChild, parent)
     return newChild
-  } else {
-    if (__DEV__) {
-      emitUpdateNode()
-    }
+  }
+
+  if (__DEV__) {
+    dev_emitUpdateNode()
+  }
+  const prev = oldChild.props.nodeValue
+  if (prev !== content) {
     oldChild.props.nodeValue = content
-    oldChild.flags = flags.set(oldChild.flags, FLAG.UPDATE)
-    oldChild.sibling = null
-    return oldChild
+    oldChild.flags |= FLAG_UPDATE
   }
+  oldChild.sibling = null
+  return oldChild
 }
 
 function updateNode(parent: VNode, oldChild: VNode | null, newChild: VNode) {
-  let nodeType = newChild.type
+  let { type: nodeType, props: newProps } = newChild
   if (__DEV__) {
     if (typeof nodeType === "function") {
       nodeType = latest(nodeType)
@@ -219,25 +226,31 @@ function updateNode(parent: VNode, oldChild: VNode | null, newChild: VNode) {
     return updateFragment(
       parent,
       oldChild,
-      (newChild.props.children as VNode[]) || [],
-      newChild.props
+      (newProps.children as VNode[]) || [],
+      newProps
     )
   }
   if (oldChild?.type === nodeType) {
     if (__DEV__) {
-      emitUpdateNode()
+      dev_emitUpdateNode()
     }
     oldChild.index = 0
-    oldChild.props = newChild.props
     oldChild.sibling = null
-    oldChild.flags = flags.set(oldChild.flags, FLAG.UPDATE)
+    if (typeof nodeType === "string") {
+      if (propsChanged(oldChild.props, newProps)) {
+        oldChild.flags |= FLAG_UPDATE
+      }
+    } else {
+      oldChild.flags |= FLAG_UPDATE
+    }
+    oldChild.props = newProps
     oldChild.memoizedProps = newChild.memoizedProps
     return oldChild
   }
   if (__DEV__) {
-    emitCreateNode()
+    dev_emitCreateNode()
   }
-  const created = createElement(nodeType, newChild.props)
+  const created = createElement(nodeType, newProps)
   setParent(created, parent)
   return created
 }
@@ -250,17 +263,17 @@ function updateFragment(
 ) {
   if (oldChild === null || oldChild.type !== $FRAGMENT) {
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
     }
     const el = createElement($FRAGMENT, { children, ...newProps })
     setParent(el, parent)
     return el
   }
   if (__DEV__) {
-    emitUpdateNode()
+    dev_emitUpdateNode()
   }
   oldChild.props = { ...oldChild.props, ...newProps, children }
-  oldChild.flags = flags.set(oldChild.flags, FLAG.UPDATE)
+  oldChild.flags |= FLAG_UPDATE
   oldChild.sibling = null
   return oldChild
 }
@@ -272,7 +285,7 @@ function createChild(parent: VNode, child: unknown): VNode | null {
     typeof child === "bigint"
   ) {
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
     }
     const el = createElement("#text", {
       nodeValue: "" + child,
@@ -283,7 +296,7 @@ function createChild(parent: VNode, child: unknown): VNode | null {
 
   if (Signal.isSignal(child)) {
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
     }
     const el = createElement("#text", {
       nodeValue: child,
@@ -294,17 +307,17 @@ function createChild(parent: VNode, child: unknown): VNode | null {
 
   if (isVNode(child)) {
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
     }
     const newNode = createElement(child.type, child.props)
     setParent(newNode, parent)
-    newNode.flags = flags.set(newNode.flags, FLAG.PLACEMENT)
+    newNode.flags |= FLAG_PLACEMENT
     return newNode
   }
 
   if (Array.isArray(child)) {
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
       markListChild(child)
     }
     const el = Fragment({ children: child })
@@ -316,22 +329,22 @@ function createChild(parent: VNode, child: unknown): VNode | null {
 }
 
 function placeChild(
-  child: VNode | null,
+  child: VNode,
   lastPlacedIndex: number,
   newIndex: number
 ): number {
-  if (child === null) return lastPlacedIndex
   child.index = newIndex
-  if (child.prev !== null) {
-    const oldIndex = child.prev.index
+  const prev = child.prev
+  if (prev !== null) {
+    const oldIndex = prev.index
     if (oldIndex < lastPlacedIndex) {
-      child.flags = flags.set(child.flags, FLAG.PLACEMENT)
+      child.flags |= FLAG_PLACEMENT
       return lastPlacedIndex
     } else {
       return oldIndex
     }
   } else {
-    child.flags = flags.set(child.flags, FLAG.PLACEMENT)
+    child.flags |= FLAG_PLACEMENT
     return lastPlacedIndex
   }
 }
@@ -352,8 +365,6 @@ function updateFromMap(
     const oldChild = existingChildren.get(index)
     if (oldChild) {
       if (oldChild.props.nodeValue === child) {
-        oldChild.flags = flags.set(oldChild.flags, FLAG.UPDATE)
-        oldChild.props.nodeValue = child
         return oldChild
       }
       if (
@@ -365,40 +376,46 @@ function updateFromMap(
     }
 
     if (__DEV__) {
-      emitCreateNode()
+      dev_emitCreateNode()
     }
     const newChild = createElement("#text", {
       nodeValue: child,
     })
     setParent(newChild, parent)
-    newChild.flags = flags.set(newChild.flags, FLAG.PLACEMENT)
+    newChild.flags |= FLAG_PLACEMENT
     newChild.index = index
     return newChild
   }
 
   if (isVNode(child)) {
-    const oldChild = existingChildren.get(
-      child.props.key === undefined ? index : child.props.key
-    )
-    if (oldChild?.type === child.type) {
+    const { type, props: newProps } = child
+    const key = newProps.key
+    const oldChild = existingChildren.get(key === undefined ? index : key)
+    if (oldChild?.type === type) {
       if (__DEV__) {
-        emitUpdateNode()
+        dev_emitUpdateNode()
       }
-      oldChild.flags = flags.set(oldChild.flags, FLAG.UPDATE)
-      oldChild.props = child.props
+      if (typeof type === "string") {
+        if (propsChanged(oldChild.props, newProps)) {
+          oldChild.flags |= FLAG_UPDATE
+        }
+      } else {
+        oldChild.flags |= FLAG_UPDATE
+      }
+      oldChild.props = newProps
       oldChild.sibling = null
       oldChild.index = index
       return oldChild
-    } else {
-      if (__DEV__) {
-        emitCreateNode()
-      }
-      const newChild = createElement(child.type, child.props)
-      setParent(newChild, parent)
-      newChild.flags = flags.set(newChild.flags, FLAG.PLACEMENT)
-      newChild.index = index
-      return newChild
     }
+
+    if (__DEV__) {
+      dev_emitCreateNode()
+    }
+    const newChild = createElement(child.type, child.props)
+    setParent(newChild, parent)
+    newChild.flags |= FLAG_PLACEMENT
+    newChild.index = index
+    return newChild
   }
 
   if (Array.isArray(child)) {
@@ -408,42 +425,53 @@ function updateFromMap(
     }
     if (oldChild) {
       if (__DEV__) {
-        emitUpdateNode()
+        dev_emitUpdateNode()
       }
-      oldChild.flags = flags.set(oldChild.flags, FLAG.UPDATE)
+      oldChild.flags |= FLAG_UPDATE
       oldChild.props.children = child
       return oldChild
-    } else {
-      if (__DEV__) {
-        emitCreateNode()
-      }
-      const newChild = Fragment({ children: child })
-      setParent(newChild, parent)
-      newChild.flags = flags.set(newChild.flags, FLAG.PLACEMENT)
-      newChild.index = index
-      return newChild
     }
+
+    if (__DEV__) {
+      dev_emitCreateNode()
+    }
+    const newChild = Fragment({ children: child })
+    setParent(newChild, parent)
+    newChild.flags |= FLAG_PLACEMENT
+    newChild.index = index
+    return newChild
   }
 
   return null
 }
 
-function setParent(child: Kiru.VNode, parent: Kiru.VNode) {
+function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
+  const aKeys = Object.keys(oldProps)
+  const bKeys = Object.keys(newProps)
+  if (aKeys.length !== bKeys.length) return true
+  for (let key of aKeys) {
+    if (key === "children" || key === "key") continue
+    if (oldProps[key] !== newProps[key]) return true
+  }
+  return false
+}
+
+function setParent(child: VNode, parent: VNode) {
   child.parent = parent
   child.depth = parent.depth + 1
-  if (parent.isMemoized || flags.get(parent.flags, FLAG.HAS_MEMO_ANCESTOR)) {
-    child.flags = flags.set(child.flags, FLAG.HAS_MEMO_ANCESTOR)
+  if (parent.isMemoized || parent.flags & FLAG_HAS_MEMO_ANCESTOR) {
+    child.flags |= FLAG_HAS_MEMO_ANCESTOR
   }
 }
 
-function emitUpdateNode() {
+function dev_emitUpdateNode() {
   if (!("window" in globalThis)) return
-  window.__kiru?.profilingContext?.emit("updateNode", ctx.current)
+  window.__kiru?.profilingContext?.emit("updateNode", appCtx)
 }
 
-function emitCreateNode() {
+function dev_emitCreateNode() {
   if (!("window" in globalThis)) return
-  window.__kiru?.profilingContext?.emit("createNode", ctx.current)
+  window.__kiru?.profilingContext?.emit("createNode", appCtx)
 }
 
 const $LIST_CHILD = Symbol("kiru:marked-list-child")
@@ -454,10 +482,8 @@ function markListChild(children: unknown[]) {
 function mapRemainingChildren(child: VNode | null) {
   const map: Map<JSX.ElementKey, VNode> = new Map()
   while (child) {
-    map.set(
-      child.props.key === undefined ? child.index : child.props.key,
-      child
-    )
+    const key = child.props.key
+    map.set(key === undefined ? child.index : key, child)
     child = child.sibling
   }
   return map

package/src/renderToString.ts

@@ -1,4 +1,4 @@
-import { ctx, node, nodeToCtxMap, renderMode } from "./globals.js"
+import { node, renderMode } from "./globals.js"
 import { createAppContext } from "./appContext.js"
 import { Fragment } from "./element.js"
 import {
@@ -7,7 +7,7 @@ import {
   propsToElementAttributes,
   isExoticType,
 } from "./utils.js"
-import { Signal } from "./signals/base.js"
+import { Signal } from "./signals/index.js"
 import { $HYDRATION_BOUNDARY, voidElements } from "./constants.js"
 import { assertValidElementProps } from "./props.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./ssr/hydrationBoundary.js"
@@ -19,13 +19,11 @@ export function renderToString<T extends Record<string, unknown>>(
 ) {
   const prev = renderMode.current
   renderMode.current = "string"
-  const prevCtx = ctx.current
-  const c = (ctx.current = createAppContext(appFunc, appProps, {
+  const ctx = createAppContext(appFunc, appProps, {
     rootType: Fragment,
-  }))
-  const res = renderToString_internal(c.rootNode, null, 0)
+  })
+  const res = renderToString_internal(ctx.rootNode, null, 0)
   renderMode.current = prev
-  ctx.current = prevCtx
   return res
 }
 
@@ -65,7 +63,6 @@ function renderToString_internal(
   }
 
   if (typeof type !== "string") {
-    nodeToCtxMap.set(el, ctx.current)
     node.current = el
     const res = type(props)
     node.current = null