feat(api): add register static method #82

- Update dependency versions

- `AuroSideNav.register` is to easily register the element without extra importing
- `import "@aurodesignsystem/auro-sidenav"` will still register this element to <auro-sidenav>
- `import { AuroSideNav } from '../src/auro-sidenav` wont register this element until `AuroSideNav.register` gets called
- Same changes on `AuroSideNavItem` and `AuroSideNavSection`

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

demo/index.html

@@ -47,18 +47,7 @@
     <!-- 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 type="module" src="../index.js"  data-demo-script="true"></script>
-    <script type="module">
-      import { AuroSideNav } from '../src/auro-sidenav.js';
-      import { AuroSideNavItem } from '../src/auro-sidenavitem.js'; 
-      import { AuroSideNavSection } from '../src/auro-sidenavsection.js';
-
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-sidenav', AuroSideNav);
-      RuntimeUtils.default.prototype.registerComponent('custom-sidenavitem', AuroSideNavItem);
-      RuntimeUtils.default.prototype.registerComponent('custom-sidenavsection', AuroSideNavSection);
-    </script>
+    <script type="module" src="./index.min.js"  data-demo-script="true"></script>
 
     <script>
       // This design token variable can be whatever/from wherever you want

demo/index.js

@@ -0,0 +1,13 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { AuroSideNav } from '../src/auro-sidenav.js';
+import { AuroSideNavItem } from '../src/auro-sidenavitem.js'; 
+import { AuroSideNavSection } from '../src/auro-sidenavsection.js';
+
+AuroSideNav.register();
+AuroSideNavItem.register();
+AuroSideNavSection.register();
+
+AuroSideNav.register('custom-sidenav');
+AuroSideNavItem.register('custom-sidenavitem');
+AuroSideNavSection.register('custom-sidenavsection');

docs/partials/index.md

@@ -131,20 +131,18 @@ The `<auro-sidenav>` element uses the attribute `static` to toggle on/off accord
 
 ## 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-sidenav>` 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-sidenav>` 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 `register(name)` method in our `AuroSideNav` related components and pass in a unique name.
 
 ```js
 import { AuroSideNav } from './src/auro-sidenav.js';
 import { AuroSideNavItem } from './src/auro-sidenavitem.js'; 
 import { AuroSideNavSection } from './src/auro-sidenavsection.js';
 
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-RuntimeUtils.default.prototype.registerComponent('custom-sidenav', AuroSideNav);
-RuntimeUtils.default.prototype.registerComponent('custom-sidenavitem', AuroSideNavItem);
-RuntimeUtils.default.prototype.registerComponent('custom-sidenavsection', AuroSideNavSection);
+AuroSideNav.register('custom-sidenav');
+AuroSideNavItem.register('custom-sidenavitem');
+AuroSideNavSection.register('custom-sidenavsection');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-sidenav>` element.

index.js

@@ -2,8 +2,7 @@ import { AuroSideNav } from './src/auro-sidenav.js';
 import { AuroSideNavItem } from './src/auro-sidenavitem.js'; 
 import { AuroSideNavSection } from './src/auro-sidenavsection.js';
 
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-sidenav', AuroSideNav);
-RuntimeUtils.default.prototype.registerComponent('custom-sidenavitem', AuroSideNavItem);
-RuntimeUtils.default.prototype.registerComponent('custom-sidenavsection', AuroSideNavSection);
+AuroSideNav.register();
+AuroSideNavItem.register();
+AuroSideNavSection.register();

package.json

@@ -24,7 +24,7 @@
     "@aurodesignsystem/auro-hyperlink": "^4.2.2",
     "@aurodesignsystem/auro-library": "^3.0.3",
     "chalk": "^5.3.0",
-    "lit": "^3.2.0"
+    "lit": "^3.2.1"
   },
   "peerDependencies": {
     "@aurodesignsystem/design-tokens": "^4.9.2",
@@ -49,8 +49,8 @@
     "concurrently": "^9.0.1",
     "copyfiles": "^2.4.1",
     "core-js": "^3.38.1",
-    "eslint": "^9.11.1",
-    "eslint-plugin-jsdoc": "^50.3.1",
+    "eslint": "^9.13.0",
+    "eslint-plugin-jsdoc": "^50.4.3",
     "husky": "^9.1.6",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
@@ -60,16 +60,16 @@
     "postcss-discard-comments": "^7.0.3",
     "postcss-selector-replace": "^1.0.2",
     "rollup": "^4.24.0",
-    "rollup-plugin-serve": "^2.0.2",
-    "sass": "^1.79.4",
-    "semantic-release": "^24.1.2",
-    "stylelint": "^16.9.0",
+    "rollup-plugin-serve": "^2.0.3",
+    "sass": "^1.80.3",
+    "semantic-release": "^24.1.3",
+    "stylelint": "^16.10.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.7.0",
-    "typescript": "^5.6.2",
+    "stylelint-scss": "^6.8.1",
+    "typescript": "^5.6.3",
     "wc-sass-render": "^1.4.0",
     "web-component-analyzer": "^2.0.0",
     "whatwg-fetch": "^3.6.20",

src/accordionVersion.js

@@ -1 +1 @@
-export default '4.3.1'
+export default '4.3.1'

src/auro-sidenav.js

@@ -16,10 +16,6 @@ import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts
 import { AuroAccordion } from '@aurodesignsystem/auro-accordion/src/auro-accordion.js';
 import accordionVersion from "./accordionVersion.js";
 
-// Register dependent components
-import './auro-sidenavsection.js';
-import './auro-sidenavitem.js';
-
 import styleCss from "./style-css.js";
 import colorCss from "./color-css.js";
 import tokensCss from "./tokens-css.js";
@@ -58,6 +54,18 @@ export class AuroSideNav extends LitElement {
     };
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-sidenav"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroSideNav.register("custom-sidenav") // this will register this element to <custom-sidenav/>
+   *
+   */
+  static register(name = "auro-sidenav") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSideNav);
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "navigation");
@@ -153,7 +161,7 @@ export class AuroSideNav extends LitElement {
    * @private
    */
   initItems() {
-    this.items = Array.from(this.querySelectorAll('auro-sidenavitem'));
+    this.items = Array.from(this.querySelectorAll('auro-sidenavitem, [auro-sidenavitem]'));
   }
 
   /**
@@ -234,8 +242,3 @@ export class AuroSideNav extends LitElement {
     return html`${this.static ? sidebarContent : sidebarContentCollapsable}`;
   }
 }
-
-// default internal definition
-if (!customElements.get("auro-sidenav")) {
-  customElements.define("auro-sidenav", AuroSideNav);
-}

src/auro-sidenavitem.js

@@ -3,6 +3,7 @@
 
 // ---------------------------------------------------------------------
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import { AuroHyperlink } from '@aurodesignsystem/auro-hyperlink/src/auro-hyperlink.js';
 
 import styleItemsCss from './style-items-css.js';
@@ -21,9 +22,16 @@ export class AuroSideNavItem extends AuroHyperlink {
       tokensCss
     ];
   }
-}
 
-// default internal definition
-if (!customElements.get("auro-sidenavitem")) {
-  customElements.define("auro-sidenavitem", AuroSideNavItem);
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-sidenavitem"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroSideNav.register("custom-sidenavitem") // this will register this element to <custom-sidenavitem/>
+   *
+   */
+  static register(name = "auro-sidenavitem") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSideNavItem);
+  }
 }

src/auro-sidenavsection.js

@@ -3,6 +3,7 @@
 
 // ---------------------------------------------------------------------
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import { AuroAccordion } from '@aurodesignsystem/auro-accordion/src/auro-accordion.js';
 
 import styleSectionsCss from './style-sections-css.js';
@@ -22,9 +23,15 @@ export class AuroSideNavSection extends AuroAccordion {
     ];
   }
 
-}
-
-// default internal definition
-if (!customElements.get("auro-sidenavsection")) {
-  customElements.define("auro-sidenavsection", AuroSideNavSection);
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-sidenavsection"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroSideNavSection.register("custom-sidenavsection") // this will register this element to <custom-sidenavsection/>
+   *
+   */
+  static register(name = "auro-sidenavsection") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSideNavSection);
+  }
 }

test/auro-sidenav.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
-import '../src/auro-sidenav';
+import '../index';
 
 describe('auro-sidenav', () => {
   it('auro-sidenav is accessible by default', async () => {