Allow single word components.

ember-polyfills · Jul 23, 2018 · 2cc78b9 · 2cc78b9
1 parent 2fe4398
commit 2cc78b9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/lib/ast-transform.js b/lib/ast-transform.js
@@ -141,6 +141,8 @@ class AngleBracketPolyfill {
         invocationFirstChar !== (invocationFirstChar && invocationFirstChar.toLowerCase());
       let selfClosing = getSelfClosing(element);
       let hasAttrSplat = element.attributes.find(n => n.name === '...attributes');
+      let dasherizedComponentName = dasherize(tag);
+      let singleWordComponent = dasherizedComponentName.indexOf('-') === -1;
 
       if (isLocal || isNamedArgument || isThisPath) {
         let path = b.path(tag);
@@ -151,6 +153,15 @@ class AngleBracketPolyfill {
           path.data = true;
         }
 
+        return {
+          kind: 'DynamicComponent',
+          path,
+          selfClosing,
+          hasAttrSplat,
+        };
+      } else if (isUpperCase && singleWordComponent) {
+        let path = b.string(dasherizedComponentName);
+
         return {
           kind: 'DynamicComponent',
           path,
@@ -160,7 +171,7 @@ class AngleBracketPolyfill {
       } else if (isUpperCase) {
         return {
           kind: 'StaticComponent',
-          componentName: dasherize(tag),
+          componentName: dasherizedComponentName,
           selfClosing,
           hasAttrSplat,
         };

diff --git a/tests/integration/components/angle-bracket-invocation-test.js b/tests/integration/components/angle-bracket-invocation-test.js
@@ -25,6 +25,14 @@ module('Integration | Component | angle-bracket-invocation', function(hooks) {
       assert.dom('i').hasClass('fa-camera');
     });
 
+    test('single word components', async function(assert) {
+      this.owner.register('template:components/foo', hbs`hi martin!`);
+
+      await render(hbs`<Foo />`);
+
+      assert.dom().hasText('hi martin!');
+    });
+
     test('invoke without block', async function(assert) {
       this.owner.register('template:components/foo-bar', hbs`hi martin!`);
 

diff --git a/vendor/angle-bracket-invocation-polyfill/runtime-polyfill.js b/vendor/angle-bracket-invocation-polyfill/runtime-polyfill.js
@@ -63,6 +63,21 @@ import { lte, gte } from 'ember-compatibility-helpers';
           : P`template-options:main`;
         let TemplateCompiler = registry.resolve(compilerName);
 
+        registry.register(
+          'component-lookup:main',
+          Ember.Object.extend({
+            componentFor(name, owner, options) {
+              let fullName = `component:${name}`;
+              return owner.factoryFor(fullName, options);
+            },
+
+            layoutFor(name, owner, options) {
+              let templateFullName = `template:components/${name}`;
+              return owner.lookup(templateFullName, options);
+            },
+          })
+        );
+
         let originalCreate = TemplateCompiler.create;
         TemplateCompiler.create = function(options) {
           let owner = getOwner(options);
@@ -201,6 +216,25 @@ import { lte, gte } from 'ember-compatibility-helpers';
       buildRegistry() {
         let registry = this._super(...arguments);
 
+        let factoryForMethodName = 'factoryFor';
+        if (lte('2.13.99999999')) {
+          factoryForMethodName = Ember.__loader.require('container').FACTORY_FOR;
+        }
+
+        registry.register(
+          'component-lookup:main',
+          Ember.Object.extend({
+            componentFor(name, owner, options) {
+              let fullName = `component:${name}`;
+              return owner[factoryForMethodName](fullName, options);
+            },
+
+            layoutFor(name, owner, options) {
+              let templateFullName = `template:components/${name}`;
+              return owner.lookup(templateFullName, options);
+            },
+          })
+        );
         let Environment = registry.resolve('service:-glimmer-environment');
         let ORIGINAL_ENVIRONMENT_CREATE = Environment.create;
         Environment.create = function() {