Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 58e03ec

Browse files
hawkticehursthawkticehurst
authored
Merge recent changes from main (#481)
Description of changes Merges recent changes from main including: - Fix data grid docs sample code (#471) - Add react testing environment changes (#478) and adapt the changes to a monorepo structure.
1 parent d4d93f8 commit 58e03ec

File tree

9 files changed

+259
-23
lines changed

9 files changed

+259
-23
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ name: toolkit-ci
33
on: pull_request
44

55
jobs:
6-
test:
7-
runs-on: ubuntu-latest
8-
timeout-minutes: 10
9-
steps:
10-
- name: Checkout 🛎️
11-
uses: actions/checkout@v2
12-
13-
- name: Setup Node 💾
14-
uses: actions/setup-node@v2
15-
with:
16-
node-version: '18'
17-
18-
- name: Install Dependencies 📥
19-
run: npm ci
20-
21-
- name: Run Tests 🧪
22-
run: npm run test
6+
# test:
7+
# runs-on: ubuntu-latest
8+
# timeout-minutes: 10
9+
# steps:
10+
# - name: Checkout 🛎️
11+
# uses: actions/checkout@v2
12+
13+
# - name: Setup Node 💾
14+
# uses: actions/setup-node@v2
15+
# with:
16+
# node-version: '18'
17+
18+
# - name: Install Dependencies 📥
19+
# run: npm ci
20+
21+
# - name: Run Tests 🧪
22+
# run: npm run test
2323

2424
lint:
2525
runs-on: ubuntu-latest

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ dist
88
# Tests
99
.vscode-test-web
1010
test-webview
11+
test-webview-react
1112
coverage
1213

1314
# Cache

‎docs/contributing.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,16 @@ git checkout -b {branch-name}
4040

4141
When working on the core components in `packages/toolkit`, you can test your changes in a VS Code extension development environment by running the following command and following the directions that it provides.
4242

43+
```bash
44+
# Configures an environment to test toolkit web components (run from project root)
45+
npm run test:toolkit
4346
```
44-
cd packages/toolkit
45-
npm run test:webview
47+
48+
Similarly, when working on the components in `packages/toolkit-react`, you can test your changes by running the following command.
49+
50+
```bash
51+
# Configures an environment to test toolkit React components (run from project root)
52+
npm run test:toolkit-react
4653
```
4754

4855
_\*Note: There is no testing script/environment for `packages/toolkit-react` components at this time._

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"fmt:fix": "prettier --config ./.prettierrc --write \"**/*.{ts,js,md}\"",
2323
"lint": "npm run lint --workspaces",
2424
"lint:fix": "npm run lint:fix --workspaces",
25-
"test": "echo 'Todo: add tests'"
25+
"test:toolkit": "cd packages/toolkit && npm run test:webview",
26+
"test:toolkit-react": "npm run build && cd packages/toolkit-react && npm run test:webview-react"
2627
}
2728
}

‎packages/toolkit-react/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"build": "tsc -p ./tsconfig.json",
2121
"lint": "eslint . --ext .ts",
2222
"lint:fix": "eslint . --ext .ts --fix",
23-
"prepublishOnly": "npm run build"
23+
"prepublishOnly": "npm run build",
24+
"test:webview-react": "node ./scripts/setup-webview-react-test-env.js"
2425
},
2526
"dependencies": {
2627
"@microsoft/fast-element": "^1.6.2",

‎packages/toolkit-react/scripts/helpers.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import {
5+
existsSync,
6+
lstatSync,
7+
mkdirSync,
8+
readdirSync,
9+
readFileSync,
10+
rmdirSync,
11+
unlinkSync,
12+
writeFileSync,
13+
} from 'fs';
14+
import path from 'path';
15+
16+
export function createDir(dir) {
17+
if (!existsSync(dir)) {
18+
mkdirSync(dir);
19+
}
20+
}
21+
22+
export function copyDir(source, target) {
23+
let files = [];
24+
const targetFolder = path.join(target, path.basename(source));
25+
if (!existsSync(targetFolder)) {
26+
mkdirSync(targetFolder);
27+
}
28+
if (lstatSync(source).isDirectory()) {
29+
files = readdirSync(source);
30+
files.forEach(function (file) {
31+
const curSource = path.join(source, file);
32+
if (lstatSync(curSource).isDirectory()) {
33+
copyDir(curSource, targetFolder);
34+
} else {
35+
copyFile(curSource, targetFolder);
36+
}
37+
});
38+
}
39+
}
40+
41+
export function copyFile(source, target) {
42+
let targetFile = target;
43+
if (existsSync(target)) {
44+
if (lstatSync(target).isDirectory()) {
45+
targetFile = path.join(target, path.basename(source));
46+
}
47+
}
48+
writeFileSync(targetFile, readFileSync(source));
49+
}
50+
51+
const colors = {
52+
reset: '\x1b[0m',
53+
bold: '\x1b[1m',
54+
dim: '\x1b[2m',
55+
red: '\x1b[31m',
56+
green: '\x1b[32m',
57+
cyan: '\x1b[36m',
58+
};
59+
60+
export function color(opts, text) {
61+
let colorString = '';
62+
for (const opt of opts) {
63+
colorString += colors[opt];
64+
}
65+
return `${colorString}${text}${colors.reset}`;
66+
}
67+
68+
export function delDir(path) {
69+
if (existsSync(path) && lstatSync(path).isDirectory()) {
70+
readdirSync(path).forEach(function (file, index) {
71+
const currPath = path + '/' + file;
72+
if (lstatSync(currPath).isDirectory()) {
73+
delDir(currPath);
74+
} else {
75+
unlinkSync(currPath);
76+
}
77+
});
78+
rmdirSync(path);
79+
}
80+
}

‎packages/toolkit-react/scripts/setup-webview-react-test-env.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT License.
3+
4+
import {createDir, copyDir, copyFile, color, delDir} from './helpers.js';
5+
import {existsSync} from 'fs';
6+
import {exec} from 'child_process';
7+
import {promisify} from 'util';
8+
import process from 'process';
9+
10+
const execShellCommand = promisify(exec);
11+
12+
async function main() {
13+
// Empty print line to pretty-ify command line output
14+
console.log();
15+
16+
// Copy webview test environment locally if it does not already exist
17+
if (!existsSync('./test-webview')) {
18+
try {
19+
console.log(
20+
color(['dim'], 'Copying webview test environment locally...')
21+
);
22+
await execShellCommand(
23+
'npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/component-gallery-react test-webview'
24+
);
25+
} catch (err) {
26+
console.log(
27+
`${color(
28+
['red'],
29+
'Error: Could not copy webview test environment locally'
30+
)}\n ${err}`
31+
);
32+
process.exit();
33+
}
34+
}
35+
36+
// Install the webview test environment dependencies if they do not exist
37+
if (!existsSync('./test-webview/node_modules')) {
38+
try {
39+
console.log(
40+
color(
41+
['dim'],
42+
'Installing webview test environment dependencies...'
43+
)
44+
);
45+
await execShellCommand('cd ./test-webview && npm run install:all');
46+
} catch (err) {
47+
console.log(
48+
`${color(
49+
['red'],
50+
'Error: Could not install webview test environment dependencies'
51+
)}\n ${err}`
52+
);
53+
process.exit();
54+
}
55+
}
56+
57+
// Copy latest toolkit build into the webview test environment
58+
try {
59+
console.log(
60+
color(
61+
['dim'],
62+
'Copying latest toolkit build into webview test environment...'
63+
)
64+
);
65+
// Copy web component build directory
66+
delDir(
67+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit/dist'
68+
);
69+
createDir(
70+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit/dist'
71+
);
72+
copyDir(
73+
'../toolkit/dist',
74+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit'
75+
);
76+
// Copy react build directory
77+
delDir(
78+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit/react'
79+
);
80+
createDir(
81+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit/react'
82+
);
83+
copyFile(
84+
'./dist/index.js',
85+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit/react'
86+
);
87+
copyFile(
88+
'./dist/index.d.ts',
89+
'./test-webview/webview-ui/node_modules/@vscode/webview-ui-toolkit/react'
90+
);
91+
} catch (err) {
92+
console.log(
93+
`${color(
94+
['red'],
95+
'Error: Failed to copy latest toolkit build into webview test environment'
96+
)}\n ${err}`
97+
);
98+
process.exit();
99+
}
100+
101+
// Build the React webview
102+
try {
103+
console.log(color(['dim'], 'Building React webview...'));
104+
await execShellCommand('cd ./test-webview && npm run build:webview');
105+
} catch (err) {
106+
console.log(
107+
`${color(
108+
['red'],
109+
'Error: Could not build React webview'
110+
)}\n ${err}`
111+
);
112+
process.exit();
113+
}
114+
115+
// Print success and next steps messages
116+
console.log();
117+
console.log(
118+
color(
119+
['bold', 'green'],
120+
'Webview test environment successfully configured!'
121+
)
122+
);
123+
console.log();
124+
console.log('Next steps:');
125+
console.log(
126+
` 1. Open the ${color(
127+
['cyan'],
128+
'packages/toolkit-react/test-webview'
129+
)} folder in a new VS Code window`
130+
);
131+
console.log(
132+
` 2. Press ${color(
133+
['cyan'],
134+
'F5'
135+
)} to open the webview test extension with the most recent toolkit build loaded`
136+
);
137+
console.log(
138+
` 3. Run the "${color(
139+
['cyan'],
140+
'Component Gallery (React): Show'
141+
)}" command using the VS Code command palette`
142+
);
143+
console.log();
144+
}
145+
146+
main();

‎packages/toolkit/scripts/setup-webview-test-env.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ async function main() {
5252
console.log(color(['bold', 'green'], 'Webview test environment successfully configured!'));
5353
console.log();
5454
console.log('Next steps:');
55-
console.log(` 1. Open the ${color(['cyan'], 'test-webview')} folder in a new VS Code window`);
55+
console.log(` 1. Open the ${color(['cyan'], 'packages/toolkit/test-webview')} folder in a new VS Code window`);
5656
console.log(` 2. Press ${color(['cyan'], 'F5')} to open the webview test extension with the most recent toolkit build loaded`);
5757
console.log(` 3. Run the "${color(['cyan'], 'Component Gallery: Show')}" command using the VS Code command palette`);
5858
console.log();

‎packages/toolkit/src/data-grid/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ Starting in `v0.9.2`, however, this behavior has changed so a header row is not
108108
<vscode-data-grid-cell cell-type="columnheader" grid-column="1">Header 1</vscode-data-grid-cell>
109109
<vscode-data-grid-cell cell-type="columnheader" grid-column="2">Header 2</vscode-data-grid-cell>
110110
<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 3</vscode-data-grid-cell>
111-
<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Header 4</vscode-data-grid-cell>
111+
<vscode-data-grid-cell cell-type="columnheader" grid-column="4">Header 4</vscode-data-grid-cell>
112112
</vscode-data-grid-row>
113113
<vscode-data-grid-row>
114114
<vscode-data-grid-cell grid-column="1">Cell Data</vscode-data-grid-cell>

0 commit comments

Comments
 (0)