feat(typescript): add typescript support

Change to be Committed:

modified: template/index.js
modified: template/package.json
modified: template/demo/index.html
modified: template/docs/partials/demo.md
modified: template/src/[namespace]-[name].js
modified: template/test/[namespace]-[name].test.js
deleted: template/README.md

template/demo/index.html

@@ -40,7 +40,11 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../src/[namespace]-[name].js"></script>
+    <script type="module">
+      import { registerComponent } from "../index.js"
+      registerComponent('custom-[name]');
+    </script>
+
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

template/docs/partials/demo.md

@@ -52,3 +52,29 @@ toggleDialogClose = (elName) => {
 <!-- 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 `[namespace]-[name]` 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 './node_modules/@alaskaairux/[namespace]-[name]';
+registerComponent('custom-[name]');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `[namespace]-[name]` element.
+
+<div class="exampleWrapper">
+  <custom-header display="display">Salutations World!</custom-header>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <custom-header display="display">Salutations World!</custom-header>
+  ```
+
+</auro-accordion>

template/index.js

@@ -1 +1,15 @@
-export * from './dist/[namespace]-[name]';
+import { [Namespace][Name] } from './src/[namespace]-[name]';
+
+/**
+ * Register Custom Element.
+ * @param {Object} name - Name to use for custom element.
+ * @returns {void}
+ */
+ const registerComponent = (name = 'custom-[name]') => {
+  // alias definition
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends [Namespace][Name] {});
+  }
+}
+
+export { registerComponent }

template/package.json

@@ -19,9 +19,8 @@
     "node": ">=[nodeVersion]"
   },
   "dependencies": {
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "chalk": "^4.1.2"
+    "chalk": "^4.1.2",
+    "lit": "^2.7.2"
   },
   "peerDependencies": {
     "@alaskaairux/design-tokens": "",
@@ -127,7 +126,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render dist:js build:api test build:markdownDocs bundler postinstall types",
+    "build": "npm-run-all build:sass sass:render cssLint dist:js bundler postinstall build:api types",
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/[namespace]-[name].js' --outFiles docs/api.md",
     "build:demo": "npm-run-all build demo:rm:build demo:new:build demo:copy:index demo:copy:demo demo:update:index",

template/src/[namespace]-[name].js

@@ -24,7 +24,7 @@ import styleCssFixed from './style-fixed-css.js';
  */
 
 // build the component class
-class [Namespace][Name] extends LitElement {
+export class [Namespace][Name] extends LitElement {
   // constructor() {
   //   super();
   // }
@@ -63,7 +63,7 @@ class [Namespace][Name] extends LitElement {
   }
 }
 
-// define the name of the custom component
+// default internal definition
 if (!customElements.get("[namespace]-[name]")) {
   customElements.define("[namespace]-[name]", [Namespace][Name]);
 }

template/test/[namespace]-[name].test.js

@@ -1,5 +1,5 @@
 import { fixture, html, expect } from '@open-wc/testing';
-import '../src/[namespace]-[name].js';
+import '../src/[namespace]-[name]';
 
 describe('[namespace]-[name]', () => {
   it('sets the CSS class on [namespace]-[name] > div element', async () => {