@fluixi/devtools 0.2.0-alpha.6 → 1.0.0-alpha.99

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Fluixi
+Copyright (c) 2026 Ibrahima Touré
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/callsite.cjs

@@ -77,5 +77,12 @@ function callSite(stack, origin) {
   return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }

package/dist/callsite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callsite.d.ts","sourceRoot":"","sources":["../src/callsite.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA8D1D;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAErE"}
+{"version":3,"file":"callsite.d.ts","sourceRoot":"","sources":["../src/callsite.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA8D1D;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAYrE"}

package/dist/callsite.js

@@ -87,5 +87,16 @@ export function callSite(stack, origin) {
  * the frames of the creating call are still on the stack.
  */
 export function currentCallSite(origin) {
-    return callSite(new Error().stack, origin);
+    // Deeper than the default ten frames: the reporting machinery and the framework's own calls
+    // can fill those, and the application's frame is the one past them.
+    // A V8 extension, absent from the DOM types; elsewhere it is an ignored property.
+    const errors = Error;
+    const limit = errors.stackTraceLimit;
+    errors.stackTraceLimit = 50;
+    try {
+        return callSite(new Error().stack, origin);
+    }
+    finally {
+        errors.stackTraceLimit = limit;
+    }
 }

package/dist/callsite.mjs

@@ -52,7 +52,14 @@ function callSite(stack, origin) {
   return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 export {
   callSite,

package/dist/diff.cjs

@@ -106,6 +106,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/diff.mjs

@@ -80,6 +80,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/export.cjs

@@ -122,6 +122,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/export.mjs

@@ -106,6 +106,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/format.cjs

@@ -106,6 +106,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../src/format.ts"],"names":[],"mappings":"AAoHA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,SAAM,GAAG,MAAM,CAQ/D;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAK,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAO,GAAG,MAAM,CA4C5D"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../src/format.ts"],"names":[],"mappings":"AAwHA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,SAAM,GAAG,MAAM,CAQ/D;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAK,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAO,GAAG,MAAM,CA4C5D"}

package/dist/format.js

@@ -98,9 +98,14 @@ function walk(value, depth, seen) {
         }
         const keys = Object.keys(object);
         const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
-            // A getter can throw, and a proxy can refuse. Neither is worth losing the whole value.
+            // A getter is shown, never called: on a component's props it builds the content
+            // (a `children` getter makes fresh nodes per read) and reads signals, so printing it
+            // ran the component's work again on every sample. A proxy can still refuse.
             let read;
             try {
+                const descriptor = Object.getOwnPropertyDescriptor(object, key);
+                if (descriptor?.get)
+                    return `${key}: [getter]`;
                 read = walk(object[key], depth + 1, seen);
             }
             catch {

package/dist/format.mjs

@@ -80,6 +80,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/hook.cjs

@@ -352,7 +352,14 @@ function callSite(stack, origin) {
   return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 
 // src/instrument.ts
@@ -441,6 +448,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";
@@ -840,6 +849,7 @@ var PREFIX = {
   service: "svc"
 };
 function readProps(props) {
+  if (readOnce.has(props)) return readOnce.get(props);
   const at = propsLocations(props);
   const out = [];
   for (const name of Object.keys(props)) {
@@ -850,13 +860,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue((0, import_signal2.untrack)(() => props[name]), 200);
+      report.value = formatValue(
+        (0, import_signal2.createRoot)((dispose) => {
+          try {
+            return (0, import_signal2.untrack)(() => props[name]);
+          } finally {
+            dispose();
+          }
+        }),
+        200
+      );
     } catch {
     }
     out.push(report);
   }
-  return out.length ? out : void 0;
+  const reports = out.length ? out : void 0;
+  readOnce.set(props, reports);
+  return reports;
 }
+var readOnce = /* @__PURE__ */ new WeakMap();
 function observeGraph(options = {}) {
   installSourceMarker();
   const origin = options.origin ?? (typeof location === "object" ? location.origin : void 0);
@@ -864,7 +886,7 @@ function observeGraph(options = {}) {
   const claims = (node, value) => {
     for (const dep of node.deps) {
       const other = graph.get(dep);
-      if (other?.read && other.read() === value) return false;
+      if (other?.read && readRaw(other) === value) return false;
     }
     return true;
   };
@@ -882,6 +904,7 @@ function observeGraph(options = {}) {
   const scopeOfTarget = /* @__PURE__ */ new WeakMap();
   const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
+  let descendants = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
     if (value instanceof Element) return [value];
@@ -1243,6 +1266,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -1298,7 +1322,7 @@ function observeGraph(options = {}) {
           runsAtLastSample.set(node.id, node.runs);
           continue;
         }
-        const raw = node.read();
+        const raw = readRaw(node);
         if (recording) raws.set(node.id, raw);
         edges(node.id, node);
         const stamped = raw?.$name;
@@ -1373,17 +1397,8 @@ function observeGraph(options = {}) {
       if (live.length) return live;
       collect(id);
       if (!live.length) {
-        const inside = (node) => {
-          const seen = /* @__PURE__ */ new Set();
-          let at = node.createdIn;
-          while (at !== void 0 && !seen.has(at)) {
-            if (at === id) return true;
-            seen.add(at);
-            at = graph.get(at)?.createdIn;
-          }
-          return false;
-        };
-        for (const node of graph.values()) if (inside(node)) collect(node.id);
+        descendants ??= descendantsByCreator(graph);
+        for (const below of descendants.get(id) ?? []) collect(below);
       }
       return live;
     },
@@ -1496,6 +1511,21 @@ function observeGraph(options = {}) {
   }
   return api;
 }
+function descendantsByCreator(graph) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    const seen = /* @__PURE__ */ new Set();
+    let at = node.createdIn;
+    while (at !== void 0 && !seen.has(at)) {
+      seen.add(at);
+      let list = out.get(at);
+      if (!list) out.set(at, list = []);
+      list.push(node.id);
+      at = graph.get(at)?.createdIn;
+    }
+  }
+  return out;
+}
 
 // src/highlight.ts
 var LAYER = "fx-highlight-layer";

package/dist/hook.mjs

@@ -177,6 +177,7 @@ function withoutElements(nodes) {
 
 // src/observe.ts
 import {
+  createRoot as createRoot2,
   observeReactiveNodes,
   untrack as untrack2
 } from "@fluixi/reactive/signal";
@@ -329,7 +330,14 @@ function callSite(stack, origin) {
   return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 
 // src/instrument.ts
@@ -429,6 +437,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";
@@ -828,6 +838,7 @@ var PREFIX = {
   service: "svc"
 };
 function readProps(props) {
+  if (readOnce.has(props)) return readOnce.get(props);
   const at = propsLocations(props);
   const out = [];
   for (const name of Object.keys(props)) {
@@ -838,13 +849,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue(untrack2(() => props[name]), 200);
+      report.value = formatValue(
+        createRoot2((dispose) => {
+          try {
+            return untrack2(() => props[name]);
+          } finally {
+            dispose();
+          }
+        }),
+        200
+      );
     } catch {
     }
     out.push(report);
   }
-  return out.length ? out : void 0;
+  const reports = out.length ? out : void 0;
+  readOnce.set(props, reports);
+  return reports;
 }
+var readOnce = /* @__PURE__ */ new WeakMap();
 function observeGraph(options = {}) {
   installSourceMarker();
   const origin = options.origin ?? (typeof location === "object" ? location.origin : void 0);
@@ -852,7 +875,7 @@ function observeGraph(options = {}) {
   const claims = (node, value) => {
     for (const dep of node.deps) {
       const other = graph.get(dep);
-      if (other?.read && other.read() === value) return false;
+      if (other?.read && readRaw(other) === value) return false;
     }
     return true;
   };
@@ -870,6 +893,7 @@ function observeGraph(options = {}) {
   const scopeOfTarget = /* @__PURE__ */ new WeakMap();
   const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
+  let descendants = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
     if (value instanceof Element) return [value];
@@ -1231,6 +1255,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -1286,7 +1311,7 @@ function observeGraph(options = {}) {
           runsAtLastSample.set(node.id, node.runs);
           continue;
         }
-        const raw = node.read();
+        const raw = readRaw(node);
         if (recording) raws.set(node.id, raw);
         edges(node.id, node);
         const stamped = raw?.$name;
@@ -1361,17 +1386,8 @@ function observeGraph(options = {}) {
       if (live.length) return live;
       collect(id);
       if (!live.length) {
-        const inside = (node) => {
-          const seen = /* @__PURE__ */ new Set();
-          let at = node.createdIn;
-          while (at !== void 0 && !seen.has(at)) {
-            if (at === id) return true;
-            seen.add(at);
-            at = graph.get(at)?.createdIn;
-          }
-          return false;
-        };
-        for (const node of graph.values()) if (inside(node)) collect(node.id);
+        descendants ??= descendantsByCreator(graph);
+        for (const below of descendants.get(id) ?? []) collect(below);
       }
       return live;
     },
@@ -1484,6 +1500,21 @@ function observeGraph(options = {}) {
   }
   return api;
 }
+function descendantsByCreator(graph) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    const seen = /* @__PURE__ */ new Set();
+    let at = node.createdIn;
+    while (at !== void 0 && !seen.has(at)) {
+      seen.add(at);
+      let list = out.get(at);
+      if (!list) out.set(at, list = []);
+      list.push(node.id);
+      at = graph.get(at)?.createdIn;
+    }
+  }
+  return out;
+}
 
 // src/highlight.ts
 var LAYER = "fx-highlight-layer";

package/dist/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/devtools v0.2.0-alpha.6 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/devtools v1.0.0-alpha.99 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -259,6 +259,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";
@@ -665,7 +667,14 @@ function callSite(stack, origin) {
   return fallback2 ? { location: { ...fallback2, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 
 // src/history.ts
@@ -1672,6 +1681,7 @@ var PREFIX = {
   service: "svc"
 };
 function readProps(props) {
+  if (readOnce.has(props)) return readOnce.get(props);
   const at3 = propsLocations(props);
   const out = [];
   for (const name of Object.keys(props)) {
@@ -1682,13 +1692,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue((0, import_signal2.untrack)(() => props[name]), 200);
+      report.value = formatValue(
+        (0, import_signal2.createRoot)((dispose) => {
+          try {
+            return (0, import_signal2.untrack)(() => props[name]);
+          } finally {
+            dispose();
+          }
+        }),
+        200
+      );
     } catch {
     }
     out.push(report);
   }
-  return out.length ? out : void 0;
+  const reports = out.length ? out : void 0;
+  readOnce.set(props, reports);
+  return reports;
 }
+var readOnce = /* @__PURE__ */ new WeakMap();
 function observeGraph(options = {}) {
   installSourceMarker();
   const origin = options.origin ?? (typeof location === "object" ? location.origin : void 0);
@@ -1696,7 +1718,7 @@ function observeGraph(options = {}) {
   const claims = (node, value) => {
     for (const dep of node.deps) {
       const other = graph.get(dep);
-      if (other?.read && other.read() === value) return false;
+      if (other?.read && readRaw(other) === value) return false;
     }
     return true;
   };
@@ -1714,6 +1736,7 @@ function observeGraph(options = {}) {
   const scopeOfTarget = /* @__PURE__ */ new WeakMap();
   const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
+  let descendants = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
     if (value instanceof Element) return [value];
@@ -2075,6 +2098,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -2130,7 +2154,7 @@ function observeGraph(options = {}) {
           runsAtLastSample.set(node.id, node.runs);
           continue;
         }
-        const raw = node.read();
+        const raw = readRaw(node);
         if (recording) raws.set(node.id, raw);
         edges(node.id, node);
         const stamped = raw?.$name;
@@ -2205,17 +2229,8 @@ function observeGraph(options = {}) {
       if (live.length) return live;
       collect(id);
       if (!live.length) {
-        const inside = (node) => {
-          const seen = /* @__PURE__ */ new Set();
-          let at3 = node.createdIn;
-          while (at3 !== void 0 && !seen.has(at3)) {
-            if (at3 === id) return true;
-            seen.add(at3);
-            at3 = graph.get(at3)?.createdIn;
-          }
-          return false;
-        };
-        for (const node of graph.values()) if (inside(node)) collect(node.id);
+        descendants ??= descendantsByCreator(graph);
+        for (const below of descendants.get(id) ?? []) collect(below);
       }
       return live;
     },
@@ -2328,6 +2343,21 @@ function observeGraph(options = {}) {
   }
   return api;
 }
+function descendantsByCreator(graph) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    const seen = /* @__PURE__ */ new Set();
+    let at3 = node.createdIn;
+    while (at3 !== void 0 && !seen.has(at3)) {
+      seen.add(at3);
+      let list = out.get(at3);
+      if (!list) out.set(at3, list = []);
+      list.push(node.id);
+      at3 = graph.get(at3)?.createdIn;
+    }
+  }
+  return out;
+}
 
 // src/highlight.ts
 var LAYER = "fx-highlight-layer";