@fictjs/runtime 0.8.0 → 0.10.0

package/src/loader.ts

@@ -1,5 +1,7 @@
 import { DelegatedEvents } from './constants'
 import {
+  FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
+  type SSRState,
   __fictEnableResumable,
   __fictEnsureScope,
   __fictGetResume,
@@ -67,6 +69,11 @@ export interface ResumableLoaderOptions {
   document?: Document
   snapshotScriptId?: string
   events?: string[]
+  /**
+   * Receives structured snapshot/resume issues detected by the loader.
+   * Useful for telemetry and fail-safe fallback orchestration.
+   */
+  onSnapshotIssue?: (issue: SnapshotIssue) => void
   /**
    * Prefetch strategy configuration.
    * Set to false to disable all prefetching.
@@ -75,6 +82,21 @@ export interface ResumableLoaderOptions {
   prefetch?: PrefetchStrategy | false
 }
 
+export type SnapshotIssueCode =
+  | 'snapshot_parse_error'
+  | 'snapshot_invalid_shape'
+  | 'snapshot_unsupported_version'
+  | 'scope_snapshot_missing'
+
+export interface SnapshotIssue {
+  code: SnapshotIssueCode
+  message: string
+  source: string
+  expectedVersion: number
+  actualVersion?: number
+  scopeId?: string
+}
+
 // ============================================================================
 // State
 // ============================================================================
@@ -85,6 +107,8 @@ let prefetchCleanup: (() => void) | null = null
 let eventListenerCleanup: (() => void) | null = null
 let snapshotObserver: MutationObserver | null = null
 const processedSnapshots = new Set<HTMLScriptElement>()
+let snapshotIssueHandler: ((issue: SnapshotIssue) => void) | null = null
+const emittedIssueKeys = new Set<string>()
 
 /**
  * Reset the hydrated scopes set. Useful for testing.
@@ -130,11 +154,14 @@ export function cleanupEventListeners(): void {
 export function installResumableLoader(options: ResumableLoaderOptions = {}): void {
   const doc = options.document ?? window.document
   const scriptId = options.snapshotScriptId ?? '__FICT_SNAPSHOT__'
+  snapshotIssueHandler = options.onSnapshotIssue ?? null
 
   // Reset hydrated scopes for fresh loader installation
   hydratedScopes.clear()
   prefetchedUrls.clear()
   processedSnapshots.clear()
+  emittedIssueKeys.clear()
+  __fictSetSSRState(null)
 
   // Clean up previous event listeners
   if (eventListenerCleanup) {
@@ -155,11 +182,9 @@ export function installResumableLoader(options: ResumableLoaderOptions = {}): vo
 
   const snapshotEl = doc.getElementById(scriptId)
   if (snapshotEl?.textContent) {
-    try {
-      const state = JSON.parse(snapshotEl.textContent)
+    const state = parseSnapshotText(snapshotEl.textContent, `#${scriptId}`)
+    if (state) {
       __fictSetSSRState(state)
-    } catch {
-      // Ignore parse errors
     }
   }
 
@@ -224,11 +249,88 @@ function parseSnapshotScript(script: HTMLScriptElement): void {
   processedSnapshots.add(script)
   const text = script.textContent
   if (!text) return
-  try {
-    const state = JSON.parse(text)
+  const source = script.id ? `#${script.id}` : '<script[data-fict-snapshot]>'
+  const state = parseSnapshotText(text, source)
+  if (state) {
     __fictMergeSSRState(state)
+  }
+}
+
+function parseSnapshotText(text: string, source: string): SSRState | null {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
   } catch {
-    // Ignore parse errors
+    emitSnapshotIssue({
+      code: 'snapshot_parse_error',
+      message: '[fict/loader] Failed to parse SSR snapshot JSON.',
+      source,
+      expectedVersion: FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
+    })
+    return null
+  }
+
+  return normalizeSnapshotState(parsed, source)
+}
+
+function normalizeSnapshotState(value: unknown, source: string): SSRState | null {
+  if (!isRecord(value)) {
+    emitSnapshotIssue({
+      code: 'snapshot_invalid_shape',
+      message: '[fict/loader] Snapshot payload must be an object.',
+      source,
+      expectedVersion: FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
+    })
+    return null
+  }
+
+  const rawVersion = value.v
+  const version = rawVersion === undefined ? FICT_SSR_SNAPSHOT_SCHEMA_VERSION : rawVersion
+  if (!Number.isInteger(version) || version !== FICT_SSR_SNAPSHOT_SCHEMA_VERSION) {
+    const versionIssue: SnapshotIssue = {
+      code: 'snapshot_unsupported_version',
+      message: `[fict/loader] Snapshot schema version ${String(version)} is not supported by this runtime.`,
+      source,
+      expectedVersion: FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
+    }
+    if (typeof version === 'number') {
+      versionIssue.actualVersion = version
+    }
+    emitSnapshotIssue({
+      ...versionIssue,
+    })
+    return null
+  }
+
+  const scopes = value.scopes
+  if (!isRecord(scopes)) {
+    emitSnapshotIssue({
+      code: 'snapshot_invalid_shape',
+      message: '[fict/loader] Snapshot payload is missing a valid `scopes` object.',
+      source,
+      expectedVersion: FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
+    })
+    return null
+  }
+
+  return { v: FICT_SSR_SNAPSHOT_SCHEMA_VERSION, scopes: scopes as SSRState['scopes'] }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function emitSnapshotIssue(issue: SnapshotIssue): void {
+  const key =
+    `${issue.code}|${issue.source}|${issue.scopeId ?? ''}|` +
+    `${issue.actualVersion ?? ''}|${issue.expectedVersion}`
+  if (emittedIssueKeys.has(key)) return
+  emittedIssueKeys.add(key)
+
+  snapshotIssueHandler?.(issue)
+
+  if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+    console.warn(issue.message)
   }
 }
 
@@ -405,9 +507,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> {
@@ -425,9 +533,17 @@ async function handleResumableEventAsync(event: Event): Promise<void> {
     if (!scopeId) continue
 
     const snapshot = __fictGetSSRScope(scopeId)
-    if (snapshot) {
-      __fictEnsureScope(scopeId, host, snapshot)
+    if (!snapshot) {
+      emitSnapshotIssue({
+        code: 'scope_snapshot_missing',
+        message: `[fict/loader] Missing scope snapshot for ${scopeId}; skipping resumable handler execution.`,
+        source: 'event',
+        expectedVersion: FICT_SSR_SNAPSHOT_SCHEMA_VERSION,
+        scopeId,
+      })
+      continue
     }
+    __fictEnsureScope(scopeId, host, snapshot)
 
     const { url, exportName } = parseQrl(qrl)
 

package/src/resume.ts

@@ -36,7 +36,10 @@ export interface ScopeSnapshot {
   vars?: Record<string, number>
 }
 
+export const FICT_SSR_SNAPSHOT_SCHEMA_VERSION = 1
+
 export interface SSRState {
+  v: number
   scopes: Record<string, ScopeSnapshot>
 }
 
@@ -173,7 +176,7 @@ export function __fictSerializeSSRState(): SSRState {
     scopes[id] = snapshot
   }
 
-  return { scopes }
+  return { v: FICT_SSR_SNAPSHOT_SCHEMA_VERSION, scopes }
 }
 
 export function __fictSerializeSSRStateForScopes(scopeIds: Iterable<string>): SSRState {
@@ -198,7 +201,7 @@ export function __fictSerializeSSRStateForScopes(scopeIds: Iterable<string>): SS
     scopes[id] = snapshot
   }
 
-  return { scopes }
+  return { v: FICT_SSR_SNAPSHOT_SCHEMA_VERSION, scopes }
 }
 
 export function __fictSetSSRState(state: SSRState | null): void {
@@ -211,7 +214,7 @@ export function __fictSetSSRState(state: SSRState | null): void {
 export function __fictMergeSSRState(state: SSRState | null): void {
   if (!state) return
   if (!snapshotState) {
-    snapshotState = { scopes: { ...state.scopes } }
+    snapshotState = { v: state.v, scopes: { ...state.scopes } }
     return
   }
   Object.assign(snapshotState.scopes, state.scopes)

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,17 +1652,56 @@ 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 = () => {}
-
-if (isDev) {
+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
+// defined as `false` in production builds.
+if (
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production'
+) {
   // 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()
@@ -1611,6 +1714,9 @@ if (isDev) {
     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
   }
 
@@ -1621,9 +1727,20 @@ if (isDev) {
     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
@@ -1643,21 +1760,60 @@ if (isDev) {
     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) => {
@@ -1675,6 +1831,30 @@ if (isDev) {
     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()
+  }
 }
 
 // ============================================================================