feat(api): add register static method #21

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

components/form/demo/api.js

@@ -1 +1,3 @@
-import '../src/index.js';
+import { AuroForm } from "../src/auro-form.js"
+
+AuroForm.register();

components/form/demo/index.js

@@ -1 +1,4 @@
-import '../src/index.js';
+import { AuroForm } from '../src/auro-form.js';
+
+AuroForm.register();
+AuroForm.register('custom-form');

components/form/docs/partials/demo.md

@@ -44,13 +44,14 @@ Having a closing statement about your example helps to really complete the thoug
 
 ## Recommended Use and Version Control
 
-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-form` custom element is defined automatically.
+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 element. 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-form` 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 `AuroForm.register(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-form';
-registerComponent('custom-form');
+import { AuroForm } from './node_modules/@aurodesignsystem/auro-form/src/auro-form';
+
+AuroForm.register('custom-form');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-form` element.

components/form/src/auro-form.js

@@ -14,6 +14,8 @@ import { LitElement, html } from "lit";
 // Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-form element provides users a way to ... (it would be great if you fill this out).
@@ -44,6 +46,18 @@ export class AuroForm extends LitElement {
     return [styleCss];
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-form"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroForm.register("custom-form") // this will register this element to <custom-form/>
+   *
+   */
+  static register(name = "auro-form") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+  }
+
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
@@ -58,8 +72,3 @@ export class AuroForm extends LitElement {
     `;
   }
 }
-
-// default internal definition
-if (!customElements.get("auro-form")) {
-  customElements.define("auro-form", AuroForm);
-}

components/form/src/index.js

@@ -1,15 +1,3 @@
 import { AuroForm } from './auro-form.js';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
-const registerComponent = (name = 'custom-form') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroForm {});
-  }
-};
-
-export { registerComponent };
+AuroForm.register();

components/form/test/auro-form.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/auro-form';
+import '../src/index.js';
 
 describe('auro-form', () => {
   it('sets the CSS class on auro-form > div element', async () => {

index.js

@@ -4,4 +4,5 @@
 
 import './components/checkbox/src/index.js';
 import './components/input/src/index.js';
+import './components/form/src/index.js';
 import './components/menu/src/index.js';