feat(api): add register static method #21

- `AuroForm.register` is to easily register the element without extra importing
- `import '@aurodesignsystem/auro-form'` will still register this element to `<auro-form>`
- `import { AuroForm } from '../src/auro-form'` wont register this element until `AuroForm.register` gets called

components/form/demo/api.html

@@ -40,7 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../index.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>

components/form/demo/api.js

@@ -0,0 +1,3 @@
+import { AuroForm } from "../src/auro-form.js"
+
+AuroForm.register();

components/form/demo/api.min.js

@@ -0,0 +1,67 @@
+import { css, LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ *
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
+ */
+
+// build the component class
+class AuroForm extends LitElement {
+  // constructor() {
+  //   super();
+  // }
+
+  // This function is to define props used within the scope of this component
+  // Be sure to review  https://lit.dev/docs/components/properties/
+  // to understand how to use reflected attributes with your property settings.
+  static get properties() {
+    return {
+      // ...super.properties,
+
+      // this property is DEMO ONLY! Please delete.
+      cssClass:   { type: String }
+    };
+  }
+
+  static get styles() {
+    return [styleCss];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-form"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroForm.register("custom-form") // this will register this element to <custom-form/>
+   *
+   */
+  static register(name = "auro-form") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+  }
+
+  // When using auroElement, use the following attribute and function when hiding content from screen readers.
+  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+
+      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
+      <div class=${this.cssClass} tabindex="0">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+AuroForm.register();

components/form/demo/index.html

@@ -40,7 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" data-demo-script="true" src="../index.js"></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>

components/form/demo/index.js

@@ -0,0 +1,4 @@
+import { AuroForm } from '../src/auro-form.js';
+
+AuroForm.register();
+AuroForm.register('custom-form');

components/form/demo/index.min.js

@@ -0,0 +1,68 @@
+import { css, LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ *
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
+ */
+
+// build the component class
+class AuroForm extends LitElement {
+  // constructor() {
+  //   super();
+  // }
+
+  // This function is to define props used within the scope of this component
+  // Be sure to review  https://lit.dev/docs/components/properties/
+  // to understand how to use reflected attributes with your property settings.
+  static get properties() {
+    return {
+      // ...super.properties,
+
+      // this property is DEMO ONLY! Please delete.
+      cssClass:   { type: String }
+    };
+  }
+
+  static get styles() {
+    return [styleCss];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-form"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroForm.register("custom-form") // this will register this element to <custom-form/>
+   *
+   */
+  static register(name = "auro-form") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+  }
+
+  // When using auroElement, use the following attribute and function when hiding content from screen readers.
+  // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+
+      <!-- this is demo code, DO NOT USE IN YOUR ELEMENT -->
+      <div class=${this.cssClass} tabindex="0">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+AuroForm.register();
+AuroForm.register('custom-form');

components/form/docs/partials/demo.md

@@ -44,13 +44,14 @@ Having a closing statement about your example helps to really complete the thoug
 
 ## 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-form` 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-form` 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 `AuroForm.register(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-form';
-registerComponent('custom-form');
+import { AuroForm } from './node_modules/@aurodesignsystem/auro-form/src/auro-form';
+
+AuroForm.register('custom-form');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-form` element.

components/form/src/auro-component-form.js

@@ -14,6 +14,8 @@ import { LitElement, html } from "lit";
 // Import touch detection lib
 import styleCss from "./styles/style-css.js";
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-form element provides users a way to ... (it would be great if you fill this out).
@@ -44,6 +46,18 @@ export class Form extends LitElement {
     return [styleCss];
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-form"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroForm.register("custom-form") // this will register this element to <custom-form/>
+   *
+   */
+  static register(name = "auro-form") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+  }
+
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
@@ -59,7 +73,3 @@ export class Form extends LitElement {
   }
 }
 
-// default internal definition
-if (!customElements.get("auro-component-form")) {
-  customElements.define("auro-component-form", Form);
-}

index.js

@@ -1,4 +1,3 @@
-import { AuroForm } from './auro-form.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroForm } from './components/form/src/auro-form.js';
 
-RuntimeUtils.default.prototype.registerComponent('custom-form', AuroForm);
+AuroForm.register();

rollup.config.mjs

@@ -45,4 +45,19 @@ const componentConfigs = getComponentEntryPoints().map(({ name, input, output })
   createConfig(name, input, output)
 );
 
-export default [mainConfig, ...componentConfigs];
+
+function createExampleConfig(componentName, entryPoint) {
+  return {
+    input: {
+      [`${entryPoint}.min`]: `./components/${componentName}/demo/${entryPoint}.js`,
+    },
+    output: {
+      format: 'esm',
+      dir: `./components/${componentName}/demo/`,
+    },  
+  };
+}
+
+const docConfig = [createExampleConfig('form', 'index'), createExampleConfig('form', 'api')];
+
+export default [mainConfig, ...componentConfigs, ...docConfig];