fix confusing component definition naming

microsoft · Aug 26, 2021 · 5973149 · 5973149
1 parent 1776724
commit 5973149
Showing 1 changed file with 23 additions and 7 deletions.
diff --git a/tests/assets/reading-list/ember3.html b/tests/assets/reading-list/ember3.html
@@ -52,7 +52,7 @@
             })
 
             AddComponent({
-                name: 'app-header',
+                name: 'AppHeader',
                 template: `
                 <div>
                     <h1>Ember@3</h1>
@@ -62,7 +62,7 @@ <h3>Reading List: {{@booksCount}}</h3>
             });
 
             AddComponent({
-                name: 'reading-list',
+                name: 'ReadingList',
                 template: `
                 <ol>
                     {{#each @books as |book|}} 
@@ -73,12 +73,12 @@ <h3>Reading List: {{@booksCount}}</h3>
             });
 
             AddComponent({
-                name: 'list-item',
+                name: 'ListItem',
                 template: `<li>{{@name}}</li>`
             });
 
             AddComponent({
-                name: 'color-button',
+                name: 'ColorButton',
                 template: `
                 <button 
                     class={{@color}} 
@@ -90,7 +90,7 @@ <h3>Reading List: {{@booksCount}}</h3>
             });
 
             AddComponent({
-                name: 'button-grid',
+                name: 'ButtonGrid',
                 template: `
                 {{#each this.buttons as |config|}}
                     <ColorButton 
@@ -117,7 +117,7 @@ <h3>Reading List: {{@booksCount}}</h3>
             })
 
             AddComponent({
-                name: 'new-book',
+                name: 'NewBook',
                 template: `
                 <div>
                     <input type="text" {{on 'input' this.onInput}}>
@@ -151,7 +151,23 @@ <h3>Reading List: {{@booksCount}}</h3>
                     }
                 }
 
-                RegisterComponent(name, komponent, template.trim());
+                RegisterComponent(normalizeToClassicComponent(name), komponent, template.trim());
+            }
+
+            // https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/blob/master/lib/ast-transform.js#L33
+            function normalizeToClassicComponent(rawName) {
+                const name = rawName.split('$').pop() || '';
+                const ALPHA = /[A-Za-z]/;
+
+                return name
+                    .replace(/[A-Z]/g, (char, index) => {
+                        if (index === 0 || !ALPHA.test(name[index - 1])) {
+                            return char.toLowerCase();
+                        }
+
+                        return `-${char.toLowerCase()}`;
+                    })
+                    .replace(/::/g, '/');
             }