kiru 0.45.2 → 0.46.0

package/src/signals/base.ts

@@ -1,36 +1,34 @@
 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 { 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"
+import { requestUpdate } from "../scheduler.js"
 
 export class Signal<T> {
   [$SIGNAL] = true;
   [$HMR_ACCEPT]?: HMRAccept<Signal<any>>
   displayName?: string
   private onBeforeRead?: () => void
+  protected $subs?: Set<SignalSubscriber<any>>
   protected $id: string
   protected $value: T
+  protected $prevValue?: 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__) {
+      signalSubsMap.set(this.$id, new Set())
       this.$initialValue = safeStringify(initial)
       this[$HMR_ACCEPT] = {
         provide: () => {
@@ -50,6 +48,8 @@ export class Signal<T> {
         },
         destroy: () => {},
       } satisfies HMRAccept<Signal<any>>
+    } else {
+      this.$subs = new Set()
     }
   }
 
@@ -68,11 +68,13 @@ export class Signal<T> {
     if (__DEV__) {
       const tgt = latest(this)
       if (Object.is(tgt.$value, next)) return
+      tgt.$prevValue = tgt.$value
       tgt.$value = next
       tgt.notify()
       return
     }
     if (Object.is(this.$value, next)) return
+    this.$prevValue = this.$value
     this.$value = next
     this.notify()
   }
@@ -88,9 +90,11 @@ export class Signal<T> {
   sneak(newValue: T) {
     if (__DEV__) {
       const tgt = latest(this)
+      tgt.$prevValue = tgt.$value
       tgt.$value = newValue
       return
     }
+    this.$prevValue = this.$value
     this.$value = newValue
   }
 
@@ -105,23 +109,27 @@ export class Signal<T> {
     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)
+  subscribe(cb: (state: T, prevState?: T) => void): () => void {
+    if (__DEV__) {
+      const subs = signalSubsMap.get(this.$id)!
+      subs!.add(cb)
+      return () => signalSubsMap.get(this.$id)?.delete(cb)
+    }
+    this.$subs!.add(cb)
+    return () => this.$subs!.delete(cb)
   }
 
   notify(options?: { filter?: (sub: Function | Kiru.VNode) => boolean }) {
-    signalSubsMap.get(this.$id)?.forEach((sub) => {
+    if (__DEV__) {
+      return signalSubsMap.get(this.$id)?.forEach((sub) => {
+        if (options?.filter && !options.filter(sub)) return
+        const { $value, $prevValue } = latest(this)
+        return sub($value, $prevValue)
+      })
+    }
+    this.$subs!.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)
+      return sub(this.$value, this.$prevValue)
     })
   }
 
@@ -129,12 +137,11 @@ export class Signal<T> {
     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)!
+    if (__DEV__) {
+      return signalSubsMap.get(signal.$id)!
+    }
+    return signal.$subs
   }
 
   static makeReadonly<T>(signal: Signal<T>): ReadonlySignal<T> {
@@ -165,10 +172,6 @@ export class Signal<T> {
     })
   }
 
-  static getId<T>(signal: Signal<T>) {
-    return signal.$id
-  }
-
   static entangle<T>(signal: Signal<T>) {
     const vNode = node.current
     const trackedSignalObservations = tracking.current()
@@ -179,8 +182,8 @@ export class Signal<T> {
       return
     }
     if (!vNode || !sideEffectsEnabled()) return
-    ;(vNode.subs ??= new Set()).add(signal.$id)
-    Signal.subscribers(signal).add(vNode)
+    const unsub = signal.subscribe(() => requestUpdate(vNode))
+    ;(vNode.subs ??= new Set()).add(unsub)
   }
 
   static configure(signal: Signal<any>, onBeforeRead?: () => void) {
@@ -189,7 +192,11 @@ export class Signal<T> {
 
   static dispose(signal: Signal<any>) {
     signal.$isDisposed = true
-    signalSubsMap.delete(signal.$id)
+    if (__DEV__) {
+      signalSubsMap.delete(signal.$id)
+      return
+    }
+    signal.$subs!.clear()
   }
 }
 

package/src/signals/computed.ts

@@ -1,5 +1,5 @@
 import { __DEV__ } from "../env.js"
-import { Signal } from "./base.js"
+import { Signal } from "./index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
 import { $HMR_ACCEPT } from "../constants.js"
 import type { HMRAccept } from "../hmr.js"
@@ -57,7 +57,7 @@ export class ComputedSignal<T> extends Signal<T> {
   // @ts-expect-error
   set value(next: T) {}
 
-  subscribe(cb: (state: T) => void): () => void {
+  subscribe(cb: (state: T, prevState?: T) => void): () => void {
     if (this.$isDirty) {
       ComputedSignal.run(this)
     }
@@ -88,8 +88,13 @@ export class ComputedSignal<T> extends Signal<T> {
       fn: () => $getter($computed.$value),
       onDepChanged: () => {
         $computed.$isDirty = true
-        if (!signalSubsMap?.get(id)?.size) return
+        if (__DEV__) {
+          if (!signalSubsMap?.get(id)?.size) return
+        } else {
+          if (!computed.$subs!.size) return
+        }
         ComputedSignal.run($computed)
+        if (Object.is($computed.$value, $computed.$prevValue)) return
         $computed.notify()
       },
     })

package/src/signals/effect.ts

@@ -1,7 +1,7 @@
 import { node } from "../globals.js"
 import { sideEffectsEnabled } from "../utils.js"
 import { tracking, effectQueue } from "./globals.js"
-import type { Signal } from "./base.js"
+import type { Signal } from "./index.js"
 import type { SignalValues } from "./types.js"
 
 type TrackedExecutionContext<T, Deps extends readonly Signal<unknown>[]> = {

package/src/signals/globals.ts

@@ -1,4 +1,4 @@
-import type { Signal } from "./base.js"
+import type { Signal } from "./index.js"
 import type { SignalSubscriber } from "./types.js"
 
 export const tracking = {
@@ -8,4 +8,4 @@ export const tracking = {
   },
 }
 export const effectQueue = new Map<string, Function>()
-export const signalSubsMap: Map<string, Set<SignalSubscriber>> = new Map()
+export const signalSubsMap: Map<string, Set<SignalSubscriber<any>>> = new Map()

package/src/signals/jsx.ts

@@ -1,17 +1,18 @@
-import type { Signal } from "./base.js"
+import type { Signal } from "./index.js"
 import type { SignalValues } from "./types.js"
 
-type ForProps<T extends Signal<any[]>> = {
+type InferArraySignalItemType<T extends Signal<any[]>> = T extends Signal<
+  infer V
+>
+  ? V extends Array<infer W>
+    ? W
+    : never
+  : never
+
+type ForProps<T extends Signal<any[]>, U = InferArraySignalItemType<T>> = {
   each: T
   fallback?: JSX.Element
-  children: (
-    value: T extends Signal<infer U>
-      ? U extends Array<infer V>
-        ? V
-        : never
-      : never,
-    index: number
-  ) => JSX.Element
+  children: (value: U, index: number, array: U[]) => JSX.Element
 }
 
 export function For<T extends Signal<any[]>>({
@@ -21,7 +22,7 @@ export function For<T extends Signal<any[]>>({
 }: ForProps<T>) {
   const items = each.value
   if (items.length === 0) return fallback
-  return items.map((v, i) => children(v, i))
+  return items.map(children)
 }
 
 type DeriveChildrenArgs<T extends Signal<any> | Signal<any>[]> =

package/src/signals/types.ts

@@ -1,9 +1,9 @@
-import { type Signal } from "./base"
+import { type Signal } from "./index.js"
 
 export type ReadonlySignal<T> = Signal<T> & {
   readonly value: T
 }
-export type SignalSubscriber = Kiru.VNode | Function
+export type SignalSubscriber<T = unknown> = (value: T, prevValue?: T) => void
 
 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

@@ -1,4 +1,4 @@
-import { Signal } from "./base.js"
+import { Signal } from "./index.js"
 import { effectQueue } from "./globals.js"
 
 export function unwrap<T>(value: T | Signal<T>, reactive = false): T {

package/src/ssr/server.ts

@@ -1,7 +1,7 @@
 import { Readable } from "node:stream"
 import { Fragment } from "../element.js"
 import { AppContext, createAppContext } from "../appContext.js"
-import { renderMode, ctx, node, nodeToCtxMap } from "../globals.js"
+import { renderMode, node } from "../globals.js"
 import {
   isVNode,
   encodeHtmlEntities,
@@ -29,12 +29,9 @@ export function renderToReadableStream<T extends Record<string, unknown>>(
     stream: new Readable(),
     ctx: createAppContext(appFunc, appProps, { rootType: Fragment }),
   }
-  const prevCtx = ctx.current
-  ctx.current = state.ctx
   renderToStream_internal(state, state.ctx.rootNode, null, 0)
   state.stream.push(null)
   renderMode.current = prev
-  ctx.current = prevCtx
 
   return state.stream
 }
@@ -89,7 +86,6 @@ function renderToStream_internal(
   }
 
   if (typeof type !== "string") {
-    nodeToCtxMap.set(el, state.ctx)
     node.current = el
     const res = type(props)
     node.current = null

package/src/types.ts

@@ -17,6 +17,7 @@ import type {
   SVGTagToElement,
 } from "./types.dom"
 import { Signalable, SomeDom } from "./types.utils"
+import type { AppContext } from "./appContext"
 
 export type { ElementProps, StyleObject }
 
@@ -169,6 +170,7 @@ declare global {
       | typeof $HYDRATION_BOUNDARY
 
     type VNode = {
+      app?: AppContext
       dom?: SomeDom
       lastChildDom?: SomeDom
       type: Function | ExoticSymbol | "#text" | (string & {})
@@ -183,11 +185,11 @@ declare global {
       parent: VNode | null
       child: VNode | null
       sibling: VNode | null
-      prev: VNode | null
+      prev: VNodeSnapshot | null
       deletions: VNode[] | null
       flags: number
       hooks?: Hook<unknown>[]
-      subs?: Set<string>
+      subs?: Set<Function>
       cleanups?: Record<string, Function>
       effects?: Array<Function>
       immediateEffects?: Array<Function>
@@ -202,6 +204,11 @@ declare global {
       hmrUpdated?: boolean
     }
   }
+  type VNodeSnapshot = {
+    props: Kiru.VNode["props"]
+    memoizedProps: Kiru.VNode["memoizedProps"]
+    index: number
+  }
 
   interface Element {
     __kiruNode?: Kiru.VNode

package/src/utils.ts

@@ -1,17 +1,18 @@
-import { node, nodeToCtxMap, renderMode } from "./globals.js"
+import { node, renderMode } from "./globals.js"
 import {
   $CONTEXT_PROVIDER,
   $FRAGMENT,
   $HYDRATION_BOUNDARY,
   booleanAttributes,
-  FLAG,
+  FLAG_DELETION,
+  FLAG_HAS_MEMO_ANCESTOR,
+  FLAG_PLACEMENT,
+  FLAG_UPDATE,
   REGEX_UNIT,
 } from "./constants.js"
 import { unwrap } from "./signals/utils.js"
-import { KiruError } from "./error.js"
-import type { AppContext } from "./appContext"
 import { __DEV__ } from "./env.js"
-import { flags } from "./flags.js"
+import type { AppContext } from "./appContext"
 
 export {
   isVNode,
@@ -74,7 +75,7 @@ function sideEffectsEnabled(): boolean {
 }
 
 function isVNodeDeleted(vNode: VNode): boolean {
-  return flags.get(vNode.flags, FLAG.DELETION)
+  return (vNode.flags & FLAG_DELETION) !== 0
 }
 
 function isVNode(thing: unknown): thing is VNode {
@@ -119,22 +120,30 @@ function getCurrentVNode(): VNode | null {
   return node.current
 }
 
-function getVNodeAppContext(vNode: VNode): AppContext {
-  const n = nodeToCtxMap.get(vNode)
-  if (!n)
-    throw new KiruError({
-      message: "Unable to find VNode's AppContext.",
-      vNode,
-    })
-  return n
+function getVNodeAppContext(vNode: VNode): AppContext | null {
+  let n: VNode | null = vNode
+  while (n) {
+    if (n.app) {
+      return (vNode.app = n.app)
+    }
+    n = n.parent
+  }
+
+  return null
 }
 
 function commitSnapshot(vNode: VNode): void {
-  vNode.prev = { ...vNode, props: { ...vNode.props }, prev: null }
-  vNode.flags = flags.unsetRange(vNode.flags, FLAG.UPDATE, FLAG.DELETION)
+  const {
+    props: { children, ...props },
+    memoizedProps,
+    index,
+  } = vNode
+  vNode.prev = { props, memoizedProps, index }
+  vNode.flags &= ~(FLAG_UPDATE | FLAG_PLACEMENT | FLAG_DELETION)
 }
 
 function vNodeContains(haystack: VNode, needle: VNode): boolean {
+  if (needle.depth < haystack.depth) return false
   if (haystack === needle) return true
   let checkSiblings = false
   const stack: VNode[] = [haystack]
@@ -151,11 +160,7 @@ function vNodeContains(haystack: VNode, needle: VNode): boolean {
 function willMemoBlockUpdate(root: VNode, target: VNode): boolean {
   let node: VNode | null = target
 
-  while (
-    node &&
-    node !== root &&
-    flags.get(node.flags, FLAG.HAS_MEMO_ANCESTOR)
-  ) {
+  while (node && node !== root && node.flags & FLAG_HAS_MEMO_ANCESTOR) {
     const parent = node.parent
     if (
       parent?.isMemoized &&

package/dist/flags.d.ts

@@ -1,6 +0,0 @@
-export declare const flags: {
-    readonly set: (field: number, flag: number) => number;
-    readonly get: (field: number, n: number) => boolean;
-    readonly unsetRange: (field: number, start: number, end: number) => number;
-};
-//# sourceMappingURL=flags.d.ts.map

package/dist/flags.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"flags.d.ts","sourceRoot":"","sources":["../src/flags.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;0BAEL,MAAM,QAAQ,MAAM,KAAG,MAAM;0BAI7B,MAAM,KAAK,MAAM,KAAG,OAAO;iCAIpB,MAAM,SAAS,MAAM,OAAO,MAAM,KAAG,MAAM;CAIrD,CAAA"}

package/dist/flags.js

@@ -1,16 +0,0 @@
-export const flags = {
-    // Set the flag at position `n` (0-based index)
-    set(field, flag) {
-        return (field |= 1 << flag);
-    },
-    // Check if the flag at position `n` is set (true) or not (false)
-    get(field, n) {
-        return (field & (1 << n)) !== 0;
-    },
-    // Unset all flags between `start` and `end`
-    unsetRange(field, start, end) {
-        const mask = ((1 << (end - start + 1)) - 1) << start;
-        return field & ~mask;
-    },
-};
-//# sourceMappingURL=flags.js.map

package/dist/flags.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flags.js","sourceRoot":"","sources":["../src/flags.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,+CAA+C;IAC/C,GAAG,CAAC,KAAa,EAAE,IAAY;QAC7B,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,CAAA;IAC7B,CAAC;IACD,iEAAiE;IACjE,GAAG,CAAC,KAAa,EAAE,CAAS;QAC1B,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC;IACD,4CAA4C;IAC5C,UAAU,CAAC,KAAa,EAAE,KAAa,EAAE,GAAW;QAClD,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAA;QACpD,OAAO,KAAK,GAAG,CAAC,IAAI,CAAA;IACtB,CAAC;CACO,CAAA"}

package/src/flags.ts

@@ -1,15 +0,0 @@
-export const flags = {
-  // Set the flag at position `n` (0-based index)
-  set(field: number, flag: number): number {
-    return (field |= 1 << flag)
-  },
-  // Check if the flag at position `n` is set (true) or not (false)
-  get(field: number, n: number): boolean {
-    return (field & (1 << n)) !== 0
-  },
-  // Unset all flags between `start` and `end`
-  unsetRange(field: number, start: number, end: number): number {
-    const mask = ((1 << (end - start + 1)) - 1) << start
-    return field & ~mask
-  },
-} as const