Merge pull request #22 from GavinJoyce/gj/support-capitalized-components

support capitalized component names

README.md

@@ -25,10 +25,13 @@ import initializeCustomElements from '@glimmer/web-component';
 And then after `app.boot()`:
 
 ```ts
-initializeCustomElements(app, /* array of component names */);
+initializeCustomElements(app, {
+  'button-list': 'ButtonList',
+  'x-button': 'Button'
+});
 ```
 
-This will register custom elements for each of the component names you give to `initializeCustomElements` and will replace the custom element with your Glimmer component once the custom element connects. For example, if you provide the component name `'foo-bar'` you can now use the custom element `<foo-bar>` anywhere in the DOM and have your `foo-bar` component render in its place.
+This will register custom elements for each of the items defined in the hash passed to `initializeCustomElements` and will replace the custom element with your Glimmer component once the custom element connects. For example, if you provide the hash `{ 'foo-bar': 'FooBar' }`, you can then use the custom element `<foo-bar>` anywhere in the DOM and have your `<FooBar>` Glimmer component render in its place.
 
 ## Browser Support
 

src/initialize-custom-elements.ts

@@ -1,12 +1,14 @@
 import Application from '@glimmer/application';
 
-export default function initializeCustomElements(app: Application, customElementDefinitions: string[]): void {
-  customElementDefinitions.forEach((name) => {
-    initializeCustomElement(app, name);
-  });
+export default function initializeCustomElements(app: Application, customElementDefinitions: { [key: string]: string; }): void {
+  for(let customElementName in customElementDefinitions) {
+    let glimmerComponentName = customElementDefinitions[customElementName];
+
+    initializeCustomElement(app, customElementName, glimmerComponentName);
+  }
 }
 
-function initializeCustomElement(app: Application, name: string): void {
+function initializeCustomElement(app: Application, customElementName: string, glimmerComponentName: string): void {
   function GlimmerElement() {
     return Reflect.construct(HTMLElement, [], GlimmerElement);
   }
@@ -20,7 +22,7 @@ function initializeCustomElement(app: Application, name: string): void {
         parent.insertBefore(placeholder, this);
         parent.removeChild(this);
 
-        app.renderComponent(name, parent, placeholder);
+        app.renderComponent(glimmerComponentName, parent, placeholder);
 
         whenRendered(app, () => {
           let customElement = this as Element;
@@ -33,7 +35,7 @@ function initializeCustomElement(app: Application, name: string): void {
     }
   });
 
-  window.customElements.define(name, GlimmerElement);
+  window.customElements.define(customElementName, GlimmerElement);
 }
 
 function assignAttributes(fromElement: Element, toElement: Element): void {

test/initialize-custom-elements-test.ts

@@ -10,7 +10,7 @@ let renderPromise: Promise<void>;
 module('initializeCustomElements', {
   before() {
     let app = setupApp();
-    initializeCustomElements(app as Application, ['hello-world']);
+    initializeCustomElements(app as Application, { 'hello-world': 'HelloWorld' });
   },
 
   beforeEach() {