feat: simplify registration logic #151

README.md

@@ -39,8 +39,7 @@ Or, by CDN.
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/[email protected]/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/[email protected]/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-accordion__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-accordion-group__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-accordion__bundled.js" type="module"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

docs/partials/readmeAddlInfo.md

@@ -13,6 +13,5 @@ Or, by CDN.
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/[email protected]/dist/bundled/essentials.css" />
 
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-accordion__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-accordion-group__bundled.js" type="module"></script>
 ```
 

index.js

@@ -1,7 +1,3 @@
 import { AuroAccordion } from './src/auro-accordion.js';
-import { AuroAccordionGroup } from './src/auro-accordion-group.js';
-import { AuroAccordionButton } from './src/auro-accordion-button.js';
 
 AuroAccordion.register();
-AuroAccordionGroup.register();
-AuroAccordionButton.register();

src/auro-accordion.js

@@ -10,10 +10,13 @@
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroAccordionGroup } from './auro-accordion-group.js';
+import { AuroAccordionButton } from './auro-accordion-button.js';
 
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion.js';
 
@@ -56,6 +59,16 @@
      */
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
 
+    /**
+     * @private
+     */
+    this.buttonNameHash = this.generateRandomLetters(4); //eslint-disable-line
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-accordion-button', this.buttonNameHash, AuroAccordionButton);
+
     /**
      * @private
      */
@@ -115,7 +128,9 @@
    *
    */
   static register(name = "auro-accordion") {
+    const nameGroup = `${name}-group`;
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
+    AuroAccordionGroup.register(nameGroup);
   }
 
   firstUpdated() {
@@ -127,7 +142,7 @@
    * Internal function to generate the HTML for the icon to use.
    * @private
    * @param {string} svgContent - The imported svg icon.
    * @returns {TemplateResult} - The html template for the icon.
    */
   generateIconHtml(svgContent) {
     const dom = new DOMParser().parseFromString(svgContent, 'text/html');
@@ -138,6 +153,23 @@
     return html`${svg}`;
   }
 
+  /**
+   * Generates a random string of letters.
+   * @private
+   * @param {number} length - The number of characters to generate in the string.
+   * @returns {string} - The generated string.
+   */
+  generateRandomLetters(length) {
+    let result = '';
+    const characters = 'abcdefghijklmnopqrstuvwxyz';
+    const charactersLength = characters.length;
+    for (let index = 0; index < length; index += 1) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+
+    return result;
+  }
+
   /**
    * Toggles the visibility of the accordion content.
    */
@@ -164,7 +196,7 @@
 
     return html`
       <div class="componentWrapper" part="accordion">
-        <auro-accordion-button
+        <${this.buttonTag}
           ?fluid="${this.emphasis}"
           class="${classMap(buttonClasses)}"
           id="accordionTrigger"
@@ -181,7 +213,7 @@
             </${this.iconTag}>
           `}
           <slot name="trigger" part="triggerSlot"></slot>
-        </auro-accordion-button>
+        </${this.buttonTag}>
         <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
           <div class="contentWrapper" part="contentWrapper">
             <slot></slot>

test/auro-accordion.test.js

@@ -3,6 +3,8 @@ import { AuroAccordion } from '../src/auro-accordion';
 
 AuroAccordion.register();
 
+// import './../index.js';
+
 describe('auro-accordion', () => {
   it('auro-accordion is accessible', async () => {
     const el = await defaultFixture();