From c006e6f7edd82680689a65bca1d0a1d8724ca847 Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Thu, 26 Sep 2024 10:27:14 -0700
Subject: [PATCH] perf: refactor custom component registration config

---
 demo/index.html        |  7 +++++--
 demo/index.md          |  6 ++++--
 docs/partials/index.md |  6 ++++--
 index.js               | 15 ++-------------
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 0575f9c..13f0551 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -39,10 +39,13 @@
     </script>
     
     <script type="module" data-demo-script="true">
-      import { registerComponent } from '../index.js';
+      import { AuroCarousel } from '../src/auro-carousel.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-carousel', AuroCarousel);
+
       import { initExamples } from './index.min.js';
 
-      registerComponent('custom-carousel');
       initExamples();
     </script>
 
diff --git a/demo/index.md b/demo/index.md
index c560f01..eaac1be 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -296,8 +296,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-carousel';
-registerComponent('custom-carousel');
+import { AuroCarousel } from './src/auro-carousel.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-carousel', AuroCarousel);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-carousel` element.
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 298dfd4..972a161 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -58,8 +58,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-carousel';
-registerComponent('custom-carousel');
+import { AuroCarousel } from './src/auro-carousel.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-carousel', AuroCarousel);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-carousel` element.
diff --git a/index.js b/index.js
index 55e784c..2bcafa4 100644
--- a/index.js
+++ b/index.js
@@ -1,15 +1,4 @@
 import { AuroCarousel } from './src/auro-carousel.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-carousel') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroCarousel {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('custom-carousel', AuroCarousel);