kiru 0.44.4

package/src/signals/base.ts

@@ -0,0 +1,237 @@
+import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
+import { __DEV__ } from "../env.js"
+import type { HMRAccept } from "../hmr.js"
+import {
+  getVNodeAppContext,
+  latest,
+  safeStringify,
+  sideEffectsEnabled,
+} from "../utils.js"
+import { tracking, signalSubsMap } from "./globals.js"
+import { type SignalSubscriber, ReadonlySignal } from "./types.js"
+import { node } from "../globals.js"
+import { useHook } from "../hooks/utils.js"
+import { generateRandomID } from "../generateId.js"
+
+export class Signal<T> {
+  [$SIGNAL] = true;
+  [$HMR_ACCEPT]?: HMRAccept<Signal<any>>
+  displayName?: string
+  private onBeforeRead?: () => void
+  protected $id: string
+  protected $value: T
+  protected $initialValue?: string
+  protected __next?: Signal<T>
+  protected $isDisposed?: boolean
+
+  constructor(initial: T, displayName?: string) {
+    this.$id = generateRandomID()
+    signalSubsMap.set(this.$id, new Set())
+
+    this.$value = initial
+    if (displayName) this.displayName = displayName
+    if (__DEV__) {
+      this.$initialValue = safeStringify(initial)
+      this[$HMR_ACCEPT] = {
+        provide: () => {
+          return this as Signal<any>
+        },
+        inject: (prev) => {
+          if (this.$initialValue === prev.$initialValue) {
+            this.$value = prev.$value
+          }
+
+          signalSubsMap.get(this.$id)?.clear?.()
+          signalSubsMap.delete(this.$id)
+          this.$id = prev.$id
+          // @ts-ignore - this handles scenarios where a reference to the prev has been encapsulated
+          // and we need to be able to refer to the latest version of the signal.
+          prev.__next = this
+        },
+        destroy: () => {},
+      } satisfies HMRAccept<Signal<any>>
+    }
+  }
+
+  get value() {
+    this.onBeforeRead?.()
+    if (__DEV__) {
+      const tgt = latest(this)
+      Signal.entangle(tgt)
+      return tgt.$value
+    }
+    Signal.entangle(this)
+    return this.$value
+  }
+
+  set value(next: T) {
+    if (__DEV__) {
+      const tgt = latest(this)
+      if (Object.is(tgt.$value, next)) return
+      tgt.$value = next
+      tgt.notify()
+      return
+    }
+    if (Object.is(this.$value, next)) return
+    this.$value = next
+    this.notify()
+  }
+
+  peek() {
+    this.onBeforeRead?.()
+    if (__DEV__) {
+      return latest(this).$value
+    }
+    return this.$value
+  }
+
+  sneak(newValue: T) {
+    if (__DEV__) {
+      const tgt = latest(this)
+      tgt.$value = newValue
+      return
+    }
+    this.$value = newValue
+  }
+
+  toString() {
+    this.onBeforeRead?.()
+    if (__DEV__) {
+      const tgt = latest(this)
+      Signal.entangle(tgt)
+      return `${tgt.$value}`
+    }
+    Signal.entangle(this)
+    return `${this.$value}`
+  }
+
+  subscribe(cb: (state: T) => void): () => void {
+    const subs = signalSubsMap.get(this.$id)!
+    subs!.add(cb)
+    return () => signalSubsMap.get(this.$id)?.delete(cb)
+  }
+
+  notify(options?: { filter?: (sub: Function | Kaioken.VNode) => boolean }) {
+    signalSubsMap.get(this.$id)?.forEach((sub) => {
+      if (options?.filter && !options.filter(sub)) return
+      if (typeof sub === "function") {
+        if (__DEV__) {
+          const value = latest(this).$value
+          return sub(value)
+        }
+        return sub(this.$value)
+      }
+      getVNodeAppContext(sub).requestUpdate(sub)
+    })
+  }
+
+  static isSignal(x: any): x is Signal<any> {
+    return typeof x === "object" && !!x && $SIGNAL in x
+  }
+
+  static unsubscribe(sub: SignalSubscriber, id: string) {
+    signalSubsMap.get(id)?.delete(sub)
+  }
+
+  static subscribers(signal: Signal<any>) {
+    return signalSubsMap.get(signal.$id)!
+  }
+
+  static makeReadonly<T>(signal: Signal<T>): ReadonlySignal<T> {
+    const desc = Object.getOwnPropertyDescriptor(signal, "value")
+    if (desc && !desc.writable) return signal
+    return Object.defineProperty(signal, "value", {
+      get: function (this: Signal<T>) {
+        Signal.entangle(this)
+        return this.$value
+      },
+      configurable: true,
+    })
+  }
+
+  static makeWritable<T>(signal: Signal<T>): Signal<T> {
+    const desc = Object.getOwnPropertyDescriptor(signal, "value")
+    if (desc && desc.writable) return signal
+    return Object.defineProperty(signal, "value", {
+      get: function (this: Signal<T>) {
+        Signal.entangle(this)
+        return this.$value
+      },
+      set: function (this: Signal<T>, value) {
+        this.$value = value
+        this.notify()
+      },
+      configurable: true,
+    })
+  }
+
+  static getId<T>(signal: Signal<T>) {
+    return signal.$id
+  }
+
+  static entangle<T>(signal: Signal<T>) {
+    const vNode = node.current
+    const trackedSignalObservations = tracking.current()
+    if (trackedSignalObservations) {
+      if (!vNode || (vNode && sideEffectsEnabled())) {
+        trackedSignalObservations.set(signal.$id, signal)
+      }
+      return
+    }
+    if (!vNode || !sideEffectsEnabled()) return
+    ;(vNode.subs ??= new Set()).add(signal.$id)
+    Signal.subscribers(signal).add(vNode)
+  }
+
+  static configure(signal: Signal<any>, onBeforeRead?: () => void) {
+    signal.onBeforeRead = onBeforeRead
+  }
+
+  static dispose(signal: Signal<any>) {
+    signal.$isDisposed = true
+    signalSubsMap.delete(signal.$id)
+  }
+}
+
+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

@@ -0,0 +1,139 @@
+import { __DEV__ } from "../env.js"
+import { Signal } from "./base.js"
+import { effectQueue, signalSubsMap } from "./globals.js"
+import { $HMR_ACCEPT } from "../constants.js"
+import type { HMRAccept } from "../hmr.js"
+import { useHook } from "../hooks/utils.js"
+import { executeWithTracking } from "./effect.js"
+import { latest } from "../utils.js"
+
+export class ComputedSignal<T> extends Signal<T> {
+  protected $getter: (prev?: T) => T
+  protected $unsubs: Map<string, Function>
+  protected $isDirty: boolean
+  constructor(getter: (prev?: T) => T, displayName?: string) {
+    super(void 0 as T, displayName)
+    this.$getter = getter
+    this.$unsubs = new Map()
+    this.$isDirty = true
+
+    if (__DEV__) {
+      const inject = this[$HMR_ACCEPT]!.inject!
+      // @ts-expect-error this is fine 😅
+      this[$HMR_ACCEPT] = {
+        provide: () => {
+          return this
+        },
+        inject: (prev) => {
+          inject(prev)
+          ComputedSignal.stop(prev)
+          this.$isDirty = prev.$isDirty
+        },
+        destroy: () => {},
+      } satisfies HMRAccept<ComputedSignal<T>>
+    }
+    Signal.configure(this, () => {
+      if (!this.$isDirty) return
+      if (__DEV__) {
+        /**
+         * This is a safeguard for dev-mode only, where a 'read' on an
+         * already-disposed signal during HMR update => `dom.setSignalProp`
+         * would throw due to invalid subs-map access.
+         *
+         * Perhaps in future we could handle this better by carrying over
+         * the previous signal's ID and not disposing it / deleting the
+         * map entry.
+         */
+        if (this.$isDisposed) return
+      }
+      ComputedSignal.run(this)
+    })
+  }
+
+  get value() {
+    return super.value
+  }
+
+  // @ts-expect-error
+  set value(next: T) {}
+
+  subscribe(cb: (state: T) => void): () => void {
+    if (this.$isDirty) {
+      ComputedSignal.run(this)
+    }
+    return super.subscribe(cb)
+  }
+
+  static dispose(signal: ComputedSignal<any>): void {
+    ComputedSignal.stop(signal)
+    Signal.dispose(signal)
+  }
+
+  private static stop<T>(computed: ComputedSignal<T>) {
+    const { $id, $unsubs } = latest(computed)
+
+    effectQueue.delete($id)
+    $unsubs.forEach((unsub) => unsub())
+    $unsubs.clear()
+    computed.$isDirty = true
+  }
+
+  private static run<T>(computed: ComputedSignal<T>) {
+    const $computed = latest(computed)
+    const { $id: id, $getter, $unsubs: subs } = $computed
+
+    const value = executeWithTracking({
+      id,
+      subs,
+      fn: () => $getter($computed.$value),
+      onDepChanged: () => {
+        $computed.$isDirty = true
+        if (!signalSubsMap?.get(id)?.size) return
+        ComputedSignal.run($computed)
+        $computed.notify()
+      },
+    })
+    $computed.sneak(value)
+    $computed.$isDirty = false
+  }
+}
+
+export const computed = <T>(
+  getter: (prev?: T) => T,
+  displayName?: string
+): ComputedSignal<T> => {
+  return new ComputedSignal(getter, displayName)
+}
+
+export const useComputed = <T>(
+  getter: (prev?: T) => T,
+  displayName?: string
+) => {
+  return useHook(
+    "useComputedSignal",
+    { signal: null! as ComputedSignal<T> },
+    ({ 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) {
+        hook.cleanup = () => ComputedSignal.dispose(hook.signal)
+        hook.signal = computed(getter, displayName)
+      }
+
+      return hook.signal
+    }
+  )
+}

package/src/signals/effect.ts

@@ -0,0 +1,60 @@
+import { node } from "../globals.js"
+import { sideEffectsEnabled } from "../utils.js"
+import { tracking, effectQueue } from "./globals.js"
+import type { Signal } from "./base.js"
+import type { SignalValues } from "./types.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)
+  }
+
+  const result = fn(...(deps.map((s) => s.value) as SignalValues<Deps>))
+
+  if (!isServer) {
+    for (const [id, unsub] of subs) {
+      if (observations!.has(id)) continue
+      unsub()
+      subs.delete(id)
+    }
+
+    const effect = () => {
+      if (!effectQueue.has(id)) {
+        queueMicrotask(() => effectQueue.get(id)?.())
+      }
+      effectQueue.set(id, onDepChanged)
+    }
+
+    for (const [id, sig] of observations!) {
+      if (subs.has(id)) continue
+      const unsub = sig.subscribe(effect)
+      subs.set(id, unsub)
+    }
+    tracking.stack.pop()
+  }
+
+  return result
+}

package/src/signals/globals.ts

@@ -0,0 +1,11 @@
+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>> = new Map()

package/src/signals/index.ts

@@ -0,0 +1,12 @@
+/**
+ * ISSUES:
+ * 1. signal subscription when mixing local and global signals get reversed in hmr for ONLY the first update after HMR is dom
+ * 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 { unwrap, tick } from "./utils.js"
+export * from "./jsx.js"
+export * from "./types.js"

package/src/signals/jsx.ts

@@ -0,0 +1,45 @@
+import type { Signal } from "./base.js"
+import type { SignalValues } from "./types.js"
+
+type ForProps<T extends Signal<any[]>> = {
+  each: T
+  fallback?: JSX.Element
+  children: (
+    value: T extends Signal<infer U>
+      ? U extends Array<infer V>
+        ? V
+        : never
+      : never,
+    index: number
+  ) => JSX.Element
+}
+
+export function For<T extends Signal<any[]>>({
+  each,
+  fallback,
+  children,
+}: ForProps<T>) {
+  const items = each.value
+  if (items.length === 0) return fallback
+  return items.map((v, i) => children(v, i))
+}
+
+type DeriveChildrenArgs<T extends Signal<any> | Signal<any>[]> =
+  T extends Signal<any>[]
+    ? SignalValues<T>
+    : [T extends Signal<infer V> ? V : never]
+
+export type DeriveProps<T extends Signal<any> | Signal<any>[]> = {
+  from: T
+  children: (...values: DeriveChildrenArgs<T>) => JSX.Children
+}
+
+export function Derive<const T extends Signal<any> | Signal<any>[]>({
+  from,
+  children,
+}: DeriveProps<T>) {
+  const args = (Array.isArray(from) ? from : [from]).map(
+    (s) => s.value
+  ) as DeriveChildrenArgs<T>
+  return children(...args)
+}

package/src/signals/types.ts

@@ -0,0 +1,10 @@
+import { type Signal } from "./base"
+
+export type ReadonlySignal<T> = Signal<T> & {
+  readonly value: T
+}
+export type SignalSubscriber = Kaioken.VNode | Function
+
+export type SignalValues<T extends readonly Signal<unknown>[]> = {
+  [I in keyof T]: T[I] extends Signal<infer V> ? V : never
+}

package/src/signals/utils.ts

@@ -0,0 +1,12 @@
+import { Signal } from "./base.js"
+import { effectQueue } from "./globals.js"
+
+export function unwrap<T>(value: T | Signal<T>, reactive = false): T {
+  if (!Signal.isSignal(value)) return value
+  return reactive ? value.value : value.peek()
+}
+
+export const tick = () => {
+  effectQueue.forEach((fn) => fn())
+  effectQueue.clear()
+}

package/src/signals/watch.ts

@@ -0,0 +1,151 @@
+import { __DEV__ } from "../env.js"
+import type { HMRAccept } from "../hmr.js"
+import { $HMR_ACCEPT } from "../constants.js"
+import { sideEffectsEnabled, useHook } from "../hooks/utils.js"
+import { effectQueue } from "./globals.js"
+import { generateRandomID } from "../generateId.js"
+import { executeWithTracking } from "./effect.js"
+import { latest } from "../utils.js"
+import type { Signal } from "./base.js"
+import type { SignalValues } from "./types.js"
+
+type WatchCallbackReturn = (() => void) | void
+
+export class WatchEffect<const Deps extends readonly Signal<unknown>[] = []> {
+  protected id: string
+  protected getter: (...values: SignalValues<Deps>) => WatchCallbackReturn
+  protected deps?: Deps
+  protected unsubs: Map<string, Function>
+  protected cleanup: (() => void) | null
+  protected isRunning?: boolean
+  protected [$HMR_ACCEPT]?: HMRAccept<WatchEffect<Deps>>
+
+  constructor(
+    getter: (...values: SignalValues<Deps>) => WatchCallbackReturn,
+    deps?: Deps
+  ) {
+    this.id = generateRandomID()
+    this.getter = getter
+    this.deps = deps
+    this.unsubs = new Map()
+    this.isRunning = false
+    this.cleanup = null
+    if (__DEV__) {
+      this[$HMR_ACCEPT] = {
+        provide: () => this,
+        inject: (prev) => {
+          if (prev.isRunning) return
+          this.stop()
+        },
+        destroy: () => {
+          this.stop()
+        },
+      }
+      if ("window" in globalThis) {
+        const signals = window.__kaioken!.HMRContext!.signals
+        if (signals.isWaitingForNextWatchCall()) {
+          signals.pushWatch(this as WatchEffect)
+        }
+      }
+    }
+    this.start()
+  }
+
+  start() {
+    if (this.isRunning) {
+      return
+    }
+
+    this.isRunning = true
+
+    if (__DEV__) {
+      // postpone execution during HMR
+      if (
+        "window" in globalThis &&
+        window.__kaioken?.HMRContext?.isReplacement()
+      ) {
+        return queueMicrotask(() => {
+          if (this.isRunning) {
+            WatchEffect.run(this as WatchEffect)
+          }
+        })
+      }
+    }
+    WatchEffect.run(this as WatchEffect)
+  }
+
+  stop() {
+    effectQueue.delete(this.id)
+    this.unsubs.forEach((fn) => fn())
+    this.unsubs.clear()
+    this.cleanup?.()
+    this.cleanup = null
+    this.isRunning = false
+  }
+
+  private static run(watchEffect: WatchEffect) {
+    const effect = latest(watchEffect)
+    const { id, getter, unsubs: subs, deps } = effect
+
+    effect.cleanup =
+      executeWithTracking({
+        id,
+        subs,
+        fn: getter,
+        deps,
+        onDepChanged: () => {
+          effect.cleanup?.()
+          WatchEffect.run(effect)
+        },
+      }) ?? null
+  }
+}
+
+export function watch(getter: () => WatchCallbackReturn): WatchEffect
+export function watch<const Deps extends readonly Signal<unknown>[]>(
+  dependencies: Deps,
+  getter: (...values: SignalValues<Deps>) => WatchCallbackReturn
+): WatchEffect<Deps>
+export function watch<const Deps extends readonly Signal<unknown>[]>(
+  depsOrGetter: Deps | (() => WatchCallbackReturn),
+  getter?: (...values: SignalValues<Deps>) => WatchCallbackReturn
+): WatchEffect<Deps> | WatchEffect {
+  if (typeof depsOrGetter === "function") {
+    return new WatchEffect<[]>(depsOrGetter)
+  }
+  const dependencies = depsOrGetter
+  const effectGetter = getter!
+  return new WatchEffect(effectGetter, dependencies)
+}
+
+export function useWatch(getter: () => WatchCallbackReturn): WatchEffect
+export function useWatch<const Deps extends readonly Signal<unknown>[]>(
+  dependencies: Deps,
+  getter: (...values: SignalValues<Deps>) => WatchCallbackReturn
+): WatchEffect<Deps> | undefined
+
+export function useWatch<const Deps extends readonly Signal<unknown>[]>(
+  depsOrGetter: Deps | (() => WatchCallbackReturn),
+  getter?: (...values: SignalValues<Deps>) => WatchCallbackReturn
+): WatchEffect<Deps> | WatchEffect | undefined {
+  if (!sideEffectsEnabled()) return
+
+  return useHook(
+    "useWatch",
+    { watcher: null as any as WatchEffect<Deps> },
+    ({ hook, isInit, isHMR }) => {
+      if (__DEV__) {
+        if (isHMR) {
+          hook.cleanup?.()
+          isInit = true
+        }
+      }
+      if (isInit) {
+        const watcher = (hook.watcher = watch(depsOrGetter as Deps, getter!))
+        hook.cleanup = () => watcher.stop()
+      }
+
+      return hook.watcher
+    }
+  )
+}