Skip to content

Commit 09afb95

Browse files
NullVoxPopuliclaude
NullVoxPopuli
and
claude
committed
RFC#1000 - {{array}} as keyword
Add array 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) <[email protected]>
1 parent 64946ff commit 09afb95

5 files changed

Lines changed: 300 additions & 2 deletions

File tree

‎packages/@ember/template-compiler/lib/compile-options.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fn, hash } from '@ember/helper';
1+
import { array, fn, hash } from '@ember/helper';
22
import { on } from '@ember/modifier';
33
import { assert } from '@ember/debug';
44
import {
@@ -25,6 +25,7 @@ function malformedComponentLookup(string: string) {
2525
export const RUNTIME_KEYWORDS_NAME = '__ember_keywords__';
2626

2727
export const keywords: Record<string, unknown> = {
28+
array,
2829
fn,
2930
hash,
3031
on,

‎packages/@ember/template-compiler/lib/plugins/auto-import-builtins.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ export default function autoImportBuiltins(env: EmberASTPluginEnvironment): ASTP
2727
}
2828
},
2929
SubExpression(node: AST.SubExpression) {
30+
if (isArray(node, hasLocal)) {
31+
rewriteKeyword(env, node, 'array', '@ember/helper');
32+
}
3033
if (isFn(node, hasLocal)) {
3134
rewriteKeyword(env, node, 'fn', '@ember/helper');
3235
}
@@ -35,6 +38,9 @@ export default function autoImportBuiltins(env: EmberASTPluginEnvironment): ASTP
3538
}
3639
},
3740
MustacheStatement(node: AST.MustacheStatement) {
41+
if (isArray(node, hasLocal)) {
42+
rewriteKeyword(env, node, 'array', '@ember/helper');
43+
}
3844
if (isFn(node, hasLocal)) {
3945
rewriteKeyword(env, node, 'fn', '@ember/helper');
4046
}
@@ -68,6 +74,13 @@ function isOn(
6874
return isPath(node.path) && node.path.original === 'on' && !hasLocal('on');
6975
}
7076

77+
function isArray(
78+
node: AST.MustacheStatement | AST.SubExpression,
79+
hasLocal: (k: string) => boolean
80+
): node is (AST.MustacheStatement | AST.SubExpression) & { path: AST.PathExpression } {
81+
return isPath(node.path) && node.path.original === 'array' && !hasLocal('array');
82+
}
83+
7184
function isFn(
7285
node: AST.MustacheStatement | AST.SubExpression,
7386
hasLocal: (k: string) => boolean

‎packages/@glimmer-workspace/integration-tests/test/keywords/array-runtime-test.ts‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { castToBrowser } from '@glimmer/debug-util';
2+
import {
3+
GlimmerishComponent,
4+
jitSuite,
5+
RenderTest,
6+
test,
7+
} from '@glimmer-workspace/integration-tests';
8+
9+
import { template } from '@ember/template-compiler/runtime';
10+
11+
class KeywordArrayRuntime extends RenderTest {
12+
static suiteName = 'keyword helper: array (runtime)';
13+
14+
@test
15+
'explicit scope'(assert: Assert) {
16+
let receivedData: unknown[] | undefined;
17+
18+
let capture = (data: unknown[]) => {
19+
receivedData = data;
20+
assert.step('captured');
21+
};
22+
23+
const compiled = template(
24+
'<button {{on "click" (fn capture (array "hello" "goodbye"))}}>Click</button>',
25+
{
26+
strictMode: true,
27+
scope: () => ({
28+
capture,
29+
}),
30+
}
31+
);
32+
33+
this.renderComponent(compiled);
34+
35+
castToBrowser(this.element, 'div').querySelector('button')!.click();
36+
assert.verifySteps(['captured']);
37+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
38+
}
39+
40+
@test
41+
'implicit scope'(assert: Assert) {
42+
let receivedData: unknown[] | undefined;
43+
44+
let capture = (data: unknown[]) => {
45+
receivedData = data;
46+
assert.step('captured');
47+
};
48+
49+
hide(capture);
50+
51+
const compiled = template(
52+
'<button {{on "click" (fn capture (array "hello" "goodbye"))}}>Click</button>',
53+
{
54+
strictMode: true,
55+
eval() {
56+
return eval(arguments[0]);
57+
},
58+
}
59+
);
60+
61+
this.renderComponent(compiled);
62+
63+
castToBrowser(this.element, 'div').querySelector('button')!.click();
64+
assert.verifySteps(['captured']);
65+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
66+
}
67+
68+
@test
69+
'MustacheStatement with explicit scope'(assert: Assert) {
70+
let receivedData: unknown[] | undefined;
71+
72+
let capture = (data: unknown[]) => {
73+
receivedData = data;
74+
assert.step('captured');
75+
};
76+
77+
const Child = template('<button {{on "click" (fn capture @items)}}>Click</button>', {
78+
strictMode: true,
79+
scope: () => ({ capture }),
80+
});
81+
82+
const compiled = template('<Child @items={{array "hello" "goodbye"}} />', {
83+
strictMode: true,
84+
scope: () => ({
85+
Child,
86+
}),
87+
});
88+
89+
this.renderComponent(compiled);
90+
91+
castToBrowser(this.element, 'div').querySelector('button')!.click();
92+
assert.verifySteps(['captured']);
93+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
94+
}
95+
96+
@test
97+
'no eval and no scope'(assert: Assert) {
98+
let receivedData: unknown[] | undefined;
99+
100+
class Foo extends GlimmerishComponent {
101+
static {
102+
template(
103+
'<button {{on "click" (fn this.capture (array "hello" "goodbye"))}}>Click</button>',
104+
{
105+
strictMode: true,
106+
component: this,
107+
}
108+
);
109+
}
110+
111+
capture = (data: unknown[]) => {
112+
receivedData = data;
113+
assert.step('captured');
114+
};
115+
}
116+
117+
this.renderComponent(Foo);
118+
119+
castToBrowser(this.element, 'div').querySelector('button')!.click();
120+
assert.verifySteps(['captured']);
121+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
122+
}
123+
}
124+
125+
jitSuite(KeywordArrayRuntime);
126+
127+
/**
128+
* This function is used to hide a variable from the transpiler, so that it
129+
* doesn't get removed as "unused". It does not actually do anything with the
130+
* variable, it just makes it be part of an expression that the transpiler
131+
* won't remove.
132+
*
133+
* It's a bit of a hack, but it's necessary for testing.
134+
*
135+
* @param variable The variable to hide.
136+
*/
137+
const hide = (variable: unknown) => {
138+
new Function(`return (${JSON.stringify(variable)});`);
139+
};

‎packages/@glimmer-workspace/integration-tests/test/keywords/array-test.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { castToBrowser } from '@glimmer/debug-util';
2+
import { jitSuite, RenderTest, test } from '@glimmer-workspace/integration-tests';
3+
4+
import { template } from '@ember/template-compiler/runtime';
5+
import { array, fn } from '@ember/helper';
6+
import { on } from '@ember/modifier';
7+
8+
class KeywordArray extends RenderTest {
9+
static suiteName = 'keyword helper: array';
10+
11+
@test
12+
'it works'(assert: Assert) {
13+
let receivedData: unknown[] | undefined;
14+
15+
let capture = (data: unknown[]) => {
16+
receivedData = data;
17+
assert.step('captured');
18+
};
19+
20+
const compiled = template(
21+
'<button {{on "click" (fn capture (array "hello" "goodbye"))}}>Click</button>',
22+
{
23+
strictMode: true,
24+
scope: () => ({
25+
capture,
26+
fn,
27+
array,
28+
on,
29+
}),
30+
}
31+
);
32+
33+
this.renderComponent(compiled);
34+
35+
castToBrowser(this.element, 'div').querySelector('button')!.click();
36+
assert.verifySteps(['captured']);
37+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
38+
}
39+
40+
@test
41+
'it works with the runtime compiler'(assert: Assert) {
42+
let receivedData: unknown[] | undefined;
43+
44+
let capture = (data: unknown[]) => {
45+
receivedData = data;
46+
assert.step('captured');
47+
};
48+
49+
hide(capture);
50+
51+
const compiled = template(
52+
'<button {{on "click" (fn capture (array "hello" "goodbye"))}}>Click</button>',
53+
{
54+
strictMode: true,
55+
eval() {
56+
return eval(arguments[0]);
57+
},
58+
}
59+
);
60+
61+
this.renderComponent(compiled);
62+
63+
castToBrowser(this.element, 'div').querySelector('button')!.click();
64+
assert.verifySteps(['captured']);
65+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
66+
}
67+
68+
@test
69+
'it works as a MustacheStatement'(assert: Assert) {
70+
let receivedData: unknown[] | undefined;
71+
72+
let capture = (data: unknown[]) => {
73+
receivedData = data;
74+
assert.step('captured');
75+
};
76+
77+
const Child = template('<button {{on "click" (fn capture @items)}}>Click</button>', {
78+
strictMode: true,
79+
scope: () => ({ on, fn, capture }),
80+
});
81+
82+
const compiled = template('<Child @items={{array "hello" "goodbye"}} />', {
83+
strictMode: true,
84+
scope: () => ({
85+
array,
86+
Child,
87+
}),
88+
});
89+
90+
this.renderComponent(compiled);
91+
92+
castToBrowser(this.element, 'div').querySelector('button')!.click();
93+
assert.verifySteps(['captured']);
94+
assert.deepEqual(receivedData, ['hello', 'goodbye']);
95+
}
96+
}
97+
98+
jitSuite(KeywordArray);
99+
100+
/**
101+
* This function is used to hide a variable from the transpiler, so that it
102+
* doesn't get removed as "unused". It does not actually do anything with the
103+
* variable, it just makes it be part of an expression that the transpiler
104+
* won't remove.
105+
*
106+
* It's a bit of a hack, but it's necessary for testing.
107+
*
108+
* @param variable The variable to hide.
109+
*/
110+
const hide = (variable: unknown) => {
111+
new Function(`return (${JSON.stringify(variable)});`);
112+
};

‎smoke-tests/scenarios/basic-test.ts‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,7 @@ function basicTest(scenarios: Scenarios, appName: string) {
516516
import { setupRenderingTest } from 'ember-qunit';
517517
import { render } from '@ember/test-helpers';
518518
519-
module('{{hash}} as keyword', function(hooks) {
519+
module('{{hash}} as keyword (shadowed)', function(hooks) {
520520
setupRenderingTest(hooks);
521521
522522
test('it works', async function(assert) {
@@ -526,6 +526,39 @@ function basicTest(scenarios: Scenarios, appName: string) {
526526
});
527527
});
528528
`,
529+
'array-as-keyword-test.gjs': `
530+
import { module, test } from 'qunit';
531+
import { setupRenderingTest } from 'ember-qunit';
532+
import { render } from '@ember/test-helpers';
533+
534+
module('{{array}} as keyword', function(hooks) {
535+
setupRenderingTest(hooks);
536+
537+
test('it works', async function(assert) {
538+
await render(
539+
<template>
540+
{{JSON.stringify (array "hello" "goodbye")}}
541+
</template>
542+
);
543+
assert.dom().hasText('["hello", "goodbye"]');
544+
});
545+
});
546+
`,
547+
'array-as-keyword-shadowed-test.gjs': `
548+
import { module, test } from 'qunit';
549+
import { setupRenderingTest } from 'ember-qunit';
550+
import { render } from '@ember/test-helpers';
551+
552+
module('{{array}} as keyword (shadowed)', function(hooks) {
553+
setupRenderingTest(hooks);
554+
555+
test('it works', async function(assert) {
556+
const array = (data) => data;
557+
await render(<template>{{array "hello"}}</template>);
558+
assert.dom().hasText('hello');
559+
});
560+
});
561+
`,
529562
},
530563
},
531564
});

0 commit comments

Comments
 (0)