@fluixi/devtools 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/instrument.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"instrument.d.ts","sourceRoot":"","sources":["../src/instrument.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AAC1E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,mEAAmE;IACnE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClB,2EAA2E;IAC3E,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAE5C;AACD,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAEzD;AAED,MAAM,WAAW,UAAU;IACzB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAA;KAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9I,UAAU,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC,CAAC;IACjE,YAAY,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChE,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC;IAC/H,cAAc,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC5F;AAED,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC5C,MAAM,IAAI,MAAM,EAAE,CAAC;IACnB,OAAO,IAAI,IAAI,CAAC;CACjB;AAeD,wBAAgB,aAAa,IAAI,OAAO,CAqLvC"}
+{"version":3,"file":"instrument.d.ts","sourceRoot":"","sources":["../src/instrument.ts"],"names":[],"mappings":"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"}

package/dist/instrument.js

@@ -3,9 +3,25 @@
 // into a graph. A read is a subscription, so edges come from real reads; writes (setX) made inside
 // a consumer become write edges. Nodes carry the live core node so the inspector reads the real
 // version + CLEAN/CHECK/DIRTY state, and onCleanup removes a node when its owner disposes.
-import { createSignal, createMemo, createEffect, createResource, createRoot, untrack, onCleanup, Signal, } from '@fluixi/reactive/signal';
+import { createSignal, createMemo, createEffect, createResource, createRoot, untrack, onCleanup, getOwner, runWithOwner, Signal, } from '@fluixi/reactive/signal';
 import { createStore } from '@fluixi/reactive/store';
+import { componentSource, installSourceMarker, takeReactiveSource } from './source.js';
+import { formatValue, shorten } from './format.js';
 const $NODE = Symbol.for('signal-node');
+/**
+ * The names the compiler supplies without an import, and what each one is. A control-flow
+ * tag stamps its name the same way an author's component does, so without this `Match` and
+ * `Switch` are drawn as components the author wrote.
+ *
+ * Mirrors `resolve/builtins.ts` in @fluixi/compiler. Not imported from there: this package
+ * runs beside the application, and the compiler is not on that side of the wall.
+ */
+export const KIND_OF_BUILTIN = {
+    Show: 'control', For: 'control', Index: 'control', Switch: 'control', Match: 'control',
+    Portal: 'control', Dynamic: 'control', ErrorBoundary: 'control',
+    Suspense: 'control', SuspenseList: 'control', Await: 'control',
+    Router: 'router', Outlet: 'router', Redirect: 'router', Link: 'router',
+};
 const CORE_STATE = { 0: 'clean', 1: 'check', 2: 'dirty' };
 /** The real version (signals/memos) or recompute count fallback. */
 export function nodeVersion(n) {
@@ -15,28 +31,51 @@ export function nodeVersion(n) {
 export function nodeState(n) {
     return n.core && typeof n.core.state === 'number' ? CORE_STATE[n.core.state] : undefined;
 }
-const fmt = (v) => {
-    try {
-        if (typeof v === 'string')
-            return JSON.stringify(v);
-        if (typeof v === 'function')
-            return 'ƒ';
-        if (typeof v === 'bigint')
-            return `${v}n`;
-        if (typeof v === 'object' && v)
-            return JSON.stringify(v);
-        return String(v);
-    }
-    catch {
-        return '?';
-    }
-};
-const short = (s, n = 18) => (s.length > n ? s.slice(0, n - 1) + '…' : s);
+// Kept as the names the rest of this package already uses.
+export const fmt = (v) => formatValue(v);
+export const short = (s, n = 18) => shorten(s, n);
 export function createReactor() {
+    installSourceMarker();
     const graph = new Map();
+    /** Run counts as of the last sample, so a node with no readable value can still pulse. */
+    const runsAtLastSample = new Map();
+    /** Nodes still carrying a positional label, so a better one can replace it later. */
+    const unnamed = new Set();
     const consumerStack = [];
     let seq = 0;
     let dispose = () => { };
+    // The root's owner, kept so a node created after `run` returned still has somewhere to
+    // hang its cleanup. A project's modules load asynchronously, so most registration lands
+    // well after the synchronous setup. With no owner, `onCleanup` runs immediately and the
+    // node disappears the moment it is made, which is why the graph came up empty.
+    let rootOwner = null;
+    /**
+     * Whether this node is the wrapper that made the stamped value, rather than one further
+     * down that only passes it along.
+     *
+     * `$name` is set on what a component returns, so it travels with the value: every memo
+     * holding it looks like the component. The one that made it is the one none of its
+     * dependencies already has. Otherwise a component under `Suspense` draws twice.
+     */
+    const claims = (node, value) => {
+        for (const dep of node.deps) {
+            const other = graph.get(dep);
+            if (other?.read && other.read() === value)
+                return false;
+        }
+        return true;
+    };
+    /** Remove a node when whatever created it goes away, or when the reactor is torn down. */
+    const forget = (id) => {
+        const owner = getOwner() ?? rootOwner;
+        if (owner) {
+            runWithOwner(owner, () => onCleanup(() => {
+                graph.delete(id);
+                runsAtLastSample.delete(id);
+                unnamed.delete(id);
+            }));
+        }
+    };
     const recordRead = (sourceId) => {
         const c = consumerStack[consumerStack.length - 1];
         if (c != null)
@@ -47,24 +86,34 @@ export function createReactor() {
         if (c != null && c !== targetId)
             graph.get(c)?.writes.add(targetId);
     };
-    const base = (id, label, kind) => ({
-        id,
-        label,
-        kind,
-        deps: new Set(),
-        writes: new Set(),
-        runs: 0,
-        lastPulse: 0,
-    });
+    // Every tracked primitive comes through here, so it is the one place a mark is taken. An
+    // explicit `{ name }` wins; otherwise the node borrows the variable name the compiler
+    // read, which is why `const count = signal(0)` shows as `count` rather than `s0`.
+    const base = (id, named, kind, fallback) => {
+        const mark = takeReactiveSource();
+        if (!named && !mark?.name)
+            unnamed.add(id);
+        return {
+            id,
+            label: named ?? mark?.name ?? fallback,
+            kind,
+            deps: new Set(),
+            writes: new Set(),
+            runs: 0,
+            lastPulse: 0,
+            ...(mark?.location ? { source: mark.location } : {}),
+        };
+    };
     const trackedCreateSignal = (value, options) => {
         const id = seq++;
         const [get, set] = createSignal(value, options);
-        const node = base(id, options?.name ?? `s${id}`, 'state');
+        const node = base(id, options?.name, 'state', `s${id}`);
         node.read = () => untrack(get);
-        node.value = short(fmt(value));
+        node.detail = formatValue(value);
+        node.value = shorten(node.detail);
         node.core = get[$NODE] ?? null;
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const read = () => {
             recordRead(id);
             return get();
@@ -75,11 +124,11 @@ export function createReactor() {
         };
         return [read, write];
     };
-    const trackedCreateMemo = (fn, options) => {
+    const trackedCreateMemo = (fn, value, options) => {
         const id = seq++;
-        const node = base(id, options?.name ?? `m${id}`, 'memo');
+        const node = base(id, options?.name, 'memo', `m${id}`);
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const m = createMemo(() => {
             node.core ??= Signal.subtle.currentComputed(); // capture the live Computed
             node.deps.clear();
@@ -92,7 +141,7 @@ export function createReactor() {
             finally {
                 consumerStack.pop();
             }
-        });
+        }, value, options);
         node.read = () => untrack(m);
         return () => {
             recordRead(id);
@@ -101,9 +150,9 @@ export function createReactor() {
     };
     const trackedCreateEffect = (fn, options) => {
         const id = seq++;
-        const node = base(id, options?.name ?? `e${id}`, 'effect');
+        const node = base(id, options?.name, 'effect', `e${id}`);
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         createEffect(() => {
             node.core ??= Signal.subtle.currentComputed();
             node.deps.clear();
@@ -122,7 +171,7 @@ export function createReactor() {
     const trackedCreateStore = (initial, options) => {
         const id = seq++;
         const [proxy, setter] = createStore(initial, { immutable: true, ...options });
-        const node = base(id, options?.name ?? `store${id}`, 'store');
+        const node = base(id, options?.name, 'store', `store${id}`);
         node.read = () => {
             try {
                 return untrack(() => JSON.stringify(proxy));
@@ -133,7 +182,7 @@ export function createReactor() {
         };
         node.value = '{…}';
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const recording = new Proxy(proxy, {
             get(t, p, r) {
                 recordRead(id);
@@ -150,7 +199,7 @@ export function createReactor() {
         const id = seq++;
         const last = args[args.length - 1];
         const name = last && typeof last === 'object' && !Array.isArray(last) && typeof last !== 'function' ? last.name : undefined;
-        const node = base(id, name ?? `res${id}`, 'resource');
+        const node = base(id, name, 'resource', `res${id}`);
         const [data, actions] = createResource(...args);
         node.read = () => {
             try {
@@ -162,7 +211,7 @@ export function createReactor() {
         };
         node.value = '⏳ loading';
         graph.set(id, node);
-        onCleanup(() => graph.delete(id));
+        forget(id);
         const accessor = (() => {
             recordRead(id);
             return data();
@@ -172,38 +221,109 @@ export function createReactor() {
         }
         return [accessor, actions];
     };
+    // The short API is the long one with a handle around it. `signal` is
+    // `Object.assign(createSignal(...), { set })`, `memo` and `effect` are the same function
+    // under another name. Deriving them keeps one definition of what tracking means, instead
+    // of a second copy of the node bookkeeping that drifts from the first.
+    const trackedSignal = (value, options) => {
+        const [read, write] = trackedCreateSignal(value, options);
+        Object.defineProperty(read, 'set', { value: write });
+        return read;
+    };
+    const trackedMemo = trackedCreateMemo;
+    const trackedEffect = trackedCreateEffect;
+    const trackedStore = (initial, options) => {
+        const [state, set] = trackedCreateStore(initial, options);
+        // A wrapper rather than assigning onto the state: the proxy is the tracking boundary,
+        // and writing a key through it would read as a state change.
+        return new Proxy(state, {
+            get: (target, key) => (key === 'set' ? set : target[key]),
+            has: (target, key) => key === 'set' || Reflect.has(target, key),
+        });
+    };
+    const trackedResource = (...args) => {
+        const [accessor, controls] = trackedCreateResource(...args);
+        return Object.assign(accessor, controls);
+    };
     const api = {
         createSignal: trackedCreateSignal,
         createMemo: trackedCreateMemo,
         createEffect: trackedCreateEffect,
         createStore: trackedCreateStore,
         createResource: trackedCreateResource,
+        signal: trackedSignal,
+        memo: trackedMemo,
+        store: trackedStore,
+        effect: trackedEffect,
+        resource: trackedResource
     };
     return {
         graph,
         run(setup) {
             dispose();
             graph.clear();
+            runsAtLastSample.clear();
+            unnamed.clear();
             seq = 0;
             consumerStack.length = 0;
             createRoot((d) => {
                 dispose = d;
+                rootOwner = getOwner();
                 setup(api);
             });
         },
         sample() {
             const changed = [];
-            const now = performance.now();
+            // Date.now rather than performance.now: the reactor may run in one realm and the view
+            // in another, which an iframe preview does, and each realm's performance
+            // clock has its own origin, so the age the view computed was nonsense and nothing
+            // ever pulsed.
+            const now = Date.now();
             for (const node of graph.values()) {
-                if (!node.read)
+                // An effect has no value to read, so what marks it as having done something is the
+                // run count the wrapper keeps. Without this an effect never pulsed.
+                if (!node.read) {
+                    const seen = runsAtLastSample.get(node.id);
+                    if (seen !== undefined && node.runs > seen) {
+                        node.lastPulse = now;
+                        changed.push(node.id);
+                    }
+                    runsAtLastSample.set(node.id, node.runs);
                     continue;
-                const next = short(fmt(node.read()));
-                if (next !== node.value) {
+                }
+                const raw = node.read();
+                // The compiler wraps each component in a memo, and `createComponent` stamps the
+                // component's name on what it returns. A memo that has no name of its own is that
+                // wrapper, so it can say `Counter` rather than `m5`.
+                // The runtime stamps a component's name on what it returned, so a memo holding
+                // that is the wrapper the compiler put round a component. Not gated on the node
+                // being unnamed: the compiler marks the tag with the component's name too, which
+                // would leave the node named and never recognised.
+                const stamped = raw?.$name;
+                if (node.kind === 'memo' && typeof stamped === 'string' && stamped && claims(node, raw)) {
+                    // Still a memo underneath. This only says so, so a renderer can draw it as what
+                    // the author wrote rather than as the wrapper around it.
+                    node.kind = KIND_OF_BUILTIN[stamped] ?? 'component';
+                    // `source` stays what it is for every other node: where this one was created,
+                    // which for a wrapper is where the tag was written. Where the component itself
+                    // lives is a second fact, and it stands in for the first when nothing marked it.
+                    node.declaredAt = componentSource(stamped);
+                    node.source ??= node.declaredAt;
+                    if (unnamed.has(node.id)) {
+                        node.label = stamped;
+                        unnamed.delete(node.id);
+                    }
+                }
+                const detail = formatValue(raw);
+                const next = shorten(detail);
+                if (next !== node.value || detail !== node.detail) {
+                    node.detail = detail;
                     node.value = next;
                     node.runs++;
                     node.lastPulse = now;
                     changed.push(node.id);
                 }
+                runsAtLastSample.set(node.id, node.runs);
             }
             return changed;
         },