@fictjs/runtime 0.9.0 → 0.10.0

package/src/signal.ts

@@ -93,6 +93,18 @@ export interface MemoOptions<T> {
   name?: string
   /** Source location */
   devToolsSource?: string
+  /** Internal memo created by compiler runtime plumbing (hidden from DevTools) */
+  internal?: boolean
+}
+
+/**
+ * Options for creating an effect
+ */
+export interface EffectOptions {
+  /** Debug name */
+  name?: string
+  /** Source location */
+  devToolsSource?: string
 }
 
 /**
@@ -145,6 +157,8 @@ export interface ComputedNode<T = unknown> extends BaseNode {
   name?: string
   /** Source location */
   devToolsSource?: string
+  /** Hide this computed from DevTools (used by compiler-internal memos) */
+  devToolsInternal?: boolean
 }
 
 /**
@@ -161,6 +175,10 @@ export interface EffectNode extends BaseNode {
   runCleanup?: () => void
   /** Root context for error/suspense handling */
   root?: RootContext
+  /** Debug name */
+  name?: string
+  /** Source location */
+  devToolsSource?: string
   /** Devtools ID */
   __id?: number | undefined
 }
@@ -788,6 +806,16 @@ function purgeDeps(sub: ReactiveNode): void {
  * @param node - The node to dispose
  */
 function disposeNode(node: ReactiveNode): void {
+  if (isDev) {
+    if ('fn' in node && typeof node.fn === 'function') {
+      disposeEffectDevtools(node as EffectNode)
+    } else if ('getter' in node && typeof node.getter === 'function') {
+      disposeComputedDevtools(node as ComputedNode)
+    } else if ('currentValue' in node) {
+      disposeSignalDevtools(node as SignalNode)
+    }
+  }
+
   node.depsTail = undefined
   node.flags = 0
   purgeDeps(node)
@@ -858,6 +886,7 @@ function runEffect(e: EffectNode): void {
   const flags = e.flags
   const runCleanup = () => {
     if (!e.runCleanup) return
+    if (isDev) effectCleanupDevtools(e)
     inCleanup = true
     activeCleanupFlushId = currentFlushId
     try {
@@ -871,7 +900,6 @@ function runEffect(e: EffectNode): void {
     // Run cleanup before re-run; values are still the previous commit.
     runCleanup()
     ++cycle
-    if (isDev) effectRunDevtools(e)
     e.depsTail = undefined
     e.flags = WatchingRunning
     const prevSub = activeSub
@@ -913,7 +941,6 @@ function runEffect(e: EffectNode): void {
       // Cleanup reads should observe previous values for this flush.
       runCleanup()
       ++cycle
-      if (isDev) effectRunDevtools(e)
       e.depsTail = undefined
       e.flags = WatchingRunning
       const prevSub = activeSub
@@ -956,20 +983,31 @@ export function scheduleFlush(): void {
  */
 function flush(): void {
   beginFlushGuard()
+  let flushReported = false
+  const finishFlush = () => {
+    if (flushReported && isDev) {
+      flushEndDevtools()
+    }
+    endFlushGuard()
+  }
   if (batchDepth > 0) {
     // If batching is active, defer until the batch completes
     scheduleFlush()
-    endFlushGuard()
+    finishFlush()
     return
   }
   const hasWork = highPriorityQueue.length > 0 || lowPriorityQueue.length > 0
   if (!hasWork) {
     flushScheduled = false
-    endFlushGuard()
+    finishFlush()
     return
   }
   currentFlushId++
   flushScheduled = false
+  if (isDev) {
+    flushStartDevtools()
+    flushReported = true
+  }
 
   // 1. Process all high-priority effects first
   let highIndex = 0
@@ -993,7 +1031,7 @@ function flush(): void {
       highPriorityQueue.length = 0
       lowPriorityQueue.length = 0
       flushScheduled = false
-      endFlushGuard()
+      finishFlush()
       return
     }
     highIndex++
@@ -1011,7 +1049,7 @@ function flush(): void {
         lowPriorityQueue.length -= lowIndex
       }
       scheduleFlush()
-      endFlushGuard()
+      finishFlush()
       return
     }
     const e = lowPriorityQueue[lowIndex]!
@@ -1033,7 +1071,7 @@ function flush(): void {
       highPriorityQueue.length = 0
       lowPriorityQueue.length = 0
       flushScheduled = false
-      endFlushGuard()
+      finishFlush()
       return
     }
     lowIndex++
@@ -1041,7 +1079,7 @@ function flush(): void {
   }
   lowPriorityQueue.length = 0
 
-  endFlushGuard()
+  finishFlush()
 }
 // ============================================================================
 // Signal - Inline optimized version
@@ -1138,6 +1176,7 @@ export function computed<T>(
   if (options?.equals !== undefined) c.equals = options.equals
   if (options?.name !== undefined) c.name = options.name
   if (options?.devToolsSource !== undefined) c.devToolsSource = options.devToolsSource
+  if (options?.internal === true) c.devToolsInternal = true
   if (isDev) registerComputedDevtools(c)
   const bound = (computedOper as (this: ComputedNode<T>) => T).bind(
     c as any,
@@ -1201,9 +1240,10 @@ function computedOper<T>(this: ComputedNode<T>): T {
 /**
  * Create a reactive effect
  * @param fn - The effect function
+ * @param options - Effect options
  * @returns An effect disposer function
  */
-export function effect(fn: () => void): EffectDisposer {
+export function effect(fn: () => void, options?: EffectOptions): EffectDisposer {
   const e: EffectNode = {
     fn,
     subs: undefined,
@@ -1211,6 +1251,8 @@ export function effect(fn: () => void): EffectDisposer {
     deps: undefined,
     depsTail: undefined,
     flags: WatchingRunning,
+    ...(options?.name !== undefined ? { name: options.name } : {}),
+    ...(options?.devToolsSource !== undefined ? { devToolsSource: options.devToolsSource } : {}),
     __id: undefined as number | undefined,
   }
   const root = getCurrentRoot()
@@ -1219,6 +1261,7 @@ export function effect(fn: () => void): EffectDisposer {
   }
 
   if (isDev) registerEffectDevtools(e)
+  e.fn = wrapEffectFnWithDevtoolsTiming(e, fn)
 
   const prevSub = activeSub
   if (prevSub !== undefined) link(e, prevSub, 0)
@@ -1227,8 +1270,7 @@ export function effect(fn: () => void): EffectDisposer {
   let didThrow = false
   let thrown: unknown
   try {
-    if (isDev) effectRunDevtools(e)
-    fn()
+    e.fn()
   } catch (err) {
     didThrow = true
     thrown = err
@@ -1261,6 +1303,7 @@ export function effectWithCleanup(
   fn: () => void,
   cleanupRunner: () => void,
   root?: RootContext,
+  options?: EffectOptions,
 ): EffectDisposer {
   const e: EffectNode = {
     fn,
@@ -1270,6 +1313,8 @@ export function effectWithCleanup(
     depsTail: undefined,
     flags: WatchingRunning,
     runCleanup: cleanupRunner,
+    ...(options?.name !== undefined ? { name: options.name } : {}),
+    ...(options?.devToolsSource !== undefined ? { devToolsSource: options.devToolsSource } : {}),
     __id: undefined as number | undefined,
   }
   const resolvedRoot = root ?? getCurrentRoot()
@@ -1278,6 +1323,7 @@ export function effectWithCleanup(
   }
 
   if (isDev) registerEffectDevtools(e)
+  e.fn = wrapEffectFnWithDevtoolsTiming(e, fn)
 
   const prevSub = activeSub
   if (prevSub !== undefined) link(e, prevSub, 0)
@@ -1286,8 +1332,7 @@ export function effectWithCleanup(
   let didThrow = false
   let thrown: unknown
   try {
-    if (isDev) effectRunDevtools(e)
-    fn()
+    e.fn()
   } catch (err) {
     didThrow = true
     thrown = err
@@ -1385,13 +1430,24 @@ export function trigger(fn: () => void): void {
  * Start a batch of updates
  */
 export function startBatch(): void {
+  const enteringOuterBatch = batchDepth === 0
   ++batchDepth
+  if (enteringOuterBatch && isDev) {
+    batchStartDevtools()
+  }
 }
 /**
  * End a batch of updates and flush effects
  */
 export function endBatch(): void {
-  if (--batchDepth === 0) flush()
+  if (batchDepth === 0) return
+  --batchDepth
+  if (batchDepth === 0) {
+    if (isDev) {
+      batchEndDevtools()
+    }
+    flush()
+  }
 }
 /**
  * Execute a function in a batch
@@ -1399,7 +1455,11 @@ export function endBatch(): void {
  * @returns The return value of the function
  */
 export function batch<T>(fn: () => T): T {
+  const enteringOuterBatch = batchDepth === 0
   ++batchDepth
+  if (enteringOuterBatch && isDev) {
+    batchStartDevtools()
+  }
   let result!: T
   let error: unknown
   try {
@@ -1409,6 +1469,9 @@ export function batch<T>(fn: () => T): T {
   } finally {
     --batchDepth
     if (batchDepth === 0) {
+      if (isDev) {
+        batchEndDevtools()
+      }
       try {
         flush()
       } catch (flushErr) {
@@ -1463,6 +1526,7 @@ export function __resetReactiveState(): void {
   cycle = 0
   currentFlushId = 0
   activeCleanupFlushId = 0
+  clearDevtoolsSignalSetters()
 }
 /**
  * Execute a function without tracking dependencies
@@ -1588,12 +1652,25 @@ interface DevtoolsIdentifiable {
 
 let registerSignalDevtools: <T>(node: SignalNode<T>) => number | undefined = () => undefined
 let updateSignalDevtools: <T>(node: SignalNode<T>, value: unknown) => void = () => {}
+let disposeSignalDevtools: <T>(node: SignalNode<T>) => void = () => {}
 let registerComputedDevtools: <T>(node: ComputedNode<T>) => number | undefined = () => undefined
 let updateComputedDevtools: <T>(node: ComputedNode<T>, value: unknown) => void = () => {}
+let disposeComputedDevtools: <T>(node: ComputedNode<T>) => void = () => {}
 let registerEffectDevtools: (node: EffectNode) => number | undefined = () => undefined
-let effectRunDevtools: (node: EffectNode) => void = () => {}
+let effectRunDevtools: (node: EffectNode, duration?: number) => void = () => {}
+let wrapEffectFnWithDevtoolsTiming: (node: EffectNode, fn: () => void) => () => void = (
+  _node,
+  fn,
+) => fn
+let effectCleanupDevtools: (node: EffectNode) => void = () => {}
+let disposeEffectDevtools: (node: EffectNode) => void = () => {}
 let trackDependencyDevtools: (dep: ReactiveNode, sub: ReactiveNode) => void = () => {}
 let untrackDependencyDevtools: (dep: ReactiveNode, sub: ReactiveNode) => void = () => {}
+let batchStartDevtools: () => void = () => {}
+let batchEndDevtools: () => void = () => {}
+let flushStartDevtools: () => void = () => {}
+let flushEndDevtools: () => void = () => {}
+let clearDevtoolsSignalSetters: () => void = () => {}
 
 // Keep this as a direct conditional expression (instead of `if (isDev)`) so
 // bundlers can eliminate the entire devtools setup block when `__DEV__` is
@@ -1606,6 +1683,25 @@ if (
   // Unified ID counter for all reactive nodes (signal/computed/effect)
   // to prevent ID collisions when storing in single devtools maps
   let nextDevtoolsId = 0
+  const getSignalSetterMap = () => {
+    if (typeof globalThis === 'undefined') return undefined
+    const global = globalThis as typeof globalThis & {
+      __FICT_DEVTOOLS_SIGNALS__?: Map<number, (value: unknown) => void>
+    }
+    if (!global.__FICT_DEVTOOLS_SIGNALS__) {
+      global.__FICT_DEVTOOLS_SIGNALS__ = new Map<number, (value: unknown) => void>()
+    }
+    return global.__FICT_DEVTOOLS_SIGNALS__
+  }
+
+  const getExistingSignalSetterMap = () => {
+    if (typeof globalThis === 'undefined') return undefined
+    return (
+      globalThis as typeof globalThis & {
+        __FICT_DEVTOOLS_SIGNALS__?: Map<number, (value: unknown) => void>
+      }
+    ).__FICT_DEVTOOLS_SIGNALS__
+  }
 
   registerSignalDevtools = node => {
     const hook = getDevtoolsHook()
@@ -1618,6 +1714,9 @@ if (
     if (ownerId !== undefined) (options as any).ownerId = ownerId
     hook.registerSignal(id, node.currentValue, options)
     ;(node as SignalNode & DevtoolsIdentifiable).__id = id
+    getSignalSetterMap()?.set(id, value => {
+      signalOper.call(node as SignalNode<unknown>, value)
+    })
     return id
   }
 
@@ -1628,9 +1727,20 @@ if (
     if (id) hook.updateSignal(id, value)
   }
 
+  disposeSignalDevtools = node => {
+    const identifiable = node as SignalNode & DevtoolsIdentifiable
+    const id = identifiable.__id
+    if (!id) return
+    const hook = getDevtoolsHook()
+    hook?.disposeSignal?.(id)
+    getExistingSignalSetterMap()?.delete(id)
+    delete identifiable.__id
+  }
+
   registerComputedDevtools = node => {
     const hook = getDevtoolsHook()
     if (!hook) return undefined
+    if (node.devToolsInternal) return undefined
     const id = ++nextDevtoolsId
     const options: { name?: string; source?: string } = {}
     if (node.name !== undefined) options.name = node.name
@@ -1650,21 +1760,60 @@ if (
     if (id) hook.updateComputed(id, value)
   }
 
+  disposeComputedDevtools = node => {
+    const identifiable = node as ComputedNode & DevtoolsIdentifiable
+    const id = identifiable.__id
+    if (!id) return
+    const hook = getDevtoolsHook()
+    hook?.disposeComputed?.(id)
+    delete identifiable.__id
+  }
+
   registerEffectDevtools = node => {
     const hook = getDevtoolsHook()
     if (!hook) return undefined
     const id = ++nextDevtoolsId
+    const options: { ownerId?: number; source?: string } = {}
     const ownerId = __fictGetCurrentComponentId()
-    hook.registerEffect(id, ownerId !== undefined ? { ownerId } : undefined)
+    if (ownerId !== undefined) options.ownerId = ownerId
+    if (node.devToolsSource !== undefined) options.source = node.devToolsSource
+    hook.registerEffect(id, Object.keys(options).length > 0 ? options : undefined)
     ;(node as EffectNode & DevtoolsIdentifiable).__id = id
     return id
   }
 
-  effectRunDevtools = node => {
+  effectRunDevtools = (node, duration) => {
+    const hook = getDevtoolsHook()
+    if (!hook) return
+    const id = (node as EffectNode & DevtoolsIdentifiable).__id
+    if (id) hook.effectRun(id, duration)
+  }
+
+  wrapEffectFnWithDevtoolsTiming = (node, fn) => {
+    return () => {
+      const startedAt = performance.now()
+      try {
+        fn()
+      } finally {
+        effectRunDevtools(node, performance.now() - startedAt)
+      }
+    }
+  }
+
+  effectCleanupDevtools = node => {
     const hook = getDevtoolsHook()
     if (!hook) return
     const id = (node as EffectNode & DevtoolsIdentifiable).__id
-    if (id) hook.effectRun(id)
+    if (id) hook.effectCleanup?.(id)
+  }
+
+  disposeEffectDevtools = node => {
+    const identifiable = node as EffectNode & DevtoolsIdentifiable
+    const id = identifiable.__id
+    if (!id) return
+    const hook = getDevtoolsHook()
+    hook?.disposeEffect?.(id)
+    delete identifiable.__id
   }
 
   trackDependencyDevtools = (dep, sub) => {
@@ -1682,6 +1831,30 @@ if (
     const subId = (sub as ReactiveNode & DevtoolsIdentifiable).__id
     if (depId && subId) hook.untrackDependency(subId, depId)
   }
+
+  batchStartDevtools = () => {
+    const hook = getDevtoolsHook()
+    hook?.batchStart?.()
+  }
+
+  batchEndDevtools = () => {
+    const hook = getDevtoolsHook()
+    hook?.batchEnd?.()
+  }
+
+  flushStartDevtools = () => {
+    const hook = getDevtoolsHook()
+    hook?.flushStart?.()
+  }
+
+  flushEndDevtools = () => {
+    const hook = getDevtoolsHook()
+    hook?.flushEnd?.()
+  }
+
+  clearDevtoolsSignalSetters = () => {
+    getExistingSignalSetterMap()?.clear()
+  }
 }
 
 // ============================================================================

package/src/transition.ts

@@ -107,9 +107,15 @@ export function useTransition(): [() => boolean, (fn: () => void | PromiseLike<u
     }
 
     if (result && typeof (result as PromiseLike<unknown>).then === 'function') {
-      Promise.resolve(result).finally(() => {
-        endPending()
-      })
+      void Promise.resolve(result)
+        .catch(error => {
+          if (typeof console !== 'undefined' && typeof console.error === 'function') {
+            console.error('[fict/transition] Async transition failed.', error)
+          }
+        })
+        .finally(() => {
+          endPending()
+        })
       return
     }