Support methods on classes without explicit binding / arrow functions

packages/@ember/-internals/glimmer/lib/resolver.ts

@@ -91,6 +91,7 @@ export const BUILTIN_KEYWORD_HELPERS: Record<string, object> = {
   mut,
   readonly,
   unbound,
+  fn,
   '-hash': hash,
   '-each-in': eachIn,
   '-normalize-class': normalizeClassHelper,

packages/@glimmer-workspace/integration-tests/test/strict-mode-test.ts

@@ -987,6 +987,32 @@ class DynamicStrictModeTest extends RenderTest {
     this.assertStableRerender();
   }
 
+  @test
+  'calling a method on a class component works'() {
+    const Bar = defineComponent(
+      { on },
+      '<output>{{this.data.count}}</output><button {{on "click" this.increment}}>inc</button>',
+      {
+        definition: class extends GlimmerishComponent {
+          data = trackedObj({ count: 0 }) as { count: number };
+
+          increment() {
+            this.data.count++;
+          }
+        },
+      }
+    );
+
+    this.renderComponent(Bar);
+    this.assertHTML('<output>0</output><button>inc</button>');
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    this.rerender();
+
+    this.assertHTML('<output>1</output><button>inc</button>');
+    this.assertStableRerender();
+  }
+
   @test
   'Can use a dynamic modifier with a changing definition'(assert: Assert) {
     const modifier1 = defineSimpleModifier((element: Element) => {

packages/@glimmer/constants/lib/syscall-ops.ts

@@ -53,6 +53,7 @@ import type {
   VmJumpUnless,
   VmLoad,
   VmLog,
+  VmInvokableReference,
   VmMain,
   VmModifier,
   VmNot,
@@ -187,7 +188,8 @@ export const VM_IF_INLINE_OP = 109 satisfies VmIfInline;
 export const VM_NOT_OP = 110 satisfies VmNot;
 export const VM_GET_DYNAMIC_VAR_OP = 111 satisfies VmGetDynamicVar;
 export const VM_LOG_OP = 112 satisfies VmLog;
-export const VM_SYSCALL_SIZE = 113 satisfies VmSize;
+export const VM_INVOKABLE_REFERENCE_OP = 113 satisfies VmInvokableReference;
+export const VM_SYSCALL_SIZE = 114 satisfies VmSize;
 
 export function isOp(value: number): value is VmOp {
   return value >= 16;

packages/@glimmer/debug/lib/opcode-metadata.ts

@@ -47,6 +47,7 @@ import {
   VM_HAS_BLOCK_PARAMS_OP,
   VM_HELPER_OP,
   VM_IF_INLINE_OP,
+  VM_INVOKABLE_REFERENCE_OP,
   VM_INVOKE_COMPONENT_LAYOUT_OP,
   VM_INVOKE_STATIC_OP,
   VM_INVOKE_VIRTUAL_OP,
@@ -291,6 +292,12 @@ if (LOCAL_DEBUG) {
     stackChange: 0,
   };
 
+  METADATA[VM_INVOKABLE_REFERENCE_OP] = {
+    name: 'InvokableReference',
+    mnemonic: 'invref',
+    stackChange: 0,
+  };
+
   METADATA[VM_REIFY_U32_OP] = {
     name: 'ReifyU32',
     mnemonic: 'reifyload',

packages/@glimmer/interfaces/lib/vm-opcodes.d.ts

@@ -111,7 +111,7 @@ export type VmIfInline = 109;
 export type VmNot = 110;
 export type VmGetDynamicVar = 111;
 export type VmLog = 112;
-export type VmSize = 113;
+export type VmInvokableReference = 113;
 
 export type VmOp =
   | VmHelper
@@ -198,14 +198,16 @@ export type VmOp =
   | VmDidCreateElement
   | VmDidRenderLayout
   | VmDebugger
-  | VmSize
   | VmStaticComponentAttr
   | VmDynamicContentType
   | VmDynamicHelper
   | VmDynamicModifier
   | VmIfInline
   | VmNot
   | VmGetDynamicVar
-  | VmLog;
+  | VmLog
+  | VmInvokableReference;
 
 export type SomeVmOp = VmOp | VmMachineOp;
+
+export type VmSize = 114;

packages/@glimmer/opcode-compiler/lib/syntax/expressions.ts

@@ -10,6 +10,7 @@ import {
   VM_HAS_BLOCK_OP,
   VM_HAS_BLOCK_PARAMS_OP,
   VM_IF_INLINE_OP,
+  VM_INVOKABLE_REFERENCE_OP,
   VM_LOG_OP,
   VM_NOT_OP,
   VM_POP_FRAME_OP,
@@ -45,6 +46,7 @@ EXPRESSIONS.add(SexpOpcodes.Call, (op, [, expression, positional, named]) => {
     });
   } else {
     expr(op, expression);
+    op(VM_INVOKABLE_REFERENCE_OP);
     CallDynamic(op, positional, named);
   }
 });

packages/@glimmer/reference/lib/reference.ts

@@ -131,12 +131,11 @@ export function isInvokableRef(ref: Reference) {
 }
 
 export function createInvokableRef(inner: Reference): Reference {
-  const ref = createComputeRef(
-    () => valueForRef(inner),
-    (value) => updateRef(inner, value)
-  );
-  ref.debugLabel = inner.debugLabel;
-  ref[REFERENCE] = INVOKABLE;
+  const ref = new ReferenceImpl(INVOKABLE);
+
+  ref.compute = () => valueForRef(inner);
+  ref.update = (value) => updateRef(inner, value);
+  ref.debugLabel = inner.debugLabel === false ? undefined : inner.debugLabel;
 
   return ref;
 }
@@ -193,6 +192,61 @@ export function updateRef(_ref: Reference, value: unknown) {
   update(value);
 }
 
+function bindPrototypeMethod(parent: object, path: string, value: unknown): unknown {
+  if (
+    typeof value === 'function' &&
+    !Object.prototype.hasOwnProperty.call(parent, path) &&
+    Object.keys(value).length === 0
+  ) {
+    return value.bind(parent);
+  }
+
+  return value;
+}
+
+function readChildValue(
+  parent: unknown,
+  path: string,
+  getter: (obj: object, path: string) => unknown
+): unknown {
+  if (!isDict(parent)) return undefined;
+
+  const value = getter(parent, path);
+  return bindPrototypeMethod(parent, path, value);
+}
+
+function createUnboundChildRef(parentRef: ReferenceImpl, path: string): Reference {
+  const parent = valueForRef(parentRef);
+
+  if (!isDict(parent)) return UNDEFINED_REFERENCE;
+
+  const value = readChildValue(parent, path, (obj, key) => (obj as Record<string, unknown>)[key]);
+
+  return createUnboundRef(value, DEBUG && `${parentRef.debugLabel}.${path}`);
+}
+
+function createComputeChildRef(parentRef: ReferenceImpl, path: string): Reference {
+  const child = createComputeRef(
+    () => {
+      const parent = valueForRef(parentRef);
+      return readChildValue(parent, path, getProp);
+    },
+    (val) => {
+      const parent = valueForRef(parentRef);
+
+      if (isDict(parent)) {
+        return setProp(parent, path, val);
+      }
+    }
+  );
+
+  if (DEBUG) {
+    child.debugLabel = `${parentRef.debugLabel}.${path}`;
+  }
+
+  return child;
+}
+
 export function childRefFor(_parentRef: Reference, path: string): Reference {
   const parentRef = _parentRef as ReferenceImpl;
 
@@ -209,39 +263,10 @@ export function childRefFor(_parentRef: Reference, path: string): Reference {
     if (next) return next;
   }
 
-  if (type === UNBOUND) {
-    const parent = valueForRef(parentRef);
-
-    if (isDict(parent)) {
-      child = createUnboundRef(
-        (parent as Record<string, unknown>)[path],
-        DEBUG && `${parentRef.debugLabel}.${path}`
-      );
-    } else {
-      child = UNDEFINED_REFERENCE;
-    }
-  } else {
-    child = createComputeRef(
-      () => {
-        const parent = valueForRef(parentRef);
-
-        if (isDict(parent)) {
-          return getProp(parent, path);
-        }
-      },
-      (val) => {
-        const parent = valueForRef(parentRef);
-
-        if (isDict(parent)) {
-          return setProp(parent, path, val);
-        }
-      }
-    );
-
-    if (DEBUG) {
-      child.debugLabel = `${parentRef.debugLabel}.${path}`;
-    }
-  }
+  child =
+    type === UNBOUND
+      ? createUnboundChildRef(parentRef, path)
+      : createComputeChildRef(parentRef, path);
 
   children.set(path, child);
 

packages/@glimmer/runtime/lib/compiled/opcodes/vm.ts

@@ -20,6 +20,7 @@ import {
   VM_JUMP_IF_OP,
   VM_JUMP_UNLESS_OP,
   VM_LOAD_OP,
+  VM_INVOKABLE_REFERENCE_OP,
   VM_POP_DYNAMIC_SCOPE_OP,
   VM_POP_OP,
   VM_POP_SCOPE_OP,
@@ -46,6 +47,7 @@ import { toBool } from '@glimmer/global-context';
 import {
   createComputeRef,
   createConstRef,
+  createInvokableRef,
   createPrimitiveRef,
   FALSE_REFERENCE,
   isConstRef,
@@ -120,6 +122,12 @@ APPEND_OPCODES.add(VM_PRIMITIVE_REFERENCE_OP, (vm) => {
   stack.push(ref);
 });
 
+APPEND_OPCODES.add(VM_INVOKABLE_REFERENCE_OP, (vm) => {
+  let stack = vm.stack;
+  let ref = check(stack.pop(), CheckReference);
+  stack.push(createInvokableRef(ref));
+});
+
 APPEND_OPCODES.add(VM_DUP_OP, (vm, { op1: register, op2: offset }) => {
   let position = check(vm.fetchValue(check(register, CheckRegister)), CheckNumber) - offset;
   vm.stack.dup(position);

smoke-tests/scenarios/basic-test.ts

@@ -39,7 +39,7 @@ function basicTest(scenarios: Scenarios, appName: string) {
                   })
                 }
 
-                louder = () => {
+                louder() {
                   this.message = this.message + '!';
                 }