feat(api): add register static method #44

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

demo/index.html

@@ -40,14 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../index.js"></script>
-
-    <script type="module">
-      import { AuroBackground } from '../src/auro-background.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-background', AuroBackground);
-    </script>
+    <script type="module" data-demo-script="true" src="./index.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/index.js

@@ -0,0 +1,4 @@
+import { AuroBackground } from '../src/auro-background.js';
+
+AuroBackground.register(); // registering to `auro-background`
+AuroBackground.register('custom-background');

demo/index.md

@@ -53,15 +53,14 @@ See <auro-hyperlink target="_blank" href="https://webcode.tools/generators/css/b
 
 ## 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-background` 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-background` 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 `AuroBackground.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroBackground } from '../src/auro-background.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-background', AuroBackground);
+AuroBackground.register('custom-background');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-background` element.

docs/partials/index.md

@@ -31,15 +31,14 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 
 ## 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-background` 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-background` 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 `AuroBackground.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroBackground } from '../src/auro-background.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-background', AuroBackground);
+AuroBackground.register('custom-background');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-background` element.

index.js

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

rollup.config.mjs

@@ -21,4 +21,15 @@ const production = !process.env.ROLLUP_WATCH,
   ]
 };
 
-export default [modernConfig];
+
+const indexExamplesConfig = {
+  input: {
+    ['index.min']: './demo/index.js',
+  },
+  output: {
+    format: 'esm',
+    dir: 'demo/'
+  }
+};
+
+export default [modernConfig, indexExamplesConfig];

src/auro-background.js

@@ -75,6 +75,18 @@ export class AuroBackground extends LitElement {
     ];
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-background"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroBackground.register("custom-background") // this will register this element to <custom-background/>
+   *
+   */
+  static register(name = "auro-background") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroBackground);
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-background');
@@ -132,8 +144,3 @@ export class AuroBackground extends LitElement {
     `;
   }
 }
-
-// define the name of the custom component
-if (!customElements.get("auro-background")) {
-  customElements.define("auro-background", AuroBackground);
-}

test/auro-background.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/auro-background.js';
+import '../index.js';
 
 describe('auro-background', () => {
   it('set all the properties and attributes', async () => {