tutuca 0.9.106 → 0.9.107

package/dist/tutuca-cli.js

@@ -4248,6 +4248,9 @@ class Step {
   pinKey(_v) {
     return this;
   }
+  toKey() {
+    return null;
+  }
 }
 function warnRawDynStep(op, step) {
   console.warn(`Path.${op} reached a DynStep: call toTransactionPath() first`, step);
@@ -4332,6 +4335,15 @@ class Path {
     }
     return out;
   }
+  toKeys() {
+    const out = [];
+    for (const step of this.steps) {
+      const k = step.toKey();
+      if (k !== null)
+        out.push(k);
+    }
+    return out;
+  }
   setValue(root, v) {
     const intermediates = new Array(this.steps.length);
     let curVal = root;
@@ -4589,6 +4601,9 @@ var init_path = __esm(() => {
     withKey(k) {
       return new SeqStep(this.field, k);
     }
+    toKey() {
+      return { field: this.field };
+    }
   };
   SeqStep = class SeqStep extends Step {
     constructor(field, key) {
@@ -4607,6 +4622,9 @@ var init_path = __esm(() => {
     enterFrame(stack, _prev, next) {
       return stack.enter(next, { key: this.key }, true);
     }
+    toKey() {
+      return { field: this.field, key: this.key };
+    }
   };
   SeqAccessStep = class SeqAccessStep extends Step {
     constructor(seqField, keyField) {
@@ -4628,6 +4646,9 @@ var init_path = __esm(() => {
       const key = v?.get(this.keyField, NONE);
       return key === NONE ? this : new SeqStep(this.seqField, key);
     }
+    toKey() {
+      return { field: this.seqField };
+    }
   };
   EachBindStep = class EachBindStep extends Step {
     constructor(iterInfo, key) {
@@ -15154,12 +15175,47 @@ class Transactor {
     this.transactions = [];
     this.state = new State2(rootValue);
     this.onTransactionPushed = () => {};
+    this._observers = [];
     this._inflight = new Set;
   }
   pushTransaction(t) {
     this.transactions.push(t);
     this.onTransactionPushed(t);
   }
+  observe(cb) {
+    this._observers.push(cb);
+    return () => {
+      const i = this._observers.indexOf(cb);
+      if (i !== -1)
+        this._observers.splice(i, 1);
+    };
+  }
+  _emit(record) {
+    for (const cb of this._observers)
+      cb(record);
+  }
+  _emitTransaction(transaction, root) {
+    if (this._observers.length === 0)
+      return;
+    if (transaction._resolvedHandler === undefined)
+      return;
+    const path = transaction.getTransactionPath().pinKeys(root);
+    this._emit({
+      kind: transaction.observeKind,
+      name: transaction.observeName,
+      args: transaction.args ?? null,
+      path,
+      pathKeys: path.toKeys(),
+      targetPath: transaction.targetPath ?? transaction.path,
+      handler: transaction._resolvedHandler ?? null,
+      handlerName: transaction._resolvedHandler?.name || null,
+      matched: transaction._matched ?? null,
+      before: transaction._before,
+      after: transaction._after,
+      parent: transaction.parentTransaction,
+      timestamp: Date.now()
+    });
+  }
   _link(child, parent) {
     if (parent) {
       const release = parent.completion.track();
@@ -15210,7 +15266,26 @@ class Transactor {
       const curRoot = this.state.val;
       const txnPath = path.toTransactionPath();
       const curLeaf = txnPath.lookup(curRoot);
-      const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
+      const found = this.comps.getRequestFor(curLeaf, name);
+      const handler = found ?? mkReq404(name);
+      if (this._observers.length > 0) {
+        const reqPath = txnPath.pinKeys(curRoot);
+        this._emit({
+          kind: "request",
+          name,
+          args,
+          path: reqPath,
+          pathKeys: reqPath.toKeys(),
+          targetPath: path,
+          handler: found?.fn ?? null,
+          handlerName: found?.fn?.name || name,
+          matched: found ? "exact" : "none",
+          before: curLeaf,
+          after: undefined,
+          parent,
+          timestamp: Date.now()
+        });
+      }
       const reqCtx = new RequestContext(path, this, parent, curRoot);
       const resHandlerName = opts?.onResName ?? name;
       const resPath = opts?.livePath ? null : txnPath.pinKeys(curRoot);
@@ -15245,6 +15320,7 @@ class Transactor {
       if (newState !== undefined) {
         this.state.set(newState, { transaction });
         transaction.afterTransaction();
+        this._emitTransaction(transaction, curState);
       } else
         console.warn("undefined new state", { curState, transaction });
     } finally {
@@ -15293,8 +15369,15 @@ class Transaction {
   buildStack(root, comps) {
     return this.path.toTransactionPath().buildStack(this.buildRootStack(root, comps));
   }
+  get observeKind() {
+    return null;
+  }
+  get observeName() {
+    return null;
+  }
   callHandler(root, instance, comps) {
     const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
+    this._resolvedHandler = handler;
     return handler.apply(instance, args);
   }
   getHandlerAndArgs(_root, _instance, _comps) {
@@ -15307,6 +15390,8 @@ class Transaction {
     const txnPath = this.getTransactionPath();
     const curLeaf = txnPath.lookup(curRoot);
     const newLeaf = this.callHandler(curRoot, curLeaf, comps);
+    this._before = curLeaf;
+    this._after = newLeaf;
     this._completion?.markSelfSettled({ value: newLeaf, old: curLeaf });
     return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
   }
@@ -15442,6 +15527,12 @@ var init_transactor = __esm(() => {
       this._dispatchPath ??= this.path.compact();
       return this._dispatchPath;
     }
+    get observeKind() {
+      return "input";
+    }
+    get observeName() {
+      return this.e?.type ?? null;
+    }
     buildRootStack(root, comps) {
       return Stack2.root(comps, root, this);
     }
@@ -15510,9 +15601,26 @@ var init_transactor = __esm(() => {
       this.targetPath = path;
     }
     handlerProp = null;
+    get observeKind() {
+      return this.handlerProp;
+    }
+    get observeName() {
+      return this.name;
+    }
     getHandlerForName(comp) {
       const handlers = comp?.[this.handlerProp];
-      return handlers?.[this.name] ?? handlers?.$unknown ?? nullHandler;
+      const exact = handlers?.[this.name];
+      if (exact) {
+        this._matched = "exact";
+        return exact;
+      }
+      const unknown = handlers?.$unknown;
+      if (unknown) {
+        this._matched = "unknown";
+        return unknown;
+      }
+      this._matched = "none";
+      return nullHandler;
     }
     getHandlerAndArgs(_root, instance, comps) {
       const handler = this.getHandlerForName(comps.getCompFor(instance));
@@ -15722,6 +15830,9 @@ class App {
   onChange(callback) {
     this.transactor.state.onChange(callback);
   }
+  observe(callback) {
+    return this.transactor.observe(callback);
+  }
   compile() {
     for (const Comp of this.comps.byId.values()) {
       Comp.compile(this.ParseContext);

package/dist/tutuca-components.js

@@ -1402,6 +1402,12 @@ function getComponents4() {
   ];
 }
 
+// src/components/tutuca/activity-inspector.js
+import { component as component9, html as html9 } from "tutuca";
+
+// src/components/tutuca/instance-inspector.js
+import { component as component8, html as html8, isRecord } from "tutuca";
+
 // src/components/tutuca/component-inspector.js
 import { component as component5, html as html5 } from "tutuca";
 function introspectComponent(comp) {
@@ -1579,9 +1585,6 @@ function getComponents5() {
   return [ComponentInspector, CompSection, CompField, CompName, CompView, ...getComponents2()];
 }
 
-// src/components/tutuca/instance-inspector.js
-import { component as component8, html as html8, isRecord } from "tutuca";
-
 // src/components/tutuca/lint-inspector.js
 import { component as component6, html as html6 } from "tutuca";
 var tagDisplay = (tag) => tag ? String(tag).toLowerCase() : "";
@@ -2235,6 +2238,120 @@ function getComponents8() {
   });
 }
 
+// src/components/tutuca/activity-inspector.js
+var ACTIVITY_CAP = 50;
+var ActivityEntry = component9({
+  name: "ActivityEntry",
+  fields: {
+    kind: "",
+    name: "",
+    handlerName: "",
+    matched: "",
+    pathLabel: "",
+    time: "",
+    before: null,
+    after: null,
+    hasAfter: true
+  },
+  view: html9`<div
+    class="rounded border border-base-content/15 p-2 text-sm flex flex-col gap-1"
+  >
+    <div class="flex items-center gap-2 flex-wrap">
+      <span
+        title="How this was dispatched: receive (send), bubble, response, input, or request"
+        class="badge badge-sm badge-neutral"
+        @text=".kind"
+      ></span>
+      <span
+        title="Message name dispatched — for a DOM input, the event type (click, input, change, keydown, …)"
+        class="font-mono font-semibold"
+        @text=".name"
+      ></span>
+      <span
+        title="Actual handler that ran — shown only when it differs from the name (e.g. a $unknown fallback)"
+        class="text-xs opacity-60 font-mono"
+        @show="truthy? .handlerName"
+        @text=".handlerName"
+      ></span>
+      <span
+        title="Path to the target component"
+        class="text-xs opacity-40 font-mono"
+        @text=".pathLabel"
+      ></span>
+      <span
+        title="Handler resolution — exact: matched by name · unknown: $unknown fallback · none: no handler (no-op)"
+        class="badge badge-xs badge-ghost"
+        @show="truthy? .matched"
+        @text=".matched"
+      ></span>
+      <span
+        title="Time this event ran (HH:MM:SS.mmm)"
+        class="ml-auto text-xs opacity-40 font-mono tabular-nums"
+        @text=".time"
+      ></span>
+    </div>
+    <div class="flex gap-3 items-start font-mono text-xs">
+      <div class="flex-1 min-w-0">
+        <div class="opacity-50" title="Target state before the handler ran">before</div>
+        <x render=".before"></x>
+      </div>
+      <div class="flex-1 min-w-0" @show=".hasAfter">
+        <div class="opacity-50" title="Target state after the handler ran">after</div>
+        <x render=".after"></x>
+      </div>
+    </div>
+  </div>`
+});
+var ActivityLog = component9({
+  name: "ActivityLog",
+  fields: { events: [], hasEvents: false },
+  methods: {
+    appendEntry(entry) {
+      return this.setEvents(this.events.unshift(entry).slice(0, ACTIVITY_CAP)).setHasEvents(true);
+    }
+  },
+  view: html9`<div class="p-3 flex flex-col gap-2 max-h-[60vh] overflow-y-auto">
+    <div class="text-xs opacity-40" @hide=".hasEvents">
+      No activity yet — interact with the component.
+    </div>
+    <x render-each=".events"></x>
+  </div>`
+});
+function fmtActivityTime(ts) {
+  const d = new Date(ts);
+  const p = (n, w = 2) => String(n).padStart(w, "0");
+  return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}.${p(d.getMilliseconds(), 3)}`;
+}
+function pathKeysLabel(pathKeys) {
+  return pathKeys.map((k) => k.key === undefined ? k.field : `${k.field}[${k.key}]`).join(".");
+}
+function makeInspect(app) {
+  return (value) => {
+    const comp = isComponentInstance(value) ? app.comps.getCompFor(value) : null;
+    return InstanceInspector.Class.fromData(value, comp);
+  };
+}
+function recordToEntry(record, { inspect, pathLabel = pathKeysLabel } = {}) {
+  const hasAfter = record.after !== undefined;
+  const primary = record.name ?? record.handlerName ?? "?";
+  const handler = record.handlerName ?? "";
+  const handlerLabel = handler && handler !== primary ? `→ ${handler}` : "";
+  return ActivityEntry.make({
+    kind: record.kind ?? "",
+    name: primary,
+    handlerName: handlerLabel,
+    matched: record.matched ?? "",
+    pathLabel: pathLabel(record.pathKeys),
+    time: fmtActivityTime(record.timestamp),
+    before: inspect(record.before),
+    after: hasAfter ? inspect(record.after) : null,
+    hasAfter
+  });
+}
+function getComponents9() {
+  return [ActivityLog, ActivityEntry];
+}
+
 // src/components/build-views.js
 async function buildInspectorViews(value, scope, { getTests = null, components = [], dev = null, name } = {}) {
   const comp = isComponentInstance(value) ? scope.getCompFor(value) : null;
@@ -2273,8 +2390,9 @@ async function buildInspectorViews(value, scope, { getTests = null, components =
 }
 
 // src/components/index.js
-function getComponents9() {
+function getComponents10() {
   const all = [
+    ...getComponents9(),
     ...getComponents5(),
     ...getComponents8(),
     ...getComponents6(),
@@ -2294,13 +2412,17 @@ function getComponents9() {
 }
 export {
   valueWrapperMethods,
+  recordToEntry,
+  pathKeysLabel,
   makeValueInspector,
+  makeInspect,
   makeCompositeView,
   lintMessage,
   isComponentInstance,
   introspectComponent,
-  getComponents9 as getComponents,
+  getComponents10 as getComponents,
   fmtAnyKey,
+  fmtActivityTime,
   compositeView,
   compositeMethods,
   compositeFields,
@@ -2369,5 +2491,7 @@ export {
   CompView,
   CompSection,
   CompName,
-  CompField
+  CompField,
+  ActivityLog,
+  ActivityEntry
 };

package/dist/tutuca-dev.ext.js

@@ -117,6 +117,9 @@ class Step {
   pinKey(_v) {
     return this;
   }
+  toKey() {
+    return null;
+  }
 }
 
 class BindStep extends Step {
@@ -178,6 +181,9 @@ class FieldStep extends Step {
   withKey(k) {
     return new SeqStep(this.field, k);
   }
+  toKey() {
+    return { field: this.field };
+  }
 }
 
 class SeqStep extends Step {
@@ -197,6 +203,9 @@ class SeqStep extends Step {
   enterFrame(stack, _prev, next) {
     return stack.enter(next, { key: this.key }, true);
   }
+  toKey() {
+    return { field: this.field, key: this.key };
+  }
 }
 
 class SeqAccessStep extends Step {
@@ -219,6 +228,9 @@ class SeqAccessStep extends Step {
     const key = v?.get(this.keyField, NONE);
     return key === NONE ? this : new SeqStep(this.seqField, key);
   }
+  toKey() {
+    return { field: this.seqField };
+  }
 }
 
 class EachBindStep extends Step {
@@ -374,6 +386,15 @@ class Path {
     }
     return out;
   }
+  toKeys() {
+    const out = [];
+    for (const step of this.steps) {
+      const k = step.toKey();
+      if (k !== null)
+        out.push(k);
+    }
+    return out;
+  }
   setValue(root, v) {
     const intermediates = new Array(this.steps.length);
     let curVal = root;
@@ -6285,12 +6306,47 @@ class Transactor {
     this.transactions = [];
     this.state = new State2(rootValue);
     this.onTransactionPushed = () => {};
+    this._observers = [];
     this._inflight = new Set;
   }
   pushTransaction(t) {
     this.transactions.push(t);
     this.onTransactionPushed(t);
   }
+  observe(cb) {
+    this._observers.push(cb);
+    return () => {
+      const i = this._observers.indexOf(cb);
+      if (i !== -1)
+        this._observers.splice(i, 1);
+    };
+  }
+  _emit(record) {
+    for (const cb of this._observers)
+      cb(record);
+  }
+  _emitTransaction(transaction, root) {
+    if (this._observers.length === 0)
+      return;
+    if (transaction._resolvedHandler === undefined)
+      return;
+    const path = transaction.getTransactionPath().pinKeys(root);
+    this._emit({
+      kind: transaction.observeKind,
+      name: transaction.observeName,
+      args: transaction.args ?? null,
+      path,
+      pathKeys: path.toKeys(),
+      targetPath: transaction.targetPath ?? transaction.path,
+      handler: transaction._resolvedHandler ?? null,
+      handlerName: transaction._resolvedHandler?.name || null,
+      matched: transaction._matched ?? null,
+      before: transaction._before,
+      after: transaction._after,
+      parent: transaction.parentTransaction,
+      timestamp: Date.now()
+    });
+  }
   _link(child, parent) {
     if (parent) {
       const release = parent.completion.track();
@@ -6341,7 +6397,26 @@ class Transactor {
       const curRoot = this.state.val;
       const txnPath = path.toTransactionPath();
       const curLeaf = txnPath.lookup(curRoot);
-      const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
+      const found = this.comps.getRequestFor(curLeaf, name);
+      const handler = found ?? mkReq404(name);
+      if (this._observers.length > 0) {
+        const reqPath = txnPath.pinKeys(curRoot);
+        this._emit({
+          kind: "request",
+          name,
+          args,
+          path: reqPath,
+          pathKeys: reqPath.toKeys(),
+          targetPath: path,
+          handler: found?.fn ?? null,
+          handlerName: found?.fn?.name || name,
+          matched: found ? "exact" : "none",
+          before: curLeaf,
+          after: undefined,
+          parent,
+          timestamp: Date.now()
+        });
+      }
       const reqCtx = new RequestContext(path, this, parent, curRoot);
       const resHandlerName = opts?.onResName ?? name;
       const resPath = opts?.livePath ? null : txnPath.pinKeys(curRoot);
@@ -6376,6 +6451,7 @@ class Transactor {
       if (newState !== undefined) {
         this.state.set(newState, { transaction });
         transaction.afterTransaction();
+        this._emitTransaction(transaction, curState);
       } else
         console.warn("undefined new state", { curState, transaction });
     } finally {
@@ -6424,8 +6500,15 @@ class Transaction {
   buildStack(root, comps) {
     return this.path.toTransactionPath().buildStack(this.buildRootStack(root, comps));
   }
+  get observeKind() {
+    return null;
+  }
+  get observeName() {
+    return null;
+  }
   callHandler(root, instance, comps) {
     const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
+    this._resolvedHandler = handler;
     return handler.apply(instance, args);
   }
   getHandlerAndArgs(_root, _instance, _comps) {
@@ -6438,6 +6521,8 @@ class Transaction {
     const txnPath = this.getTransactionPath();
     const curLeaf = txnPath.lookup(curRoot);
     const newLeaf = this.callHandler(curRoot, curLeaf, comps);
+    this._before = curLeaf;
+    this._after = newLeaf;
     this._completion?.markSelfSettled({ value: newLeaf, old: curLeaf });
     return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
   }
@@ -6462,6 +6547,12 @@ class InputEvent extends Transaction {
     this._dispatchPath ??= this.path.compact();
     return this._dispatchPath;
   }
+  get observeKind() {
+    return "input";
+  }
+  get observeName() {
+    return this.e?.type ?? null;
+  }
   buildRootStack(root, comps) {
     return Stack.root(comps, root, this);
   }
@@ -6531,9 +6622,26 @@ class NameArgsTransaction extends Transaction {
     this.targetPath = path;
   }
   handlerProp = null;
+  get observeKind() {
+    return this.handlerProp;
+  }
+  get observeName() {
+    return this.name;
+  }
   getHandlerForName(comp) {
     const handlers = comp?.[this.handlerProp];
-    return handlers?.[this.name] ?? handlers?.$unknown ?? nullHandler;
+    const exact = handlers?.[this.name];
+    if (exact) {
+      this._matched = "exact";
+      return exact;
+    }
+    const unknown = handlers?.$unknown;
+    if (unknown) {
+      this._matched = "unknown";
+      return unknown;
+    }
+    this._matched = "none";
+    return nullHandler;
   }
   getHandlerAndArgs(_root, instance, comps) {
     const handler = this.getHandlerForName(comps.getCompFor(instance));
@@ -7564,6 +7672,9 @@ class App {
   onChange(callback) {
     this.transactor.state.onChange(callback);
   }
+  observe(callback) {
+    return this.transactor.observe(callback);
+  }
   compile() {
     for (const Comp of this.comps.byId.values()) {
       Comp.compile(this.ParseContext);
@@ -8467,6 +8578,7 @@ export {
   setIn,
   set,
   runTests,
+  rootDispatcher,
   resolveArgs,
   reportTestReportToConsole,
   removeIn,