From 56c98b77bcf98b4d2842f225c7c41136aaebd614 Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Mon, 23 Sep 2024 13:04:34 -0700
Subject: [PATCH] perf: refactor custom component registration config

---
 demo/index.html          |  6 +++++-
 demo/index.md            |  6 ++++--
 docs/partials/index.md   |  6 ++++--
 index.js                 | 13 ++-----------
 test/auro-button.test.js |  6 +++---
 5 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 358e438..73df311 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -29,7 +29,11 @@
         });
     </script>
     <script type="module" data-demo-script="true">
-      import { registerComponent } from '../index.js';
+      import { AuroButton } from './src/auro-button.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+      
       import { initExamples } from './index.min.js'; 
 
       registerComponent('custom-button');
diff --git a/demo/index.md b/demo/index.md
index cc8148c..824f029 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -228,8 +228,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-button';
-registerComponent('custom-button');
+import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 672cda5..8e4cbdf 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -141,8 +141,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-button';
-registerComponent('custom-button');
+import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.
diff --git a/index.js b/index.js
index 5365302..3103973 100644
--- a/index.js
+++ b/index.js
@@ -1,13 +1,4 @@
 import { AuroButton } from './src/auro-button.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}
- */
-export function registerComponent(name) {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroButton {});
-  }
-}
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
diff --git a/test/auro-button.test.js b/test/auro-button.test.js
index 037bdd0..4dbe531 100644
--- a/test/auro-button.test.js
+++ b/test/auro-button.test.js
@@ -7,7 +7,7 @@
 /* eslint-disable no-undef */
 import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
 import { AuroButton } from '../src/auro-button.js';
-import { registerComponent } from '../index.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import '../index.js';
 
 describe('auro-button', () => {
@@ -33,9 +33,9 @@ describe('auro-button', () => {
   });
 
   it('successfully registers custom component', async () => {
-    registerComponent('test-button');
+    RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 
-    expect(typeof customElements.get('test-button')).to.equal(typeof AuroButton);
+    expect(typeof customElements.get('custom-button')).to.equal(typeof AuroButton);
   });
 
   it('tests setting autofocus', async () => {