feat(api): add register static method

`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`
AlaskaAirlines · Oct 21, 2024 · 3943034 · 3943034
1 parent 5c6c227
commit 3943034
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 56 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -41,12 +41,7 @@
         });
     </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>

diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,3 @@
+import { AuroTable } from '../src/auro-table.js';
+
+AuroTable.register('custom-badge');
diff --git a/demo/index.md b/demo/index.md
@@ -2,24 +2,24 @@
 The index.md file is a compiled document. No edits should be made directly to this file.
 README.md is created by running `npm run build:docs`.
 This file is generated based on a template fetched from `./docs/partials/index.md`
--->
-
+-->
+
 # Table
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
 <!-- The below content is automatically added from ./description.md -->
 Use the `auro-table` custom element to illustrate non-dynamic tabular data. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Use Cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
 <!-- The below content is automatically added from ./useCases.md -->
 The `<auro-table>` element should be used in situations where users may:
 
 * Show static tabluar data
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Example(s)
 
 <div class="exampleWrapper">
@@ -35,12 +35,12 @@ The `<auro-table>` element should be used in situations where users may:
     ]'>My morning schedule
   </auro-table>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+
 ```html
 <auro-table
   columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
@@ -50,11 +50,11 @@ The `<auro-table>` element should be used in situations where users may:
   {"": "Team meeting", "Wednesday": "10:00am" },
   {"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
   ]'>My morning schedule
-</auro-table>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
+</auro-table>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## React and Svelte support
 
 ```js
@@ -66,11 +66,11 @@ const data=JSON.stringify([
   {"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
 ])
 
-<auro-table nowrap columnHeaders={headers} componentData={data}>Default text</auro-table>
-```
+<auro-table nowrap columnHeaders={headers} componentData={data}>Default text</auro-table>
+```
+
+Having a closing statement about your example helps to really complete the thought with your reader.
 
-Having a closing statement about your example helps to really complete the thought with your reader.
-
 ## WC Style Sheets support
 
 For use cases where the general design of the Auro Table is needed, but the component is unseable, please use the [.auro_table](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_table) styles from the Web Core Style Sheets library.
@@ -97,20 +97,19 @@ For use cases where the general design of the Auro Table is needed, but the comp
       <td>with two columns</td>
     </tr>
   </tbody>
-</table>
-```
-
+</table>
+```
+
 ## 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.
@@ -128,12 +127,12 @@ This will create a new custom element that you can use in your HTML that will fu
     ]'>My morning schedule
   </custom-table>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customTable.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/customTable.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/customTable.html -->
+
 ```html
 <custom-table
   columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
@@ -143,7 +142,7 @@ This will create a new custom element that you can use in your HTML that will fu
   {"": "Team meeting", "Wednesday": "10:00am" },
   {"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
   ]'>My morning schedule
-</custom-table>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+</custom-table>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/demo/index.min.js b/demo/index.min.js
diff --git a/docs/partials/index.md b/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.

diff --git a/index.js b/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();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/rollup.config.mjs b/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];
diff --git a/src/auro-table.js b/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);
-}
diff --git a/test/auro-table.test.js b/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 () => {