feat(api): add register static method #82

- Update dependency versions - `AuroPopover.register` is to easily register the element without extra importing - `import "@aurodesignsystem/auro-popover"` will still register this element to <auro-popover> - `import { AuroPopover } from '../src/auro-popover` wont register this element until `AuroPopover.register` gets called - Fixed the typo on Recommended Use and Version Control: `clement` -> `element`
AlaskaAirlines · Oct 23, 2024 · 6619ef8 · 6619ef8
1 parent 776e39e
commit 6619ef8
Show file tree

Hide file tree

Showing 14 changed files with 4,240 additions and 1,672 deletions.
diff --git a/demo/api.html b/demo/api.html
@@ -44,12 +44,9 @@
 
     <!-- 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>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
 
-    <script type="module" data-demo-script="true" src="../index.js"></script>
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();

diff --git a/demo/api.js b/demo/api.js
@@ -1,6 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 import { boundaryExample } from "../apiExamples/boundary";
+import '../index';
 
 export function initExamples(initCount) {
   initCount = initCount || 0;

diff --git a/demo/api.min.js b/demo/api.min.js
diff --git a/demo/index.html b/demo/index.html
@@ -40,13 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../index.js"></script>
-    <script type="module">
-      import { AuroPopover } from '../src/auro-popover.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-popover', AuroPopover);
-    </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>

diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+import { AuroPopover } from '../src/auro-popover.js';
+
+AuroPopover.register();
+AuroPopover.register('custom-popover');
diff --git a/demo/index.md b/demo/index.md
@@ -34,48 +34,43 @@ The `auro-popover` element should be used in situations where users may:
     Top popover content!
     <auro-button slot="trigger">Popover Test</auro-button>
   </auro-popover>
-
   <!-- Using the placement=bottom attribute -->
   <auro-popover placement="bottom">
     Popover content!
     <auro-button secondary slot="trigger">Popover Test</auro-button>
   </auro-popover>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-
 <auro-accordion alignRight>
   <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 -->
+
 ```html
 <!-- The slot=trigger attribute is bound directly to the auro-button element  -->
 <auro-popover>
   Top popover content!
   <auro-button slot="trigger">Popover Test</auro-button>
 </auro-popover>
-
 <!-- Using the placement=bottom attribute -->
 <auro-popover placement="bottom">
   Popover content!
   <auro-button secondary slot="trigger">Popover Test</auro-button>
 </auro-popover>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-
 </auro-accordion>
 
 ## 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-popover` 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-popover` 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 `AuroPopover.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroPopover } from './src/auro-popover.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-popover', AuroPopover);
+AuroPopover.register('custom-popover');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-popover` element.
@@ -88,33 +83,29 @@ This will create a new custom element that you can use in your HTML that will fu
     Top popover content!
     <auro-button slot="trigger">Popover Test</auro-button>
   </custom-popover>
-
   <!-- Using the placement=bottom attribute -->
   <custom-popover placement="bottom">
     Popover content!
     <auro-button secondary slot="trigger">Popover Test</auro-button>
   </custom-popover>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
 <!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
 ```html
 <!-- The slot=trigger attribute is bound directly to the auro-button element  -->
 <custom-popover>
   Top popover content!
   <auro-button slot="trigger">Popover Test</auro-button>
 </custom-popover>
-
 <!-- Using the placement=bottom attribute -->
 <custom-popover placement="bottom">
   Popover content!
   <auro-button secondary slot="trigger">Popover Test</auro-button>
 </custom-popover>
 ```
 <!-- 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
@@ -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-popover` 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-popover` 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 `AuroPopover.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroPopover } from './src/auro-popover.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-popover', AuroPopover);
+AuroPopover.register('custom-popover');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-popover` element.

diff --git a/index.js b/index.js
@@ -1,4 +1,3 @@
 import { AuroPopover } from './src/auro-popover.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-popover', AuroPopover);
+AuroPopover.register();