RFC#999 - {{hash}} as keyword

NullVoxPopuli · claude · NullVoxPopuli · commit 7ee05f958131 · 2026-04-07T21:54:47.000-04:00
Add hash to the built-in keywords map so it no longer needs to be
imported in strict-mode (gjs/gts) templates.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/@ember/template-compiler/lib/compile-options.ts b/packages/@ember/template-compiler/lib/compile-options.ts
@@ -1,4 +1,4 @@
-import { fn } from '@ember/helper';
+import { fn, hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { assert } from '@ember/debug';
 import {
@@ -26,6 +26,7 @@ export const RUNTIME_KEYWORDS_NAME = '__ember_keywords__';
 
 export const keywords: Record<string, unknown> = {
   fn,
+  hash,
   on,
 };
 
diff --git a/packages/@ember/template-compiler/lib/plugins/auto-import-builtins.ts b/packages/@ember/template-compiler/lib/plugins/auto-import-builtins.ts
@@ -30,11 +30,17 @@ export default function autoImportBuiltins(env: EmberASTPluginEnvironment): ASTP
         if (isFn(node, hasLocal)) {
           rewriteKeyword(env, node, 'fn', '@ember/helper');
         }
+        if (isHash(node, hasLocal)) {
+          rewriteKeyword(env, node, 'hash', '@ember/helper');
+        }
       },
       MustacheStatement(node: AST.MustacheStatement) {
         if (isFn(node, hasLocal)) {
           rewriteKeyword(env, node, 'fn', '@ember/helper');
         }
+        if (isHash(node, hasLocal)) {
+          rewriteKeyword(env, node, 'hash', '@ember/helper');
+        }
       },
     },
   };
@@ -68,3 +74,10 @@ function isFn(
 ): node is (AST.MustacheStatement | AST.SubExpression) & { path: AST.PathExpression } {
   return isPath(node.path) && node.path.original === 'fn' && !hasLocal('fn');
 }
+
+function isHash(
+  node: AST.MustacheStatement | AST.SubExpression,
+  hasLocal: (k: string) => boolean
+): node is (AST.MustacheStatement | AST.SubExpression) & { path: AST.PathExpression } {
+  return isPath(node.path) && node.path.original === 'hash' && !hasLocal('hash');
+}
diff --git a/packages/@glimmer-workspace/integration-tests/test/keywords/hash-runtime-test.ts b/packages/@glimmer-workspace/integration-tests/test/keywords/hash-runtime-test.ts
@@ -0,0 +1,139 @@
+import { castToBrowser } from '@glimmer/debug-util';
+import {
+  GlimmerishComponent,
+  jitSuite,
+  RenderTest,
+  test,
+} from '@glimmer-workspace/integration-tests';
+
+import { template } from '@ember/template-compiler/runtime';
+
+class KeywordHashRuntime extends RenderTest {
+  static suiteName = 'keyword helper: hash (runtime)';
+
+  @test
+  'explicit scope'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    let capture = (data: Record<string, unknown>) => {
+      receivedData = data;
+      assert.step('captured');
+    };
+
+    const compiled = template(
+      '<button {{on "click" (fn capture (hash greeting="hello"))}}>Click</button>',
+      {
+        strictMode: true,
+        scope: () => ({
+          capture,
+        }),
+      }
+    );
+
+    this.renderComponent(compiled);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+  }
+
+  @test
+  'implicit scope'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    let capture = (data: Record<string, unknown>) => {
+      receivedData = data;
+      assert.step('captured');
+    };
+
+    hide(capture);
+
+    const compiled = template(
+      '<button {{on "click" (fn capture (hash greeting="hello"))}}>Click</button>',
+      {
+        strictMode: true,
+        eval() {
+          return eval(arguments[0]);
+        },
+      }
+    );
+
+    this.renderComponent(compiled);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+  }
+
+  @test
+  'MustacheStatement with explicit scope'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    let capture = (data: Record<string, unknown>) => {
+      receivedData = data;
+      assert.step('captured');
+    };
+
+    const Child = template('<button {{on "click" (fn capture @data)}}>Click</button>', {
+      strictMode: true,
+      scope: () => ({ capture }),
+    });
+
+    const compiled = template('<Child @data={{hash greeting="hello"}} />', {
+      strictMode: true,
+      scope: () => ({
+        Child,
+      }),
+    });
+
+    this.renderComponent(compiled);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+  }
+
+  @test
+  'no eval and no scope'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    class Foo extends GlimmerishComponent {
+      static {
+        template(
+          '<button {{on "click" (fn this.capture (hash greeting="hello"))}}>Click</button>',
+          {
+            strictMode: true,
+            component: this,
+          }
+        );
+      }
+
+      capture = (data: Record<string, unknown>) => {
+        receivedData = data;
+        assert.step('captured');
+      };
+    }
+
+    this.renderComponent(Foo);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+  }
+}
+
+jitSuite(KeywordHashRuntime);
+
+/**
+ * This function is used to hide a variable from the transpiler, so that it
+ * doesn't get removed as "unused". It does not actually do anything with the
+ * variable, it just makes it be part of an expression that the transpiler
+ * won't remove.
+ *
+ * It's a bit of a hack, but it's necessary for testing.
+ *
+ * @param variable The variable to hide.
+ */
+const hide = (variable: unknown) => {
+  new Function(`return (${JSON.stringify(variable)});`);
+};
diff --git a/packages/@glimmer-workspace/integration-tests/test/keywords/hash-test.ts b/packages/@glimmer-workspace/integration-tests/test/keywords/hash-test.ts
@@ -0,0 +1,113 @@
+import { castToBrowser } from '@glimmer/debug-util';
+import { jitSuite, RenderTest, test } from '@glimmer-workspace/integration-tests';
+
+import { template } from '@ember/template-compiler/runtime';
+import { fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+
+class KeywordHash extends RenderTest {
+  static suiteName = 'keyword helper: hash';
+
+  @test
+  'it works'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    let capture = (data: Record<string, unknown>) => {
+      receivedData = data;
+      assert.step('captured');
+    };
+
+    const compiled = template(
+      '<button {{on "click" (fn capture (hash greeting="hello" farewell="goodbye"))}}>Click</button>',
+      {
+        strictMode: true,
+        scope: () => ({
+          capture,
+          fn,
+          hash,
+          on,
+        }),
+      }
+    );
+
+    this.renderComponent(compiled);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+    assert.strictEqual(receivedData?.['farewell'], 'goodbye');
+  }
+
+  @test
+  'it works with the runtime compiler'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    let capture = (data: Record<string, unknown>) => {
+      receivedData = data;
+      assert.step('captured');
+    };
+
+    hide(capture);
+
+    const compiled = template(
+      '<button {{on "click" (fn capture (hash greeting="hello"))}}>Click</button>',
+      {
+        strictMode: true,
+        eval() {
+          return eval(arguments[0]);
+        },
+      }
+    );
+
+    this.renderComponent(compiled);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+  }
+
+  @test
+  'it works as a MustacheStatement'(assert: Assert) {
+    let receivedData: Record<string, unknown> | undefined;
+
+    let capture = (data: Record<string, unknown>) => {
+      receivedData = data;
+      assert.step('captured');
+    };
+
+    const Child = template('<button {{on "click" (fn capture @data)}}>Click</button>', {
+      strictMode: true,
+      scope: () => ({ on, fn, capture }),
+    });
+
+    const compiled = template('<Child @data={{hash greeting="hello"}} />', {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        Child,
+      }),
+    });
+
+    this.renderComponent(compiled);
+
+    castToBrowser(this.element, 'div').querySelector('button')!.click();
+    assert.verifySteps(['captured']);
+    assert.strictEqual(receivedData?.['greeting'], 'hello');
+  }
+}
+
+jitSuite(KeywordHash);
+
+/**
+ * This function is used to hide a variable from the transpiler, so that it
+ * doesn't get removed as "unused". It does not actually do anything with the
+ * variable, it just makes it be part of an expression that the transpiler
+ * won't remove.
+ *
+ * It's a bit of a hack, but it's necessary for testing.
+ *
+ * @param variable The variable to hide.
+ */
+const hide = (variable: unknown) => {
+  new Function(`return (${JSON.stringify(variable)});`);
+};
diff --git a/smoke-tests/scenarios/basic-test.ts b/smoke-tests/scenarios/basic-test.ts
@@ -454,6 +454,40 @@ function basicTest(scenarios: Scenarios, appName: string) {
                 });
               });
             `,
+            'hash-as-keyword-test.gjs': `
+              import { module, test } from 'qunit';
+              import { setupRenderingTest } from 'ember-qunit';
+              import { render, click } from '@ember/test-helpers';
+
+              import Component from '@glimmer/component';
+              import { tracked } from '@glimmer/tracking';
+
+              class Demo extends Component {
+                @tracked data = null;
+                setData = (d) => this.data = d;
+
+                <template>
+                  <button {{on 'click' (fn this.setData (hash greeting="hello" farewell="goodbye"))}}>
+                    {{#if this.data}}
+                      {{this.data.greeting}} {{this.data.farewell}}
+                    {{else}}
+                      click me
+                    {{/if}}
+                  </button>
+                </template>
+              }
+
+              module('{{hash}} as keyword', function(hooks) {
+                setupRenderingTest(hooks);
+
+                test('it works', async function(assert) {
+                  await render(Demo);
+                  assert.dom('button').hasText('click me');
+                  await click('button');
+                  assert.dom('button').hasText('hello goodbye');
+                });
+              });
+            `,
           },
         },
       });
