feat(api): add register static method #45

- `AuroDatetime.register` is to easily register the element without extra importing - `import "@aurodesignsystem/auro-datetime"` will still register this element to <auro-datetime> - `import { AuroDatetime } from '@aurodesignsystem/auro-datetime/src/auro-datetime.js` wont register this element until `AuroDatetime.register` gets called - Fixed the typo on Recommended Use and Version Control. `clement` -> `element`
AlaskaAirlines · Oct 23, 2024 · 305e723 · 305e723
1 parent 36e94ea
commit 305e723
Show file tree

Hide file tree

Showing 11 changed files with 346 additions and 61 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -40,13 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../index.js"></script>
-    <script type="module">
-      import { AuroDatetime } from '../src/auro-datetime.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-datetime', AuroDatetime);
-    </script>
+    <script type="module" data-demo-script="true" src="./index.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/index.js b/demo/index.js
@@ -0,0 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+import { AuroDatetime } from '../src/auro-datetime.js';
+
+AuroDatetime.register();
+AuroDatetime.register('custom-datetime');
diff --git a/demo/index.md b/demo/index.md
@@ -2,24 +2,24 @@
 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`
--->
-
+-->
+
 # Datetime
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
 <!-- The below content is automatically added from ./description.md -->
 The `<auro-datetime>` custom element makes it really easy to add dates to your web app with a simple HTML API.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## auro-datetime use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
 <!-- The below content is automatically added from ./useCases.md -->
 The `<auro-datetime>` element should be used in situations where users may:
 
 * A date and/or time is required
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Example(s)
 
 ### Basic Date
@@ -29,49 +29,48 @@ The `<auro-datetime>` element should be used in situations where users may:
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
   <auro-datetime type="date"></auro-datetime>
   <!-- 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-datetime type="date"></auro-datetime>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
+<auro-datetime type="date"></auro-datetime>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Basic Time
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basicTime.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/basicTime.html -->
   <auro-datetime type="time"></auro-datetime>
   <!-- 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/basicTime.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/basicTime.html -->
-
+<!-- The below code snippet is automatically added from ./../../apiExamples/basicTime.html -->
+
 ```html
-<auro-datetime type="time"></auro-datetime>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-Having a closing statement about your example helps to really complete the thought with your reader.
-
+<auro-datetime type="time"></auro-datetime>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+Having a closing statement about your example helps to really complete the thought with your reader.
+
 ## 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-datetime` 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-datetime` 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 `AuroDatetime.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroDatetime } from './src/auro-datetime.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-datetime', AuroDatetime);
+AuroDatetime.register('custom-datetime');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-datetime` element.
@@ -81,11 +80,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-datetime type="date"></custom-datetime>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
-  <custom-datetime type="date"></custom-datetime>
-  <!-- AURO-GENERATED-CONTENT:END -->
+  <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-datetime type="date"></custom-datetime>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>