kiru 0.54.4 → 1.1.0

package/src/scheduler.ts

@@ -1,48 +1,39 @@
-import type {
-  ContextProviderNode,
-  DomVNode,
-  ErrorBoundaryNode,
-  FunctionVNode,
-} from "./types.utils"
+import type { DomVNode, ErrorBoundaryNode, FunctionVNode } from "./types.utils"
 import {
-  $CONTEXT_PROVIDER,
   $ERROR_BOUNDARY,
-  $MEMO,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
   FLAG_DIRTY,
-  FLAG_MEMO,
-  FLAG_NOOP,
 } from "./constants.js"
 import {
+  captureFocus,
   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"
-import { hydrationStack } from "./hydration.js"
-import { reconcileChildren } from "./reconciler.js"
+  reinstateFocus,
+} from "./dom/index.js"
 import {
   assertValidElementProps,
   latest,
   traverseApply,
   isExoticType,
-  getVNodeAppContext,
+  getVNodeApp,
   findParentErrorBoundary,
   call,
+  propsChanged,
 } from "./utils/index.js"
-import type { AppContext } from "./appContext"
-import type { MemoFn } from "./components/memo"
+import { __DEV__ } from "./env.js"
+import { KiruError } from "./error.js"
+import { node, postEffectCleanups, renderMode, setups } from "./globals.js"
+import { hydrationStack } from "./hydration.js"
+import { reconcileChildren } from "./reconciler.js"
 import { isHmrUpdate } from "./hmr.js"
+import type { AppHandle } from "./appHandle"
 
 type VNode = Kiru.VNode
 
-let appCtx: AppContext | null
+let app: AppHandle | null
 let treesInProgress: VNode[] = []
 let isRunningOrQueued = false
 let nextIdleEffects: (() => void)[] = []
@@ -51,8 +42,8 @@ let isImmediateEffectsMode = false
 let immediateEffectDirtiedRender = false
 let isRenderDirtied = false
 let consecutiveDirtyCount = 0
-let preEffects: Array<Function> = []
-let postEffects: Array<Function> = []
+let preEffects: Kiru.LifecycleHookCallback[] = []
+let postEffects: Kiru.LifecycleHookCallback[] = []
 let animationFrameHandle = -1
 
 /**
@@ -94,21 +85,16 @@ export function requestUpdate(vNode: VNode): void {
   queueUpdate(vNode)
 }
 
-function queueBeginWork(): void {
-  if (isRunningOrQueued) return
-  isRunningOrQueued = true
-  animationFrameHandle = window.requestAnimationFrame(doWork)
-}
-
-function onWorkFinished(): void {
-  isRunningOrQueued = false
-  while (nextIdleEffects.length) {
-    nextIdleEffects.shift()!()
+export function useRequestUpdate(): () => void {
+  const n = node.current
+  if (!n) {
+    throw new Error("useRequestUpdate must be called inside a Kiru component")
   }
+  return () => requestUpdate(n)
 }
 
 function queueUpdate(vNode: VNode): void {
-  // In immediate effect mode (useLayoutEffect), immediately mark the render as dirty
+  // In immediate effect mode (onBeforeMount), immediately mark the render as dirty
   if (isImmediateEffectsMode) {
     immediateEffectDirtiedRender = true
   }
@@ -116,7 +102,7 @@ function queueUpdate(vNode: VNode): void {
   // If this node is currently being rendered, just mark it dirty
   if (node.current === vNode) {
     if (__DEV__) {
-      window.__kiru.profilingContext?.emit("updateDirtied", appCtx!)
+      window.__kiru.profilingContext?.emit("updateDirtied", app!)
     }
     isRenderDirtied = true
     return
@@ -127,7 +113,12 @@ function queueUpdate(vNode: VNode): void {
 
   if (!treesInProgress.length) {
     treesInProgress.push(vNode)
-    return queueBeginWork()
+
+    if (!isRunningOrQueued) {
+      isRunningOrQueued = true
+      animationFrameHandle = window.requestAnimationFrame(doWork)
+    }
+    return
   }
 
   treesInProgress.push(vNode)
@@ -146,16 +137,16 @@ function doWork(): void {
   if (__DEV__) {
     const n = deletions[0] ?? treesInProgress[0]
     if (n) {
-      appCtx = getVNodeAppContext(n)!
-      window.__kiru.profilingContext?.beginTick(appCtx)
+      app = getVNodeApp(n)!
+      window.__kiru.profilingContext?.beginTick(app)
     } else {
-      appCtx = null
+      app = null
     }
   }
 
   let len = 1
 
-  onBeforeFlushDomChanges()
+  captureFocus()
   while (treesInProgress.length) {
     if (treesInProgress.length > len) {
       treesInProgress.sort(depthSort)
@@ -178,7 +169,7 @@ function doWork(): void {
       currentWorkRoot.flags &= ~FLAG_DIRTY
     }
   }
-  onAfterFlushDomChanges()
+  reinstateFocus()
 
   isImmediateEffectsMode = true
   flushEffects(preEffects)
@@ -190,19 +181,25 @@ function doWork(): void {
     immediateEffectDirtiedRender = false
     consecutiveDirtyCount++
     if (__DEV__) {
-      window.__kiru.profilingContext?.endTick(appCtx!)
-      window.__kiru.profilingContext?.emit("updateDirtied", appCtx!)
+      window.__kiru.profilingContext?.endTick(app!)
+      window.__kiru.profilingContext?.emit("updateDirtied", app!)
     }
     return flushSync()
   }
   consecutiveDirtyCount = 0
 
-  onWorkFinished()
-  queueMicrotask(() => flushEffects(postEffects))
+  isRunningOrQueued = false
+  while (nextIdleEffects.length) {
+    nextIdleEffects.shift()!()
+  }
+  queueMicrotask(() => {
+    flushEffects(postEffectCleanups)
+    flushEffects(postEffects)
+  })
   if (__DEV__) {
-    window.__kiru.emit("update", appCtx!)
-    window.__kiru.profilingContext?.emit("update", appCtx!)
-    window.__kiru.profilingContext?.endTick(appCtx!)
+    window.__kiru.emit("update", app!)
+    window.__kiru.profilingContext?.emit("update", app!)
+    window.__kiru.profilingContext?.endTick(app!)
   }
 }
 
@@ -221,13 +218,12 @@ function performUnitOfWork(vNode: VNode): VNode | null {
   let nextNode: VNode | null = vNode
   while (nextNode) {
     // queue effects upon ascent
-    if (nextNode.immediateEffects) {
-      preEffects.push(...nextNode.immediateEffects)
-      nextNode.immediateEffects = undefined
-    }
-    if (nextNode.effects) {
-      postEffects.push(...nextNode.effects)
-      nextNode.effects = undefined
+    const { hooks } = nextNode
+    if (hooks) {
+      preEffects.push(...hooks.pre)
+      postEffects.push(...hooks.post)
+      hooks.pre.length = 0
+      hooks.post.length = 0
     }
 
     if (nextNode === currentWorkRoot) return null
@@ -246,8 +242,13 @@ function performUnitOfWork(vNode: VNode): VNode | null {
 
 function updateVNode(vNode: VNode): VNode | null {
   const { type, props, prev, flags } = vNode
+
   if (__DEV__ && isHmrUpdate()) {
-  } else if ((flags & FLAG_DIRTY) === 0 && props === prev?.props) {
+  } else if (
+    prev &&
+    (flags & FLAG_DIRTY) === 0 &&
+    (prev.props === props || !propsChanged(prev.props, props))
+  ) {
     return null
   }
   try {
@@ -262,7 +263,7 @@ function updateVNode(vNode: VNode): VNode | null {
     if (__DEV__) {
       window.__kiru.emit(
         "error",
-        appCtx!,
+        app!,
         error instanceof Error ? error : new Error(String(error))
       )
     }
@@ -302,16 +303,7 @@ function updateExoticComponent(vNode: VNode): VNode | null {
   const { props, type } = vNode
   let children = props.children
 
-  if (type === $CONTEXT_PROVIDER) {
-    const {
-      props: { dependents, value },
-      prev,
-    } = vNode as ContextProviderNode<unknown>
-
-    if (dependents.size && prev && prev.props.value !== value) {
-      dependents.forEach(queueUpdate)
-    }
-  } else if (type === $ERROR_BOUNDARY) {
+  if (type === $ERROR_BOUNDARY) {
     const n = vNode as ErrorBoundaryNode
     const { error } = n
     if (error) {
@@ -328,18 +320,11 @@ function updateExoticComponent(vNode: VNode): VNode | null {
 }
 
 function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
-  const { type, props, subs, prev, flags } = vNode
-  if (flags & FLAG_MEMO) {
-    if (
-      prev &&
-      (type as MemoFn)[$MEMO](prev.props, props) &&
-      !(__DEV__ && isHmrUpdate())
-    ) {
-      vNode.flags |= FLAG_NOOP
-      return null
-    }
-    vNode.flags &= ~FLAG_NOOP
-  }
+  const { type, props, subs } = vNode
+
+  /** Only sync prop-derived signals when update came from parent (new props), not from internal subscription (e.g. signal). */
+  const shouldSyncProps = (vNode.flags & FLAG_DIRTY) === 0
+
   try {
     node.current = vNode
     let newChild
@@ -347,7 +332,6 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
     do {
       vNode.flags &= ~FLAG_DIRTY
       isRenderDirtied = false
-      hookIndex.current = 0
 
       /**
        * remove previous signal subscriptions (if any) every render.
@@ -363,23 +347,26 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
         subs.clear()
       }
 
-      if (__DEV__) {
-        newChild = latest(type)(props)
-
-        if (isHmrUpdate() && vNode.hooks && vNode.hookSig) {
-          const len = vNode.hooks.length
-          if (hookIndex.current < len) {
-            // clean up any hooks that were removed
-            for (let i = hookIndex.current; i < len; i++) {
-              const hook = vNode.hooks[i]
-              hook.cleanup?.()
-            }
-            vNode.hooks.length = hookIndex.current
-            vNode.hookSig.length = hookIndex.current
-          }
+      if (__DEV__ && isHmrUpdate()) {
+        const { hooks, cleanups } = vNode
+        if (cleanups) {
+          Object.values(cleanups).forEach(call)
+          delete vNode.cleanups
+        }
+        if (hooks) {
+          const { preCleanups, postCleanups } = hooks
+          preCleanups.forEach(call)
+          postCleanups.forEach(call)
+          preCleanups.length = postCleanups.length = 0
         }
+        delete vNode.propSyncs
+        delete vNode.render
+      }
+
+      newChild = renderFunctionComponent(vNode, type, props, shouldSyncProps)
 
-        if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
+      if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
+        if (__DEV__) {
           throw new KiruError({
             message:
               "Too many re-renders. Kiru limits the number of renders to prevent an infinite loop.",
@@ -387,9 +374,8 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
             vNode,
           })
         }
-        continue
+        break
       }
-      newChild = type(props)
     } while (isRenderDirtied)
 
     return (vNode.child = reconcileChildren(vNode, newChild))
@@ -398,6 +384,38 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
   }
 }
 
+function renderFunctionComponent(
+  vNode: FunctionVNode,
+  type: Function,
+  props: Record<string, unknown>,
+  shouldSyncProps: boolean
+): unknown {
+  const { render, propSyncs } = vNode
+
+  if (render) {
+    if (shouldSyncProps) {
+      const p = { ...props }
+      propSyncs?.forEach((sync) => sync(p))
+    }
+    return render(props)
+  }
+
+  let newChild = latest(type)(props)
+  if (typeof newChild === "function") {
+    vNode.subs?.forEach(call) // unsub from signals observered during setup
+    vNode.render = newChild
+    if (shouldSyncProps) {
+      const p = { ...props }
+      propSyncs?.forEach((sync) => sync(p))
+    }
+    newChild = newChild(props)
+  } else if (__DEV__ && setups.has(vNode)) {
+    throw new Error("setup() must not be called inside a render function")
+  }
+
+  return newChild
+}
+
 function updateHostComponent(vNode: DomVNode): VNode | null {
   const { props, type } = vNode
   if (__DEV__) {

package/src/signals/base.ts

@@ -3,13 +3,14 @@ import {
   safeStringify,
   sideEffectsEnabled,
   generateRandomID,
+  registerVNodeCleanup,
 } from "../utils/index.js"
 import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
-import { __DEV__ } from "../env.js"
+import { __DEV__, isBrowser } from "../env.js"
 import { node } from "../globals.js"
-import { useHook } from "../hooks/utils.js"
 import { requestUpdate } from "../scheduler.js"
-import { tracking, signalSubsMap } from "./globals.js"
+import { signalSubsMap } from "./globals.js"
+import { tracking } from "./tracking.js"
 import type { SignalSubscriber, ReadonlySignal } from "./types.js"
 import type { HMRAccept } from "../hmr.js"
 
@@ -38,6 +39,7 @@ export class Signal<T> {
           return this as Signal<any>
         },
         inject: (prev) => {
+          if (isBrowser) window.__kiru.devtools?.untrack(prev)
           signalSubsMap.get(this.$id)?.clear?.()
           signalSubsMap.delete(this.$id)
           this.$id = prev.$id
@@ -56,6 +58,11 @@ export class Signal<T> {
     } else {
       this.$subs = new Set()
     }
+
+    const n = node.current
+    if (n) {
+      registerVNodeCleanup(n, this.$id, Signal.dispose.bind(null, this))
+    }
   }
 
   get value() {
@@ -175,6 +182,8 @@ export class Signal<T> {
   }
 
   static entangle<T>(signal: Signal<T>) {
+    if (tracking.enabled === false) return
+
     const vNode = node.current
     const trackedSignalObservations = tracking.current()
     if (trackedSignalObservations) {
@@ -192,6 +201,7 @@ export class Signal<T> {
     signal.$isDisposed = true
     if (__DEV__) {
       signalSubsMap.delete(signal.$id)
+      if (isBrowser) window.__kiru.devtools?.untrack(signal)
       return
     }
     signal.$subs!.clear()
@@ -201,42 +211,3 @@ export class Signal<T> {
 export const signal = <T>(initial: T, displayName?: string) => {
   return new Signal(initial, displayName)
 }
-
-export const useSignal = <T>(initial: T, displayName?: string) => {
-  return useHook(
-    "useSignal",
-    { signal: null! as Signal<T> },
-    ({ hook, isInit, isHMR }) => {
-      if (__DEV__) {
-        if (isInit) {
-          hook.dev = {
-            devtools: {
-              get: () => ({
-                displayName: hook.signal.displayName,
-                value: hook.signal.peek(),
-              }),
-              set: ({ value }) => {
-                hook.signal.value = value
-              },
-            },
-            initialArgs: [initial, displayName],
-          }
-        }
-        if (isHMR) {
-          const [v, name] = hook.dev!.initialArgs
-          if (v !== initial || name !== displayName) {
-            hook.cleanup?.()
-            isInit = true
-            hook.dev!.initialArgs = [initial, displayName]
-          }
-        }
-      }
-
-      if (isInit) {
-        hook.cleanup = () => Signal.dispose(hook.signal)
-        hook.signal = new Signal(initial, displayName)
-      }
-      return hook.signal
-    }
-  )
-}

package/src/signals/computed.ts

@@ -1,9 +1,8 @@
 import { __DEV__ } from "../env.js"
 import { $HMR_ACCEPT } from "../constants.js"
-import { depsRequireChange, useHook } from "../hooks/utils.js"
 import { call, latest } from "../utils/index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
-import { executeWithTracking } from "./effect.js"
+import { executeWithTracking } from "./tracking.js"
 import { Signal } from "./base.js"
 import type { HMRAccept } from "../hmr.js"
 
@@ -131,63 +130,3 @@ export function computed<T>(
 ): ComputedSignal<T> {
   return new ComputedSignal(getter, displayName)
 }
-
-export function useComputed<T>(
-  getter: (prev?: T) => T,
-  displayName?: string
-): ComputedSignal<T>
-
-export function useComputed<T>(
-  getter: (prev?: T) => T,
-  deps?: unknown[],
-  displayName?: string
-): ComputedSignal<T>
-
-export function useComputed<T>(
-  getter: (prev?: T) => T,
-  depsOrDisplayName?: string | unknown[],
-  displayName?: string
-) {
-  return useHook(
-    "useComputedSignal",
-    {
-      signal: null! as ComputedSignal<T>,
-      deps: void 0 as unknown[] | undefined,
-    },
-    ({ hook, isInit, isHMR }) => {
-      if (__DEV__) {
-        hook.dev = {
-          devtools: {
-            get: () => ({
-              displayName: hook.signal.displayName,
-              value: hook.signal.peek(),
-            }),
-          },
-        }
-        if (isHMR) {
-          // useComputed is always considered side-effecty, so we need to re-run
-          hook.cleanup?.()
-          isInit = true
-        }
-      }
-      if (isInit) {
-        if (typeof depsOrDisplayName === "string") {
-          displayName = depsOrDisplayName
-          depsOrDisplayName = void 0
-        }
-        hook.deps = depsOrDisplayName
-        hook.cleanup = () => ComputedSignal.dispose(hook.signal)
-        hook.signal = computed(getter, displayName)
-      } else if (
-        hook.deps &&
-        typeof depsOrDisplayName !== "string" &&
-        depsRequireChange(hook.deps, depsOrDisplayName)
-      ) {
-        hook.deps = depsOrDisplayName
-        ComputedSignal.updateGetter(hook.signal, getter)
-      }
-
-      return hook.signal
-    }
-  )
-}

package/src/signals/effect.ts

@@ -1,61 +1,106 @@
-import { node } from "../globals.js"
-import { sideEffectsEnabled } from "../utils/index.js"
-import { tracking, effectQueue } from "./globals.js"
-import { tick } from "./utils.js"
+import { __DEV__, isBrowser } from "../env.js"
+import { effectQueue } from "./globals.js"
+import { executeWithTracking } from "./tracking.js"
+import {
+  latest,
+  generateRandomID,
+  call,
+  registerVNodeCleanup,
+  sideEffectsEnabled,
+} from "../utils/index.js"
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
+import { node } from "../globals.js"
 
-type TrackedExecutionContext<T, Deps extends readonly Signal<unknown>[]> = {
-  id: string
-  subs: Map<string, Function>
-  fn: (...values: SignalValues<Deps>) => T
-  deps?: Deps
-  onDepChanged: () => void
-}
-
-/**
- * Executes an effect function with dependency tracking enabled, and manages
- * the effect's subscriptions.
- * @param ctx - The execution context
- * @returns The result of the effect function
- */
-export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
-  ctx: TrackedExecutionContext<T, Deps>
-): T {
-  const { id, subs, fn, deps = [], onDepChanged } = ctx
-  let observations: Map<string, Signal<unknown>> | undefined
-
-  effectQueue.delete(id)
-  const isServer = !!node.current && !sideEffectsEnabled()
-
-  if (!isServer) {
-    observations = new Map<string, Signal<unknown>>()
-    tracking.stack.push(observations)
-  }
+type EffectCallbackReturn = (() => void) | void
 
-  const result = fn(...(deps.map((s) => s.value) as SignalValues<Deps>))
+export class Effect<const Deps extends readonly Signal<unknown>[] = []> {
+  protected id: string
+  protected callback: (...values: SignalValues<Deps>) => EffectCallbackReturn
+  protected deps?: Deps
+  protected unsubs: Map<string, Function>
+  protected cleanup: (() => void) | null
+  protected isRunning?: boolean
 
-  if (!isServer) {
-    for (const [id, unsub] of subs) {
-      if (observations!.has(id)) continue
-      unsub()
-      subs.delete(id)
+  constructor(
+    callback: (...values: SignalValues<Deps>) => EffectCallbackReturn,
+    deps?: Deps
+  ) {
+    this.id = generateRandomID()
+    this.callback = callback
+    this.deps = deps
+    this.unsubs = new Map()
+    this.isRunning = false
+    this.cleanup = null
+    if (__DEV__ && isBrowser) {
+      window.__kiru.HMRContext!.moduleEffects.push(this)
+    }
+    const n = node.current
+    if (n) {
+      if (!sideEffectsEnabled()) return // prevent side effects in non-browser environments
+      registerVNodeCleanup(n, this.id, this.stop.bind(this))
     }
+    this.start()
+  }
 
-    const effect = () => {
-      if (!effectQueue.size) {
-        queueMicrotask(tick)
-      }
-      effectQueue.set(id, onDepChanged)
+  start() {
+    if (this.isRunning) {
+      return
     }
 
-    for (const [id, sig] of observations!) {
-      if (subs.has(id)) continue
-      const unsub = sig.subscribe(effect)
-      subs.set(id, unsub)
+    this.isRunning = true
+
+    // postpone execution during HMR
+    if (__DEV__ && isBrowser && window.__kiru.HMRContext?.isReplacement()) {
+      return queueMicrotask(() => {
+        if (this.isRunning) {
+          Effect.run(this as Effect)
+        }
+      })
     }
-    tracking.stack.pop()
+    Effect.run(this as Effect)
   }
 
-  return result
+  stop() {
+    effectQueue.delete(this.id)
+    this.unsubs.forEach(call)
+    this.unsubs.clear()
+    this.cleanup?.()
+    this.cleanup = null
+    this.isRunning = false
+  }
+
+  private static run(watchEffect: Effect) {
+    const effect = latest(watchEffect)
+    const { id, callback: getter, unsubs: subs, deps } = effect
+
+    effect.cleanup =
+      executeWithTracking({
+        id,
+        subs,
+        fn: getter,
+        deps,
+        onDepChanged: () => {
+          effect.cleanup?.()
+          Effect.run(effect)
+        },
+      }) ?? null
+  }
+}
+
+export function effect(callback: () => EffectCallbackReturn): Effect
+export function effect<const Deps extends readonly Signal<unknown>[]>(
+  dependencies: Deps,
+  callback: (...values: SignalValues<Deps>) => EffectCallbackReturn
+): Effect<Deps>
+export function effect<const Deps extends readonly Signal<unknown>[]>(
+  depsOrGetter: Deps | (() => EffectCallbackReturn),
+  callback?: (...values: SignalValues<Deps>) => EffectCallbackReturn
+): Effect<Deps> | Effect {
+  if (typeof depsOrGetter === "function") {
+    return new Effect<[]>(depsOrGetter)
+  }
+  const dependencies = depsOrGetter
+  const effectGetter = callback!
+  return new Effect(effectGetter, dependencies)
 }