feat(template-compiler): as-element (#146)

* feat(template-compiler): as-element * remove redundant test
aurelia · Sep 9, 2018 · 4aa8538 · 4aa8538
1 parent eccc71f
commit 4aa8538
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/packages/jit/src/templating/template-compiler.ts b/packages/jit/src/templating/template-compiler.ts
@@ -245,7 +245,7 @@ export class TemplateCompiler implements ITemplateCompiler {
     // if there is a custom element or template controller, then the attribute instructions become children
     // of the hydrate instruction, otherwise they are added directly to instructions as a single array
     const attributeInstructions: TargetedInstruction[] = [];
-    const tagResourceKey = tagName.toLowerCase();
+    const tagResourceKey = (node.getAttribute('as-element') || tagName).toLowerCase();
     const element = resources.find(CustomElementResource, tagResourceKey) || null;
     const attributes = node.attributes;
     for (let i = 0, ii = attributes.length; i < ii; ++i) {

diff --git a/packages/jit/test/unit/templating/template-compiler.integration.spec.ts b/packages/jit/test/unit/templating/template-compiler.integration.spec.ts
@@ -98,13 +98,14 @@ function stringify(o) {
 
 
 describe('TemplateCompiler (integration)', () => {
+  let container: IContainer;
   let au: Aurelia;
   let host: HTMLElement;
   let component: ReturnType<typeof createCustomElement>;
   let cs: IChangeSet
 
   beforeEach(() => {
-    const container = DI.createContainer();
+    container = DI.createContainer();
     cs = container.get(IChangeSet);
     container.register(TestConfiguration, BasicConfiguration)
     host = document.createElement('app');
@@ -519,6 +520,26 @@ describe('TemplateCompiler (integration)', () => {
     expect(host.textContent).to.equal('bigopon');
   });
 
+  describe('[as-element]', () => {
+
+    it('works with custom element with [as-element]', () => {
+      component = createCustomElement(
+        `<template><div as-element="name-tag" name="bigopon"></div></template>`,
+      );
+      au.app({ host, component: component }).start();
+      cs.flushChanges();
+      expect(host.textContent).to.equal('bigopon');
+    });
+
+    it('ignores tag name', () => {
+      component = createCustomElement(
+        `<template><name-tag as-element="div" name="bigopon">Fred</name-tag></template>`,
+      );
+      au.app({ host, component: component }).start();
+      expect(host.textContent).to.equal('Fred');
+    });
+  });
+
   it('<let/>', () => {
     component = createCustomElement(
       '<template><let full-name.bind="firstName + ` ` + lastName"></let><div>\${fullName}</div></template>',

diff --git a/packages/jit/test/unit/templating/template-compiler.spec.ts b/packages/jit/test/unit/templating/template-compiler.spec.ts
@@ -893,6 +893,23 @@ describe('TemplateCompiler', () => {
               type: TargetedInstructionType.propertyBinding, dest: 'title', srcOrExpr: new AccessScope('title') },
           ]);
         });
+
+        describe('[as-element]', () => {
+          it('understands [as-element]', () => {
+            @customElement('not-div')
+            class NotDiv {}
+            const { instructions } = compileWith('<template><div as-element="not-div"></div></template>', [NotDiv]);
+            verifyInstructions(instructions[0] as any, [
+              { toVerify: ['type', 'res'],
+                type: TargetedInstructionType.hydrateElement, res: 'not-div' }
+            ]);
+          });
+
+          it('does not throw when element is not found', () => {
+            const { instructions } = compileWith('<template><div as-element="not-div"></div></template>');
+            expect(instructions.length).to.equal(0);
+          });
+        });
       });
 
       describe('<let/> element', () => {