kiru 0.47.1 → 0.48.1

package/src/scheduler.ts

@@ -7,9 +7,18 @@ 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 {
+  commitDeletion,
+  commitWork,
+  createDom,
+  hydrateDom,
+  onAfterFlushDomChanges,
+  onBeforeFlushDomChanges,
+} from "./dom.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import { hookIndex, node, renderMode } from "./globals.js"
@@ -17,10 +26,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 +36,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 +44,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
@@ -65,15 +69,21 @@ export function flushSync() {
   doWork()
 }
 
+export function renderRootSync(rootNode: VNode) {
+  rootNode.flags |= FLAG_DIRTY
+  treesInProgress.push(rootNode)
+  if (!isRunningOrQueued) {
+    isRunningOrQueued = true
+    doWork()
+  }
+}
+
 /**
  * Queues a node for an update. Has no effect if the node is already deleted or marked for deletion.
  */
 export function requestUpdate(vNode: VNode): void {
-  if (vNode.flags & FLAG_DELETION) return
   if (renderMode.current === "hydrate") {
-    return nextIdle(() => {
-      vNode.flags & FLAG_DELETION || queueUpdate(vNode)
-    })
+    return nextIdle(() => queueUpdate(vNode))
   }
   queueUpdate(vNode)
 }
@@ -106,91 +116,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 +132,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,22 +147,32 @@ 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)
+  onBeforeFlushDomChanges()
+  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
+    }
   }
+  onAfterFlushDomChanges()
 
   isImmediateEffectsMode = true
   flushEffects(preEffects)
@@ -253,39 +200,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,19 +207,17 @@ 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) {
-        const asProvider = vNode as ContextProviderNode<any>
-        const { dependents, value } = asProvider.props
-        if (
-          dependents.size &&
-          asProvider.prev &&
-          asProvider.prev.props.value !== value
-        ) {
-          pendingContextChanges.add(asProvider)
+      if (vNode?.type === $CONTEXT_PROVIDER) {
+        const {
+          props: { dependents, value },
+          prev,
+        } = vNode as ContextProviderNode<unknown>
+
+        if (dependents.size && prev && prev.props.value !== value) {
+          dependents.forEach(queueUpdate)
         }
       }
       vNode.child = reconcileChildren(vNode, props.children)
-      queueNodeChildDeletions(vNode)
     } else {
       renderChild = updateFunctionComponent(vNode as FunctionVNode)
     }
@@ -335,6 +247,11 @@ function performUnitOfWork(vNode: VNode): VNode | void {
     })
   }
 
+  if (vNode.deletions !== null) {
+    vNode.deletions.forEach(queueDelete)
+    vNode.deletions = null
+  }
+
   if (renderChild && vNode.child) {
     return vNode.child
   }
@@ -351,7 +268,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 +289,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
 
@@ -413,7 +333,6 @@ function updateFunctionComponent(vNode: FunctionVNode) {
       newChild = type(props)
     } while (isRenderDirtied)
     vNode.child = reconcileChildren(vNode, newChild)
-    queueNodeChildDeletions(vNode)
     return true
   } finally {
     node.current = null
@@ -440,20 +359,12 @@ function updateHostComponent(vNode: DomVNode) {
   // text should _never_ have children
   if (type !== "#text") {
     vNode.child = reconcileChildren(vNode, props.children)
-    queueNodeChildDeletions(vNode)
     if (vNode.child && renderMode.current === "hydrate") {
       hydrationStack.push(vNode.dom!)
     }
   }
 }
 
-function queueNodeChildDeletions(vNode: VNode) {
-  if (vNode.deletions) {
-    vNode.deletions.forEach(queueDelete)
-    vNode.deletions = null
-  }
-}
-
 function checkForTooManyConsecutiveDirtyRenders() {
   if (consecutiveDirtyCount > CONSECUTIVE_DIRTY_LIMIT) {
     throw new KiruError(

package/src/swr.ts

@@ -1,6 +1,7 @@
 import { __DEV__ } from "./env.js"
 import { useHook } from "./hooks/utils.js"
 import { Signal } from "./signals/base.js"
+import { AsyncTaskState } from "./types.utils.js"
 import {
   noop,
   deepCompare,
@@ -9,23 +10,7 @@ import {
   shallowCompare,
 } from "./utils.js"
 
-export type UseSWRState<T> = (
-  | {
-      data: null
-      error: null
-      loading: true
-    }
-  | {
-      data: T
-      error: null
-      loading: false
-    }
-  | {
-      data: null
-      error: UseSWRError
-      loading: false
-    }
-) & {
+export type UseSWRState<T> = AsyncTaskState<T, UseSWRError> & {
   mutate: (callback: () => Promise<T>) => void
   isMutating: Signal<boolean>
   isValidating: Signal<boolean>
@@ -51,7 +36,7 @@ export type SWRRetryState = {
   delay: number
 } | null
 
-export type SWRCacheEntry<T> = {
+export interface SWRCacheEntry<T> {
   key: any
   resource: Signal<SWRResourceState<T>>
   fetcher: (args: any) => Promise<T>
@@ -65,7 +50,7 @@ export type SWRCacheEntry<T> = {
 
 export type SWRCache = Map<string, SWRCacheEntry<any>>
 
-export type SWROptions = {
+export interface SWROptions {
   /**
    * Specify `false` to disable revalidation on focus
    */
@@ -103,19 +88,24 @@ export type SWRKey =
   | undefined
   | false
 
-let SWR_GLOBAL_CACHE: SWRCache
-let IS_ONLINE = false
+const SWRGlobalState = {
+  cache: null as any as SWRCache,
+  online: false,
+}
 
 if ("window" in globalThis) {
-  SWR_GLOBAL_CACHE = window.__kiru!.globalState[Symbol.for("SWR_GLOBAL")] ??=
-    new Map()
+  if (__DEV__) {
+    SWRGlobalState.cache = window.__kiru!.SWRGlobalCache ??= new Map()
+  } else {
+    SWRGlobalState.cache = new Map()
+  }
 
-  IS_ONLINE = navigator.onLine
+  SWRGlobalState.online = navigator.onLine
   window.addEventListener("online", () => {
-    IS_ONLINE = true
+    SWRGlobalState.online = true
   })
   window.addEventListener("offline", () => {
-    IS_ONLINE = false
+    SWRGlobalState.online = false
   })
 
   let blurStart: number | null = null
@@ -127,11 +117,12 @@ if ("window" in globalThis) {
     blurStart = null
     if (blurDuration < 3_000) return // only trigger revalidation after 3 seconds
 
-    SWR_GLOBAL_CACHE.forEach((entry) => {
+    SWRGlobalState.cache.forEach((entry) => {
       if (
         entry.subscribers.size === 0 ||
         entry.options.revalidateOnFocus === false ||
-        (entry.options.refetchWhenOffline === false && IS_ONLINE === false)
+        (entry.options.refetchWhenOffline === false &&
+          SWRGlobalState.online === false)
       ) {
         return
       }
@@ -171,16 +162,16 @@ export function preloadSWR<T>(
   if (!("window" in globalThis)) return
 
   const strKey = safeStringify(key, { functions: false })
-  if (!SWR_GLOBAL_CACHE.has(strKey)) {
+  if (!SWRGlobalState.cache.has(strKey)) {
     const entry = createSWRCacheEntry(key, fetcher)
-    SWR_GLOBAL_CACHE.set(strKey, entry)
+    SWRGlobalState.cache.set(strKey, entry)
     performFetch(entry)
   }
 }
 
 export function getSWRState<T>(key: SWRKey): SWRCacheEntry<T> | null {
   const strKey = safeStringify(key, { functions: false })
-  return SWR_GLOBAL_CACHE.get(strKey) ?? null
+  return SWRGlobalState.cache.get(strKey) ?? null
 }
 
 export function useSWR<T, K extends SWRKey>(
@@ -201,14 +192,14 @@ export function useSWR<T, K extends SWRKey>(
             devtools: {
               get: () => ({
                 key: hook.strKey,
-                value: SWR_GLOBAL_CACHE.get(strKey)!,
+                value: SWRGlobalState.cache.get(strKey)!,
               }),
             },
             initialArgs: [key, options],
           }
         }
         if (isHMR) {
-          const entry = SWR_GLOBAL_CACHE.get(hook.strKey)
+          const entry = SWRGlobalState.cache.get(hook.strKey)
           const [k, o] = hook.dev!.initialArgs
           hook.dev!.initialArgs = [key, options]
 
@@ -239,10 +230,10 @@ export function useSWR<T, K extends SWRKey>(
         hook.update = update
 
         let isNewEntry = false
-        if (!SWR_GLOBAL_CACHE.has(strKey)) {
+        if (!SWRGlobalState.cache.has(strKey)) {
           isNewEntry = true
           entry = createSWRCacheEntry(key, fetcher)
-          SWR_GLOBAL_CACHE.set(strKey, entry)
+          SWRGlobalState.cache.set(strKey, entry)
 
           entry.resource.subscribe(() => {
             entry.subscribers.forEach((sub) => sub.update())
@@ -251,7 +242,7 @@ export function useSWR<T, K extends SWRKey>(
           performFetch(entry)
         }
 
-        entry ??= SWR_GLOBAL_CACHE.get(strKey)!
+        entry ??= SWRGlobalState.cache.get(strKey)!
         const subs = entry.subscribers
         if (subs.size === 0) {
           if (!isNewEntry) {
@@ -279,7 +270,7 @@ export function useSWR<T, K extends SWRKey>(
         }
       }
 
-      entry ??= SWR_GLOBAL_CACHE.get(strKey)!
+      entry ??= SWRGlobalState.cache.get(strKey)!
       const { resource, isMutating, isValidating } = entry
       const { data, loading, error } = resource.peek()
 

package/src/transition.ts

@@ -5,7 +5,7 @@ import { useRef } from "./hooks/useRef.js"
 import { useState } from "./hooks/useState.js"
 
 export type TransitionState = "entering" | "entered" | "exiting" | "exited"
-type TransitionProps = {
+interface TransitionProps {
   in: boolean
   /**
    * Initial state of the transition