feat(api): add register static method

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

demo/index.html

@@ -41,12 +41,7 @@
         });
     </script>
     <script type="module" data-demo-script="true" src="../index.js"></script>
-    <script type="module">
-      import { AuroSkeleton } from '../src/auro-skeleton.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-      RuntimeUtils.default.prototype.registerComponent('custom-skeleton', AuroSkeleton);
-    </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>

demo/index.js

@@ -0,0 +1,3 @@
+import { AuroSkeleton } from '../src/auro-skeleton.js';
+
+AuroSkeleton.register('custom-skeleton');

demo/index.md

@@ -126,13 +126,12 @@ Use your imagination. Wherever data can be placed, an `<auro-skelelton>` element
 
 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-skeleton` 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 `AuroSkeleton.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroSkeleton } from './src/auro-skeleton.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-skeleton', AuroSkeleton);
+AuroSkeleton.register('custom-skeleton');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` element.

demo/index.min.js

@@ -0,0 +1,75 @@
+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}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, 0.375rem)}@keyframes place-holder-shimmer{from{background-position:-1000px 0}to{background-position:1000px 0}}`;
+
+var colorCss = css`:host{background-color:var(--ds-auro-skeleton-container-color);background-image:linear-gradient(to right, var(--ds-auro-skeleton-container-gradient-color-one) 10%, var(--ds-auro-skeleton-container-gradient-color-two) 40%, var(--ds-auro-skeleton-container-gradient-color-one) 60%)}`;
+
+var tokensCss = css`:host{--ds-auro-skeleton-container-color: var(--ds-color-container-subtle-default, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-color-container-subtle-default, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-color-container-tertiary-default, rgba(0, 0, 0, 0.03))}`;
+
+// Copyright (c) 2021 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-skeleton element provides users a way to indicate the loading of asynchronous content on a page.
+ *
+ * @attr {String} shape - Renders a circle, oval, or rectangle loader.
+ */
+
+// build the component class
+class AuroSkeleton extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      // ...super.properties,
+    };
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-skeleton"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroSkeleton.register("custom-skeleton") // this will register this element to <custom-skeleton/>
+   *
+   */
+  static register(name = "auro-skeleton") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSkeleton);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-skeleton');
+  }
+
+  // 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`
+      <span class="util_displayHiddenVisually">Loading...</span>
+    `;
+  }
+}
+
+AuroSkeleton.register('custom-skeleton');

docs/partials/index.md

@@ -58,13 +58,12 @@ Use your imagination. Wherever data can be placed, an `<auro-skelelton>` element
 
 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-skeleton` 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 `AuroSkeleton.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroSkeleton } from './src/auro-skeleton.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-skeleton', AuroSkeleton);
+AuroSkeleton.register('custom-skeleton');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` element.

index.js

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

package.json

@@ -138,7 +138,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler postinstall build:api build:docs types",
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",

rollup.config.mjs

@@ -21,4 +21,14 @@ const production = !process.env.ROLLUP_WATCH,
   ]
 };
 
-export default [modernConfig];
+const indexExamplesConfig = {
+  input: {
+    ['index.min']: './demo/index.js',
+  },
+  output: {
+    format: 'esm',
+    dir: 'demo/'
+  }
+};
+
+export default [modernConfig, indexExamplesConfig];

src/auro-skeleton.js

@@ -45,6 +45,18 @@ export class AuroSkeleton extends LitElement {
     ];
   }
 
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-skeleton"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroSkeleton.register("custom-skeleton") // this will register this element to <custom-skeleton/>
+   *
+   */
+  static register(name = "auro-skeleton") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSkeleton);
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-skeleton');
@@ -60,9 +72,3 @@ export class AuroSkeleton extends LitElement {
     `;
   }
 }
-
-/* istanbul ignore else */
-// define the name of the custom component
-if (!customElements.get("auro-skeleton")) {
-  customElements.define("auro-skeleton", AuroSkeleton);
-}

test/auro-skeleton.test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/auro-skeleton.js';
+import '../index.js';
 
 describe('auro-skeleton', () => {
   it('auro-skeleton is accessible', async () => {