From 12d43ed82ae97d706eecfe31515c616562848366 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Mon, 7 Sep 2020 23:46:25 -0400
Subject: [PATCH] fix(swc-templates): update naming, imports, and dependencies

---
 projects/templates/plop-templates/component.ts.hbs       | 6 +++---
 projects/templates/plop-templates/package.json.hbs       | 8 ++++----
 projects/templates/plop-templates/spectrum-config.js.hbs | 6 ++++--
 projects/templates/plop-templates/test.ts.hbs            | 3 +--
 projects/templates/plop-templates/tsconfig.json.hbs      | 5 ++++-
 projects/templates/plopfile.js                           | 4 ++++
 6 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/projects/templates/plop-templates/component.ts.hbs b/projects/templates/plop-templates/component.ts.hbs
index a0b0703b7e..ad1e22f819 100644
--- a/projects/templates/plop-templates/component.ts.hbs
+++ b/projects/templates/plop-templates/component.ts.hbs
@@ -12,17 +12,17 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import styles from './{{ name }}.css.js';
 
 /**
  * @element {{> tagnamePartial }}
  */
-export class {{className name}} extends LitElement {
+export class {{className name}} extends SpectrumElement {
     public static get styles(): CSSResultArray {
         return [styles];
     }
diff --git a/projects/templates/plop-templates/package.json.hbs b/projects/templates/plop-templates/package.json.hbs
index 7f345f1d0f..e4afc7676e 100644
--- a/projects/templates/plop-templates/package.json.hbs
+++ b/projects/templates/plop-templates/package.json.hbs
@@ -38,8 +38,8 @@
         "/src/"
     ],
     "sideEffects": [
-        "./{{> tagnamePartial }}.js",
-        "./{{> tagnamePartial }}.ts"
+        "./sp-*.js",
+        "./sp-*.ts"
     ],
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
@@ -47,10 +47,10 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/{{ name }}": "^2.0.0"
+        "@spectrum-css/{{spectrumCSS name}}": "^2.0.0"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.0.1",
+        "@spectrum-web-components/base": "^0.1.0",
         "tslib": "^2.0.0"
     }
 }
diff --git a/projects/templates/plop-templates/spectrum-config.js.hbs b/projects/templates/plop-templates/spectrum-config.js.hbs
index 941cd4b94c..19cef67c86 100644
--- a/projects/templates/plop-templates/spectrum-config.js.hbs
+++ b/projects/templates/plop-templates/spectrum-config.js.hbs
@@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-module.exports = {
-    spectrum: '{{ name }}',
+const config = {
+    spectrum: '{{spectrumCSS name}}',
     components: [
         {
             name: '{{ name }}',
@@ -21,3 +21,5 @@ module.exports = {
         },
     ],
 };
+
+export default config;
diff --git a/projects/templates/plop-templates/test.ts.hbs b/projects/templates/plop-templates/test.ts.hbs
index b7652e8653..8788f3f093 100644
--- a/projects/templates/plop-templates/test.ts.hbs
+++ b/projects/templates/plop-templates/test.ts.hbs
@@ -10,8 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from 'lit-element';
-import { fixture, elementUpdated, expect } from '@open-wc/testing';
+import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
 
 import '../{{> tagnamePartial }}.js';
 import { {{className name}} } from '..';
diff --git a/projects/templates/plop-templates/tsconfig.json.hbs b/projects/templates/plop-templates/tsconfig.json.hbs
index b10d59338e..4e682e498f 100644
--- a/projects/templates/plop-templates/tsconfig.json.hbs
+++ b/projects/templates/plop-templates/tsconfig.json.hbs
@@ -5,5 +5,8 @@
         "rootDir": "./"
     },
     "include": ["*.ts", "src/*.ts"],
-    "exclude": ["test/*.ts", "stories/*.ts"]
+    "exclude": ["test/*.ts", "stories/*.ts"],
+    "references": [
+        { "path": "../base" }
+    ]
 }
diff --git a/projects/templates/plopfile.js b/projects/templates/plopfile.js
index 20b5ecb02c..a05706b6f0 100644
--- a/projects/templates/plopfile.js
+++ b/projects/templates/plopfile.js
@@ -10,6 +10,10 @@ module.exports = function (plop) {
         const capitalized = camel.charAt(0).toUpperCase() + camel.substring(1);
         return capitalized;
     });
+    // name of Spectrum CSS package
+    plop.setHelper('spectrumCSS', function (name) {
+        return name.replace(/-/g, '');
+    });
     // name used as title in storybook and documentation
     plop.setHelper('displayName', function (name) {
         const camel = name.replace(/-([a-z])/g, (g) => {