From e31e3dae263adf1f8a6c64aabf447e5228387714 Mon Sep 17 00:00:00 2001 From: Yoav Balasiano Date: Sat, 12 Aug 2023 20:48:20 +0300 Subject: [PATCH] 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-lock.json | 17 ++++++++++-- package.json | 4 ++- scripts/build.js | 58 +++++++++++++++++++++++++---------------- scripts/process-shim.js | 9 +++++++ src/format/prettify.ts | 4 ++- tsconfig.json | 3 ++- 6 files changed, 68 insertions(+), 27 deletions(-) create mode 100644 scripts/process-shim.js diff --git a/package-lock.json b/package-lock.json index 9f7e89e..914a235 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pretty-ts-errors", - "version": "0.5.0", + "version": "0.5.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "pretty-ts-errors", - "version": "0.5.0", + "version": "0.5.1", "dependencies": { "lz-string": "^1.5.0", "prettier": "^2.8.8", @@ -29,6 +29,7 @@ "eslint": "^8.46.0", "glob": "^10.3.3", "mocha": "^10.2.0", + "path-browserify": "^1.0.1", "typescript": "^5.1.6" }, "engines": { @@ -2345,6 +2346,12 @@ "node": ">=6" } }, + "node_modules/path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", + "dev": true + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -4624,6 +4631,12 @@ "callsites": "^3.0.0" } }, + "path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==", + "dev": true + }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", diff --git a/package.json b/package.json index e448d41..b3501f2 100644 --- a/package.json +++ b/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": { diff --git a/scripts/build.js b/scripts/build.js index 7666fd6..e2a800b 100644 --- a/scripts/build.js +++ b/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(); + } })(); diff --git a/scripts/process-shim.js b/scripts/process-shim.js new file mode 100644 index 0000000..485fc12 --- /dev/null +++ b/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: {}, +}; diff --git a/src/format/prettify.ts b/src/format/prettify.ts index 81d0fe6..8becddb 100644 --- a/src/format/prettify.ts +++ b/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, diff --git a/tsconfig.json b/tsconfig.json index a783124..aa205de 100644 --- a/tsconfig.json +++ b/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"] }