kiru 0.54.3 → 1.0.1

package/src/dom.ts

@@ -3,9 +3,11 @@ import {
   commitSnapshot,
   propFilters,
   propToHtmlAttr,
-  getVNodeAppContext,
+  getVNodeApp,
   setRef,
   isValidTextChild,
+  registerVNodeCleanup,
+  call,
 } from "./utils/index.js"
 import {
   booleanAttributes,
@@ -13,7 +15,6 @@ import {
   FLAG_UPDATE,
   FLAG_STATIC_DOM,
   svgTags,
-  FLAG_NOOP,
   EVENT_PREFIX_REGEX,
 } from "./constants.js"
 import { Signal } from "./signals/base.js"
@@ -30,7 +31,7 @@ import type {
   SomeDom,
   SomeElement,
 } from "./types.utils"
-import type { AppContext } from "./appContext.js"
+import type { AppHandle } from "./appHandle.js"
 
 export {
   commitWork,
@@ -49,6 +50,8 @@ type HostNode = {
 
 let persistingFocus = false
 let didBlurActiveElement = false
+const postHookCleanups: (() => void)[] = []
+
 const placementBlurHandler = (event: Event) => {
   event.preventDefault()
   event.stopPropagation()
@@ -73,6 +76,10 @@ function onAfterFlushDomChanges() {
     didBlurActiveElement = false
   }
   persistingFocus = false
+  queueMicrotask(() => {
+    postHookCleanups.forEach(call)
+    postHookCleanups.length = 0
+  })
 }
 
 function createDom(vNode: DomVNode): SomeDom {
@@ -243,15 +250,15 @@ function setSignalProp(
   prevValue: unknown
 ) {
   const [modifier, attr] = key.split(":")
-  const cleanups = (vNode.cleanups ??= {})
   if (modifier !== "bind") {
-    cleanups[key] = signal.subscribe((value, prev) => {
+    const unsub = signal.subscribe((value, prev) => {
       if (value === prev) return
       setProp(dom, key, value, prev)
       if (__DEV__) {
         emitSignalAttrUpdate(vNode)
       }
     })
+    registerVNodeCleanup(vNode, key, unsub)
   } else {
     const evtName = bindAttrToEventMap[attr]
     if (!evtName) {
@@ -262,7 +269,8 @@ function setSignalProp(
       }
       return
     }
-    cleanups[key] = bindElementProp(vNode, dom, attr, evtName, signal)
+    const cleanup = bindElementProp(vNode, dom, attr, evtName, signal)
+    registerVNodeCleanup(vNode, key, cleanup)
   }
 
   const value = signal.peek()
@@ -355,23 +363,21 @@ function createInputValueReader(
 }
 
 function emitSignalAttrUpdate(vNode: VNode) {
-  window.__kiru.profilingContext?.emit(
-    "signalAttrUpdate",
-    getVNodeAppContext(vNode)!
-  )
+  window.__kiru.profilingContext?.emit("signalAttrUpdate", getVNodeApp(vNode)!)
 }
 
 function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
-  ;(vNode.cleanups ??= {}).nodeValue = signal.subscribe((value, prev) => {
+  const cleanup = signal.subscribe((value, prev) => {
     if (value === prev) return
     textNode.nodeValue = value
     if (__DEV__) {
       window.__kiru.profilingContext?.emit(
         "signalTextUpdate",
-        getVNodeAppContext(vNode)!
+        getVNodeApp(vNode)!
       )
     }
   })
+  registerVNodeCleanup(vNode, "nodeValue", cleanup)
 }
 
 /**
@@ -684,15 +690,6 @@ function commitWork_impl(
 ) {
   let child: VNode | null = vNode.child
   while (child) {
-    if (child.flags & FLAG_NOOP) {
-      if (child.flags & FLAG_PLACEMENT) {
-        placeAndCommitNoopChildren(child, currentHostNode)
-      }
-      commitSnapshot(child)
-      child = child.sibling
-      continue
-    }
-
     if (child.dom) {
       commitWork_impl(child, { node: child as ElementVNode }, false)
       if (!(child.flags & FLAG_STATIC_DOM)) {
@@ -733,25 +730,31 @@ function commitDeletion(vNode: VNode) {
   if (vNode === vNode.parent?.child) {
     vNode.parent.child = vNode.sibling
   }
-  let ctx: AppContext
+  let app: AppHandle
   if (__DEV__) {
-    ctx = getVNodeAppContext(vNode)!
+    app = getVNodeApp(vNode)!
   }
   traverseApply(vNode, (node) => {
     const {
-      hooks,
       subs,
       cleanups,
       dom,
       props: { ref },
+      hooks,
     } = node
 
     subs?.forEach((unsub) => unsub())
     if (cleanups) Object.values(cleanups).forEach((c) => c())
-    while (hooks?.length) hooks.pop()!.cleanup?.()
+    if (hooks) {
+      const { preCleanups, postCleanups } = hooks
+
+      preCleanups.forEach(call)
+      postHookCleanups.push(...postCleanups)
+      preCleanups.length = postCleanups.length = 0
+    }
 
     if (__DEV__) {
-      window.__kiru.profilingContext?.emit("removeNode", ctx)
+      window.__kiru.profilingContext?.emit("removeNode", app)
       if (dom instanceof Element) {
         delete dom.__kiruNode
       }
@@ -770,40 +773,3 @@ function commitDeletion(vNode: VNode) {
 
   vNode.parent = null
 }
-
-function placeAndCommitNoopChildren(
-  parent: VNode,
-  currentHostNode: HostNode
-): void {
-  if (!parent.child) return
-
-  const domChildren: SomeDom[] = []
-  collectDomNodes(parent.child, domChildren)
-  if (domChildren.length === 0) return
-
-  const { node, lastChild } = currentHostNode
-  if (lastChild) {
-    lastChild.after(...domChildren)
-  } else {
-    const nextSiblingDom = getNextSiblingDom(parent, node)
-    const parentDom = node.dom
-    if (nextSiblingDom) {
-      nextSiblingDom.before(...domChildren)
-    } else {
-      parentDom.append(...domChildren)
-    }
-  }
-  currentHostNode.lastChild = domChildren[domChildren.length - 1]
-}
-
-function collectDomNodes(firstChild: VNode, children: SomeDom[]): void {
-  let child: VNode | null = firstChild
-  while (child) {
-    if (child.dom) {
-      children.push(child.dom)
-    } else if (child.child) {
-      collectDomNodes(child.child, children)
-    }
-    child = child.sibling
-  }
-}

package/src/globalContext.ts

@@ -3,57 +3,11 @@ import { createHMRContext } from "./hmr.js"
 import { createProfilingContext } from "./profiling.js"
 import { fileRouterInstance } from "./router/globals.js"
 import type { FileRouterController } from "./router/fileRouterController"
-import type { AppContext } from "./appContext"
-import type { Store } from "./store"
-import type { SWRCache } from "./swr"
+import type { AppHandle } from "./appHandle"
 import type { requestUpdate } from "./index.js"
 
 export { createKiruGlobalContext, type GlobalKiruEvent, type KiruGlobalContext }
 
-interface ReactiveMap<V> {
-  add(key: string, value: V): void
-  delete(key: string): void
-  subscribe(cb: (value: Record<string, V>) => void): () => void
-  readonly size: number
-}
-
-function createReactiveMap<V>(): ReactiveMap<V> {
-  const map = new Map<string, V>()
-  const listeners = new Set<(value: Record<string, V>) => void>()
-
-  function add(key: string, value: V): void {
-    if (map.has(key)) return
-    map.set(key, value)
-    notify()
-  }
-
-  function deleteKey(key: string): void {
-    if (!map.has(key)) return
-    map.delete(key)
-    notify()
-  }
-
-  function notify(): void {
-    const val = Object.fromEntries(map)
-    listeners.forEach((cb) => cb(val))
-  }
-
-  function subscribe(cb: (value: Record<string, V>) => void): () => void {
-    listeners.add(cb)
-    cb(Object.fromEntries(map))
-    return () => listeners.delete(cb)
-  }
-
-  return {
-    add,
-    delete: deleteKey,
-    subscribe,
-    get size() {
-      return map.size
-    },
-  }
-}
-
 type Evt =
   | {
       name: "mount"
@@ -78,48 +32,53 @@ interface SchedulerInterface {
   requestUpdate: (vNode: Kiru.VNode) => void
 }
 
+export type DebuggerEntry = {
+  label: string
+  signal: Kiru.Signal<unknown>
+}
+
 interface KiruGlobalContext {
-  readonly apps: AppContext[]
-  emit<T extends Evt>(event: T["name"], ctx: AppContext, data?: T["data"]): void
+  readonly apps: AppHandle[]
+  emit<T extends Evt>(event: T["name"], app: AppHandle, data?: T["data"]): void
   on<T extends Evt>(
     event: T["name"],
-    callback: (ctx: AppContext, data: T["data"]) => void
+    callback: (app: AppHandle, data: T["data"]) => void
   ): void
   off<T extends Evt>(
     event: T["name"],
-    callback: (ctx: AppContext, data?: T["data"]) => void
+    callback: (app: AppHandle, data?: T["data"]) => void
   ): void
-  stores?: ReactiveMap<Store<any, any>>
+  devtools?: {
+    track: (signal: Kiru.Signal<unknown>, label?: string) => void
+    untrack: (signal: Kiru.Signal<unknown>) => void
+    subscribe: (callback: (entries: Set<DebuggerEntry>) => void) => () => void
+  }
   HMRContext?: ReturnType<typeof createHMRContext>
   profilingContext?: ReturnType<typeof createProfilingContext>
-  SWRGlobalCache?: SWRCache
   fileRouterInstance?: {
     current: FileRouterController | null
   }
-  getSchedulerInterface?: (app: AppContext) => SchedulerInterface | null
+  getSchedulerInterface?: (app: AppHandle) => SchedulerInterface | null
 }
 
 function createKiruGlobalContext(): KiruGlobalContext {
-  const contexts = new Set<AppContext>()
-  const contextToSchedulerInterface = new WeakMap<
-    AppContext,
-    SchedulerInterface
-  >()
+  const apps = new Set<AppHandle>()
+  const appToSchedulerInterface = new WeakMap<AppHandle, SchedulerInterface>()
   const listeners = new Map<
     GlobalKiruEvent,
-    Set<(ctx: AppContext, data?: Evt["data"]) => void>
+    Set<(app: AppHandle, data?: Evt["data"]) => void>
   >()
   function emit<T extends Evt>(
     event: T["name"],
-    ctx: AppContext,
+    app: AppHandle,
     data?: T["data"]
   ): void {
-    listeners.get(event)?.forEach((cb) => cb(ctx, data))
+    listeners.get(event)?.forEach((cb) => cb(app, data))
   }
 
   function on<T extends Evt>(
     event: T["name"],
-    callback: (ctx: AppContext, data: T["data"]) => void
+    callback: (app: AppHandle, data: T["data"]) => void
   ): void {
     if (!listeners.has(event)) {
       listeners.set(event, new Set())
@@ -129,14 +88,14 @@ function createKiruGlobalContext(): KiruGlobalContext {
 
   function off<T extends Evt>(
     event: T["name"],
-    callback: (ctx: AppContext, data?: T["data"]) => void
+    callback: (ctx: AppHandle, data?: T["data"]) => void
   ): void {
     listeners.get(event)?.delete(callback)
   }
 
   const globalContext: KiruGlobalContext = {
     get apps() {
-      return Array.from(contexts)
+      return Array.from(apps)
     },
     emit,
     on,
@@ -144,24 +103,48 @@ function createKiruGlobalContext(): KiruGlobalContext {
   }
 
   // Initialize event listeners
-  on("mount", (ctx, requestUpdate) => {
-    contexts.add(ctx)
+  on("mount", (app, requestUpdate) => {
+    apps.add(app)
     if (requestUpdate && typeof requestUpdate === "function") {
-      contextToSchedulerInterface.set(ctx, { requestUpdate })
+      appToSchedulerInterface.set(app, { requestUpdate })
     }
   })
-  on("unmount", (ctx) => {
-    contexts.delete(ctx)
-    contextToSchedulerInterface.delete(ctx)
+  on("unmount", (app) => {
+    apps.delete(app)
+    appToSchedulerInterface.delete(app)
   })
-
   if (__DEV__) {
     globalContext.HMRContext = createHMRContext()
     globalContext.profilingContext = createProfilingContext()
-    globalContext.stores = createReactiveMap()
     globalContext.fileRouterInstance = fileRouterInstance
     globalContext.getSchedulerInterface = (app) => {
-      return contextToSchedulerInterface.get(app) ?? null
+      return appToSchedulerInterface.get(app) ?? null
+    }
+
+    const debuggerEntries = new Set<DebuggerEntry>()
+    const subscribers = new Set<(debuggerEntries: Set<DebuggerEntry>) => void>()
+
+    globalContext.devtools = {
+      track: (signal, label) => {
+        debuggerEntries.add({
+          label: label ?? signal.displayName ?? "Unnamed Signal",
+          signal,
+        })
+        subscribers.forEach((cb) => cb(debuggerEntries))
+      },
+      untrack: (signal) => {
+        debuggerEntries.forEach((entry) => {
+          if (entry.signal === signal) {
+            debuggerEntries.delete(entry)
+          }
+        })
+        subscribers.forEach((cb) => cb(debuggerEntries))
+      },
+      subscribe: (cb) => {
+        subscribers.add(cb)
+        cb(debuggerEntries)
+        return () => subscribers.delete(cb)
+      },
     }
   }
 

package/src/globals.ts

@@ -1,13 +1,9 @@
-export { node, hookIndex, renderMode, hydrationMode }
+export { node, renderMode, hydrationMode }
 
 const node = {
   current: null as Kiru.VNode | null,
 }
 
-const hookIndex = {
-  current: 0,
-}
-
 const renderMode = {
   current: ("window" in globalThis ? "dom" : "string") as Kiru.RenderMode,
 }

package/src/{recursiveRender.ts → headlessRender.ts}

@@ -1,4 +1,4 @@
-import { node, hookIndex } from "./globals.js"
+import { node } from "./globals.js"
 import {
   isVNode,
   encodeHtmlEntities,
@@ -8,7 +8,7 @@ import {
   isPrimitiveChild,
   isValidTextChild,
 } from "./utils/index.js"
-import { isStreamDataThrowValue } from "./utils/promise.js"
+import { isStreamDataThrowValue } from "./statefulPromise.js"
 import { Signal } from "./signals/base.js"
 import { $ERROR_BOUNDARY, voidElements, $STREAM_DATA } from "./constants.js"
 import { __DEV__ } from "./env.js"
@@ -16,12 +16,10 @@ import type { ErrorBoundaryNode } from "./types.utils"
 
 export interface HeadlessRenderContext {
   write(chunk: string): void
-  onStreamData?: (data: Kiru.StatefulPromise<unknown>[]) => void
+  onStreamData?: (data: Kiru.StatefulPromiseBase<unknown>[]) => void
 }
 
-export { render as headlessRender }
-
-function render(
+export function headlessRender(
   ctx: HeadlessRenderContext,
   el: unknown,
   parent: Kiru.VNode | null,
@@ -37,7 +35,7 @@ function render(
     return ctx.write(el.toString())
   }
   if (el instanceof Array) {
-    return el.forEach((c, i) => render(ctx, c, parent, i))
+    return el.forEach((c, i) => headlessRender(ctx, c, parent, i))
   }
   if (Signal.isSignal(el)) {
     const value = el.peek()
@@ -68,7 +66,7 @@ function render(
   if (isExoticType(type)) {
     if (type === $ERROR_BOUNDARY) {
       let boundaryBuffer = ""
-      const streamPromises = new Set<Kiru.StatefulPromise<unknown>>()
+      const streamPromises = new Set<Kiru.StatefulPromiseBase<unknown>>()
       const boundaryCtx: HeadlessRenderContext = {
         write(chunk) {
           boundaryBuffer += chunk
@@ -78,7 +76,7 @@ function render(
         },
       }
       try {
-        render(boundaryCtx, children, el, idx)
+        headlessRender(boundaryCtx, children, el, idx)
         // flush successful render
         ctx.write(boundaryBuffer)
         ctx.onStreamData?.([...streamPromises])
@@ -91,27 +89,29 @@ function render(
         onError?.(e)
         const fallbackContent =
           typeof fallback === "function" ? fallback(e) : fallback
-        render(ctx, fallbackContent, el, 0)
+        headlessRender(ctx, fallbackContent, el, 0)
       }
       return
     }
 
-    render(ctx, children, el, idx)
+    headlessRender(ctx, children, el, idx)
     return
   }
 
-  if (typeof type !== "string") {
+  if (typeof type === "function") {
     try {
-      hookIndex.current = 0
       node.current = el
-      const res = type(props)
-      render(ctx, res, el, idx)
+      let children = type(props)
+      if (typeof children === "function") {
+        children = children(props)
+      }
+      headlessRender(ctx, children, el, idx)
       return
     } catch (error) {
       if (isStreamDataThrowValue(error)) {
         const { fallback, data } = error[$STREAM_DATA]
         ctx.onStreamData?.(data)
-        return render(ctx, fallback, el, 0)
+        return headlessRender(ctx, fallback, el, 0)
       }
       throw error
     } finally {
@@ -134,9 +134,9 @@ function render(
       )
     )
   } else if (Array.isArray(children)) {
-    children.forEach((c, i) => render(ctx, c, el, i))
+    children.forEach((c, i) => headlessRender(ctx, c, el, i))
   } else {
-    render(ctx, children, el, 0)
+    headlessRender(ctx, children, el, 0)
   }
   ctx.write(`</${type}>`)
 }

package/src/hmr.ts

@@ -2,9 +2,7 @@ import { $HMR_ACCEPT, $DEV_FILE_LINK } from "./constants.js"
 import { traverseApply } from "./utils/index.js"
 import { flushSync, requestUpdate } from "./scheduler.js"
 import { Signal } from "./signals/base.js"
-import type { WatchEffect } from "./signals/watch.js"
-import type { Store } from "./store.js"
-import type { AppContext } from "./appContext.js"
+import type { Effect } from "./signals/effect.js"
 
 export type HMRAccept<T = {}> = {
   provide: () => T
@@ -15,7 +13,7 @@ export type HMRAccept<T = {}> = {
 export type GenericHMRAcceptor<T = {}> = {
   [$HMR_ACCEPT]: HMRAccept<T>
 }
-type HotVar = Kiru.FC | Store<any, any> | Signal<any> | Kiru.Context<any>
+type HotVar = Kiru.FC | Signal<any> | Kiru.ContextBase<any>
 
 type HotVarDesc = {
   type: string
@@ -43,7 +41,7 @@ export function isGenericHmrAcceptor(
 
 type ModuleMemory = {
   hotVars: Map<string, HotVarDesc>
-  unnamedWatchers: Array<WatchEffect>
+  unnamedEffects: Array<Effect>
 }
 
 type HotVarRegistrationEntry = {
@@ -59,7 +57,7 @@ export function createHMRContext() {
   let currentModuleMemory: ModuleMemory | null = null
   let isModuleReplacementExecution = false
   const isReplacement = () => isModuleReplacementExecution
-  let isWaitingForNextWatchCall = false
+  let isWaitingForNextEffect = false
 
   const onHmrCallbacks: Array<() => void> = []
   const onHmr = (callback: () => void) => {
@@ -72,14 +70,15 @@ export function createHMRContext() {
     if (!mod) {
       mod = {
         hotVars: new Map(),
-        unnamedWatchers: [],
+        unnamedEffects: [],
       }
       moduleMap.set(filePath, mod)
     } else {
       while (onHmrCallbacks.length) onHmrCallbacks.shift()!()
-      for (const prevWatcher of mod.unnamedWatchers.splice(0)) {
-        prevWatcher.stop()
+      for (const effect of mod.unnamedEffects) {
+        effect.stop()
       }
+      mod.unnamedEffects.length = 0
     }
 
     currentModuleMemory = mod!
@@ -92,26 +91,20 @@ export function createHMRContext() {
     if (currentModuleMemory === null)
       throw new Error("[kiru]: HMR could not register: No active module")
 
-    let dirtiedApps: Set<AppContext> = new Set()
+    let dirtyNodes = new Set<Kiru.VNode>()
     for (const [name, newEntry] of Object.entries(hotVarRegistrationEntries)) {
       const oldEntry = currentModuleMemory.hotVars.get(name)
 
       // @ts-ignore - this is how we tell devtools what file the hotvar is from
       newEntry.value[$DEV_FILE_LINK] = newEntry.link
 
-      if (typeof newEntry.value === "function") {
-        if (oldEntry?.value) {
-          /**
-           * this is how, when the previous function has been stored somewhere else (eg. in a Map, or by Vike),
-           * we can trace it to its latest version
-           */
-          // @ts-ignore
-          oldEntry.value.__next = newEntry.value
-        }
-      }
-
-      if (newEntry.type === "createStore") {
-        window.__kiru.stores!.add(name, newEntry.value as Store<any, any>)
+      if (oldEntry?.value) {
+        /**
+         * this is how, when the previous value has been stored somewhere else (eg. in a Map, or by Vike),
+         * we can trace it to its current version by using latest(value)
+         */
+        // @ts-ignore
+        oldEntry.value.__next = newEntry.value
       }
 
       currentModuleMemory.hotVars.set(name, newEntry)
@@ -127,20 +120,20 @@ export function createHMRContext() {
         continue
       }
       if (oldEntry.type === "component" && newEntry.type === "component") {
-        window.__kiru.apps.forEach((ctx) => {
-          traverseApply(ctx.rootNode, (vNode) => {
+        window.__kiru.apps.forEach((app) => {
+          traverseApply(app.rootNode, (vNode) => {
             if (vNode.type === oldEntry.value) {
               vNode.type = newEntry.value as any
-              dirtiedApps.add(ctx)
+              dirtyNodes.add(vNode)
             }
           })
         })
       }
     }
 
-    if (dirtiedApps.size) {
+    if (dirtyNodes.size) {
       _isHmrUpdate = true
-      dirtiedApps.forEach((ctx) => requestUpdate(ctx.rootNode))
+      dirtyNodes.forEach((n) => requestUpdate(n))
       flushSync()
       _isHmrUpdate = false
     }
@@ -150,16 +143,14 @@ export function createHMRContext() {
     currentModuleFilePath = null
   }
 
-  const signals = {
-    registerNextWatch() {
-      isWaitingForNextWatchCall = true
-    },
-    isWaitingForNextWatchCall() {
-      return isWaitingForNextWatchCall
+  const moduleEffects = {
+    registerNext() {
+      isWaitingForNextEffect = true
     },
-    pushWatch(watch: WatchEffect) {
-      currentModuleMemory!.unnamedWatchers.push(watch)
-      isWaitingForNextWatchCall = false
+    push(effect: Effect<any>) {
+      if (!isWaitingForNextEffect) return
+      currentModuleMemory!.unnamedEffects.push(effect)
+      isWaitingForNextEffect = false
     },
   }
 
@@ -167,7 +158,7 @@ export function createHMRContext() {
     register,
     prepare,
     isReplacement,
-    signals,
+    moduleEffects,
     onHmr,
     getCurrentFilePath() {
       return currentModuleFilePath

package/src/hooks/index.ts

@@ -1,15 +1,4 @@
-export * from "./useAsync.js"
-export * from "./useCallback.js"
-export * from "./useContext.js"
-export * from "./useEffect.js"
-export * from "./useEffectEvent.js"
-export * from "./useId.js"
-export * from "./useLayoutEffect.js"
-export * from "./useMemo.js"
-export * from "./usePromise.js"
-export * from "./useReducer.js"
-export * from "./useRef.js"
-export * from "./useState.js"
-export * from "./useSyncExternalStore.js"
-export * from "./useViewTransition.js"
+export * from "./onCleanup.js"
+export * from "./onMount.js"
+export * from "./onBeforeMount.js"
 export * from "./utils.js"