perf(extend): move customElements.define function to root #44

This commit will move the customElements.define function out
of the auro-badge js file and to the root index.js file.

Changes to be committed:
modified:   demo/index.html
modified:   index.js
modified:   src/auro-badge.js
modified:   test/auro-badge.test.js

demo/index.html

@@ -25,7 +25,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../src/auro-badge.js"></script>
+    <script type="module" src="../index.js"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
   </body>
 </html>

index.js

@@ -1 +1,16 @@
-export * from './dist/auro-badge';
+import { AuroBadge } from './src/auro-badge.js';
+
+/**
+ * Register Custom Element.
+ * @param {Object} name - Name to use for custom element.
+ * @returns {void}
+ */
+export function registerComponent(name) {
+  // alias definition
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends AuroBadge {});
+  }
+}
+
+// Example custom registration
+// registerComponent('my-badge');

src/auro-badge.js

@@ -28,7 +28,7 @@ import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-sm_es6.js';
  */
 
 // build the component class
-class AuroBadge extends LitElement {
+export class AuroBadge extends LitElement {
   constructor() {
     super();
 
@@ -115,8 +115,7 @@ class AuroBadge extends LitElement {
   }
 }
 
-/* istanbul ignore else */
-// define the name of the custom component
+// default internal definition
 if (!customElements.get("auro-badge")) {
   customElements.define("auro-badge", AuroBadge);
 }

test/auro-badge.test.js

@@ -1,6 +1,6 @@
 import { fixture, html, expect } from '@open-wc/testing';
 import sinon from 'sinon';
-import '../src/auro-badge.js';
+import '../index.js';
 
 describe('auro-badge', () => {
   it('auro-badge is accessible', async () => {