Reformatted lint & exclude sections

components/wc/LitHelloWC.ts

@@ -0,0 +1,21 @@
+/* This class does not work properly with Fresh at this point (June, 2024),
+ * This code is here as a simple Lit decorator example to use once browsers
+ * or Deno supports transpiling decorators to browser-compatible JavaScript.
+ *
+ * To use this on a Fresh page, make sure this file is exported in the main.ts
+ *  file and that it is referenced in the lit.tsx route file (uncomment
+ *  the commented code).
+*/
+
+import { html, LitElement } from "npm:lit";
+import { customElement, property } from "npm:lit/decorators.js";
+
+@customElement("hello-world")
+export class HelloWorld extends LitElement {
+  @property()
+  name?: string = "world";
+
+  render() {
+    return html`<p>Hello ${this.name}!</p>`;
+  }
+}

components/wc/TableWC.ts

@@ -15,7 +15,8 @@ class MyTable extends HTMLElement {
       text-align: center;
     }
     div {
-      font-size:2rem;
+      color: red;
+      font-size:1.5rem;
       font-weight:900;
     }
   `;

components/wc/TemplatedWC.ts

@@ -19,7 +19,8 @@ export class TemplatedWC extends HTMLElement {
     const template = document.querySelector("#template-wc");
     shadow.innerHTML = `<style>${this.css}</style>`;
     // @ts-ignore bad error: "content does not exist on type element"
-    shadow.appendChild(template!.content.cloneNode(true));
+    // shadow.appendChild(template!.content.cloneNode(true));
+    shadow.appendChild(template!.content);
     // this.innerHTML = template!.content.toString();
   }
 }

components/wc/mod.ts

@@ -9,3 +9,4 @@ export * from "./TableWC.ts";
 export * from "./FormWC.ts";
 export * from "./TemplatedWC.ts";
 export * from "./UsingNpmLib.js";
+// export * from "./LitHelloWC.ts";

deno.json

@@ -9,8 +9,17 @@
     "preview": "deno run -A main.ts",
     "update": "deno run -A -r https://fresh.deno.dev/update ."
   },
-  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
-  "exclude": ["**/_fresh/*"],
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
   "nodeModulesDir": true,
   "imports": {
     "$fresh/": "https://deno.land/x/[email protected]/",
@@ -29,4 +38,4 @@
     "jsxImportSource": "preact",
     "experimentalDecorators": true
   }
-}
+}

routes/lit.tsx

@@ -1,19 +1,23 @@
 export default function LitPage() {
   return (
     <div class="px-4 py-8 mx-auto bg-[#86efac]">
+      <div class="text-4xl font-bold">Lit Web Components</div>
+      <hr />
       <div>
-        <div class="text-4xl font-bold">Lit Web Components</div>
-        <hr />
-        <div>
-          <h2>Greeting Component</h2>
-          <my-lit-message message="Greetings from a custom element!">
-          </my-lit-message>
-        </div>
+        <h2>Greeting Component</h2>
+        <my-lit-message message="Greetings from a custom element!">
+        </my-lit-message>
       </div>
       <div>
         <h2>Custom Alert Web Component</h2>
         <custom-alert>This is a dismissible message</custom-alert>
       </div>
+      {
+        /* <div>
+        <h2>Lit Hello World Using Decorators</h2>
+        <hello-world></hello-world>
+      </div> */
+      }
     </div>
   );
 }