perf: refactor custom component registration config

demo/index.html

@@ -50,10 +50,13 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
 
     <script type="module" data-demo-script="true">
-      import { registerComponent } from '../index.js';
+      import { AuroCombobox } from '../src/auro-combobox.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-combobox', AuroCombobox);
+
       import { initExamples } from "./index.min.js"
 
-      registerComponent('custom-combobox');
       initExamples();
     </script>
   </body>

demo/index.md

@@ -581,8 +581,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-combobox';
-registerComponent('custom-combobox');
+import { AuroCombobox } from '../src/auro-combobox.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-combobox', AuroCombobox);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-combobox>` element.

docs/partials/index.md

@@ -115,8 +115,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-combobox';
-registerComponent('custom-combobox');
+import { AuroCombobox } from '../src/auro-combobox.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-combobox', AuroCombobox);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-combobox>` element.

index.js

@@ -1,13 +1,4 @@
 import { AuroCombobox } from './src/auro-combobox.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 AuroCombobox {});
-  }
-}
+RuntimeUtils.default.prototype.registerComponent('custom-combobox', AuroCombobox);