Merge pull request #13145 from emberjs/dynamic-tag-name

[Glimmer 2] Add support for dynamic `tagName`

package.json

@@ -38,7 +38,7 @@
     "express": "^4.5.0",
     "finalhandler": "^0.4.0",
     "github": "^0.2.3",
-    "glimmer-engine": "tildeio/glimmer#9dff505",
+    "glimmer-engine": "tildeio/glimmer#536bed2",
     "glob": "^5.0.13",
     "htmlbars": "0.14.16",
     "mocha": "^2.4.5",

packages/ember-glimmer/lib/components/curly-component.js

@@ -77,6 +77,16 @@ const MANAGER = new CurlyComponentManager();
 import { ComponentDefinition, ValueReference } from 'glimmer-runtime';
 import Component from '../ember-views/component';
 
+function tagName(vm) {
+  let { tagName } = vm.dynamicScope().view;
+
+  if (tagName === '') {
+    throw new Error('Not implemented: fragments (`tagName: ""`)');
+  }
+
+  return new ValueReference(tagName || 'div');
+}
+
 function elementId(vm) {
   let component = vm.dynamicScope().view;
   return new ValueReference(component.elementId);
@@ -90,7 +100,7 @@ export class CurlyComponentDefinition extends ComponentDefinition {
 
   compile(builder) {
     builder.wrapLayout(this.template.asLayout());
-    builder.tag.static('div');
+    builder.tag.dynamic(tagName);
     builder.attrs.dynamic('id', elementId);
     builder.attrs.static('class', 'ember-view');
   }

packages/ember-glimmer/tests/integration/components/curly-components-test.js

@@ -17,6 +17,53 @@ moduleFor('Components test: curly components', class extends RenderingTest {
     this.assertComponentElement(this.firstChild, { content: 'hello' });
   }
 
+  ['@test it can have a custom tagName']() {
+    let FooBarComponent = Component.extend({
+      tagName: 'foo-bar'
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar}}');
+
+    this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' });
+  }
+
+  ['@test it can have a custom tagName set in the constructor']() {
+    let FooBarComponent = Component.extend({
+      init() {
+        this._super();
+        this.tagName = 'foo-bar';
+      }
+    });
+
+    this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: 'hello' });
+
+    this.render('{{foo-bar}}');
+
+    this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' });
+  }
+
+  ['@test it can have a custom tagName from the invocation']() {
+    this.registerComponent('foo-bar', { template: 'hello' });
+
+    this.render('{{foo-bar tagName="foo-bar"}}');
+
+    this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' });
+
+    this.runTask(() => this.rerender());
+
+    this.assertComponentElement(this.firstChild, { tagName: 'foo-bar', content: 'hello' });
+  }
+
   ['@test it has an element']() {
     let instance;