Skip to content

Commit a9dec1b

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) <noreply@anthropic.com>
1 parent a6513b6 commit a9dec1b

File tree

5 files changed

+365
-1
lines changed

5 files changed

+365
-1
lines changed

‎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 } from '@ember/helper';
1+
import { array, fn } 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
on,
3031
};

‎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,11 +27,17 @@ 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
}
3336
},
3437
MustacheStatement(node: AST.MustacheStatement) {
38+
if (isArray(node, hasLocal)) {
39+
rewriteKeyword(env, node, 'array', '@ember/helper');
40+
}
3541
if (isFn(node, hasLocal)) {
3642
rewriteKeyword(env, node, 'fn', '@ember/helper');
3743
}
@@ -62,6 +68,13 @@ function isOn(
6268
return isPath(node.path) && node.path.original === 'on' && !hasLocal('on');
6369
}
6470

71+
function isArray(
72+
node: AST.MustacheStatement | AST.SubExpression,
73+
hasLocal: (k: string) => boolean
74+
): node is (AST.MustacheStatement | AST.SubExpression) & { path: AST.PathExpression } {
75+
return isPath(node.path) && node.path.original === 'array' && !hasLocal('array');
76+
}
77+
6578
function isFn(
6679
node: AST.MustacheStatement | AST.SubExpression,
6780
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: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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+
@test
98+
'can be shadowed'(assert: Assert) {
99+
let array = (..._args: unknown[]) => {
100+
assert.step('shadowed:success');
101+
return ['shadowed'];
102+
};
103+
104+
const compiled = template(
105+
'<button {{on "click" (fn capture (array "hello"))}}>Click</button>',
106+
{
107+
strictMode: true,
108+
scope: () => ({ array, capture: () => {}, fn, on }),
109+
}
110+
);
111+
112+
this.renderComponent(compiled);
113+
assert.verifySteps(['shadowed:success']);
114+
}
115+
}
116+
117+
jitSuite(KeywordArray);
118+
119+
/**
120+
* This function is used to hide a variable from the transpiler, so that it
121+
* doesn't get removed as "unused". It does not actually do anything with the
122+
* variable, it just makes it be part of an expression that the transpiler
123+
* won't remove.
124+
*
125+
* It's a bit of a hack, but it's necessary for testing.
126+
*
127+
* @param variable The variable to hide.
128+
*/
129+
const hide = (variable: unknown) => {
130+
new Function(`return (${JSON.stringify(variable)});`);
131+
};

0 commit comments

Comments
 (0)