@barefootjs/test 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -4,7 +4,7 @@
 export { renderToTest } from './render';
 export type { TestResult } from './render';
 export { TestNode } from './test-node';
-export type { TestNodeData, TestNodeQuery } from './test-node';
+export type { TestNodeData, TestNodeQuery, EventHandler } from './test-node';
 export { toStructure } from './structure';
 export { resolveConstants } from './resolve-constants';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -192314,7 +192314,7 @@ function transformExpressionInner(expr, ctx, node, isClientOnly) {
   }
   const ir = transformJsxExpression(expr, ctx, isClientOnly);
   if (ir !== null) {
-    if (isClientOnly && ir.type === "conditional") {
+    if ((isClientOnly || shouldAutoDeferReactiveBrand(expr, ctx)) && ir.type === "conditional") {
       ir.clientOnly = true;
       if (!ir.slotId) {
         ir.slotId = generateSlotId(ctx);
@@ -193665,7 +193665,7 @@ function processAttributes(attributes, ctx) {
           value = { ...value, templateExpr: rewritten };
         }
       }
-      if (hasLeadingClientDirective(attr.initializer.expression, ctx.sourceFile)) {
+      if (hasLeadingClientDirective(attr.initializer.expression, ctx.sourceFile) || shouldAutoDeferReactiveBrand(attr.initializer.expression, ctx)) {
         clientOnly = true;
       }
     }
@@ -194069,6 +194069,16 @@ function isReactiveExpression(expr, ctx, astNode) {
   }
   return false;
 }
+function shouldAutoDeferReactiveBrand(expr, ctx) {
+  const checker = ctx.analyzer.checker;
+  if (!checker)
+    return false;
+  if (!containsReactiveExpression(expr, checker))
+    return false;
+  if (isSignalOrMemoReference(ctx.getJS(expr), ctx))
+    return false;
+  return true;
+}
 function isSignalOrMemoReference(expr, ctx, visited) {
   for (const { pattern } of ctx.patterns.signals) {
     if (pattern.test(expr))
@@ -194638,6 +194648,97 @@ var CLIENT_PACKAGE_SOURCES = new Set([
   "@barefootjs/client",
   "@barefootjs/client/runtime"
 ]);
+// ../jsx/src/debug.ts
+function escapeForIdBoundary(name) {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function makeIdCallRegex(name) {
+  return new RegExp(`(?:^|[^\\w$])${escapeForIdBoundary(name)}\\s*\\(`);
+}
+function buildLocalFunctionSetterMap(meta, setterToSignal) {
+  const setterPatterns = [...setterToSignal.keys()].map((s) => ({ name: s, re: makeIdCallRegex(s) }));
+  const bodies = new Map;
+  for (const fn of meta.localFunctions)
+    bodies.set(fn.name, fn.body);
+  for (const c of meta.localConstants) {
+    if (c.containsArrow && c.value)
+      bodies.set(c.name, c.value);
+  }
+  const fnNamePatterns = [...bodies.keys()].map((n) => ({ name: n, re: makeIdCallRegex(n) }));
+  const directSetters = new Map;
+  const directCalls = new Map;
+  for (const [name, body] of bodies) {
+    const setters = [];
+    for (const { name: setter, re } of setterPatterns) {
+      if (re.test(body))
+        setters.push(setter);
+    }
+    directSetters.set(name, setters);
+    const calls = [];
+    for (const { name: callee, re } of fnNamePatterns) {
+      if (callee !== name && re.test(body))
+        calls.push(callee);
+    }
+    directCalls.set(name, calls);
+  }
+  const resolve2 = (name, stack) => {
+    const out = [];
+    const seen = new Set;
+    for (const setter of directSetters.get(name) ?? []) {
+      if (!seen.has(setter)) {
+        out.push({ setter, chain: [] });
+        seen.add(setter);
+      }
+    }
+    for (const callee of directCalls.get(name) ?? []) {
+      if (stack.has(callee))
+        continue;
+      const sub = resolve2(callee, new Set([...stack, callee]));
+      for (const r of sub) {
+        if (!seen.has(r.setter)) {
+          out.push({ setter: r.setter, chain: [callee, ...r.chain] });
+          seen.add(r.setter);
+        }
+      }
+    }
+    return out;
+  };
+  const result = new Map;
+  for (const name of bodies.keys()) {
+    const resolved = resolve2(name, new Set([name]));
+    if (resolved.length > 0)
+      result.set(name, resolved);
+  }
+  return result;
+}
+function resolveSetters(handler, setterToSignal, fnSetters) {
+  const refs = [];
+  const seen = new Set;
+  const trimmed = handler.trim();
+  for (const [setter, signal] of setterToSignal) {
+    if (trimmed === setter || makeIdCallRegex(setter).test(handler)) {
+      if (!seen.has(setter)) {
+        refs.push({ setter, signal });
+        seen.add(setter);
+      }
+    }
+  }
+  for (const [fnName, resolutions] of fnSetters) {
+    if (trimmed === fnName || makeIdCallRegex(fnName).test(handler)) {
+      for (const r of resolutions) {
+        if (!seen.has(r.setter)) {
+          refs.push({
+            setter: r.setter,
+            signal: setterToSignal.get(r.setter) ?? null,
+            via: [fnName, ...r.chain]
+          });
+          seen.add(r.setter);
+        }
+      }
+    }
+  }
+  return refs;
+}
 // src/test-node.ts
 class TestNode {
   tag;
@@ -194650,8 +194751,24 @@ class TestNode {
   aria;
   dataState;
   events;
+  handlers;
   reactive;
   componentName;
+  get onClick() {
+    return this.handlers.click;
+  }
+  get onInput() {
+    return this.handlers.input;
+  }
+  get onChange() {
+    return this.handlers.change;
+  }
+  get onSubmit() {
+    return this.handlers.submit;
+  }
+  on(event) {
+    return this.handlers[event];
+  }
   constructor(data) {
     this.tag = data.tag;
     this.type = data.type;
@@ -194663,6 +194780,7 @@ class TestNode {
     this.aria = data.aria;
     this.dataState = data.dataState;
     this.events = data.events;
+    this.handlers = data.handlers;
     this.reactive = data.reactive;
     this.componentName = data.componentName;
   }
@@ -194710,41 +194828,52 @@ class TestNode {
 }
 
 // src/ir-to-test-node.ts
-function irNodeToTestNode(node, constantMap) {
+function irNodeToTestNode(node, constantMap, metadata) {
   const cmap = constantMap ?? new Map;
-  return convert(node, cmap);
+  const setterToSignal = new Map;
+  const fnSetters = new Map;
+  if (metadata) {
+    for (const s of metadata.signals) {
+      if (s.setter)
+        setterToSignal.set(s.setter, s.getter);
+    }
+    for (const [k, v] of buildLocalFunctionSetterMap(metadata, setterToSignal)) {
+      fnSetters.set(k, v);
+    }
+  }
+  return convert(node, { cmap, setterToSignal, fnSetters });
 }
-function convert(node, cmap) {
+function convert(node, ctx) {
   switch (node.type) {
     case "element":
-      return convertElement(node, cmap);
+      return convertElement(node, ctx);
     case "text":
       return convertText(node);
     case "expression":
       return convertExpression(node);
     case "conditional":
-      return convertConditional(node, cmap);
+      return convertConditional(node, ctx);
     case "loop":
-      return convertLoop(node, cmap);
+      return convertLoop(node, ctx);
     case "component":
-      return convertComponent(node, cmap);
+      return convertComponent(node, ctx);
     case "fragment":
-      return convertFragment(node, cmap);
+      return convertFragment(node, ctx);
     case "slot":
       return convertSlot(node);
     case "if-statement":
-      return convertIfStatement(node, cmap);
+      return convertIfStatement(node, ctx);
     case "provider":
-      return convertProvider(node, cmap);
+      return convertProvider(node, ctx);
     case "async":
-      return convertAsync(node, cmap);
+      return convertAsync(node, ctx);
     default: {
       const _exhaustive = node;
       throw new Error(`Unhandled IR node type: ${_exhaustive.type}`);
     }
   }
 }
-function convertElement(node, cmap) {
+function convertElement(node, ctx) {
   const props = {};
   const aria = {};
   let role = null;
@@ -194755,8 +194884,8 @@ function convertElement(node, cmap) {
     if (attr.name === "className" || attr.name === "class") {
       if (typeof value === "string") {
         const isDynamic = attr.value.kind === "expression" || attr.value.kind === "template" || attr.value.kind === "spread";
-        if (isDynamic && cmap.size > 0) {
-          const resolved = resolveClassValue(value, cmap);
+        if (isDynamic && ctx.cmap.size > 0) {
+          const resolved = resolveClassValue(value, ctx.cmap);
           if (resolved !== null) {
             classes = resolved.split(/\s+/).filter(Boolean);
             continue;
@@ -194787,7 +194916,12 @@ function convertElement(node, cmap) {
     props[attr.name] = value;
   }
   const events = node.events.map((e) => e.name);
-  const children = node.children.map((c) => convert(c, cmap));
+  const handlers = {};
+  for (const event of node.events) {
+    const refs = resolveSetters(event.handler, ctx.setterToSignal, ctx.fnSetters);
+    handlers[event.name] = refsToHandler(refs);
+  }
+  const children = node.children.map((c) => convert(c, ctx));
   return new TestNode({
     tag: node.tag,
     type: "element",
@@ -194799,6 +194933,7 @@ function convertElement(node, cmap) {
     aria,
     dataState,
     events,
+    handlers,
     reactive: false,
     componentName: null
   });
@@ -194815,6 +194950,7 @@ function convertText(node) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
@@ -194831,14 +194967,15 @@ function convertExpression(node) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: node.reactive,
     componentName: null
   });
 }
-function convertConditional(node, cmap) {
-  const children = [convert(node.whenTrue, cmap)];
+function convertConditional(node, ctx) {
+  const children = [convert(node.whenTrue, ctx)];
   if (node.whenFalse) {
-    children.push(convert(node.whenFalse, cmap));
+    children.push(convert(node.whenFalse, ctx));
   }
   return new TestNode({
     tag: null,
@@ -194851,12 +194988,13 @@ function convertConditional(node, cmap) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: node.reactive,
     componentName: null
   });
 }
-function convertLoop(node, cmap) {
-  const children = node.children.map((c) => convert(c, cmap));
+function convertLoop(node, ctx) {
+  const children = node.children.map((c) => convert(c, ctx));
   return new TestNode({
     tag: null,
     type: "loop",
@@ -194868,12 +195006,15 @@ function convertLoop(node, cmap) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
 }
-function convertComponent(node, cmap) {
+function convertComponent(node, ctx) {
   const props = {};
+  const events = [];
+  const handlers = {};
   for (const prop of node.props) {
     switch (prop.value.kind) {
       case "literal":
@@ -194894,8 +195035,13 @@ function convertComponent(node, cmap) {
         props[prop.name] = null;
         break;
     }
+    if (/^on[A-Z]/.test(prop.name) && prop.value.kind === "expression") {
+      const eventName = prop.name.charAt(2).toLowerCase() + prop.name.slice(3);
+      events.push(eventName);
+      handlers[eventName] = refsToHandler(resolveSetters(prop.value.expr, ctx.setterToSignal, ctx.fnSetters));
+    }
   }
-  const children = node.children.map((c) => convert(c, cmap));
+  const children = node.children.map((c) => convert(c, ctx));
   return new TestNode({
     tag: null,
     type: "component",
@@ -194906,13 +195052,14 @@ function convertComponent(node, cmap) {
     role: null,
     aria: {},
     dataState: null,
-    events: [],
+    events,
+    handlers,
     reactive: false,
     componentName: node.name
   });
 }
-function convertFragment(node, cmap) {
-  const children = node.children.map((c) => convert(c, cmap));
+function convertFragment(node, ctx) {
+  const children = node.children.map((c) => convert(c, ctx));
   return new TestNode({
     tag: null,
     type: "fragment",
@@ -194924,6 +195071,7 @@ function convertFragment(node, cmap) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
@@ -194940,14 +195088,15 @@ function convertSlot(_node) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
 }
-function convertIfStatement(node, cmap) {
-  const children = [convert(node.consequent, cmap)];
+function convertIfStatement(node, ctx) {
+  const children = [convert(node.consequent, ctx)];
   if (node.alternate) {
-    children.push(convert(node.alternate, cmap));
+    children.push(convert(node.alternate, ctx));
   }
   return new TestNode({
     tag: null,
@@ -194960,12 +195109,13 @@ function convertIfStatement(node, cmap) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
 }
-function convertProvider(node, cmap) {
-  const children = node.children.map((c) => convert(c, cmap));
+function convertProvider(node, ctx) {
+  const children = node.children.map((c) => convert(c, ctx));
   if (children.length === 1)
     return children[0];
   return new TestNode({
@@ -194979,12 +195129,13 @@ function convertProvider(node, cmap) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
 }
-function convertAsync(node, cmap) {
-  const children = node.children.map((c) => convert(c, cmap));
+function convertAsync(node, ctx) {
+  const children = node.children.map((c) => convert(c, ctx));
   return new TestNode({
     tag: null,
     type: "fragment",
@@ -194996,10 +195147,24 @@ function convertAsync(node, cmap) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });
 }
+function refsToHandler(refs) {
+  const setters = [];
+  const via = [];
+  for (const ref of refs) {
+    if (!setters.includes(ref.setter))
+      setters.push(ref.setter);
+    for (const v of ref.via ?? []) {
+      if (!via.includes(v))
+        via.push(v);
+    }
+  }
+  return { setters, via };
+}
 function resolveClassValue(value, cmap) {
   if (cmap.has(value)) {
     return cmap.get(value);
@@ -195175,7 +195340,7 @@ function renderToTest(source, filePath, componentName) {
   }
   const metadata = buildMetadata2(ctx);
   const constantMap = resolveConstants(metadata.localConstants);
-  const root = irNodeToTestNode(ir, constantMap);
+  const root = irNodeToTestNode(ir, constantMap, metadata);
   const signals = metadata.signals.map((s) => s.getter);
   const memos = metadata.memos.map((m) => m.name);
   const effects = metadata.effects.length;
@@ -195232,6 +195397,7 @@ function emptyResult(componentName, isClient, errors) {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null
   });

package/dist/ir-to-test-node.d.ts

@@ -3,7 +3,7 @@
  *
  * Recursively transforms each IRNode variant into a TestNode.
  */
-import type { IRNode } from '@barefootjs/jsx';
+import type { IRNode, IRMetadata } from '@barefootjs/jsx';
 import { TestNode } from './test-node';
-export declare function irNodeToTestNode(node: IRNode, constantMap?: Map<string, string>): TestNode;
+export declare function irNodeToTestNode(node: IRNode, constantMap?: Map<string, string>, metadata?: IRMetadata): TestNode;
 //# sourceMappingURL=ir-to-test-node.d.ts.map

package/dist/ir-to-test-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ir-to-test-node.d.ts","sourceRoot":"","sources":["../src/ir-to-test-node.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,MAAM,EAYP,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,QAAQ,CAG1F"}
+{"version":3,"file":"ir-to-test-node.d.ts","sourceRoot":"","sources":["../src/ir-to-test-node.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,MAAM,EAYN,UAAU,EACX,MAAM,iBAAiB,CAAA;AAMxB,OAAO,EAAE,QAAQ,EAAqB,MAAM,aAAa,CAAA;AAQzD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,UAAU,GAAG,QAAQ,CAajH"}

package/dist/test-node.d.ts

@@ -3,6 +3,20 @@
  *
  * Produced by converting the compiler IR into a flat, assertion-friendly shape.
  */
+/**
+ * Statically-resolved wiring for a single event handler.
+ *
+ * `setters`/`via` are populated only for handlers that reach raw signal setters
+ * declared in the component — directly (`onClick={() => setX(1)}`) or through
+ * local helper functions (`via`). Handlers backed by a library's
+ * property-access method — e.g. `@barefootjs/form`'s `name.handleInput` or
+ * `form.handleSubmit` — register the event but report empty `setters`/`via`,
+ * because the setter calls live inside the library, not the component body.
+ */
+export interface EventHandler {
+    setters: string[];
+    via: string[];
+}
 export interface TestNodeData {
     tag: string | null;
     type: 'element' | 'text' | 'expression' | 'conditional' | 'loop' | 'component' | 'fragment';
@@ -14,6 +28,7 @@ export interface TestNodeData {
     aria: Record<string, string>;
     dataState: string | null;
     events: string[];
+    handlers: Partial<Record<string, EventHandler>>;
     reactive: boolean;
     componentName: string | null;
 }
@@ -33,8 +48,15 @@ export declare class TestNode implements TestNodeData {
     aria: Record<string, string>;
     dataState: string | null;
     events: string[];
+    handlers: Partial<Record<string, EventHandler>>;
     reactive: boolean;
     componentName: string | null;
+    get onClick(): EventHandler | undefined;
+    get onInput(): EventHandler | undefined;
+    get onChange(): EventHandler | undefined;
+    get onSubmit(): EventHandler | undefined;
+    /** Returns the handler wired to `event`, or `undefined` if none — matching the shorthand getters. */
+    on(event: string): EventHandler | undefined;
     constructor(data: TestNodeData);
     /** Return the first descendant (or self) matching the query. */
     find(query: TestNodeQuery): TestNode | null;

package/dist/test-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-node.d.ts","sourceRoot":"","sources":["../src/test-node.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,CAAA;IAC3F,QAAQ,EAAE,QAAQ,EAAE,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAA;IAC9C,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,qBAAa,QAAS,YAAW,YAAY;IAC3C,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,EAAE,QAAQ,EAAE,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAA;IAC9C,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B,YAAY,IAAI,EAAE,YAAY,EAa7B;IAED,gEAAgE;IAChE,IAAI,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,GAAG,IAAI,CAO1C;IAED,4DAA4D;IAC5D,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,EAAE,CAIxC;IAED,wEAAwE;IACxE,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAOxC;IAED,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,cAAc;CAMvB"}
+{"version":3,"file":"test-node.d.ts","sourceRoot":"","sources":["../src/test-node.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,GAAG,EAAE,MAAM,EAAE,CAAA;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,CAAA;IAC3F,QAAQ,EAAE,QAAQ,EAAE,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAA;IAC9C,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAC/C,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,qBAAa,QAAS,YAAW,YAAY;IAC3C,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC1B,QAAQ,EAAE,QAAQ,EAAE,CAAA;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAA;IAC9C,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAA;IAC/C,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAE5B,IAAI,OAAO,IAAI,YAAY,GAAG,SAAS,CAA+B;IACtE,IAAI,OAAO,IAAI,YAAY,GAAG,SAAS,CAA+B;IACtE,IAAI,QAAQ,IAAI,YAAY,GAAG,SAAS,CAAgC;IACxE,IAAI,QAAQ,IAAI,YAAY,GAAG,SAAS,CAAgC;IAExE,qGAAqG;IACrG,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAE1C;IAED,YAAY,IAAI,EAAE,YAAY,EAc7B;IAED,gEAAgE;IAChE,IAAI,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,GAAG,IAAI,CAO1C;IAED,4DAA4D;IAC5D,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,EAAE,CAIxC;IAED,wEAAwE;IACxE,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAOxC;IAED,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,cAAc;CAMvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/test",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Test utilities for BarefootJS - IR-based component testing without a browser",
   "type": "module",
   "main": "./dist/index.js",
@@ -39,7 +39,7 @@
     "directory": "packages/test"
   },
   "dependencies": {
-    "@barefootjs/jsx": "0.2.0"
+    "@barefootjs/jsx": "0.4.0"
   },
   "devDependencies": {
     "typescript": "^5.0.0"

package/src/index.ts

@@ -6,7 +6,7 @@ export { renderToTest } from './render'
 export type { TestResult } from './render'
 
 export { TestNode } from './test-node'
-export type { TestNodeData, TestNodeQuery } from './test-node'
+export type { TestNodeData, TestNodeQuery, EventHandler } from './test-node'
 
 export { toStructure } from './structure'
 

package/src/ir-to-test-node.ts

@@ -17,42 +17,60 @@ import type {
   IRIfStatement,
   IRProvider,
   IRAsync,
+  IRMetadata,
 } from '@barefootjs/jsx'
+import { resolveSetters, buildLocalFunctionSetterMap, type SetterRef, type FnSetterResolution } from '@barefootjs/jsx'
 
 type IRAttribute = IRElement['attrs'][number]
 type AttrValue = IRAttribute['value']
 type TemplateAttr = Extract<AttrValue, { kind: 'template' }>
-import { TestNode } from './test-node'
+import { TestNode, type EventHandler } from './test-node'
 
-export function irNodeToTestNode(node: IRNode, constantMap?: Map<string, string>): TestNode {
+interface ConvertContext {
+  cmap: Map<string, string>
+  setterToSignal: Map<string, string>
+  fnSetters: Map<string, FnSetterResolution[]>
+}
+
+export function irNodeToTestNode(node: IRNode, constantMap?: Map<string, string>, metadata?: IRMetadata): TestNode {
   const cmap = constantMap ?? new Map<string, string>()
-  return convert(node, cmap)
+  const setterToSignal = new Map<string, string>()
+  const fnSetters = new Map<string, FnSetterResolution[]>()
+  if (metadata) {
+    for (const s of metadata.signals) {
+      if (s.setter) setterToSignal.set(s.setter, s.getter)
+    }
+    for (const [k, v] of buildLocalFunctionSetterMap(metadata, setterToSignal)) {
+      fnSetters.set(k, v)
+    }
+  }
+  return convert(node, { cmap, setterToSignal, fnSetters })
 }
 
-function convert(node: IRNode, cmap: Map<string, string>): TestNode {
+function convert(node: IRNode, ctx: ConvertContext): TestNode {
   switch (node.type) {
     case 'element':
-      return convertElement(node, cmap)
+      return convertElement(node, ctx)
     case 'text':
       return convertText(node)
     case 'expression':
       return convertExpression(node)
     case 'conditional':
-      return convertConditional(node, cmap)
+      return convertConditional(node, ctx)
     case 'loop':
-      return convertLoop(node, cmap)
+      return convertLoop(node, ctx)
     case 'component':
-      return convertComponent(node, cmap)
+      return convertComponent(node, ctx)
     case 'fragment':
-      return convertFragment(node, cmap)
+      return convertFragment(node, ctx)
     case 'slot':
       return convertSlot(node)
     case 'if-statement':
-      return convertIfStatement(node, cmap)
+      return convertIfStatement(node, ctx)
     case 'provider':
-      return convertProvider(node, cmap)
+      return convertProvider(node, ctx)
     case 'async':
-      return convertAsync(node, cmap)
+      return convertAsync(node, ctx)
     default: {
       const _exhaustive: never = node
       throw new Error(`Unhandled IR node type: ${(_exhaustive as IRNode).type}`)
@@ -64,7 +82,7 @@ function convert(node: IRNode, cmap: Map<string, string>): TestNode {
 // Element
 // ---------------------------------------------------------------------------
 
-function convertElement(node: IRElement, cmap: Map<string, string>): TestNode {
+function convertElement(node: IRElement, ctx: ConvertContext): TestNode {
   const props: Record<string, string | boolean | null> = {}
   const aria: Record<string, string> = {}
   let role: string | null = null
@@ -77,8 +95,8 @@ function convertElement(node: IRElement, cmap: Map<string, string>): TestNode {
     if (attr.name === 'className' || attr.name === 'class') {
       if (typeof value === 'string') {
         const isDynamic = attr.value.kind === 'expression' || attr.value.kind === 'template' || attr.value.kind === 'spread'
-        if (isDynamic && cmap.size > 0) {
-          const resolved = resolveClassValue(value, cmap)
+        if (isDynamic && ctx.cmap.size > 0) {
+          const resolved = resolveClassValue(value, ctx.cmap)
           if (resolved !== null) {
             classes = resolved.split(/\s+/).filter(Boolean)
             continue
@@ -110,7 +128,12 @@ function convertElement(node: IRElement, cmap: Map<string, string>): TestNode {
   }
 
   const events = node.events.map(e => e.name)
-  const children = node.children.map(c => convert(c, cmap))
+  const handlers: Record<string, EventHandler> = {}
+  for (const event of node.events) {
+    const refs = resolveSetters(event.handler, ctx.setterToSignal, ctx.fnSetters)
+    handlers[event.name] = refsToHandler(refs)
+  }
+  const children = node.children.map(c => convert(c, ctx))
 
   return new TestNode({
     tag: node.tag,
@@ -123,6 +146,7 @@ function convertElement(node: IRElement, cmap: Map<string, string>): TestNode {
     aria,
     dataState,
     events,
+    handlers,
     reactive: false,
     componentName: null,
   })
@@ -144,6 +168,7 @@ function convertText(node: IRText): TestNode {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -165,6 +190,7 @@ function convertExpression(node: IRExpression): TestNode {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: node.reactive,
     componentName: null,
   })
@@ -174,10 +200,10 @@ function convertExpression(node: IRExpression): TestNode {
 // Conditional
 // ---------------------------------------------------------------------------
 
-function convertConditional(node: IRConditional, cmap: Map<string, string>): TestNode {
-  const children: TestNode[] = [convert(node.whenTrue, cmap)]
+function convertConditional(node: IRConditional, ctx: ConvertContext): TestNode {
+  const children: TestNode[] = [convert(node.whenTrue, ctx)]
   if (node.whenFalse) {
-    children.push(convert(node.whenFalse, cmap))
+    children.push(convert(node.whenFalse, ctx))
   }
 
   return new TestNode({
@@ -191,6 +217,7 @@ function convertConditional(node: IRConditional, cmap: Map<string, string>): Tes
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: node.reactive,
     componentName: null,
   })
@@ -200,8 +227,8 @@ function convertConditional(node: IRConditional, cmap: Map<string, string>): Tes
 // Loop
 // ---------------------------------------------------------------------------
 
-function convertLoop(node: IRLoop, cmap: Map<string, string>): TestNode {
-  const children = node.children.map(c => convert(c, cmap))
+function convertLoop(node: IRLoop, ctx: ConvertContext): TestNode {
+  const children = node.children.map(c => convert(c, ctx))
 
   return new TestNode({
     tag: null,
@@ -214,6 +241,7 @@ function convertLoop(node: IRLoop, cmap: Map<string, string>): TestNode {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -223,8 +251,10 @@ function convertLoop(node: IRLoop, cmap: Map<string, string>): TestNode {
 // Component
 // ---------------------------------------------------------------------------
 
-function convertComponent(node: IRComponent, cmap: Map<string, string>): TestNode {
+function convertComponent(node: IRComponent, ctx: ConvertContext): TestNode {
   const props: Record<string, string | boolean | null> = {}
+  const events: string[] = []
+  const handlers: Record<string, EventHandler> = {}
   for (const prop of node.props) {
     switch (prop.value.kind) {
       case 'literal':
@@ -245,9 +275,22 @@ function convertComponent(node: IRComponent, cmap: Map<string, string>): TestNod
         props[prop.name] = null
         break
     }
+
+    // Component callback props that look like event handlers
+    // (`<Button onClick={...}>`). The parent IR sees these as props, but for
+    // wiring they behave like events: when the callback fires, which setters
+    // run. Keyed by the DOM-style event name (`onClick` -> `click`) so the
+    // shorthand getters and `on()` work the same as for native elements.
+    if (/^on[A-Z]/.test(prop.name) && prop.value.kind === 'expression') {
+      const eventName = prop.name.charAt(2).toLowerCase() + prop.name.slice(3)
+      events.push(eventName)
+      handlers[eventName] = refsToHandler(
+        resolveSetters(prop.value.expr, ctx.setterToSignal, ctx.fnSetters),
+      )
+    }
   }
 
-  const children = node.children.map(c => convert(c, cmap))
+  const children = node.children.map(c => convert(c, ctx))
 
   return new TestNode({
     tag: null,
@@ -259,7 +302,8 @@ function convertComponent(node: IRComponent, cmap: Map<string, string>): TestNod
     role: null,
     aria: {},
     dataState: null,
-    events: [],
+    events,
+    handlers,
     reactive: false,
     componentName: node.name,
   })
@@ -269,8 +313,8 @@ function convertComponent(node: IRComponent, cmap: Map<string, string>): TestNod
 // Fragment
 // ---------------------------------------------------------------------------
 
-function convertFragment(node: IRFragment, cmap: Map<string, string>): TestNode {
-  const children = node.children.map(c => convert(c, cmap))
+function convertFragment(node: IRFragment, ctx: ConvertContext): TestNode {
+  const children = node.children.map(c => convert(c, ctx))
 
   return new TestNode({
     tag: null,
@@ -283,6 +327,7 @@ function convertFragment(node: IRFragment, cmap: Map<string, string>): TestNode
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -304,6 +349,7 @@ function convertSlot(_node: IRSlot): TestNode {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -313,10 +359,10 @@ function convertSlot(_node: IRSlot): TestNode {
 // IfStatement
 // ---------------------------------------------------------------------------
 
-function convertIfStatement(node: IRIfStatement, cmap: Map<string, string>): TestNode {
-  const children: TestNode[] = [convert(node.consequent, cmap)]
+function convertIfStatement(node: IRIfStatement, ctx: ConvertContext): TestNode {
+  const children: TestNode[] = [convert(node.consequent, ctx)]
   if (node.alternate) {
-    children.push(convert(node.alternate, cmap))
+    children.push(convert(node.alternate, ctx))
   }
 
   return new TestNode({
@@ -330,6 +376,7 @@ function convertIfStatement(node: IRIfStatement, cmap: Map<string, string>): Tes
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -339,9 +386,9 @@ function convertIfStatement(node: IRIfStatement, cmap: Map<string, string>): Tes
 // Provider
 // ---------------------------------------------------------------------------
 
-function convertProvider(node: IRProvider, cmap: Map<string, string>): TestNode {
+function convertProvider(node: IRProvider, ctx: ConvertContext): TestNode {
   // Transparent — just pass through children
-  const children = node.children.map(c => convert(c, cmap))
+  const children = node.children.map(c => convert(c, ctx))
 
   if (children.length === 1) return children[0]
 
@@ -356,6 +403,7 @@ function convertProvider(node: IRProvider, cmap: Map<string, string>): TestNode
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -365,9 +413,9 @@ function convertProvider(node: IRProvider, cmap: Map<string, string>): TestNode
 // Async
 // ---------------------------------------------------------------------------
 
-function convertAsync(node: IRAsync, cmap: Map<string, string>): TestNode {
+function convertAsync(node: IRAsync, ctx: ConvertContext): TestNode {
   // Represent the resolved content as a fragment; tests assert on final state.
-  const children = node.children.map(c => convert(c, cmap))
+  const children = node.children.map(c => convert(c, ctx))
 
   return new TestNode({
     tag: null,
@@ -380,6 +428,7 @@ function convertAsync(node: IRAsync, cmap: Map<string, string>): TestNode {
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })
@@ -389,6 +438,18 @@ function convertAsync(node: IRAsync, cmap: Map<string, string>): TestNode {
 // Constant-based class value resolution
 // ---------------------------------------------------------------------------
 
+function refsToHandler(refs: SetterRef[]): EventHandler {
+  const setters: string[] = []
+  const via: string[] = []
+  for (const ref of refs) {
+    if (!setters.includes(ref.setter)) setters.push(ref.setter)
+    for (const v of ref.via ?? []) {
+      if (!via.includes(v)) via.push(v)
+    }
+  }
+  return { setters, via }
+}
+
 function resolveClassValue(value: string, cmap: Map<string, string>): string | null {
   // Simple identifier lookup
   if (cmap.has(value)) {

package/src/render.ts

@@ -52,7 +52,7 @@ export function renderToTest(source: string, filePath: string, componentName?: s
 
   const metadata = buildMetadata(ctx)
   const constantMap = resolveConstants(metadata.localConstants)
-  const root = irNodeToTestNode(ir, constantMap)
+  const root = irNodeToTestNode(ir, constantMap, metadata)
   const signals = metadata.signals.map(s => s.getter)
   const memos = metadata.memos.map(m => m.name)
   const effects = metadata.effects.length
@@ -119,6 +119,7 @@ function emptyResult(
     aria: {},
     dataState: null,
     events: [],
+    handlers: {},
     reactive: false,
     componentName: null,
   })

package/src/test-node.ts

@@ -4,6 +4,21 @@
  * Produced by converting the compiler IR into a flat, assertion-friendly shape.
  */
 
+/**
+ * Statically-resolved wiring for a single event handler.
+ *
+ * `setters`/`via` are populated only for handlers that reach raw signal setters
+ * declared in the component — directly (`onClick={() => setX(1)}`) or through
+ * local helper functions (`via`). Handlers backed by a library's
+ * property-access method — e.g. `@barefootjs/form`'s `name.handleInput` or
+ * `form.handleSubmit` — register the event but report empty `setters`/`via`,
+ * because the setter calls live inside the library, not the component body.
+ */
+export interface EventHandler {
+  setters: string[]
+  via: string[]
+}
+
 export interface TestNodeData {
   tag: string | null
   type: 'element' | 'text' | 'expression' | 'conditional' | 'loop' | 'component' | 'fragment'
@@ -15,6 +30,7 @@ export interface TestNodeData {
   aria: Record<string, string>
   dataState: string | null
   events: string[]
+  handlers: Partial<Record<string, EventHandler>>
   reactive: boolean
   componentName: string | null
 }
@@ -36,9 +52,20 @@ export class TestNode implements TestNodeData {
   aria: Record<string, string>
   dataState: string | null
   events: string[]
+  handlers: Partial<Record<string, EventHandler>>
   reactive: boolean
   componentName: string | null
 
+  get onClick(): EventHandler | undefined { return this.handlers.click }
+  get onInput(): EventHandler | undefined { return this.handlers.input }
+  get onChange(): EventHandler | undefined { return this.handlers.change }
+  get onSubmit(): EventHandler | undefined { return this.handlers.submit }
+
+  /** Returns the handler wired to `event`, or `undefined` if none — matching the shorthand getters. */
+  on(event: string): EventHandler | undefined {
+    return this.handlers[event]
+  }
+
   constructor(data: TestNodeData) {
     this.tag = data.tag
     this.type = data.type
@@ -50,6 +77,7 @@ export class TestNode implements TestNodeData {
     this.aria = data.aria
     this.dataState = data.dataState
     this.events = data.events
+    this.handlers = data.handlers
     this.reactive = data.reactive
     this.componentName = data.componentName
   }