feat(api): add register static method #92

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

Fixed the typo on Recommended Use and Version Control.
`clement` -> `element`

demo/index.html

@@ -40,13 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js" data-demo-script="true"></script>
-    <script type="module">
-      import { AuroTable } from '../src/auro-table.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);
-    </script>
+    <script type="module" src="./index.min.js" data-demo-script="true"></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 { AuroTable } from '../src/auro-table.js';
+
+AuroTable.register(); // registering to `auro-table`
+AuroTable.register('custom-table');

demo/index.md

@@ -102,15 +102,14 @@ For use cases where the general design of the Auro Table is needed, but the comp
 
 ## 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-table` 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-table` 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 `AuroTable.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroTable } from './src/auro-table.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);
+AuroTable.register('custom-table');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-table` element.

docs/partials/index.md

@@ -76,15 +76,14 @@ For use cases where the general design of the Auro Table is needed, but the comp
 
 ## 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-table` 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-table` 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 `AuroTable.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroTable } from './src/auro-table.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-table', AuroTable);
+AuroTable.register('custom-table');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-table` element.

index.js

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

package.json

@@ -138,7 +138,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:sass sass:render bundler build:docs 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",

rollup.config.mjs

@@ -21,4 +21,14 @@ 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-table.js

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

test/auro-table.test.js

@@ -3,7 +3,7 @@
 /* eslint-disable one-var */
 /* eslint-disable no-undef */
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/auro-table.js';
+import '../index.js';
 
 describe('auro-table', () => {
   it('tests the table renders two rows with 3 columns', async () => {