Makes the extension work on VSCode web (#72)

* Readme additions

* Change alt

* Bump package versions

* Prettify the whole project

* Make build work on web too

* resolve "path" to path-browserify

* Use prettier in standalone mode for the browser

package.json

@@ -3,7 +3,7 @@
   "displayName": "Pretty TypeScript Errors",
   "publisher": "yoavbls",
   "description": "Make TypeScript errors prettier and more human-readable in VSCode",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "icon": "assets/icon.png",
   "repository": {
     "type": "git",
@@ -34,6 +34,7 @@
     "onLanguage:mdx"
   ],
   "main": "./dist/extension.js",
+  "browser": "./dist/extension.js",
   "contributes": {
     "languages": [
       {
@@ -77,6 +78,7 @@
     "eslint": "^8.46.0",
     "glob": "^10.3.3",
     "mocha": "^10.2.0",
+    "path-browserify": "^1.0.1",
     "typescript": "^5.1.6"
   },
   "dependencies": {

scripts/build.js

@@ -1,24 +1,38 @@
 (async () => {
-	const ctx = await require('esbuild').context({
-		entryPoints: {
-			extension: './src/extension.ts'
-		},
-		bundle: true,
-		outdir: './dist',
-		external: ['vscode'],
-		format: 'cjs',
-		platform: 'node',
-		tsconfig: './tsconfig.json',
-		define: process.argv.includes('--production') ? { 'process.env.NODE_ENV': '"production"' } : undefined,
-		minify: process.argv.includes('--production'),
-		sourcemap: !process.argv.includes('--production'),
-	});
-	if (process.argv.includes('--watch')) {
-		await ctx.watch();
-		console.log('watching...');
-	}
-	else {
-		await ctx.rebuild();
-		await ctx.dispose();
-	}
+  const ctx = await require("esbuild").context({
+    entryPoints: {
+      extension: "./src/extension.ts",
+    },
+    bundle: true,
+    outdir: "./dist",
+    external: ["vscode"],
+    format: "cjs",
+    inject: ["./scripts/process-shim.js"],
+    tsconfig: "./tsconfig.json",
+    define: process.argv.includes("--production")
+      ? { "process.env.NODE_ENV": '"production"' }
+      : undefined,
+    minify: process.argv.includes("--production"),
+    sourcemap: !process.argv.includes("--production"),
+    plugins: [
+      {
+        name: "node-deps",
+        setup(build) {
+          build.onResolve({ filter: /^path$/ }, (args) => {
+            const path = require.resolve("../node_modules/path-browserify", {
+              paths: [__dirname],
+            });
+            return { path };
+          });
+        },
+      },
+    ],
+  });
+  if (process.argv.includes("--watch")) {
+    await ctx.watch();
+    console.log("watching...");
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
 })();

scripts/process-shim.js

@@ -0,0 +1,9 @@
+// https://esbuild.github.io/api/#inject
+
+let _cwd = "/";
+
+export let process = {
+  cwd: () => _cwd,
+  chdir: (newCwd) => (_cwd = newCwd),
+  env: {},
+};

src/format/prettify.ts

@@ -1,7 +1,9 @@
-import { format } from "prettier";
+import parserTypescript from "prettier/parser-typescript";
+import { format } from "prettier/standalone";
 
 export function prettify(text: string) {
   return format(text, {
+    plugins: [parserTypescript],
     parser: "typescript",
     printWidth: 60,
     singleAttributePerLine: false,

tsconfig.json

@@ -9,7 +9,8 @@
     "strict": true /* enable all strict type-checking options */,
     /* Additional Checks */
     "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
-    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
+    "esModuleInterop": true
   },
   "include": ["src/**/*.ts"]
 }