✨ feat(settings-webview): integrate settings-webview with extension

- implement settings webview using react and fluentui
- add esbuild configs for building the settings webview
- add vscode api typings

Author: bramburn

.vscodeignore

@@ -44,6 +44,17 @@ webview-ui/package-lock.json
 webview-ui/node_modules/**
 **/.gitignore
 
+# Ignore all settings-webview files except the build directory (https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/frameworks/hello-world-react-cra/.vscodeignore)
+settings-webview/src/**
+settings-webview/public/**
+settings-webview/scripts/**
+settings-webview/index.html
+settings-webview/README.md
+settings-webview/package.json
+settings-webview/package-lock.json
+settings-webview/node_modules/**
+
+
 # Fix issue where codicons don't get packaged (https://github.com/microsoft/vscode-extension-samples/issues/692)
 !node_modules/@vscode/codicons/dist/codicon.css
 !node_modules/@vscode/codicons/dist/codicon.ttf

esbuild.js

@@ -1,5 +1,6 @@
 const esbuild = require("esbuild")
 const fs = require("fs")
+const fsExtra = require("fs-extra")
 const path = require("path")
 
 const production = process.argv.includes("--production")
@@ -160,6 +161,39 @@ const copyLocalesFiles = {
 	},
 }
 
+const copyWebviewFiles = {
+	name: "copy-webview-files",
+	setup(build) {
+		build.onEnd(() => {
+			// Copy webview-ui build output to dist folder
+			const webviewBuildFolder = path.join(__dirname, "webview-ui", "build")
+			const webviewTargetFolder = path.join(__dirname, "dist", "webview-ui")
+			if (fs.existsSync(webviewBuildFolder)) {
+				fs.mkdirSync(webviewTargetFolder, { recursive: true })
+				fsExtra.copySync(webviewBuildFolder, webviewTargetFolder)
+				console.log("Copied webview-ui files to dist/webview-ui")
+			} else {
+				console.warn("webview-ui/build folder does not exist. Skipping copy.")
+			}
+
+			// Copy settings-webview build output to dist folder
+			const settingsWebviewDistFolder = path.join(__dirname, "settings-webview", "dist")
+			const settingsWebviewTargetFolder = path.join(__dirname, "dist", "settings-webview")
+			if (fs.existsSync(settingsWebviewDistFolder)) {
+				// Clean the target folder if it exists
+				if (fs.existsSync(settingsWebviewTargetFolder)) {
+					fsExtra.removeSync(settingsWebviewTargetFolder)
+				}
+				fs.mkdirSync(settingsWebviewTargetFolder, { recursive: true })
+				fsExtra.copySync(settingsWebviewDistFolder, settingsWebviewTargetFolder)
+				console.log("Copied settings-webview files to dist/settings-webview")
+			} else {
+				console.warn("settings-webview/dist folder does not exist. Skipping copy.")
+			}
+		})
+	},
+}
+
 const extensionConfig = {
 	bundle: true,
 	minify: production,
@@ -168,6 +202,7 @@ const extensionConfig = {
 	plugins: [
 		copyWasmFiles,
 		copyLocalesFiles,
+		copyWebviewFiles,
 		/* add to the end of plugins array */
 		esbuildProblemMatcherPlugin,
 		{

package-lock.json

@@ -363,14 +363,17 @@
 		"install:all": "npm install npm-run-all && npm-run-all -l -p install-*",
 		"install-extension": "npm install",
 		"install-webview": "cd webview-ui && npm install",
+		"install-settings-webview": "cd settings-webview && npm install",
 		"install-e2e": "cd e2e && npm install",
 		"lint": "npm-run-all -l -p lint:*",
 		"lint:extension": "eslint src --ext ts",
 		"lint:webview": "cd webview-ui && npm run lint",
+		"lint:settings-webview": "cd settings-webview && npm run lint",
 		"lint:e2e": "cd e2e && npm run lint",
 		"check-types": "npm-run-all -l -p check-types:*",
 		"check-types:extension": "tsc --noEmit",
 		"check-types:webview": "cd webview-ui && npm run check-types",
+		"check-types:settings-webview": "cd settings-webview && npm run check-types",
 		"check-types:e2e": "cd e2e && npm run check-types",
 		"package": "npm-run-all -l -p build:webview build:settings-webview build:esbuild check-types lint",
 		"pretest": "npm run compile",
@@ -379,6 +382,7 @@
 		"test": "node scripts/run-tests.js",
 		"test:extension": "jest",
 		"test:webview": "cd webview-ui && npm run test",
+		"test:settings-webview": "cd settings-webview && npm run test",
 		"prepare": "husky",
 		"publish:marketplace": "vsce publish && ovsx publish",
 		"publish": "npm run build && changeset publish && npm install --package-lock-only",
@@ -394,10 +398,12 @@
 		"clean": "npm-run-all -l -p clean:*",
 		"clean:extension": "rimraf bin dist out",
 		"clean:webview": "cd webview-ui && npm run clean",
+		"clean:settings-webview": "cd settings-webview && npm run clean",
 		"clean:e2e": "cd e2e && npm run clean",
 		"vscode-test": "npm-run-all -l -p vscode-test:*",
 		"vscode-test:extension": "tsc -p . --outDir out && node esbuild.js",
 		"vscode-test:webview": "cd webview-ui && npm run build",
+		"vscode-test:settings-webview": "cd settings-webview && npm run build",
 		"update-contributors": "node scripts/update-contributors.js",
 		"generate-types": "tsx scripts/generate-types.mts"
 	},
@@ -477,6 +483,7 @@
 		"esbuild": "^0.24.0",
 		"eslint": "^8.57.0",
 		"execa": "^9.5.2",
+		"fs-extra": "^11.3.0",
 		"glob": "^11.0.1",
 		"husky": "^9.1.7",
 		"jest": "^29.7.0",