[feature] improve debug info for reactive primitives

src/components/Header.gts

@@ -5,7 +5,7 @@ let isMobile = () => false;
 
 if (!import.meta.env.SSR) {
   // @ts-ignore
-  isMobileDialogVisible = cell(false);
+  isMobileDialogVisible = cell(false, 'Header mobile layout visibility');
   isMobile = () => window.innerWidth < 1024;
 }
 

src/components/pages/Router.gts

@@ -39,25 +39,25 @@ export class Router extends Component {
     {
       name: 'routeOne',
       text: 'Into',
-      state: cell(true),
+      state: cell(true, 'routeOne active'),
       Component: PageOne,
     },
     {
       name: 'routeTwo',
       text: 'Goals',
-      state: cell(false),
+      state: cell(false, 'routeTwo active'),
       Component: PageTwo,
     },
     {
       name: 'benchmark',
       text: 'Benchmark',
-      state: cell(false),
+      state: cell(false, 'benchmark active'),
       Component: Benchmark,
     },
     {
       name: 'tests',
       text: 'Tests',
-      state: cell(false),
+      state: cell(false, 'tests active'),
       Component: Tests,
     },
   ];

src/utils/dom.ts

@@ -46,6 +46,7 @@ import {
   setBounds,
   $args,
   $fwProp,
+  $DEBUG_REACTIVE_CONTEXTS,
 } from './shared';
 import { isRehydrationScheduled } from './rehydration';
 
@@ -307,6 +308,9 @@ function _DOM(
 ): NodeReturnType {
   NODE_COUNTER++;
   const element = api.element(tag);
+  if (IS_DEV_MODE) {
+    $DEBUG_REACTIVE_CONTEXTS.push(`${tag}`);
+  }
   if (IN_SSR_ENV) {
     // todo - ssr mode here, we need to do it only in 2 cases:
     // 1. We running SSR tests in QUNIT
@@ -387,6 +391,9 @@ function _DOM(
   });
 
   associateDestroyable(ctx, destructors);
+  if (IS_DEV_MODE) {
+    $DEBUG_REACTIVE_CONTEXTS.pop();
+  }
   return def(element);
 }
 let unstableWrapperId = 0;
@@ -528,7 +535,15 @@ function component(
   ctx: Component<any>,
   // slots: false | Record<string, () => Array<ComponentReturnType | NodeReturnType>> = false,
 ) {
+  let label = IS_DEV_MODE ? `${
+    // @ts-expect-error debugName may not exist
+    comp.debugName || comp.name || comp.constructor.name
+  }` : '';
   try {
+    if (IS_DEV_MODE) {
+      $DEBUG_REACTIVE_CONTEXTS.push(label);
+      label = `<${label} ${JSON.stringify(args)} />`;
+    }
     return _component(comp, args, fw, ctx);
   } catch (e) {
     if (import.meta.env.SSR) {
@@ -537,10 +552,6 @@ function component(
     if (IS_DEV_MODE) {
       let ErrorOverlayClass = customElements.get('vite-error-overlay');
       let errorOverlay!: Element;
-      let label = `<${
-        // @ts-expect-error debugName may not exist
-        comp.debugName || comp.name || comp.constructor.name
-      } ${JSON.stringify(args)} />`;
       // @ts-expect-error message may not exit
       e.message = `${label}\n${e.message}`;
       if (!ErrorOverlayClass) {
@@ -571,6 +582,10 @@ function component(
         nodes: [api.text(String(e.message))],
       };
     }
+  } finally {
+    if (IS_DEV_MODE) {
+      $DEBUG_REACTIVE_CONTEXTS.pop();
+    }
   }
 }
 // hello, basic component manager

src/utils/list.ts

@@ -240,7 +240,7 @@ class BasicListComponent<T extends { id: number }> {
               });
             }
             return itemIndex;
-          });
+          },`each.index[${index}]`);
         }
         const row = this.ItemComponent(
           item,

src/utils/reactive.ts

@@ -4,7 +4,7 @@
   We explicitly update DOM only when it's needed and only if tags are changed.
 */
 import { scheduleRevalidate } from '@/utils/runtime';
-import { isFn, isTag, isTagLike } from '@/utils/shared';
+import { isFn, isTag, isTagLike, debugContext } from '@/utils/shared';
 
 export const asyncOpcodes = new WeakSet<tagOp>();
 // List of DOM operations for each tag
@@ -110,7 +110,7 @@ export class Cell<T extends unknown = unknown> {
   constructor(value: T, debugName?: string) {
     this._value = value;
     if (IS_DEV_MODE) {
-      this._debugName = debugName;
+      this._debugName = debugContext(debugName);
       DEBUG_CELLS.add(this);
     }
   }
@@ -178,7 +178,7 @@ export class MergedCell {
   constructor(fn: Fn | Function, debugName?: string) {
     this.fn = fn;
     if (IS_DEV_MODE) {
-      this._debugName = debugName;
+      this._debugName = debugContext(debugName);
       DEBUG_MERGED_CELLS.add(this);
     }
   }

src/utils/shared.ts

@@ -17,6 +17,15 @@ export const $propsProp = 'props' as const;
 export const $attrsProp = 'attrs' as const;
 export const $eventsProp = 'events' as const;
 
+export const $DEBUG_REACTIVE_CONTEXTS: string[] = [];
+
+export function debugContext(debugName?: string) {
+  if (!debugName) {
+    debugger;
+  }
+  return [...$DEBUG_REACTIVE_CONTEXTS.filter(el => el !== 'UnstableChildWrapper'), debugName].join(' > ');
+}
+
 export function isFn(value: unknown): value is Function {
   return typeof value === 'function';
 }