@fictjs/runtime 0.9.0 → 0.11.0

package/src/list-helpers.ts

@@ -203,9 +203,12 @@ export function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
 function createKeyedListContainer<T = unknown>(
   startOverride?: Comment,
   endOverride?: Comment,
+  defaultOwnerDocument?: Document,
 ): KeyedListContainer<T> {
-  const startMarker = startOverride ?? document.createComment('fict:list:start')
-  const endMarker = endOverride ?? document.createComment('fict:list:end')
+  const markerOwnerDocument =
+    startOverride?.ownerDocument ?? endOverride?.ownerDocument ?? defaultOwnerDocument ?? document
+  const startMarker = startOverride ?? markerOwnerDocument.createComment('fict:list:start')
+  const endMarker = endOverride ?? markerOwnerDocument.createComment('fict:list:end')
 
   const dispose = () => {
     // Clean up all blocks
@@ -228,7 +231,9 @@ function createKeyedListContainer<T = unknown>(
       container.orderedIndexByKey.clear()
       return
     }
-    const range = document.createRange()
+    const rangeOwnerDocument =
+      startMarker.ownerDocument ?? endMarker.ownerDocument ?? markerOwnerDocument
+    const range = rangeOwnerDocument.createRange()
     range.setStartBefore(startMarker)
     range.setEndAfter(endMarker)
     range.deleteContents()
@@ -284,12 +289,13 @@ function createKeyedBlock<T>(
 
   const indexSig = needsIndex
     ? createSignal<number>(index)
-    : (((next?: number) => {
+    : (function indexSignal(next?: number) {
         if (arguments.length === 0) return index
         index = next as number
         return index
-      }) as Signal<number>)
+      } as Signal<number>)
   const root = createRootContext(hostRoot)
+  const nodeOwnerDocument = root.ownerDocument ?? hostRoot?.ownerDocument ?? document
   const prevRoot = pushRoot(root)
   // maintaining proper cleanup chain. The scope will be disposed when
   // the root is destroyed, ensuring nested effects are properly cleaned up.
@@ -310,10 +316,10 @@ function createKeyedBlock<T>(
         rendered instanceof Node ||
         (Array.isArray(rendered) && rendered.every(n => n instanceof Node))
       ) {
-        nodes = toNodeArray(rendered)
+        nodes = toNodeArray(rendered, nodeOwnerDocument)
       } else {
         const element = createElement(rendered as unknown as FictNode)
-        nodes = toNodeArray(element)
+        nodes = toNodeArray(element, nodeOwnerDocument)
       }
     })
 
@@ -500,10 +506,18 @@ function createFineGrainedKeyedList<T>(
   startOverride?: Comment,
   endOverride?: Comment,
 ): KeyedListBinding {
-  const container = createKeyedListContainer<T>(startOverride, endOverride)
   const hostRoot = getCurrentRoot()
+  const container = createKeyedListContainer<T>(
+    startOverride,
+    endOverride,
+    hostRoot?.ownerDocument ?? document,
+  )
+  const markerOwnerDocument =
+    container.startMarker.ownerDocument ?? hostRoot?.ownerDocument ?? document
   const useProvided = !!(startOverride && endOverride)
-  const fragment = useProvided ? container.startMarker : document.createDocumentFragment()
+  const fragment = useProvided
+    ? container.startMarker
+    : markerOwnerDocument.createDocumentFragment()
   if (!useProvided) {
     ;(fragment as DocumentFragment).append(container.startMarker, container.endMarker)
   }
@@ -580,7 +594,7 @@ function createFineGrainedKeyedList<T>(
         withHydrationRange(
           container.startMarker.nextSibling,
           container.endMarker,
-          parent.ownerDocument ?? document,
+          parent.ownerDocument ?? markerOwnerDocument,
           () => {
             for (let index = 0; index < newItems.length; index++) {
               const item = newItems[index]!
@@ -632,7 +646,7 @@ function createFineGrainedKeyedList<T>(
             destroyRoot(block.root)
           }
           // Use Range.deleteContents for efficient bulk DOM removal
-          const range = document.createRange()
+          const range = (parent.ownerDocument ?? markerOwnerDocument).createRange()
           range.setStartAfter(container.startMarker)
           range.setEndBefore(container.endMarker)
           range.deleteContents()
@@ -934,7 +948,7 @@ function createFineGrainedKeyedList<T>(
 
   const waitForConnection = () => {
     if (connectObserver || typeof MutationObserver === 'undefined') return
-    const root = container.startMarker.getRootNode?.() ?? document
+    const root = container.startMarker.getRootNode?.() ?? markerOwnerDocument
     const shadowRoot =
       root && root.nodeType === 11 && isShadowRoot(root as Node) ? (root as ShadowRoot) : null
     connectObserver = new MutationObserver(() => {
@@ -946,7 +960,10 @@ function createFineGrainedKeyedList<T>(
         }
       }
     })
-    connectObserver.observe(document, { childList: true, subtree: true })
+    connectObserver.observe(markerOwnerDocument, { childList: true, subtree: true })
+    if (root && root.nodeType === 11) {
+      connectObserver.observe(root as Node, { childList: true, subtree: true })
+    }
     if (shadowRoot) {
       connectObserver.observe(shadowRoot, { childList: true, subtree: true })
     }

package/src/loader.ts

@@ -447,19 +447,20 @@ function setupHoverPrefetch(doc: Document, delay: number): () => void {
 }
 
 function prefetchElementQrls(el: Element): void {
+  const ownerDocument = el.ownerDocument ?? (typeof document !== 'undefined' ? document : undefined)
   // Prefetch event handler QRLs
   const eventAttrs = ['on:click', 'on:input', 'on:change', 'on:submit', 'on:keydown', 'on:keyup']
   for (const attr of eventAttrs) {
     const qrl = el.getAttribute(attr)
     if (qrl) {
-      prefetchQrl(qrl)
+      prefetchQrl(qrl, ownerDocument)
     }
   }
 
   // Prefetch resume handler QRL
   const resumeQrl = el.getAttribute('data-fict-h')
   if (resumeQrl) {
-    prefetchQrl(resumeQrl)
+    prefetchQrl(resumeQrl, ownerDocument)
   }
 
   // Also check children for nested QRLs
@@ -470,17 +471,17 @@ function prefetchElementQrls(el: Element): void {
     for (const attr of eventAttrs) {
       const qrl = child.getAttribute(attr)
       if (qrl) {
-        prefetchQrl(qrl)
+        prefetchQrl(qrl, ownerDocument)
       }
     }
     const childResumeQrl = child.getAttribute('data-fict-h')
     if (childResumeQrl) {
-      prefetchQrl(childResumeQrl)
+      prefetchQrl(childResumeQrl, ownerDocument)
     }
   })
 }
 
-function prefetchQrl(qrl: string): void {
+function prefetchQrl(qrl: string, ownerDocument?: Document): void {
   const { url } = parseQrl(qrl)
   if (!url || prefetchedUrls.has(url)) return
 
@@ -490,12 +491,13 @@ function prefetchQrl(qrl: string): void {
   const resolvedUrl = resolveModuleUrl(url)
 
   // Use modulepreload link for best browser support
-  if (typeof document !== 'undefined') {
-    const link = document.createElement('link')
+  const doc = ownerDocument ?? (typeof document !== 'undefined' ? document : undefined)
+  if (doc) {
+    const link = doc.createElement('link')
     link.rel = 'modulepreload'
     link.href = resolvedUrl
     link.crossOrigin = 'anonymous'
-    document.head.appendChild(link)
+    doc.head?.appendChild(link)
   }
 }
 
@@ -507,9 +509,15 @@ function prefetchQrl(qrl: string): void {
 function handleResumableEvent(event: Event): void {
   const promise = handleResumableEventAsync(event)
   pendingHandlers.add(promise)
-  promise.finally(() => {
-    pendingHandlers.delete(promise)
-  })
+  void promise
+    .catch(error => {
+      if (typeof console !== 'undefined' && typeof console.error === 'function') {
+        console.error('[fict/loader] Failed to handle resumable event.', error)
+      }
+    })
+    .finally(() => {
+      pendingHandlers.delete(promise)
+    })
 }
 
 async function handleResumableEventAsync(event: Event): Promise<void> {
@@ -535,7 +543,7 @@ async function handleResumableEventAsync(event: Event): Promise<void> {
         expectedVersion: FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
         scopeId,
       })
-      return
+      continue
     }
     __fictEnsureScope(scopeId, host, snapshot)
 

package/src/node-ops.ts

@@ -7,7 +7,10 @@
  * Convert a value to a flat array of DOM nodes.
  * Defensively handles proxies and non-DOM values.
  */
-export function toNodeArray(node: Node | Node[] | unknown): Node[] {
+export function toNodeArray(
+  node: Node | Node[] | unknown,
+  ownerDocument: Document = document,
+): Node[] {
   try {
     if (Array.isArray(node)) {
       // Preserve original array reference when it's already a flat Node array
@@ -29,7 +32,7 @@ export function toNodeArray(node: Node | Node[] | unknown): Node[] {
       }
       const result: Node[] = []
       for (const item of node) {
-        result.push(...toNodeArray(item))
+        result.push(...toNodeArray(item, ownerDocument))
       }
       return result
     }
@@ -62,7 +65,7 @@ export function toNodeArray(node: Node | Node[] | unknown): Node[] {
   try {
     // Duck-type BindingHandle-like values
     if (typeof node === 'object' && node !== null && 'marker' in node) {
-      return toNodeArray((node as { marker: unknown }).marker)
+      return toNodeArray((node as { marker: unknown }).marker, ownerDocument)
     }
   } catch {
     // Ignore property check error
@@ -70,9 +73,9 @@ export function toNodeArray(node: Node | Node[] | unknown): Node[] {
 
   // Primitive fallback
   try {
-    return [document.createTextNode(String(node))]
+    return [ownerDocument.createTextNode(String(node))]
   } catch {
-    return [document.createTextNode('')]
+    return [ownerDocument.createTextNode('')]
   }
 }
 

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()
+  }
 }
 
 // ============================================================================