chore: setup esbuild for bundling typescript (#16)

use the bundling extensions documentation as a guide for setting up
esbuild. unfortunately, esbuild is necessary since bun does not support
the "cjs" output format yet, which is required for vscode extensions.

see: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#using-esbuild

.github/workflows/publish.yml

@@ -17,9 +17,9 @@ jobs:
 
       - run: |
           bun install
-          bun run vsce package
-          echo "filepath=$(ls *.vsix)" >> $GITHUB_ENV
-          echo "version=$(ls *.vsix | grep -oE '\d+\.\d+\.\d+')" >> $GITHUB_ENV
+          bun run build:vsix
+          echo "filepath=$(ls dist/*.vsix)" >> $GITHUB_ENV
+          echo "version=$(ls dist/*.vsix | grep -oE '\d+\.\d+\.\d+')" >> $GITHUB_ENV
 
       - env:
           VSCE_PAT: ${{ secrets.VSCE_PAT }}

.vscode/launch.json

@@ -8,8 +8,9 @@
       "args": [
         "${workspaceFolder}/..",
         "--disable-extensions",
-        "--extensionDevelopmentPath=${workspaceFolder}"
-      ]
+        "--extensionDevelopmentPath=${workspaceFolder}/dist"
+      ],
+      "preLaunchTask": "build extension"
     }
   ]
 }

.vscode/tasks.json

@@ -0,0 +1,10 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "build extension",
+      "type": "shell",
+      "command": "bun run build"
+    }
+  ]
+}

package.json

@@ -30,6 +30,10 @@
     "minimal",
     "theme"
   ],
+  "main": "src/extension.js",
+  "activationEvents": [
+    "onStartupFinished"
+  ],
   "contributes": {
     "iconThemes": [
       {
@@ -45,13 +49,20 @@
     ]
   },
   "scripts": {
+    "build": "bun run clean && bun run scripts/build.ts",
+    "build:vsix": "bun run build --production",
+    "clean": "git clean -xdf dist",
     "prepare": "husky"
   },
   "devDependencies": {
     "@commitlint/cli": "^19",
     "@commitlint/config-conventional": "^19",
+    "@tsconfig/bun": "^1.0.7",
+    "@tsconfig/strictest": "^2.0.5",
+    "@types/bun": "^1.1.6",
     "@types/vscode": "^1.87",
-    "@vscode/vsce": "^2",
+    "@vscode/vsce": "^2.25.0",
+    "esbuild": "^0.23.0",
     "husky": "^9"
   },
   "commitlint": {

scripts/build.ts

@@ -0,0 +1,36 @@
+import { build } from "esbuild";
+
+const isProduction = process.argv.includes("--production");
+
+// see: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#using-esbuild
+await build({
+  entryPoints: [
+    "static/**/*",
+    "theme/**/*",
+    "src/extension.ts",
+    "package.json",
+    "package.nls.json",
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "README.md",
+  ],
+  loader: {
+    ".json": "copy",
+    ".md": "copy",
+    ".png": "copy",
+    ".svg": "copy",
+  },
+  outdir: "dist",
+  external: ["vscode"],
+  format: "cjs",
+  platform: "node",
+  bundle: true,
+  sourcesContent: false,
+  minify: isProduction,
+  sourcemap: !isProduction,
+});
+
+if (isProduction) {
+  const { createVSIX } = await import("@vscode/vsce");
+  await createVSIX({ cwd: "dist" });
+}

src/extension.ts

@@ -0,0 +1,5 @@
+import * as vscode from "vscode";
+
+export function activate(context: vscode.ExtensionContext) {
+  console.log(`[${context.extension.id}] active`);
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["@tsconfig/bun", "@tsconfig/strictest"],
+  "include": ["scripts", "src"]
+}