[bugfix] allow modifier to resolve built-ins like on

partially fixes #19869

Due to [GlimmerVM's assertion][1], this still does not fix the issue in
strict mode. We also can't work around the strict mode limitation with
an AST transform since Glimmer's transforms run first.

[1]: https://github.com/glimmerjs/glimmer-vm/blob/2ddbbc4a9b97db4f326c4d92021f089c464ab093/packages/%40glimmer/compiler/lib/passes/1-normalization/keywords/utils/curry.ts#L53

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

@@ -151,7 +151,7 @@ const BUILTIN_KEYWORD_MODIFIERS: Record<string, ModifierDefinitionState> = {
   action: actionModifier,
 };
 
-const BUILTIN_MODIFIERS: Record<string, object> = {
+export const BUILTIN_MODIFIERS: Record<string, object> = {
   ...BUILTIN_KEYWORD_MODIFIERS,
   on,
 };

packages/@ember/-internals/glimmer/lib/setup-registry.ts

@@ -12,6 +12,7 @@ import { Renderer } from './renderer';
 import OutletTemplate from './templates/outlet';
 import RootTemplate from './templates/root';
 import OutletView from './views/outlet';
+import { BUILTIN_MODIFIERS } from './resolver';
 
 export function setupApplicationRegistry(registry: Registry): void {
   // because we are using injections we can't use instantiate false
@@ -57,4 +58,8 @@ export function setupEngineRegistry(registry: Registry): void {
   if (!ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) {
     registry.register(P`component:-default`, Component);
   }
+
+  for (let [name, modifier] of Object.entries(BUILTIN_MODIFIERS)) {
+    registry.register(`modifier:${name}`, modifier, { instantiate: false });
+  }
 }

packages/@ember/-internals/glimmer/tests/integration/components/strict-mode-test.js

@@ -258,6 +258,24 @@ moduleFor(
       this.render('<Foo/>');
       this.click('button');
     }
+
+    '@test Can use `on` inside conditional with modifier helper'(assert) {
+      assert.expect(1);
+
+      let handleClick = (value) => {
+        assert.equal(value, 123);
+      };
+
+      let Foo = defineComponent(
+        { on, fn, handleClick },
+        '<button {{(if @handleClick (modifier "on" "click" (fn handleClick 123)))}}>Click</button>'
+      );
+
+      this.registerComponent('foo', { ComponentClass: Foo });
+
+      this.render('<Foo/>');
+      this.click('button');
+    }
   }
 );
 

packages/@ember/-internals/glimmer/tests/integration/custom-modifier-manager-test.js

@@ -476,6 +476,28 @@ moduleFor(
       this.assertStableRerender();
     }
 
+    '@test can resolve built-in modifiers'(assert) {
+      let wasCalled = false;
+      let id = 'wow-what-an-original-id';
+      this.render(
+        `<div id='${id}' {{(if this.isModifying (modifier "on" "click" this.callAction))}} />`,
+        {
+          callAction: () => {
+            wasCalled = true;
+          },
+        }
+      );
+
+      let element = document.querySelector(`#${id}`);
+      element.click();
+
+      assert.false(wasCalled, 'modifier should not be set up');
+
+      runTask(() => set(this.context, 'isModifying', true));
+      element.click();
+      assert.true(wasCalled, 'on modifier can be used');
+    }
+
     '@test Cannot dynamically resolve a modifier'(assert) {
       this.registerModifier(
         'replace',

packages/ember-template-compiler/lib/plugins/transform-resolutions.ts

@@ -5,6 +5,7 @@ import { print } from '@glimmer/syntax';
 import calculateLocationDisplay from '../system/calculate-location-display';
 import type { EmberASTPluginEnvironment } from '../types';
 import { isPath, isStringLiteral, trackLocals } from './utils';
+import { BUILTIN_MODIFIERS } from '@ember/-internals/glimmer/resolver';
 
 /**
  @module ember