feat(api): add register static method #70

- Update dependency versions - `AuroAlert.register` is to easily register the element without extra importing - `import "@aurodesignsystem/auro-alert"` will still register this element to <auro-alert> - `import { AuroAlert } from '../src/auro-alert.js` wont register this element until `AuroAlert.register` gets called
AlaskaAirlines · Oct 24, 2024 · bdb1d87 · bdb1d87
1 parent ff6adce
commit bdb1d87
Show file tree

Hide file tree

Showing 15 changed files with 4,255 additions and 1,945 deletions.
diff --git a/demo/api.html b/demo/api.html
@@ -40,8 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js" data-demo-script="true"></script>
-    <script src="./api.min.js"></script>
+    <script type="module" data-demo-script="true" src="./api.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

diff --git a/demo/api.js b/demo/api.js
@@ -0,0 +1 @@
+import '../index.js';
diff --git a/demo/api.min.js b/demo/api.min.js
diff --git a/demo/index.html b/demo/index.html
@@ -28,13 +28,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../src/auro-alert.js"></script>
-    <script type="module">
-      import { AuroAlert } from '../src/auro-alert.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-alert', AuroAlert);
-    </script>
+    <script type="module" data-demo-script="true" src="./index.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,4 @@
+import { AuroAlert } from '../src/auro-alert.js';
+
+AuroAlert.register();
+AuroAlert.register('custom-alert');
diff --git a/demo/index.md b/demo/index.md
@@ -2,15 +2,15 @@
 The index.md file is a compiled document. No edits should be made directly to this file.
 README.md is created by running `npm run build:docs`.
 This file is generated based on a template fetched from `./docs/partials/index.md`
--->
-
+-->
+
 # Alert
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
 <!-- The below content is automatically added from ./description.md -->
 The `auro-alert` component renders errors, warnings, and other inline notifications with automated styling elements. Simply add the `type` attribute the corresponding value. If you need to present multiple lines in the same alert wrapper, use p tags for each line.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## auro-alert use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
@@ -20,8 +20,8 @@ The `auro-alert` use cases include:
 * Error messages
 * Warning messages
 * Informational messages
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## auro-alert default use
 The following illustrates the default use of the `auro-alert` element.
 
@@ -30,18 +30,18 @@ The following illustrates the default use of the `auro-alert` element.
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
   <auro-alert>This is a default error with no error type specified.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
+
 ```html
-<auro-alert>This is a default error with no error type specified.</auro-alert>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
+<auro-alert>This is a default error with no error type specified.</auro-alert>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Single line alerts
 
 See the following examples that illustrate how to generate a basic alert with the various `error`, `warning`, `information`, or `success` types.
@@ -66,39 +66,39 @@ See the following examples that illustrate how to generate a basic alert with th
   <!-- The below content is automatically added from ./../../apiExamples/success.html -->
   <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
+
 ```html
-<auro-alert type="error">Transaction failed.</auro-alert>
-```
+<auro-alert type="error">Transaction failed.</auro-alert>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/warning.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/warning.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/warning.html -->
+
 ```html
-<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
-```
+<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/information.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/information.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/information.html -->
+
 ```html
-<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
-```
+<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/success.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/success.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/success.html -->
+
 ```html
-<auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
+<auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Customize content
 
 While Auro components, `auro-alert` included, come with a pre-defined UI opinion, another feature that is fully supported is a user's ability to customize any content in the slot. The following example illustrates how a user can completely customize the content in the `<slot>` of the element, while not needing to recreate the `auro-alert` UI.
@@ -127,12 +127,12 @@ While Auro components, `auro-alert` included, come with a pre-defined UI opinion
     </div>
   </auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom-content.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/custom-content.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom-content.html -->
+
 ```html
 <auro-alert type="information">
   <style>
@@ -153,22 +153,21 @@ While Auro components, `auro-alert` included, come with a pre-defined UI opinion
       * Non arcu risus quis varius quam quisque id. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nec feugiat nisl pretium fusce id velit ut tortor.
     </p>
   </div>
-</auro-alert>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
+</auro-alert>
+```
+<!-- 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-alert` custom element is defined automatically.
+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 element. 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-alert` 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.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroAlert.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroAlert } from './src/auro-alert.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-alert', AuroAlert);
+AuroAlert.register('custom-alert');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-alert` element.
@@ -178,14 +177,14 @@ This will create a new custom element that you can use in your HTML that will fu
   <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
   <custom-alert type="warning">Salutations World!</custom-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+  <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 -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->
+
 ```html
-<custom-alert type="warning">Salutations World!</custom-alert>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+<custom-alert type="warning">Salutations World!</custom-alert>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/demo/index.min.js b/demo/index.min.js
diff --git a/docs/partials/index.md b/docs/partials/index.md
@@ -82,15 +82,14 @@ While Auro components, `auro-alert` included, come with a pre-defined UI opinion
 
 ## 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-alert` custom element is defined automatically.
+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 element. 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-alert` 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.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroAlert.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroAlert } from './src/auro-alert.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-alert', AuroAlert);
+AuroAlert.register('custom-alert');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-alert` element.

diff --git a/index.js b/index.js
@@ -1,4 +1,3 @@
 import { AuroAlert } from './src/auro-alert.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-alert', AuroAlert);
+AuroAlert.register();