Fixed Lit vscode errors

cdoremus · Apr 17, 2024 · 50300e2 · 50300e2
1 parent c53ae94
commit 50300e2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/components/wc/LitAlertWC.ts b/components/wc/LitAlertWC.ts
@@ -6,6 +6,10 @@
 import { css, html, LitElement } from "https://esm.sh/[email protected]";
 
 export class CustomAlert extends LitElement {
+  // Needed for TypeScript since it does not recognize TS properties
+  //  as class-level variables
+  icon = "";
+  theme = "";
   static get styles() {
     return css`
       :host {

diff --git a/components/wc/MyLitMessage.ts b/components/wc/MyLitMessage.ts
@@ -1,11 +1,13 @@
 import { css, html, LitElement } from "https://esm.sh/[email protected]";
 
-// @ts-ignore LSP does not recognize LitElement syntax
 export class MyLitMessage extends LitElement {
+  // Needed for TypeScript since it does not recognize TS properties
+  //   as class-level variables
+  message = "";
   // Properties are the component attributes
-  static get properties(): { message: string } {
+  static get properties() {
     return {
-      message: "",
+      message: { type: String, state: false },
     };
   }
   static get styles() {
@@ -20,7 +22,9 @@ export class MyLitMessage extends LitElement {
 
   render() {
     return html`
-    <p>The message: <span class="message">${this.message}</span></p>
+    <p>The message:
+      <span class="message">${this.message}</span>
+    </p>
     `;
   }
 }

diff --git a/static/wc/wc.esm.js b/static/wc/wc.esm.js
@@ -607,10 +607,13 @@ l2?.({ LitElement: t });
 
 // components/wc/MyLitMessage.ts
 var MyLitMessage = class extends t {
+  // Needed for TypeScript since it does not recognize TS properties
+  //   as class-level variables
+  message = "";
   // Properties are the component attributes
   static get properties() {
     return {
-      message: ""
+      message: { type: String, state: false }
     };
   }
   static get styles() {
@@ -624,7 +627,9 @@ var MyLitMessage = class extends t {
   }
   render() {
     return X`
-    <p>The message: <span class="message">${this.message}</span></p>
+    <p>The message:
+      <span class="message">${this.message}</span>
+    </p>
     `;
   }
 };
@@ -674,6 +679,10 @@ customElements.define(
 
 // components/wc/LitAlertWC.ts
 var CustomAlert = class extends t {
+  // Needed for TypeScript since it does not recognize TS properties
+  //  as class-level variables
+  icon = "";
+  theme = "";
   static get styles() {
     return v`
       :host {