Use typings command.js, the trick is import maps

.devcontainer/devcontainer.json

@@ -30,7 +30,7 @@
   "postCreateCommand": ".devcontainer/init.sh",
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
-   "forwardPorts": [ 4000 ]
+  "forwardPorts": [4000]
 
   // Use 'postCreateCommand' to run commands after the container is created.
   // "postCreateCommand": "dotnet restore",

docs/_body.html

@@ -1,12 +1,12 @@
 <script type="module">
-    import mermaid from "https://esm.sh/mermaid@9.2.2";
-    mermaid.initialize({
-        startOnLoad: true,
-        theme: "base",
-        themeVariables: {
-            primaryColor: '#1e90ff'
-        }
-    });
+  import mermaid from "mermaid";
+  mermaid.initialize({
+    startOnLoad: true,
+    theme: "base",
+    themeVariables: {
+      primaryColor: "#1e90ff",
+    },
+  });
 </script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iconify-icon.min.js"></script>
-<script type="module" src="{{root}}/scripts/command.js"></script>
+<script type="module" src="{{root}}/scripts/command.js"></script>

docs/_head.html

@@ -0,0 +1,9 @@
+<script type="importmap">
+  {
+    "imports": {
+      "lit": "https://esm.sh/[email protected]",
+      "copy-to-clipboard": "https://esm.sh/[email protected]",
+      "mermaid": "https://esm.sh/[email protected]"
+    }
+  }
+</script>

docs/scripts/command.js

@@ -1,13 +1,9 @@
-import { LitElement, html, css } from "https://esm.sh/lit@3.1.3";
-import copy from "https://esm.sh/copy-to-clipboard@3.3.3";
+import { LitElement, html, css } from "lit";
+import copy from "copy-to-clipboard";
 
 const COMMAND_STORAGE_KEY = "vpf_command";
 
 class Command extends LitElement {
-  static properties = {
-    name: { type: String },
-  };
-
   static properties = {
     // {state: true} means Lit sees these class properties as internal.
     // Note that this is meta info and is not the same thing as this._value down below.
@@ -17,7 +13,9 @@ class Command extends LitElement {
 
   constructor() {
     super();
+    /** @type String */
     this._value = "";
+    /** @type Boolean */
     this._clicked = false;
     this.onValueChanged = this.onValueChanged.bind(this);
   }
@@ -87,6 +85,9 @@ class Command extends LitElement {
     }
   `;
 
+  /**
+   * @param {String} value
+   */
   onOptionClick(value) {
     localStorage.setItem(COMMAND_STORAGE_KEY, value);
     const event = new CustomEvent(COMMAND_STORAGE_KEY, {
@@ -95,10 +96,12 @@ class Command extends LitElement {
     window.dispatchEvent(event);
   }
 
+  /** @param ev {CustomEvent<string>} */
   onValueChanged(ev) {
     this._value = ev.detail;
   }
 
+  /** @param {String} contents */
   copyToClipboard(contents) {
     copy(contents);
     this._clicked = true;

package.json

@@ -7,7 +7,7 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "format": "bunx --bun prettier ./package.json ./index.js ./types.d.ts ./sample-project/vite.config.js ./docs/*.md ./docs/content/*.css ./docs/scripts/*.js ./.devcontainer/devcontainer.json --write && dotnet fantomas .",
+    "format": "bunx --bun prettier ./package.json ./index.js ./types.d.ts ./sample-project/vite.config.js ./docs/*.md ./docs/content/*.css ./docs/scripts/*.js ./docs/*.html ./.devcontainer/devcontainer.json --write && dotnet fantomas .",
     "postinstall": "dotnet publish Fable.Daemon/Fable.Daemon.fsproj --nologo -c Release --ucr -p:PublishReadyToRun=true -o ./bin",
     "lint": "bunx tsc"
   },
@@ -38,6 +38,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.11.17",
+    "copy-to-clipboard": "^3.3.3",
+    "lit": "^3.1.3",
     "prettier": "3.2.5",
     "typescript": "5.4.5"
   }

sample-project/vite.config.js

@@ -6,7 +6,7 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 4000
+    port: 4000,
   },
   plugins: [
     Inspect(),

tsconfig.json

@@ -8,5 +8,5 @@
     "module": "NodeNext",
     "jsx": "react"
   },
-  "include": ["./index.js"]
+  "include": ["./index.js", "./docs/scripts/command.js"]
 }