fix(extraction): classify TS/JS class fields by value — properties, not methods (#808) (#809)

Every TS `public_field_definition` / JS `field_definition` extracted as a
method-kind node, so a plain field (`public fonts: Fonts;`) was reported
as callable: class shape was misrepresented, kind-based filtering was
defeated, and bare-name call resolution landed on data fields — typeorm's
boolean `ColumnMetadata::isArray` field was soaking up Array.isArray(...)
call edges (685 such wrong edges on typeorm alone).

Classification now follows the VALUE (classifyMethodNode hook, mirroring
resolveBody's callable detection): arrow-function / function-expression
fields and HOF-wrapped ones (`onScroll = throttle(() => {…})`) stay
methods with their bodies walked; everything else becomes a property that
keeps its type-annotation references edge, visibility, static-ness, and
decorators. Field initializers are now walked too (`history =
createHistory()` attributes the call to the property — previously
invisible), and JS class fields — whose name lives in the grammar's
`property` field, so they never extracted a symbol at all — now appear in
the graph (resolveName on the JS extractor).

With fields correctly kinded, `this.X` callback registration is re-enabled
for TS/JS (removed in #807 because field pseudo-methods made it mostly
wrong): `this.<member>` candidates resolve CLASS-SCOPED
(resolveThisMemberFnRef) — the target must be a function/method sharing
the from-symbol's qualified-name class prefix, same file, no fallback —
so `addEventListener("online", this.onOfflineStatusToggle)` and API-object
wiring (`{ mutateElement: this.mutateElement }`) produce registration
edges to the enclosing class's own method, while `this.fonts` (a
property) and inherited/unknown members yield no edge.

A/B (baseline = #807 main): excalidraw / typeorm / express — node counts
identical on all three; kinds shift method→property only (typeorm: exactly
7,406 swapped; excalidraw also corrects 5 anonymous-class mock fields that
were function-kind); every one of the 736 dropped call edges targeted a
node that is now a property (calls into data fields — verified 100%);
gains are retargets to real callables, initializer-call attributions, and
+74/+7 class-scoped this.X registration edges (sampled: addEventListener/
removeEventListener wiring, imperative-API method maps). Full suite green
(1386).

EXTRACTION_VERSION 19 → 20 (re-index to benefit).

Closes #808

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/extraction/extraction-version.ts

@@ -21,4 +21,4 @@
  * turns the re-index hint into noise — keep it honest (see CLAUDE.md, "Honesty
  * in the product is load-bearing").
  */
-export const EXTRACTION_VERSION = 19;
+export const EXTRACTION_VERSION = 20;

src/extraction/function-ref.ts

@@ -158,12 +158,13 @@ function cFamilySpec(extra?: { special?: string[]; addressOfOnly?: boolean }): F
   };
 }
 
-// NOTE: deliberately NO `member_expression` (`this.handleClick`) capture for
-// TS/JS. Class fields with type annotations are extracted as method-kind
-// nodes (pre-existing extractor behavior), so `this.X` value positions —
-// which in real code are mostly DATA reads (`setCursor(this.canvas)`) —
-// resolved to those field nodes and produced wrong "registration" edges
-// (excalidraw A/B finding). Revisit if/when TS field classification is fixed.
+// `this.handleClick` capture (member_expression) emits a `this.`-PREFIXED
+// candidate name: resolution scopes it to the enclosing symbol's class
+// (qualified-name prefix), so `this.fonts` (a property, post-#808) and
+// inherited/unknown members yield no edge, while same-class methods —
+// `btn.on('click', this.handleClick)`, the observer-registration idiom —
+// resolve precisely. Bare identifiers stay function-kind-only (a bare id can
+// never be a method value in JS).
 const TS_JS_SPEC: FnRefSpec = {
   idTypes: new Set(['identifier']),
   dispatch: new Map<string, CaptureRule>([
@@ -173,6 +174,7 @@ const TS_JS_SPEC: FnRefSpec = {
     ['pair', { mode: 'value', field: 'value' }],
     ['array', { mode: 'list' }],
   ]),
+  special: new Set(['member_expression']),
 };
 
 const PYTHON_SPEC: FnRefSpec = {
@@ -613,6 +615,18 @@ function normalizeSpecial(
       return name ? [{ name, node: sym }] : [];
     }
 
+    // `this.handleClick` (TS/JS) — object must be EXACTLY `this`. The name
+    // keeps the `this.` prefix so resolution can scope it to the enclosing
+    // class (see resolveThisMemberFnRef) instead of bare name-matching.
+    case 'member_expression': {
+      const obj = getChildByField(node, 'object');
+      const prop = getChildByField(node, 'property');
+      if (obj && prop && obj.type === 'this' && prop.type === 'property_identifier') {
+        return [{ name: `this.${getNodeText(prop, source)}`, node: prop }];
+      }
+      return [];
+    }
+
     // `self.handle_click` (Python) — object must be EXACTLY `self`.
     case 'attribute': {
       const obj = getChildByField(node, 'object');

src/extraction/languages/javascript.ts

@@ -1,10 +1,14 @@
 import { getNodeText, getChildByField } from '../tree-sitter-helpers';
 import type { LanguageExtractor } from '../tree-sitter-types';
+import { classifyTsClassMember } from './typescript';
 
 export const javascriptExtractor: LanguageExtractor = {
   functionTypes: ['function_declaration', 'arrow_function', 'function_expression'],
   classTypes: ['class_declaration'],
   methodTypes: ['method_definition', 'field_definition'],
+  // JS `field_definition` ≙ TS `public_field_definition`: plain fields are
+  // properties, function-valued fields are methods (#808).
+  classifyMethodNode: classifyTsClassMember,
   interfaceTypes: [],
   structTypes: [],
   enumTypes: [],
@@ -13,6 +17,17 @@ export const javascriptExtractor: LanguageExtractor = {
   callTypes: ['call_expression'],
   variableTypes: ['lexical_declaration', 'variable_declaration'],
   nameField: 'name',
+  // JS `field_definition` names its key the `property` field (TS's
+  // public_field_definition uses `name`). Without this, JS class fields —
+  // including arrow-function handler fields — extracted no name and produced
+  // no node at all (#808).
+  resolveName: (node, source) => {
+    if (node.type === 'field_definition') {
+      const prop = getChildByField(node, 'property');
+      if (prop) return getNodeText(prop, source);
+    }
+    return undefined;
+  },
   bodyField: 'body',
   resolveBody: (node, bodyField) => {
     // field_definition (arrow function class fields) nest the body inside

src/extraction/languages/typescript.ts

@@ -1,10 +1,48 @@
 import { getNodeText, getChildByField } from '../tree-sitter-helpers';
 import type { LanguageExtractor } from '../tree-sitter-types';
+import type { Node as SyntaxNode } from 'web-tree-sitter';
+
+/**
+ * A TS/JS class field (`public_field_definition` / `field_definition`) is a
+ * METHOD only when its value is callable — an arrow function, a function
+ * expression, or a HOF call wrapping one (`onScroll = throttle(() => {…})`),
+ * exactly mirroring what `resolveBody` below knows how to walk. Everything
+ * else (`public fonts: Fonts;`, `count = 0`, `static defaults = {…}`) is a
+ * PROPERTY. Previously every field extracted as method-kind (#808), which
+ * misrepresented class shape and defeated kind-based filtering — the reason
+ * #756's function-ref resolution had to restrict TS/JS bare identifiers to
+ * function targets.
+ */
+export function classifyTsClassMember(node: SyntaxNode): 'method' | 'property' {
+  if (node.type !== 'public_field_definition' && node.type !== 'field_definition') {
+    return 'method'; // method_definition, getters/setters — untouched
+  }
+  for (let i = 0; i < node.namedChildCount; i++) {
+    const child = node.namedChild(i);
+    if (!child) continue;
+    if (child.type === 'arrow_function' || child.type === 'function_expression') {
+      return 'method';
+    }
+    if (child.type === 'call_expression') {
+      const args = getChildByField(child, 'arguments');
+      if (args) {
+        for (let j = 0; j < args.namedChildCount; j++) {
+          const arg = args.namedChild(j);
+          if (arg && (arg.type === 'arrow_function' || arg.type === 'function_expression')) {
+            return 'method';
+          }
+        }
+      }
+    }
+  }
+  return 'property';
+}
 
 export const typescriptExtractor: LanguageExtractor = {
   functionTypes: ['function_declaration', 'arrow_function', 'function_expression'],
   classTypes: ['class_declaration', 'abstract_class_declaration'],
   methodTypes: ['method_definition', 'public_field_definition'],
+  classifyMethodNode: classifyTsClassMember,
   interfaceTypes: ['interface_declaration'],
   structTypes: [],
   enumTypes: ['enum_declaration'],

src/extraction/tree-sitter-types.ts

@@ -180,6 +180,15 @@ export interface LanguageExtractor {
    */
   classifyClassNode?: (node: SyntaxNode) => 'class' | 'struct' | 'enum' | 'interface' | 'trait';
 
+  /**
+   * Classify a methodTypes node when the grammar reuses one node type for
+   * both callable and data members (#808): TS/JS class FIELDS
+   * (`public_field_definition` / `field_definition`) are methods only when
+   * their value is callable (`onClick = () => {}`); a plain field
+   * (`public fonts: Fonts;`, `count = 0`) is a property. Default: 'method'.
+   */
+  classifyMethodNode?: (node: SyntaxNode) => 'method' | 'property';
+
   /**
    * Resolve the body node for a function/method/class when it's not a child field.
    * (e.g. Dart puts function_body as a sibling, not a child.)

src/extraction/tree-sitter.ts

@@ -473,11 +473,14 @@ export class TreeSitterExtractor {
       // variable; see FnRefSpec.ungatedModes). Local initializers and
       // everything else require a same-file/import match.
       const skipGate = ungated?.has(c.mode) === true && atFileScope;
-      // Qualified C++ member-pointers (`Widget::on_click`) gate on the member
-      // name; everything else on the full name.
-      const gateName = c.name.includes('::')
-        ? c.name.slice(c.name.lastIndexOf('::') + 2)
-        : c.name;
+      // Qualified C++ member-pointers (`Widget::on_click`) and TS/JS
+      // `this.<member>` candidates gate on the member name; everything else
+      // on the full name.
+      const gateName = c.name.startsWith('this.')
+        ? c.name.slice(5)
+        : c.name.includes('::')
+          ? c.name.slice(c.name.lastIndexOf('::') + 2)
+          : c.name;
       if (!skipGate && !definedHere.has(gateName) && !importedNames.has(gateName)) {
         continue;
       }
@@ -564,8 +567,30 @@ export class TreeSitterExtractor {
     }
     // Check for method declarations (only if not already handled by functionTypes)
     else if (this.extractor.methodTypes.includes(nodeType)) {
-      this.extractMethod(node);
-      skipChildren = true; // extractMethod visits children via visitFunctionBody
+      // TS/JS class fields parse as a methodTypes node; only function-valued
+      // fields are methods — a plain field (`public fonts: Fonts;`) is a
+      // property (#808). classifyMethodNode is absent for other languages.
+      if (this.extractor.classifyMethodNode?.(node) === 'property') {
+        const propNode = this.extractProperty(node);
+        // Walk the initializer so its calls/instantiations attribute to the
+        // property (`history = createHistory()` → history calls
+        // createHistory). The old field-as-method path never walked these
+        // (resolveBody only resolves function bodies), so this is additive.
+        const valueNode = getChildByField(node, 'value');
+        if (propNode && valueNode) {
+          this.nodeStack.push(propNode.id);
+          this.visitFunctionBody(valueNode, '');
+          this.nodeStack.pop();
+        }
+        // A field initializer can also register callbacks
+        // (`static handlers = { click: onClick }`) — scan it for
+        // function-as-value candidates (capture-only, halts at functions).
+        this.scanFnRefSubtree(node, 0);
+        skipChildren = true;
+      } else {
+        this.extractMethod(node);
+        skipChildren = true; // extractMethod visits children via visitFunctionBody
+      }
     }
     // Check for interface/protocol/trait declarations
     else if (this.extractor.interfaceTypes.includes(nodeType)) {
@@ -1302,27 +1327,41 @@ export class TreeSitterExtractor {
    * Extract a class property declaration (e.g. C# `public string Name { get; set; }`).
    * Extracts as 'property' kind node inside the owning class.
    */
-  private extractProperty(node: SyntaxNode): void {
-    if (!this.extractor) return;
+  private extractProperty(node: SyntaxNode): Node | null {
+    if (!this.extractor) return null;
 
     const docstring = getPrecedingDocstring(node, this.source);
     const visibility = this.extractor.getVisibility?.(node);
     const isStatic = this.extractor.isStatic?.(node) ?? false;
 
     const hookName = this.extractor.extractPropertyName?.(node, this.source);
+    // JS `field_definition` names its key the `property` field (TS uses
+    // `name`) — try both before the generic identifier scan (#808).
     const nameNode = hookName
       ? null
-      : getChildByField(node, 'name') || node.namedChildren.find(c => c.type === 'identifier');
+      : getChildByField(node, 'name') ||
+        getChildByField(node, 'property') ||
+        node.namedChildren.find(c => c.type === 'identifier');
     const name = hookName ?? (nameNode ? getNodeText(nameNode, this.source) : null);
-    if (!name) return;
+    if (!name) return null;
 
-    // Get property type from the type child (first named child that isn't modifier or identifier)
-    const typeNode = node.namedChildren.find(
-      c => c.type !== 'modifier' && c.type !== 'modifiers'
-        && c.type !== 'identifier' && c.type !== 'accessor_list'
-        && c.type !== 'accessors' && c.type !== 'equals_value_clause'
-    );
-    const typeText = typeNode ? getNodeText(typeNode, this.source) : undefined;
+    // Get property type. TS/JS field definitions carry an explicit `type`
+    // field (a `type_annotation`); their other named children are the name
+    // and the initializer VALUE, which the generic finder below would
+    // wrongly pick — so fields use the type field only (#808). Other
+    // languages (C# property_declaration) keep the generic scan.
+    const isTsJsField =
+      node.type === 'public_field_definition' || node.type === 'field_definition';
+    const typeNode = isTsJsField
+      ? getChildByField(node, 'type')
+      : node.namedChildren.find(
+          c => c.type !== 'modifier' && c.type !== 'modifiers'
+            && c.type !== 'identifier' && c.type !== 'accessor_list'
+            && c.type !== 'accessors' && c.type !== 'equals_value_clause'
+        );
+    const typeText = typeNode
+      ? getNodeText(typeNode, this.source).replace(/^:\s*/, '')
+      : undefined;
     const signature = typeText ? `${typeText} ${name}` : name;
 
     const propNode = this.createNode('property', name, node, {
@@ -1341,6 +1380,7 @@ export class TreeSitterExtractor {
       // `type_annotation` children; the C# branch walks the `type` field.
       this.extractTypeAnnotations(node, propNode.id);
     }
+    return propNode;
   }
 
   /**