feat(api): add register static method

AuroButton.register is to easily register the element without extra importing
`import '@aurodesignsystem/auro-button'` will still register this element to `<auro-button>`
`import { AuroButton } from '../src/auro-button.js'` wont register this element until `AuroButton.register` gets called

demo/index.html

@@ -29,14 +29,7 @@
         });
     </script>
     <script type="module" data-demo-script="true">
-      import { AuroButton } from '../src/auro-button.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
-
-      import { initExamples } from './index.min.js'; 
-
-      registerComponent('custom-button');
+      import { initExamples } from './index.min.js';
       initExamples();
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/index.js

@@ -1,3 +1,6 @@
+import { AuroButton } from '../src/auro-button.js';
+
+AuroButton.register('custom-button');
 
 export function initExamples(initCount) {
   initCount = initCount || 0;

demo/index.md

@@ -225,13 +225,12 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-button` custom element is defined automatically.
 
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroButton.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroButton } from './src/auro-button.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+AuroButton.register('custom-button');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.

docs/partials/index.md

@@ -138,13 +138,12 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-button` custom element is defined automatically.
 
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroButton.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroButton } from './src/auro-button.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+AuroButton.register('custom-button');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.

index.js

@@ -1,4 +1,3 @@
 import { AuroButton } from './src/auro-button.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+AuroButton.register();

src/auro-button.js

@@ -5,9 +5,13 @@
 
 import { LitElement } from "lit";
 import { html } from 'lit/static-html.js';
+
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import styleCss from "./style-css.js";
 import colorCss from "./color-css.js";
 import tokensCss from "./tokens-css.js";
@@ -150,6 +154,18 @@ export class AuroButton extends LitElement {
     };
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-button"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroButton.register("custom-button") // this will register this element to <custom-button/>
+   *
+   */
+  static register(name = "auro-button") {
+    RuntimeUtils.default.prototype.registerComponent(name, AuroButton);
+  }
+
   /**
    * Internal method to apply focus to the HTML5 button.
    * @private
@@ -231,8 +247,3 @@ export class AuroButton extends LitElement {
     `;
   }
 }
-
-// default internal definition
-if (!customElements.get("auro-button")) {
-  customElements.define("auro-button", AuroButton);
-}

test/auro-button.test.js

@@ -7,7 +7,6 @@
 /* eslint-disable no-undef */
 import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
 import { AuroButton } from '../src/auro-button.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import '../index.js';
 
 describe('auro-button', () => {
@@ -33,7 +32,7 @@ describe('auro-button', () => {
   });
 
   it('successfully registers custom component', async () => {
-    RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+    AuroButton.register('custom-button');
 
     expect(typeof customElements.get('custom-button')).to.equal(typeof AuroButton);
   });