docs: update examples

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',

example/lit-esmsh/deno.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "lib": [
       "DOM"
     ]

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);

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.

example/lit-npm/import_map.json

@@ -1,6 +1,6 @@
 {
   "imports": {
     "lit": "npm:lit",
-    "lit/": "npm:lit/"
+    "lit/decorators.js": "npm:lit/decorators.js"
   }
 }

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);

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.