diff --git a/.eslintignore b/.eslintignore index 219711f9..b5a60872 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,4 +9,8 @@ coverage # don't lint storybook files .storybook/ # don't lint stories -*.stories.* \ No newline at end of file +*.stories.* +# don't lint scripts folder +scripts +# don't lint webview test environment +test-webview \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6b97199e..19f22a4a 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,9 @@ node_modules/ dist/ storybook-static/ +# Tests +test-webview + # Misc .DS_Store .vscode diff --git a/.npmignore b/.npmignore index d5f0c8c3..dd3174e3 100644 --- a/.npmignore +++ b/.npmignore @@ -11,6 +11,7 @@ CONTRIBUTING.md # Tests *.spec.* coverage/ +test-webview # Builds build/ diff --git a/.prettierignore b/.prettierignore index b2d1905f..595ac050 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,6 +6,9 @@ build/ dist/ storybook-static/ +# Tests +test-webview + # Misc .DS_Store .vscode diff --git a/.prettierrc b/.prettierrc index c4db7bf9..a3852765 100644 --- a/.prettierrc +++ b/.prettierrc @@ -31,6 +31,12 @@ "options": { "printWidth": 200 } + }, + { + "files": "scripts/setup-webview-test-env.js", + "options": { + "printWidth": 200 + } } ] } diff --git a/package.json b/package.json index 32c3020d..ef932412 100644 --- a/package.json +++ b/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", diff --git a/scripts/setup-webview-test-env.js b/scripts/setup-webview-test-env.js new file mode 100644 index 00000000..69e8d01d --- /dev/null +++ b/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(); diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index 9d0b68ce..d24d9b71 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -1,5 +1,5 @@ { - "extends": "./tsconfig.json", - "include": ["src"], - "exclude": ["node_modules"] - } \ No newline at end of file + "extends": "./tsconfig.json", + "include": ["src"], + "exclude": ["node_modules", "test-webview"] +} diff --git a/tsconfig.json b/tsconfig.json index 7cc62f68..3b3f0870 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,7 @@ "include": ["src"], "exclude": [ "node_modules", + "test-webview", "src/**/*.spec.ts", "src/**/*.stories.ts", "src/**/fixtures/",