refactor scripts

Author: skyrpex

.vscode/tasks.json

@@ -2,10 +2,11 @@
 	"version": "2.0.0",
 	"tasks": [
 		{
-			"label": "watch",
+			"label": "dev",
 			"dependsOn": [
-				"npm: watch:localstack-web-mock-server",
-				"npm: watch:esbuild"
+				"npm: dev:localstack-web-mock-server",
+				"npm: dev:extension",
+				"npm: dev:appinspector-webview"
 			],
 			"presentation": {
 				"reveal": "never"
@@ -17,7 +18,7 @@
 		},
 		{
 			"type": "npm",
-			"script": "watch:esbuild",
+			"script": "dev:extension",
 			"group": "build",
 			"problemMatcher": {
 				"severity": "error",
@@ -40,23 +41,23 @@
 				"background": {
 					"activeOnStart": true,
 					"beginsPattern": {
-						"regexp": "\\[watch\\] build started"
+						"regexp": "\\[dev\\] build started"
 					},
 					"endsPattern": {
-						"regexp": "\\[watch\\] build finished"
+						"regexp": "\\[dev\\] build finished"
 					}
 				}
 			},
 			"isBackground": true,
-			"label": "npm: watch:esbuild",
+			"label": "npm: dev:extension",
 			"presentation": {
-				"group": "watch",
+				"group": "dev",
 				"reveal": "never"
 			}
 		},
 		{
 			"type": "npm",
-			"script": "watch:localstack-web-mock-server",
+			"script": "dev:localstack-web-mock-server",
 			"group": "build",
 			"isBackground": true,
 			"problemMatcher": {
@@ -86,9 +87,48 @@
 					}
 				}
 			},
-			"label": "npm: watch:localstack-web-mock-server",
+			"label": "npm: dev:localstack-web-mock-server",
 			"presentation": {
-				"group": "watch",
+				"group": "dev",
+				"reveal": "never"
+			}
+		},
+		{
+			"type": "npm",
+			"script": "dev:appinspector-webview",
+			"group": "build",
+			"problemMatcher": {
+				"severity": "error",
+				"applyTo": "closedDocuments",
+				"source": "vite",
+				"fileLocation": "relative",
+				"pattern": [
+					{
+						"regexp": "^[✘▲] \\[([A-Z]+)\\] (.+)",
+						"severity": 1,
+						"message": 2
+					},
+					{
+						"regexp": "^(?:\\t| {4})(?!\\s)([^:]+)(?::([0-9]+))?(?::([0-9]+))?:$",
+						"file": 1,
+						"line": 2,
+						"column": 3
+					}
+				],
+				"background": {
+					// "activeOnStart": true,
+					"beginsPattern": {
+						"regexp": "build started..."
+					},
+					"endsPattern": {
+						"regexp": "built in"
+					}
+				}
+			},
+			"isBackground": true,
+			"label": "npm: dev:appinspector-webview",
+			"presentation": {
+				"group": "dev",
 				"reveal": "never"
 			}
 		}

build/extension.mjs

@@ -1,7 +1,7 @@
 import esbuild from "esbuild";
 
 const production = process.argv.includes("--production");
-const watch = process.argv.includes("--watch");
+const dev = process.argv.includes("--dev");
 
 /**
  * @type {import('esbuild').Plugin}
@@ -10,8 +10,7 @@ const esbuildProblemMatcherPlugin = {
 	name: "esbuild-problem-matcher",
 	setup(build) {
 		build.onStart(() => {
-			console.clear();
-			console.log("[watch] build started");
+			console.log("[dev] build started");
 		});
 		build.onEnd((result) => {
 			result.errors.forEach(({ text, location }) => {
@@ -20,7 +19,7 @@ const esbuildProblemMatcherPlugin = {
 					`    ${location.file}:${location.line}:${location.column}:`,
 				);
 			});
-			console.log("[watch] build finished");
+			console.log("[dev] build finished");
 		});
 	},
 };
@@ -54,7 +53,7 @@ async function main() {
 			esbuildProblemMatcherPlugin,
 		],
 	});
-	if (watch) {
+	if (dev) {
 		await ctx.watch();
 	} else {
 		await ctx.rebuild();

package-lock.json

@@ -128,18 +128,21 @@
 	},
 	"scripts": {
 		"vscode:prepublish": "npm run package",
-		"compile": "node --env-file=.env.local --env-file-if-exists=.env build/extension.mjs",
-		"watch": "npm-run-all -p watch:esbuild watch:localstack-web-mock-server",
-		"watch:esbuild": "node --watch --env-file=.env.local --env-file-if-exists=.env build/extension.mjs --watch",
-		"watch:tsc": "tsc --watch",
-		"watch:localstack-web-mock-server": "node --watch --env-file=.env.local --env-file-if-exists=.env build/localstack-web-mock-server.mjs",
+		"compile": "npm-run-all -p compile:extension compile:appinspector-webview",
+		"compile:appinspector-webview": "vite build",
+		"compile:extension": "node --env-file=.env.local --env-file-if-exists=.env build/extension.mjs",
+		"compile:font": "node build/icon-font.mjs",
+		"dev": "npm-run-all -p dev:extension dev:localstack-web-mock-server dev:appinspector-webview",
+		"dev:appinspector-webview": "vite build --watch --no-clear-screen",
+		"dev:extension": "node --watch --env-file=.env.local --env-file-if-exists=.env build/extension.mjs --dev",
+		"dev:tsc": "tsc --watch",
+		"dev:localstack-web-mock-server": "node --watch --env-file=.env.local --env-file-if-exists=.env build/localstack-web-mock-server.mjs",
 		"package": "node build/extension.mjs --production",
 		"pretest": "npm run compile",
 		"check-types": "tsc",
 		"lint": "eslint",
 		"format": "biome check",
-		"test": "vscode-test",
-		"compile:font": "node build/icon-font.mjs"
+		"test": "vscode-test"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.2.3",
@@ -168,6 +171,7 @@
 		"p-min-delay": "^4.1.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-router-dom": "^6.30.1",
 		"typescript": "^5.9.2",
 		"typescript-eslint": "^8.43.0",
 		"uuid": "^13.0.0",

package.json

@@ -10,5 +10,6 @@ export default defineConfig({
 	root: path.join(import.meta.dirname, "src/app-inspector"),
 	build: {
 		outDir: "../../resources/app-inspector/dist",
+		emptyOutDir: true,
 	},
 });