perf: refactor custom component registration config

README.md

@@ -96,8 +96,8 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.3.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.8/dist/bundled/essentials.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.1/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
 <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-icon__bundled.js" type="module"></script>
 ```
 

demo/index.html

@@ -42,8 +42,10 @@
     </script>
     <script type="module" data-demo-script="true" src="../index.js"></script>
     <script type="module">
-      import { registerComponent } from "../index.js"
-      registerComponent('custom-icon');
+      import { AuroIcon } from '../src/auro-icon.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-icon', AuroIcon);
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

demo/index.md

@@ -85,8 +85,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 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.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-icon';
-registerComponent('custom-icon');
+import { AuroIcon } from './src/auro-icon.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-icon', AuroIcon);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-icon` element.

docs/partials/index.md

@@ -69,8 +69,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 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.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-icon';
-registerComponent('custom-icon');
+import { AuroIcon } from './src/auro-icon.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-icon', AuroIcon);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-icon` element.

index.js

@@ -1,15 +1,4 @@
 import { AuroIcon } from './src/auro-icon.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
- const registerComponent = (name = 'custom-icon') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroIcon {});
-  }
-}
-
-export { registerComponent };
+RuntimeUtils.default.prototype.registerComponent('custom-icon', AuroIcon);

package.json

@@ -24,7 +24,7 @@
     "lit": "^3.2.0"
   },
   "peerDependencies": {
-    "@alaskaairux/icons": "^4.36.0",
+    "@alaskaairux/icons": "^4.43.0",
     "@aurodesignsystem/design-tokens": "^4.9.2",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2"
   },

test/auro-icon.test.js

@@ -8,10 +8,10 @@
 /* eslint-disable no-undef */
 import { fixture, html, expect, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-// import '../src/auro-icon.js';
+import { AuroIcon } from '../src/auro-icon.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import '../index.js';
 import '../src/auro-alaska.js';
-import { registerComponent } from '../index.js';
 
 const fetchStub = sinon.stub(window, 'fetch');
 
@@ -79,6 +79,12 @@ describe('auro-icon', () => {
     expect(svg).to.not.be.null;
   });
 
+  it('successfully registers custom component', async () => {
+    RuntimeUtils.default.prototype.registerComponent('custom-icon', AuroIcon);
+
+    expect(typeof customElements.get('custom-icon')).to.equal(typeof AuroIcon);
+  });
+
   it('does not duplicate requests for same icon source', async () => {
     const el = await fixture(html`
       <auro-icon category="interface" name="chevron-up" emphasis></auro-icon>
@@ -277,7 +283,7 @@ describe('auro-icon', () => {
   it('auro-icon can be registered as a custom element name', async () => {
     const customElementName = 'custom-icon';
 
-    registerComponent(customElementName);
+    RuntimeUtils.default.prototype.registerComponent('custom-icon', AuroIcon);
 
     const el = await fixture(html`
       <custom-icon category="interface" name="chevron-up"></custom-icon>