kiru 0.54.3 → 1.0.1

package/src/scheduler.ts

@@ -1,18 +1,9 @@
-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 {
   commitDeletion,
@@ -24,7 +15,7 @@ import {
 } from "./dom.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
-import { hookIndex, node, renderMode } from "./globals.js"
+import { node, renderMode } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
 import { reconcileChildren } from "./reconciler.js"
 import {
@@ -32,17 +23,17 @@ import {
   latest,
   traverseApply,
   isExoticType,
-  getVNodeAppContext,
+  getVNodeApp,
   findParentErrorBoundary,
   call,
+  propsChanged,
 } from "./utils/index.js"
-import type { AppContext } from "./appContext"
-import type { MemoFn } from "./components/memo"
+import type { AppHandle } from "./appHandle"
 import { isHmrUpdate } from "./hmr.js"
 
 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,6 +85,14 @@ export function requestUpdate(vNode: VNode): void {
   queueUpdate(vNode)
 }
 
+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 queueBeginWork(): void {
   if (isRunningOrQueued) return
   isRunningOrQueued = true
@@ -116,7 +115,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
@@ -146,10 +145,10 @@ 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
     }
   }
 
@@ -190,8 +189,8 @@ 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()
   }
@@ -200,9 +199,9 @@ function doWork(): void {
   onWorkFinished()
   queueMicrotask(() => 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 +220,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 +244,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 +265,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 +305,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 +322,8 @@ 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
+
   try {
     node.current = vNode
     let newChild
@@ -347,7 +331,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.
@@ -364,18 +347,29 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
       }
 
       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 (isHmrUpdate()) {
+          const { hooks } = vNode
+          if (vNode.cleanups) {
+            Object.values(vNode.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.render
+        }
+
+        if (vNode.render) {
+          newChild = vNode.render(props)
+        } else {
+          newChild = latest(type)(props)
+          if (typeof newChild === "function") {
+            vNode.subs?.forEach(call)
+            vNode.render = newChild as (props: any) => unknown
+            newChild = vNode.render(props)
           }
         }
 
@@ -389,7 +383,16 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
         }
         continue
       }
-      newChild = type(props)
+
+      if (vNode.render) {
+        newChild = vNode.render(props)
+      } else {
+        newChild = type(props)
+        if (typeof newChild === "function") {
+          vNode.render = newChild as (props: any) => unknown
+          newChild = vNode.render(props)
+        }
+      }
     } while (isRenderDirtied)
 
     return (vNode.child = reconcileChildren(vNode, newChild))

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 { 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 ("window" in globalThis) 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 ("window" in globalThis) 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,108 @@
-import { node } from "../globals.js"
-import { sideEffectsEnabled } from "../utils/index.js"
-import { tracking, effectQueue } from "./globals.js"
-import { tick } from "./utils.js"
+import { __DEV__ } from "../env.js"
+import { effectQueue } from "./globals.js"
+import { executeWithTracking } from "./tracking.js"
+import {
+  latest,
+  generateRandomID,
+  call,
+  registerVNodeCleanup,
+} 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__ && "window" in globalThis) {
+      window.__kiru.HMRContext!.moduleEffects.push(this)
+    }
+    const n = node.current
+    if (n) {
+      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__ &&
+      "window" in globalThis &&
+      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)
 }

package/src/signals/globals.ts

@@ -1,11 +1,4 @@
-import type { Signal } from "./base.js"
 import type { SignalSubscriber } from "./types.js"
 
-export const tracking = {
-  stack: new Array<Map<string, Signal<unknown>>>(),
-  current: function (): Map<string, Signal<unknown>> | undefined {
-    return this.stack[this.stack.length - 1]
-  },
-}
 export const effectQueue = new Map<string, Function>()
 export const signalSubsMap: Map<string, Set<SignalSubscriber<any>>> = new Map()

package/src/signals/index.ts

@@ -4,9 +4,9 @@
  * 2. global computed will lose its vNode subscription on HMR
  * */
 
-export { Signal, signal, useSignal } from "./base.js"
-export { ComputedSignal, computed, useComputed } from "./computed.js"
-export { WatchEffect, watch, useWatch } from "./watch.js"
+export { Signal, signal } from "./base.js"
+export { ComputedSignal, computed } from "./computed.js"
+export { Effect, effect } from "./effect.js"
 export { unwrap, tick } from "./utils.js"
-export * from "./for.js"
+export * from "./jsx.js"
 export * from "./types.js"

package/src/signals/{for.ts → jsx.ts}

@@ -1,3 +1,4 @@
+import { Signalable } from "../types.js"
 import type { Signal } from "./base.js"
 import { unwrap } from "./utils.js"
 
@@ -28,3 +29,12 @@ export function For<T extends Signal<any[]> | unknown[]>({
   if (items.length === 0) return fallback
   return items.map(children)
 }
+
+export interface ShowProps {
+  children: JSX.Element
+  when: Signalable<unknown>
+  fallback?: JSX.Element
+}
+export function Show({ children, when, fallback }: ShowProps): JSX.Element {
+  return !!unwrap(when, true) ? children : fallback
+}