feat: add app inspector

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");
 		});
 	},
 };
@@ -47,13 +46,14 @@ async function main() {
 			"process.env.NODE_ENV": JSON.stringify(
 				process.env.NODE_ENV ?? "development",
 			),
+			"import.meta.dirname": "__dirname",
 		},
 		plugins: [
 			/* add to the end of plugins array */
 			esbuildProblemMatcherPlugin,
 		],
 	});
-	if (watch) {
+	if (dev) {
 		await ctx.watch();
 	} else {
 		await ctx.rebuild();