Merge pull request #83 from open-wc/feat/update

feat: updates

Author: Westbrook

package.json

@@ -58,15 +58,15 @@
     "@babel/register": "^7.16.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/building-rollup": "^2.0.2",
-    "@open-wc/eslint-config": "^8.0.2",
+    "@open-wc/eslint-config": "^9.0.0",
     "@open-wc/testing": "^2.5.33",
     "@rollup/plugin-babel": "^5.3.0",
     "@web/rollup-plugin-html": "^1.11.0",
     "@web/rollup-plugin-import-meta-assets": "^1.0.7",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
     "chai": "^4.3.4",
     "chai-fs": "^2.0.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-lit": "^1.6.1",
@@ -77,6 +77,7 @@
     "mocha": "^9.1.3",
     "onchange": "^7.1.0",
     "prettier": "^2.4.1",
+    "rollup-plugin-esbuild": "^5.0.0",
     "standard-version": "^9.3.2"
   },
   "prettier": {

src/generators/app-lit-element-ts/templates/MyApp.ts

@@ -0,0 +1,78 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/scaffold-app.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ScaffoldApp",
+          "members": [
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "default": "'My app'",
+              "privacy": "public",
+              "attribute": "header"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header",
+              "fieldName": "header"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "scaffold-app",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "scaffold-app",
+          "declaration": {
+            "name": "ScaffoldApp",
+            "module": "src/scaffold-app.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/scaffold-app.stories.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "App"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "module": "stories/scaffold-app.stories.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "App",
+          "declaration": {
+            "name": "App",
+            "module": "stories/scaffold-app.stories.js"
+          }
+        }
+      ]
+    }
+  ]
+}

src/generators/app-lit-element-ts/templates/custom-elements.json

@@ -1,3 +1,81 @@
-import { <%= className %> } from './<%= className %>.js';
+import { LitElement, html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 
-customElements.define('<%= tagName %>', <%= className %>);
+const logo = new URL('../../assets/open-wc-logo.svg', import.meta.url).href;
+
+@customElement('<%= tagName %>')
+class <%= className %> extends LitElement {
+  @property({ type: String }) header = 'My app';
+
+  static styles = css`
+    :host {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: calc(10px + 2vmin);
+      color: #1a2b42;
+      max-width: 960px;
+      margin: 0 auto;
+      text-align: center;
+      background-color: var(--<%= tagName %>-background-color);
+    }
+
+    main {
+      flex-grow: 1;
+    }
+
+    .logo {
+      margin-top: 36px;
+      animation: app-logo-spin infinite 20s linear;
+    }
+
+    @keyframes app-logo-spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .app-footer {
+      font-size: calc(12px + 0.5vmin);
+      align-items: center;
+    }
+
+    .app-footer a {
+      margin-left: 5px;
+    }
+  `;
+
+  render() {
+    return html`
+      <main>
+        <div class="logo"><img alt="open-wc logo" src=${logo} /></div>
+        <h1>${this.header}</h1>
+
+        <p>Edit <code>src/<%= className %>.ts</code> and save to reload.</p>
+        <a
+          class="app-link"
+          href="https://open-wc.org/guides/developing-components/code-examples"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Code examples
+        </a>
+      </main>
+
+      <p class="app-footer">
+        🚽 Made with love by
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/open-wc"
+          >open-wc</a
+        >.
+      </p>
+    `;
+  }
+}