From 06fe064947eb9f50d349bd387484f2b57a9e104b Mon Sep 17 00:00:00 2001
From: Tsukina-7mochi <tsukina7mochi@gmail.com>
Date: Fri, 8 Mar 2024 15:15:19 +0900
Subject: [PATCH] docs: update examples

---
 example/lit-esmsh/build.ts      |  2 ++
 example/lit-esmsh/deno.json     |  1 +
 example/lit-esmsh/my-counter.ts | 16 ++++------------
 example/lit-esmsh/readme.md     |  1 +
 example/lit-npm/import_map.json |  2 +-
 example/lit-npm/my-counter.ts   | 17 ++++-------------
 example/lit-npm/readme.md       |  4 ++--
 7 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/example/lit-esmsh/build.ts b/example/lit-esmsh/build.ts
index 43ef817..ef37a31 100644
--- a/example/lit-esmsh/build.ts
+++ b/example/lit-esmsh/build.ts
@@ -6,6 +6,8 @@ const lockMap = JSON.parse(Deno.readTextFileSync('./deno.lock'));
 
 const denoPath = await esbuildCachePlugin.util.getDenoDir();
 await esbuild.build({
+  target: "esnext",
+  platform: "browser",
   entryPoints: ['./index.ts'],
   bundle: true,
   outfile: './bundle.js',
diff --git a/example/lit-esmsh/deno.json b/example/lit-esmsh/deno.json
index 7e98aa5..1833734 100644
--- a/example/lit-esmsh/deno.json
+++ b/example/lit-esmsh/deno.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "lib": [
       "DOM"
     ]
diff --git a/example/lit-esmsh/my-counter.ts b/example/lit-esmsh/my-counter.ts
index e1756b2..c6752be 100644
--- a/example/lit-esmsh/my-counter.ts
+++ b/example/lit-esmsh/my-counter.ts
@@ -1,11 +1,8 @@
 import { css, html, LitElement } from 'lit';
-// decorators are not currently supported by esbuild
-// import { customElement, property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
+@customElement('my-counter')
 export class MyCounter extends LitElement {
-  static properties = {
-    count: { type: Number },
-  };
   static styles = css`
     button {
       padding: 1em;
@@ -26,12 +23,8 @@ export class MyCounter extends LitElement {
     }
   `;
 
-  declare count: number;
-
-  constructor() {
-    super();
-    this.count = 0;
-  }
+  @property({ type: Number })
+  accessor count = 0;
 
   private _increment() {
     this.count += 1;
@@ -43,4 +36,3 @@ export class MyCounter extends LitElement {
     `;
   }
 }
-customElements.define('my-counter', MyCounter);
diff --git a/example/lit-esmsh/readme.md b/example/lit-esmsh/readme.md
index aa6c513..113b9ad 100644
--- a/example/lit-esmsh/readme.md
+++ b/example/lit-esmsh/readme.md
@@ -1,3 +1,4 @@
 # Example: Using Lit from esm.sh
 
 Using Lit from esm.sh, mapping `lit` to remote URL (see `import_map.json`.)
+Note that esbuild compiles typescript decorators (`experimentalDecorators`) into ES decorators, therefore compiled code can be executed only with browsers that supports ES decorators.
diff --git a/example/lit-npm/import_map.json b/example/lit-npm/import_map.json
index 23c0372..b9179d1 100644
--- a/example/lit-npm/import_map.json
+++ b/example/lit-npm/import_map.json
@@ -1,6 +1,6 @@
 {
   "imports": {
     "lit": "npm:lit",
-    "lit/": "npm:lit/"
+    "lit/decorators.js": "npm:lit/decorators.js"
   }
 }
diff --git a/example/lit-npm/my-counter.ts b/example/lit-npm/my-counter.ts
index e1756b2..af75867 100644
--- a/example/lit-npm/my-counter.ts
+++ b/example/lit-npm/my-counter.ts
@@ -1,11 +1,8 @@
 import { css, html, LitElement } from 'lit';
-// decorators are not currently supported by esbuild
-// import { customElement, property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
+@customElement('my-counter')
 export class MyCounter extends LitElement {
-  static properties = {
-    count: { type: Number },
-  };
   static styles = css`
     button {
       padding: 1em;
@@ -26,13 +23,8 @@ export class MyCounter extends LitElement {
     }
   `;
 
-  declare count: number;
-
-  constructor() {
-    super();
-    this.count = 0;
-  }
-
+  @property({ type: Number })
+  accessor count = 0;
   private _increment() {
     this.count += 1;
   }
@@ -43,4 +35,3 @@ export class MyCounter extends LitElement {
     `;
   }
 }
-customElements.define('my-counter', MyCounter);
diff --git a/example/lit-npm/readme.md b/example/lit-npm/readme.md
index f05db6f..ef70040 100644
--- a/example/lit-npm/readme.md
+++ b/example/lit-npm/readme.md
@@ -1,4 +1,4 @@
 # Example: Using Lit from npm registry
 
-Using Lit from npm registry, mapping `lit` to npm module (see
-`import_map.json`.)
+Using Lit from npm registry, mapping `lit` to npm module (see `import_map.json`.)
+Note that esbuild compiles typescript decorators (`experimentalDecorators`) into ES decorators, therefore compiled code can be executed only with browsers that supports ES decorators.