Automate toolkit test set up in a webview extension environment (#317)

Description of changes

Creates a Node script that automates the steps required to copy a new toolkit build into a webview extension environment so that it can be manually/visually tested.

.eslintignore

@@ -9,4 +9,8 @@ coverage
 # don't lint storybook files
 .storybook/
 # don't lint stories
-*.stories.*
+*.stories.*
+# don't lint scripts folder
+scripts
+# don't lint webview test environment
+test-webview

.gitignore

@@ -5,6 +5,9 @@ node_modules/
 dist/
 storybook-static/
 
+# Tests
+test-webview
+
 # Misc
 .DS_Store
 .vscode

.npmignore

@@ -11,6 +11,7 @@ CONTRIBUTING.md
 # Tests
 *.spec.*
 coverage/
+test-webview
 
 # Builds
 build/

.prettierignore

@@ -6,6 +6,9 @@ build/
 dist/
 storybook-static/
 
+# Tests
+test-webview
+
 # Misc
 .DS_Store
 .vscode

.prettierrc

@@ -31,6 +31,12 @@
 			"options": {
 				"printWidth": 200
 			}
+		},
+		{
+			"files": "scripts/setup-webview-test-env.js",
+			"options": {
+				"printWidth": 200
+			}
 		}
 	]
 }

package.json

@@ -26,7 +26,8 @@
 		"lint": "eslint . --ext .ts",
 		"lint:fix": "eslint . --ext .ts --fix",
 		"prepublishOnly": "npm run build",
-		"test": "jest --verbose --coverage"
+		"test": "jest --verbose --coverage",
+		"test:webview": "npm run build && node ./scripts/setup-webview-test-env.js"
 	},
 	"dependencies": {
 		"@microsoft/fast-element": "^1.6.0",

scripts/setup-webview-test-env.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+
+const {exec} = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+const util = require('util');
+
+const execPromise = util.promisify(exec);
+
+async function main() {
+	// Empty print line to pretty-ify command line output
+	console.log();
+
+	// Copy webview test environment locally if it does not already exist
+	if (!fs.existsSync('./test-webview')) {
+		try {
+			console.log(color(['dim'], 'Copying webview test environment locally...'));
+			await execShellCommand('npx degit microsoft/vscode-webview-ui-toolkit-samples/all-components test-webview');
+		} catch (err) {
+			console.log(`${color(['red'], 'Error: Could not copy webview test environment locally')}\n    ${err}`);
+			process.exit();
+		}
+	}
+
+	// Install the webview test environment dependencies if they do not exist
+	if (!fs.existsSync('./test-webview/node_modules')) {
+		try {
+			console.log(color(['dim'], 'Installing webview test environment dependencies...'));
+			await execShellCommand('cd ./test-webview && npm install');
+		} catch (err) {
+			console.log(`${color(['red'], 'Error: Could not install webview test environment dependencies')}\n    ${err}`);
+			process.exit();
+		}
+	}
+
+	// Copy latest toolkit build into the webview test environment
+	console.log(color(['dim'], 'Copying latest toolkit build into webview test environment...'));
+	delDir('./test-webview/node_modules/@vscode/webview-ui-toolkit/dist');
+	createDir('./test-webview/node_modules/@vscode/webview-ui-toolkit/dist');
+	copyDir('./dist', './test-webview/node_modules/@vscode/webview-ui-toolkit');
+
+	// Print success and next steps messages
+	console.log();
+	console.log(color(['bold', 'green'], 'Webview test environment successfully configured!'));
+	console.log();
+	console.log('Next steps:');
+	console.log(`  1. Open the ${color(['cyan'], 'test-webview')} folder in a new VS Code window`);
+	console.log(`  2. Press ${color(['cyan'], 'F5')} to open the webview test extension with the most recent toolkit build loaded`);
+	console.log(`  3. Run the "${color(['cyan'], 'Webview UI Toolkit: All Components')}" command using the VS Code command palette`);
+	console.log();
+}
+
+async function execShellCommand(command) {
+	return await execPromise(command);
+}
+
+function delDir(path) {
+	if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) {
+		fs.readdirSync(path).forEach(function (file, index) {
+			const currPath = path + '/' + file;
+			if (fs.lstatSync(currPath).isDirectory()) {
+				delDir(currPath);
+			} else {
+				fs.unlinkSync(currPath);
+			}
+		});
+		fs.rmdirSync(path);
+	}
+}
+
+function createDir(dir) {
+	if (!fs.existsSync(dir)) {
+		fs.mkdirSync(dir);
+	}
+}
+
+function copyDir(source, target) {
+	let files = [];
+	const targetFolder = path.join(target, path.basename(source));
+	if (!fs.existsSync(targetFolder)) {
+		fs.mkdirSync(targetFolder);
+	}
+	if (fs.lstatSync(source).isDirectory()) {
+		files = fs.readdirSync(source);
+		files.forEach(function (file) {
+			const curSource = path.join(source, file);
+			if (fs.lstatSync(curSource).isDirectory()) {
+				copyDir(curSource, targetFolder);
+			} else {
+				copyFileSync(curSource, targetFolder);
+			}
+		});
+	}
+}
+
+function copyFileSync(source, target) {
+	let targetFile = target;
+	if (fs.existsSync(target)) {
+		if (fs.lstatSync(target).isDirectory()) {
+			targetFile = path.join(target, path.basename(source));
+		}
+	}
+	fs.writeFileSync(targetFile, fs.readFileSync(source));
+}
+
+const colors = {
+	reset: '\x1b[0m',
+	bold: '\x1b[1m',
+	dim: '\x1b[2m',
+	red: '\x1b[31m',
+	green: '\x1b[32m',
+	cyan: '\x1b[36m',
+};
+
+function color(opts, text) {
+	let colorString = '';
+	for (const opt of opts) {
+		colorString += colors[opt];
+	}
+	return `${colorString}${text}${colors.reset}`;
+}
+
+main();

tsconfig.eslint.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./tsconfig.json",
-    "include": ["src"],
-    "exclude": ["node_modules"]
-  }
+	"extends": "./tsconfig.json",
+	"include": ["src"],
+	"exclude": ["node_modules", "test-webview"]
+}

tsconfig.json

@@ -23,6 +23,7 @@
 	"include": ["src"],
 	"exclude": [
 		"node_modules",
+		"test-webview",
 		"src/**/*.spec.ts",
 		"src/**/*.stories.ts",
 		"src/**/fixtures/",