Skip to content

Commit

Permalink
[feat] improve attributes ast semantics to match hbs
Browse files Browse the repository at this point in the history
  • Loading branch information
@lifeart
lifeart committed Feb 2, 2024
1 parent 5b5a294 commit eef8d4b
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 45 deletions.
8 changes: 4 additions & 4 deletions packages/core/__tests__/language-server/diagnostic-augmentation.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,11 +215,11 @@ describe('Language Server: Diagnostic Augmentation', () => {
Type '{}' is not assignable to type 'AttrValue'.",
"range": {
"end": {
"character": 16,
"character": 35,
"line": 9,
},
"start": {
"character": 9,
"character": 17,
"line": 9,
},
},
Expand Down Expand Up @@ -287,11 +287,11 @@ describe('Language Server: Diagnostic Augmentation', () => {
Type '{}' is not assignable to type 'AttrValue'.",
"range": {
"end": {
"character": 16,
"character": 39,
"line": 14,
},
"start": {
"character": 9,
"character": 17,
"line": 14,
},
},
Expand Down
42 changes: 21 additions & 21 deletions packages/core/__tests__/transform/template-to-typescript.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -756,9 +756,9 @@ describe('Transform: rewriteTemplate', () => {
expect(templateBody(template, { globals: [] })).toMatchInlineSnapshot(`
"{
const 𝛄 = χ.emitComponent(χ.resolve(Foo)());
χ.applyAttributes(𝛄.element, {
\\"data-bar\\": χ.resolve(helper)({ param: true , ...χ.NamedArgsMarker }),
});
χ.applyAttributes(𝛄.element, [
[\\"data-bar\\", χ.resolve(helper)({ param: true , ...χ.NamedArgsMarker })],
]);
}"
`);
});
Expand Down Expand Up @@ -790,9 +790,9 @@ describe('Transform: rewriteTemplate', () => {
expect(templateBody(template)).toMatchInlineSnapshot(`
"{
const 𝛄 = χ.emitElement(\\"div\\");
χ.applyAttributes(𝛄.element, {
\\"data-attr\\": χ.resolveOrReturn(𝚪.args.input)(),
});
χ.applyAttributes(𝛄.element, [
[\\"data-attr\\", χ.resolveOrReturn(𝚪.args.input)()],
]);
}"
`);
});
Expand All @@ -803,9 +803,9 @@ describe('Transform: rewriteTemplate', () => {
expect(templateBody(template)).toMatchInlineSnapshot(`
"{
const 𝛄 = χ.emitElement(\\"div\\");
χ.applyAttributes(𝛄.element, {
\\"data-attr\\": \`\${χ.resolveOrReturn(𝚪.args.input)()}\`,
});
χ.applyAttributes(𝛄.element, [
[\\"data-attr\\", \`\${χ.resolveOrReturn(𝚪.args.input)()}\`],
]);
}"
`);
});
Expand Down Expand Up @@ -957,9 +957,9 @@ describe('Transform: rewriteTemplate', () => {
expect(templateBody(template, { globals: [] })).toMatchInlineSnapshot(`
"{
const 𝛄 = χ.emitElement(\\"div\\");
χ.applyAttributes(𝛄.element, {
\\"data-attr\\": χ.resolve(concat)(χ.resolve(foo)(1), χ.resolve(foo)(true)),
});
χ.applyAttributes(𝛄.element, [
[\\"data-attr\\", χ.resolve(concat)(χ.resolve(foo)(1), χ.resolve(foo)(true))],
]);
}"
`);
});
Expand Down Expand Up @@ -1058,9 +1058,9 @@ describe('Transform: rewriteTemplate', () => {
expect(templateBody(template)).toMatchInlineSnapshot(`
"{
const 𝛄 = χ.emitElement(\\"div\\");
χ.applyAttributes(𝛄.element, {
\\"data-foo\\": χ.resolveOrReturn(𝚪.args.foo)(),
});
χ.applyAttributes(𝛄.element, [
[\\"data-foo\\", χ.resolveOrReturn(𝚪.args.foo)()],
]);
}"
`);
});
Expand All @@ -1071,9 +1071,9 @@ describe('Transform: rewriteTemplate', () => {
expect(templateBody(template)).toMatchInlineSnapshot(`
"{
const 𝛄 = χ.emitElement(\\"div\\");
χ.applyAttributes(𝛄.element, {
\\"data-foo\\": \`\${χ.resolveOrReturn(𝚪.args.foo)()}\${χ.resolveOrReturn(𝚪.args.bar)()}\`,
});
χ.applyAttributes(𝛄.element, [
[\\"data-foo\\", \`\${χ.resolveOrReturn(𝚪.args.foo)()}\${χ.resolveOrReturn(𝚪.args.bar)()}\`],
]);
}"
`);
});
Expand Down Expand Up @@ -1251,9 +1251,9 @@ describe('Transform: rewriteTemplate', () => {
const [NS] = 𝛄.blockParams[\\"default\\"];
{
const 𝛄 = χ.emitComponent(χ.resolve(NS?.Nested?.Custom)());
χ.applyAttributes(𝛄.element, {
class: \\"foo\\",
});
χ.applyAttributes(𝛄.element, [
[\\"class\\", \\"foo\\"],
]);
}
}
χ.Globals[\\"Foo\\"];
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/transform/diagnostics/augmentation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function checkAssignabilityError(
if (!parentNode) return;

if (
node.type === 'Identifier' &&
node.type === 'MustacheStatement' &&
parentNode.type === 'AttrNode' &&
!/^(@|\.)/.test(parentNode.name)
) {
Expand Down
11 changes: 6 additions & 5 deletions packages/core/src/transform/template/template-to-typescript.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -795,7 +795,7 @@ export function templateToTypescript(

if (!attributes.length) return;

emit.text('χ.applyAttributes(𝛄.element, {');
emit.text('χ.applyAttributes(𝛄.element, [');
emit.newline();
emit.indent();

Expand All @@ -805,8 +805,9 @@ export function templateToTypescript(
emit.forNode(attr, () => {
start = template.indexOf(attr.name, start + 1);

emitHashKey(attr.name, start);
emit.text(': ');
emit.text('[');
emitIdentifierString(attr.name, start);
emit.text(', ');

if (attr.value.type === 'MustacheStatement') {
emitMustacheStatement(attr.value, 'attr');
Expand All @@ -816,13 +817,13 @@ export function templateToTypescript(
emit.text(JSON.stringify(attr.value.chars));
}

emit.text(',');
emit.text('],');
emit.newline();
});
}

emit.dedent();
emit.text('});');
emit.text(']);');
emit.newline();
}

Expand Down
4 changes: 2 additions & 2 deletions packages/template/-private/dsl/emit.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export declare function emitContent(value: ContentValue): void;
*
* emitElement('div', (𝛄) => {
* applySplattributes(𝚪.element, 𝛄.element);
* applyAttributes(𝛄.element, { class: 'hello' });
* applyAttributes(𝛄.element, [[ 'class': 'hello' ]]);
* applyModifier(𝛄.element, resolve(on)({}, 'click', this.clicked));
* });
*/
Expand Down Expand Up @@ -133,7 +133,7 @@ export declare function applySplattributes<
* <div foo={{bar}}></div>
* <AnotherComponent foo={{bar}} />
*/
export declare function applyAttributes(element: Element, attrs: Record<string, AttrValue>): void;
export declare function applyAttributes(element: Element, attrs: Array<[string, AttrValue]>): void;

/*
* Applies a modifier to an element or component.
Expand Down
24 changes: 12 additions & 12 deletions packages/template/__tests__/attributes.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ class MyComponent extends TestComponent<{ Element: HTMLImageElement }> {
{
const component = emitComponent(resolve(MyComponent)());
applySplattributes(new HTMLImageElement(), component.element);
applyAttributes(component.element, { foo: 'bar' });
applyAttributes(component.element, [['foo', 'bar']]);
}

/**
Expand Down Expand Up @@ -179,21 +179,21 @@ class MyComponent extends TestComponent<{ Element: HTMLImageElement }> {
applyAttributes(
// @ts-expect-error: Trying to apply attributes to a component with no root element
component.element,
{ foo: 'bar' }
[ ['foo', 'bar'] ]
);
}

{
applyAttributes(document.createElement('div'), {
string: 'ok',
safeString: htmlSafe('ok'),
number: 123,
bool: false,
null: null,
undefined: undefined,
applyAttributes(document.createElement('div'), [
['string', 'ok'],
['safeString', htmlSafe('ok')],
['number', 123],
['bool', false],
['null', null],
['undefined', undefined],
// @ts-expect-error: setting a `void` return as an attr makes no sense
nothing: undefined as void,
['nothing', undefined as void],
// @ts-expect-error: DOM nodes aren't valid values
div: document.createElement('div'),
});
['div', document.createElement('div')],
]);
}

0 comments on commit eef8d4b

Please sign in to comment.