Skip to content

Commit fa05b8c

Browse files
jdneojdneo
authored
Bump @vscode/webview-ui-toolkit and adopt new usage (#1258)
Signed-off-by: Sheng Chen <[email protected]>
1 parent c02eed7 commit fa05b8c

File tree

14 files changed

+667
-853
lines changed

14 files changed

+667
-853
lines changed

‎package-lock.json‎

Lines changed: 506 additions & 637 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -344,8 +344,8 @@
344344
"ts-loader": "^9.4.1",
345345
"tslint": "^5.20.1",
346346
"typescript": "^3.9.10",
347-
"webpack": "^5.76.0",
348-
"webpack-cli": "^4.10.0"
347+
"webpack": "^5.89.0",
348+
"webpack-cli": "^5.1.4"
349349
},
350350
"extensionPack": [
351351
"redhat.java",
@@ -358,10 +358,9 @@
358358
"dependencies": {
359359
"@iconify-icons/codicon": "1.2.8",
360360
"@iconify/react": "^1.1.4",
361-
"@microsoft/fast-react-wrapper": "0.1.18",
362361
"@reduxjs/toolkit": "^1.8.6",
363362
"@vscode/codicons": "0.0.25",
364-
"@vscode/webview-ui-toolkit": "0.8.2",
363+
"@vscode/webview-ui-toolkit": "1.2.2",
365364
"@xmldom/xmldom": "^0.8.3",
366365
"axios": "^0.21.4",
367366
"bootstrap": "^4.6.2",

‎src/beginner-tips/assets/BeginnerTips.tsx‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,13 @@
22
// Licensed under the MIT license.
33

44
import "./style.scss";
5-
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
6-
import * as webviewUI from "@vscode/webview-ui-toolkit";
5+
import { VSCodePanelTab, VSCodePanels, VSCodePanelView } from "@vscode/webview-ui-toolkit/react";
76
import React from 'react';
87
import CodeEditingPanel from "./tabs/CodeEditingPanel";
98
import DebuggingPanel from "./tabs/DebuggingPanel";
109
import FaqPanel from "./tabs/FaqPanel";
1110
import QuickStartPanel from "./tabs/QuickStartPanel";
1211

13-
const { wrap } = provideReactWrapper(React);
14-
15-
const PanelTab = wrap(webviewUI.VSCodePanelTab);
16-
const Panels = wrap(webviewUI.VSCodePanels);
17-
const PanelView = wrap(webviewUI.VSCodePanelView);
18-
1912
export default function BeginnerTips() {
2013

2114
return (
@@ -24,24 +17,24 @@ export default function BeginnerTips() {
2417
<h1 className="font-weight-light">Tips for Beginners</h1>
2518
</div>
2619
<div className="row">
27-
<Panels activeid="tab-1">
28-
<PanelTab id="tab-1">Quick Start</PanelTab>
29-
<PanelTab id="tab-2">Code Editing</PanelTab>
30-
<PanelTab id="tab-3">Debugging</PanelTab>
31-
<PanelTab id="tab-4">FAQ</PanelTab>
32-
<PanelView id="view-1">
20+
<VSCodePanels activeid="tab-1">
21+
<VSCodePanelTab id="tab-1">Quick Start</VSCodePanelTab>
22+
<VSCodePanelTab id="tab-2">Code Editing</VSCodePanelTab>
23+
<VSCodePanelTab id="tab-3">Debugging</VSCodePanelTab>
24+
<VSCodePanelTab id="tab-4">FAQ</VSCodePanelTab>
25+
<VSCodePanelView id="view-1">
3326
<QuickStartPanel />
34-
</PanelView>
35-
<PanelView id="view-2">
27+
</VSCodePanelView>
28+
<VSCodePanelView id="view-2">
3629
<CodeEditingPanel />
37-
</PanelView>
38-
<PanelView id="view-3">
30+
</VSCodePanelView>
31+
<VSCodePanelView id="view-3">
3932
<DebuggingPanel />
40-
</PanelView>
41-
<PanelView id="view-4">
33+
</VSCodePanelView>
34+
<VSCodePanelView id="view-4">
4235
<FaqPanel />
43-
</PanelView>
44-
</Panels>
36+
</VSCodePanelView>
37+
</VSCodePanels>
4538
</div>
4639
</div>
4740
);

‎src/beginner-tips/assets/tabs/CodeEditingPanel.tsx‎

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,9 @@
22
// Licensed under the MIT license.
33

44
import { GenerateHeaderOptions } from "@microsoft/fast-foundation";
5-
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
6-
import * as webviewUI from "@vscode/webview-ui-toolkit";
5+
import { VSCodeDataGrid, VSCodeDataGridRow, VSCodeDataGridCell } from "@vscode/webview-ui-toolkit/react";
76
import React from 'react';
87
const isMac: boolean = navigator.platform.toLowerCase().indexOf("darwin") === 0;
9-
const { wrap } = provideReactWrapper(React);
10-
const DataGrid = wrap(webviewUI.VSCodeDataGrid);
11-
const DataRow = wrap(webviewUI.VSCodeDataGridRow);
12-
const DataCell = wrap(webviewUI.VSCodeDataGridCell);
138

149
export default function CodeEditingPanel() {
1510
const controlKey = !isMac ? <kbd data-os="win">Ctrl</kbd> : <kbd data-os="mac">⌘</kbd>;
@@ -38,48 +33,48 @@ export default function CodeEditingPanel() {
3833
<p>
3934
Code Navigation makes it easy to understand existing codebase. Here to mention a few features that can help you navigate your code repositories.
4035
</p>
41-
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
42-
<DataRow key={1}>
43-
<DataCell className="font-weight-bold" gridColumn="1">Go to Definition</DataCell>
44-
<DataCell gridColumn="2"><kbd>F12</kbd><br />You can also hover on the symbol to preview its declaration and javadoc. To jump to the definition, hold the {controlKey} key, and click on the symbol.</DataCell>
45-
</DataRow>
46-
<DataRow key={2}>
47-
<DataCell className="font-weight-bold" gridColumn="1">Go to Implementation</DataCell>
48-
<DataCell gridColumn="2">{f12Key}<br />For an interface, this shows all the implementors of that interface and for abstract methods, this shows all concrete implementations of that method.</DataCell>
49-
</DataRow>
50-
<DataRow key={3}>
51-
<DataCell className="font-weight-bold" gridColumn="1">Go to Type Definition</DataCell>
52-
<DataCell gridColumn="2">This one allows you to go to the definition of the type of the symbol. For example, you have a class member <code>someString</code>, "Go to Definition" will take you to the definition of <code>someString</code> while "Go to <strong>Type</strong> Definition" will take you to the definition of <code>String</code>.</DataCell>
53-
</DataRow>
54-
<DataRow key={4}>
55-
<DataCell className="font-weight-bold" gridColumn="1">Find All References</DataCell>
56-
<DataCell gridColumn="2">{shiftAltF12}<br />This allows you to quickly analyze the impact of your edit or the popularity of your specific method or property throughout your repository.</DataCell>
57-
</DataRow>
58-
</DataGrid>
36+
<VSCodeDataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
37+
<VSCodeDataGridRow key={1}>
38+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Go to Definition</VSCodeDataGridCell>
39+
<VSCodeDataGridCell gridColumn="2"><kbd>F12</kbd><br />You can also hover on the symbol to preview its declaration and javadoc. To jump to the definition, hold the {controlKey} key, and click on the symbol.</VSCodeDataGridCell>
40+
</VSCodeDataGridRow>
41+
<VSCodeDataGridRow key={2}>
42+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Go to Implementation</VSCodeDataGridCell>
43+
<VSCodeDataGridCell gridColumn="2">{f12Key}<br />For an interface, this shows all the implementors of that interface and for abstract methods, this shows all concrete implementations of that method.</VSCodeDataGridCell>
44+
</VSCodeDataGridRow>
45+
<VSCodeDataGridRow key={3}>
46+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Go to Type Definition</VSCodeDataGridCell>
47+
<VSCodeDataGridCell gridColumn="2">This one allows you to go to the definition of the type of the symbol. For example, you have a class member <code>someString</code>, "Go to Definition" will take you to the definition of <code>someString</code> while "Go to <strong>Type</strong> Definition" will take you to the definition of <code>String</code>.</VSCodeDataGridCell>
48+
</VSCodeDataGridRow>
49+
<VSCodeDataGridRow key={4}>
50+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Find All References</VSCodeDataGridCell>
51+
<VSCodeDataGridCell gridColumn="2">{shiftAltF12}<br />This allows you to quickly analyze the impact of your edit or the popularity of your specific method or property throughout your repository.</VSCodeDataGridCell>
52+
</VSCodeDataGridRow>
53+
</VSCodeDataGrid>
5954
</div>
6055
<div>
6156
<p>
6257
The commands above will possibly take you to another file. But you can choose to stay using the peeking features below:
6358
</p>
64-
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
65-
<DataRow key={1}>
66-
<DataCell className="font-weight-bold" gridColumn="1">Peek Definition</DataCell>
67-
<DataCell gridColumn="2">{altF12Key}</DataCell>
68-
</DataRow>
69-
<DataRow key={2}>
70-
<DataCell className="font-weight-bold" gridColumn="1">Peek References</DataCell>
71-
<DataCell gridColumn="2">{shiftF12}</DataCell>
72-
</DataRow>
73-
</DataGrid>
59+
<VSCodeDataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
60+
<VSCodeDataGridRow key={1}>
61+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Peek Definition</VSCodeDataGridCell>
62+
<VSCodeDataGridCell gridColumn="2">{altF12Key}</VSCodeDataGridCell>
63+
</VSCodeDataGridRow>
64+
<VSCodeDataGridRow key={2}>
65+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Peek References</VSCodeDataGridCell>
66+
<VSCodeDataGridCell gridColumn="2">{shiftF12}</VSCodeDataGridCell>
67+
</VSCodeDataGridRow>
68+
</VSCodeDataGrid>
7469
</div>
7570
<div>
7671
<p> Last but not least, you can jump between the matching brackets back and forth: </p>
77-
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
78-
<DataRow key={1}>
79-
<DataCell className="font-weight-bold" gridColumn="1">Go to Bracket</DataCell>
80-
<DataCell gridColumn="2">{ctrlShiftSlash}</DataCell>
81-
</DataRow>
82-
</DataGrid>
72+
<VSCodeDataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
73+
<VSCodeDataGridRow key={1}>
74+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Go to Bracket</VSCodeDataGridCell>
75+
<VSCodeDataGridCell gridColumn="2">{ctrlShiftSlash}</VSCodeDataGridCell>
76+
</VSCodeDataGridRow>
77+
</VSCodeDataGrid>
8378
</div>
8479
<h2 className="font-weight-light">IntelliSense</h2>
8580
<p>

‎src/beginner-tips/assets/tabs/DebuggingPanel.tsx‎

Lines changed: 37 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,9 @@
22
// Licensed under the MIT license.
33

44
import { GenerateHeaderOptions } from "@microsoft/fast-foundation";
5-
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
6-
import * as webviewUI from "@vscode/webview-ui-toolkit";
5+
import { VSCodeDataGrid, VSCodeDataGridRow, VSCodeDataGridCell } from "@vscode/webview-ui-toolkit/react";
76
import React from 'react';
87
const isMac: boolean = navigator.platform.toLowerCase().indexOf("darwin") === 0;
9-
const { wrap } = provideReactWrapper(React);
10-
const DataGrid = wrap(webviewUI.VSCodeDataGrid);
11-
const DataRow = wrap(webviewUI.VSCodeDataGridRow);
12-
const DataCell = wrap(webviewUI.VSCodeDataGridCell);
138

149
export default function DebuggingPanel() {
1510
const cF5 = !isMac ? <kbd data-os="win">Ctrl + F5</kbd> : <kbd data-os="mac">⌃ F5</kbd>;
@@ -43,16 +38,16 @@ export default function DebuggingPanel() {
4338
<p>
4439
You can also set <strong>Conditional Breakpoints</strong> based on expressions, hit counts, or a combination of both.
4540
</p>
46-
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
47-
<DataRow key={1}>
48-
<DataCell className="font-weight-bold" gridColumn="1">Expression condition</DataCell>
49-
<DataCell gridColumn="2">The breakpoint will be hit whenever the expression evaluates to <code>true</code></DataCell>
50-
</DataRow>
51-
<DataRow key={2}>
52-
<DataCell className="font-weight-bold" gridColumn="1">Hit count</DataCell>
53-
<DataCell gridColumn="2">The 'hit count' controls how many times a breakpoint needs to be hit before it will 'break' execution</DataCell>
54-
</DataRow>
55-
</DataGrid>
41+
<VSCodeDataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
42+
<VSCodeDataGridRow key={1}>
43+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Expression condition</VSCodeDataGridCell>
44+
<VSCodeDataGridCell gridColumn="2">The breakpoint will be hit whenever the expression evaluates to <code>true</code></VSCodeDataGridCell>
45+
</VSCodeDataGridRow>
46+
<VSCodeDataGridRow key={2}>
47+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Hit count</VSCodeDataGridCell>
48+
<VSCodeDataGridCell gridColumn="2">The 'hit count' controls how many times a breakpoint needs to be hit before it will 'break' execution</VSCodeDataGridCell>
49+
</VSCodeDataGridRow>
50+
</VSCodeDataGrid>
5651
<p>
5752
You can add a condition and/or hit count when creating the breakpoint (with the <a href="command:editor.debug.action.conditionalBreakpoint">Add Conditional Breakpoint</a> action) or when modifying an existing one (with the Edit Breakpoint action). In both cases, an inline text box with a drop-down menu opens where you can enter expressions.
5853
</p>
@@ -69,32 +64,32 @@ export default function DebuggingPanel() {
6964
<p>
7065
Once a debug session starts, the Debug toolbar will appear on the top of the editor. You can control the execution flow using the actions below.
7166
</p>
72-
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
73-
<DataRow key={1}>
74-
<DataCell className="font-weight-bold" gridColumn="1">Continue/Pause</DataCell>
75-
<DataCell gridColumn="2"><kbd>F5</kbd></DataCell>
76-
</DataRow>
77-
<DataRow key={2}>
78-
<DataCell className="font-weight-bold" gridColumn="1">Step Over</DataCell>
79-
<DataCell gridColumn="2"><kbd>F10</kbd></DataCell>
80-
</DataRow>
81-
<DataRow key={3}>
82-
<DataCell className="font-weight-bold" gridColumn="1">Step Into</DataCell>
83-
<DataCell gridColumn="2"><kbd>F11</kbd></DataCell>
84-
</DataRow>
85-
<DataRow key={4}>
86-
<DataCell className="font-weight-bold" gridColumn="1">Step Out</DataCell>
87-
<DataCell gridColumn="2">{sF11}</DataCell>
88-
</DataRow>
89-
<DataRow key={5}>
90-
<DataCell className="font-weight-bold" gridColumn="1">Restart</DataCell>
91-
<DataCell gridColumn="2">{csF5}</DataCell>
92-
</DataRow>
93-
<DataRow key={6}>
94-
<DataCell className="font-weight-bold" gridColumn="1">Stop</DataCell>
95-
<DataCell gridColumn="2">{sF5}</DataCell>
96-
</DataRow>
97-
</DataGrid>
67+
<VSCodeDataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
68+
<VSCodeDataGridRow key={1}>
69+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Continue/Pause</VSCodeDataGridCell>
70+
<VSCodeDataGridCell gridColumn="2"><kbd>F5</kbd></VSCodeDataGridCell>
71+
</VSCodeDataGridRow>
72+
<VSCodeDataGridRow key={2}>
73+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Step Over</VSCodeDataGridCell>
74+
<VSCodeDataGridCell gridColumn="2"><kbd>F10</kbd></VSCodeDataGridCell>
75+
</VSCodeDataGridRow>
76+
<VSCodeDataGridRow key={3}>
77+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Step Into</VSCodeDataGridCell>
78+
<VSCodeDataGridCell gridColumn="2"><kbd>F11</kbd></VSCodeDataGridCell>
79+
</VSCodeDataGridRow>
80+
<VSCodeDataGridRow key={4}>
81+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Step Out</VSCodeDataGridCell>
82+
<VSCodeDataGridCell gridColumn="2">{sF11}</VSCodeDataGridCell>
83+
</VSCodeDataGridRow>
84+
<VSCodeDataGridRow key={5}>
85+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Restart</VSCodeDataGridCell>
86+
<VSCodeDataGridCell gridColumn="2">{csF5}</VSCodeDataGridCell>
87+
</VSCodeDataGridRow>
88+
<VSCodeDataGridRow key={6}>
89+
<VSCodeDataGridCell className="font-weight-bold" gridColumn="1">Stop</VSCodeDataGridCell>
90+
<VSCodeDataGridCell gridColumn="2">{sF5}</VSCodeDataGridCell>
91+
</VSCodeDataGridRow>
92+
</VSCodeDataGrid>
9893
<h2 className="font-weight-light">Inspect Variables</h2>
9994
<p>
10095
Variables can be inspected in the <strong>VARIABLES</strong> section of the Debug view or by hovering over their source in the editor. Variable values and expression evaluation are relative to the selected stack frame in the <strong>CALL STACK</strong> section.

0 commit comments

Comments
 (0)