Add react testing environment

.gitignore

@@ -11,6 +11,7 @@ react/
 
 # Tests
 test-webview
+test-webview-react
 .vscode-test-web/
 
 # Misc

CONTRIBUTING.md

@@ -40,8 +40,12 @@ git checkout -b {branch-name}
 
 As you're working, you can test your changes in a VS Code extension development environment by running the following command and following the directions that it provides.
 
-```
+```bash
+# Configures an environment to test toolkit web components
 npm run test:webview
+
+# Configures an environment to test toolkit React components
+npm run test:webview-react
 ```
 
 ## Validate changes

package.json

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

scripts/move-react-build-dir.js

@@ -17,7 +17,7 @@ import {readFile, writeFile} from 'fs/promises';
  *
  *     import { ComponentName } from "@vscode/webview-ui-toolkit/dist/react";
  *
- * This import syntax is accomplished by simply moving the already built react directory
+ * This import syntax is accomplished by simply moving the already built React directory
  * out of the dist directory into the project root and then updating some of the import
  * paths in the React build files to reflect this new location. This react folder is
  * intentionally not included in .npmignore so it will be published in the root directory
@@ -40,14 +40,14 @@ import {readFile, writeFile} from 'fs/promises';
  * Until that time, this script will achieve the same results in import syntax.
  */
 async function main() {
-	// Move the react build directory out of dist and into the project root
+	// Move the React build directory out of dist and into the project root
 	try {
-		console.log(color(['dim'], '\nMoving react build into root...'));
+		console.log(color(['dim'], '\nMoving React build into root...'));
 		// Delete the root react directory if it already exists
 		delDir('./react');
-		// Copy react build directory into root
+		// Copy React build directory into root
 		copyDir('./dist/react', './');
-		// Delete react build directory in dist
+		// Delete React build directory in dist
 		delDir('./dist/react');
 	} catch (err) {
 		console.log(`${color(['red'], 'Error: Moving the React build directory into the project root failed.')}\n    ${err}`);

scripts/setup-webview-react-test-env.js

@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {createDir, copyDir, color, delDir} from './helpers.js';
+import {existsSync} from 'fs';
+import {exec} from 'child_process';
+import {promisify} from 'util';
+import process from 'process';
+
+const execShellCommand = 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 (!existsSync('./test-webview-react')) {
+		try {
+			console.log(color(['dim'], 'Copying webview test environment locally...'));
+			await execShellCommand('npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/component-gallery-react test-webview-react');
+		} 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 (!existsSync('./test-webview-react/node_modules')) {
+		try {
+			console.log(color(['dim'], 'Installing webview test environment dependencies...'));
+			await execShellCommand('cd ./test-webview-react && npm run install:all');
+		} 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
+	try {
+		console.log(color(['dim'], 'Copying latest toolkit build into webview test environment...'));
+		// Copy web component build directory
+		delDir('./test-webview-react/webview-ui/node_modules/@vscode/webview-ui-toolkit/dist');
+		createDir('./test-webview-react/webview-ui/node_modules/@vscode/webview-ui-toolkit/dist');
+		copyDir('./dist', './test-webview-react/webview-ui/node_modules/@vscode/webview-ui-toolkit');
+		// Copy react build directory
+		delDir('./test-webview-react/webview-ui/node_modules/@vscode/webview-ui-toolkit/react');
+		createDir('./test-webview-react/webview-ui/node_modules/@vscode/webview-ui-toolkit/react');
+		copyDir('./react', './test-webview-react/webview-ui/node_modules/@vscode/webview-ui-toolkit');
+	} catch (err) {
+		console.log(`${color(['red'], 'Error: Failed to copy latest toolkit build into webview test environment')}\n    ${err}`);
+		process.exit();
+	}
+
+	// Build the React webview
+	try {
+		console.log(color(['dim'], 'Building React webview...'));
+		await execShellCommand('cd ./test-webview-react && npm run build:webview');
+	} catch (err) {
+		console.log(`${color(['red'], 'Error: Could not build React webview')}\n    ${err}`);
+		process.exit();
+	}
+
+	// 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-react')} 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'], 'Component Gallery (React): Show')}" command using the VS Code command palette`);
+	console.log();
+}
+
+main();