feat(api): add register static method #26

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

demo/index.html

@@ -42,11 +42,6 @@
     </script>
 
     <script type="module" data-demo-script="true">
-      import { AuroDialog } from '../src/auro-dialog.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-dialog', AuroDialog);
-
       import { initExamples } from './index.min.js';
 
       initExamples();

demo/index.js

@@ -1,6 +1,11 @@
 import { initBasicExample } from "../apiExamples/basic";
 import { initCustomExample } from "../apiExamples/custom";
 
+import { AuroDialog } from '../src/auro-dialog.js';
+
+AuroDialog.register();
+AuroDialog.register('custom-dialog');
+
 export function initExamples(initCount) {
   initCount = initCount || 0;
 

demo/index.md

@@ -132,15 +132,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-dialog` 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-dialog` 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 `AuroDialog.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroDialog } from './src/auro-dialog.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-dialog', AuroDialog);
+AuroDialog.register('custom-dialog');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-dialog` element.

docs/partials/index.md

@@ -78,15 +78,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-dialog` 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-dialog` 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 `AuroDialog.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroDialog } from './src/auro-dialog.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-dialog', AuroDialog);
+AuroDialog.register('custom-dialog');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-dialog` element.

index.js

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

package.json

@@ -142,7 +142,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:version build:sass sass:render types",
+    "build": "npm-run-all build:version build:sass sass:render bundler types",
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",

src/auro-dialog.js

@@ -3,6 +3,7 @@
 
 // ---------------------------------------------------------------------
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import ComponentBase from './componentBase.js';
 
 // build the component class
@@ -26,11 +27,16 @@ export class AuroDialog extends ComponentBase {
   static get styles() {
     return [super.styles];
   }
-}
 
-/* istanbul ignore else */
-// define the name of the custom component
-if (!customElements.get("auro-dialog")) {
-  customElements.define("auro-dialog", AuroDialog);
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-dialog"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroDialog.register("custom-dialog") // this will register this element to <custom-dialog/>
+   *
+   */
+  static register(name = "auro-dialog") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
+  }
 }
-

test/auro-dialog.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect, oneEvent, waitUntil, elementUpdated } from '@open-wc/testing';
-import '../src/auro-dialog.js';
+import '../index.js';
 // import './nested-shadow.js';
 
 describe('auro-dialog', () => {