perf: refactor custom component registration config

AlaskaAirlines · Oct 1, 2024 · 87acf80 · 87acf80
1 parent c10a02a
commit 87acf80
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 15 deletions.
diff --git a/apiExamples/custom.html b/apiExamples/custom.html
@@ -0,0 +1,15 @@
+<custom-card>
+  <img
+    slot="image"
+    src="https://picsum.photos/300/300?random=0"
+    alt="Random insert"/>
+  <h3 slot="header">Card Title</h3>
+  <p slot="description">
+    Context goes here.
+  </p>
+  <div slot="cta">
+    <auro-hyperlink href="/" nav target="_blank">
+      More info
+    </auro-hyperlink>
+  </div>
+</custom-card>
diff --git a/demo/index.html b/demo/index.html
@@ -43,9 +43,10 @@
     <script type="module" data-demo-script="true" src="../index.js"></script>
 
     <script type="module">
-      import { registerComponent } from '../index.js';
+      import { AuroCard } from '../src/auro-card.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-      registerComponent('custom-card');
+      RuntimeUtils.default.prototype.registerComponent('custom-card', AuroCard);
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->

diff --git a/demo/index.md b/demo/index.md
@@ -774,4 +774,64 @@ Note that this example also uses a `style` tag to set most of the styles - this
 </div>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### 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-card` 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.
+
+```js
+import { AuroCard } from './src/auro-card.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-card', AuroCard);
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `auro-card` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
+  <custom-card>
+    <img
+      slot="image"
+      src="https://picsum.photos/300/300?random=0"
+      alt="Random insert"/>
+    <h3 slot="header">Card Title</h3>
+    <p slot="description">
+      Context goes here.
+    </p>
+    <div slot="cta">
+      <auro-hyperlink href="/" nav target="_blank">
+        More info
+      </auro-hyperlink>
+    </div>
+  </custom-card>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
+```html
+<custom-card>
+  <img
+    slot="image"
+    src="https://picsum.photos/300/300?random=0"
+    alt="Random insert"/>
+  <h3 slot="header">Card Title</h3>
+  <p slot="description">
+    Context goes here.
+  </p>
+  <div slot="cta">
+    <auro-hyperlink href="/" nav target="_blank">
+      More info
+    </auro-hyperlink>
+  </div>
+</custom-card>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/docs/partials/index.md b/docs/partials/index.md
@@ -120,3 +120,31 @@ Note that this example also uses a `style` tag to set most of the styles - this
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+### 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-card` 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.
+
+```js
+import { AuroCard } from './src/auro-card.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-card', AuroCard);
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `auro-card` element.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
diff --git a/index.js b/index.js
@@ -1,15 +1,4 @@
 import { AuroCard } from './src/auro-card.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-card') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroCard {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('custom-card', AuroCard);