[feat] improve attributes ast semantics to match hbs

typed-ember · Jan 23, 2024 · 040d6ed · 040d6ed
1 parent 5b5a294
commit 040d6ed
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/packages/core/src/transform/template/template-to-typescript.ts b/packages/core/src/transform/template/template-to-typescript.ts
@@ -795,7 +795,7 @@ export function templateToTypescript(
 
       if (!attributes.length) return;
 
-      emit.text('χ.applyAttributes(𝛄.element, {');
+      emit.text('χ.applyAttributes(𝛄.element, [');
       emit.newline();
       emit.indent();
 
@@ -804,9 +804,9 @@ export function templateToTypescript(
       for (let attr of attributes) {
         emit.forNode(attr, () => {
           start = template.indexOf(attr.name, start + 1);
-
+          emit.text('["');
           emitHashKey(attr.name, start);
-          emit.text(': ');
+          emit.text('", ');
 
           if (attr.value.type === 'MustacheStatement') {
             emitMustacheStatement(attr.value, 'attr');
@@ -816,13 +816,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();
     }
 

diff --git a/packages/template/-private/dsl/emit.d.ts b/packages/template/-private/dsl/emit.d.ts
@@ -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));
  *     });
  */
@@ -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.

diff --git a/packages/template/__tests__/attributes.test.ts b/packages/template/__tests__/attributes.test.ts
@@ -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']]);
 }
 
 /**
@@ -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')],
+  ]);
 }