refactor: Migrate webviews from React 16 + react-bootstrap to React 19 + @vscode-elements/elements#1616
Open
refactor: Migrate webviews from React 16 + react-bootstrap to React 19 + @vscode-elements/elements#1616
Conversation
…e-elements/elements - Upgrade React 16.14.0 to React 19.x with react-jsx transform - Replace deprecated @vscode/webview-ui-toolkit with @vscode-elements/elements (Lit-based) - Replace react-bootstrap components with native HTML + custom SCSS - Add custom Bootstrap-equivalent utility classes in vscode.scss - Add TypeScript declarations for vscode-elements web components - Migrate all webview entry points to React 19 createRoot API - Convert class components to functional components - Update webpack config for React 19 compatibility - Fix tas-client version compatibility (override to ~0.2.33)
chagong
requested review from
jdneo,
testforstephen and
wenytang-ms
as code owners
There was a problem hiding this comment.
Pull request overview
This PR modernizes the extension’s webview UI stack by migrating multiple webviews from React 16 + react-bootstrap + @vscode/webview-ui-toolkit to React 19 and @vscode-elements/elements, alongside introducing a shared SCSS utility layer to replace Bootstrap-provided styling.
Changes:
- Upgrade webview React entrypoints to React 19 (
createRoot) and update TS JSX config toreact-jsx. - Replace react-bootstrap / UI Toolkit components with native HTML +
@vscode-elements/elementsweb components across Welcome, Project Settings, Java Runtime, Install JDK, Formatter Settings, and Beginner Tips. - Introduce/extend shared styling (
src/assets/vscode.scss) to provide Bootstrap-like utility classes.
Reviewed changes
Copilot reviewed 53 out of 56 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Adds a webpack entry for the java-runtime webview bundle. |
| tsconfig.json | Switches TS JSX emit to react-jsx and sets jsxImportSource. |
| src/welcome/assets/style.scss | Replaces react-bootstrap tab/list-group styling with custom CSS. |
| src/welcome/assets/index.ts | Migrates Welcome entrypoint to React 19 createRoot. |
| src/welcome/assets/components/TourPage.tsx | Refactors TourPage from class to functional component and replaces react-bootstrap layout/buttons. |
| src/welcome/assets/components/SocialMediaPanel.tsx | Replaces Iconify + ListGroup with codicon <i> + simple list-group markup. |
| src/welcome/assets/components/QuickActionPanel.tsx | Replaces react-bootstrap ListGroup with native anchors + custom list-group classes. |
| src/welcome/assets/components/NavigationPanel.tsx | Replaces react-bootstrap Tabs/Tab with custom tab markup and codicon icons. |
| src/welcome/assets/components/Header.tsx | Converts Header to a functional component. |
| src/welcome/assets/components/GetStartedPage.tsx | Replaces react-bootstrap grid components with plain div-based layout. |
| src/welcome/assets/components/ControllerPanel.tsx | Replaces react-bootstrap form check with a native checkbox + label. |
| src/vscode-elements.d.ts | Adds JSX intrinsic element typings for @vscode-elements/elements web components. |
| src/project-settings/assets/maven/features/MavenConfigurationView.tsx | Removes now-unnecessary React default import under react-jsx. |
| src/project-settings/assets/maven/features/components/Profile.tsx | Migrates VSCodeTextField wrapper to <vscode-textfield>. |
| src/project-settings/assets/mainpage/features/ProjectSettingView.tsx | Migrates divider/progress ring to @vscode-elements/elements and updates hooks usage. |
| src/project-settings/assets/mainpage/features/component/SideBar.tsx | Removes now-unnecessary React import. |
| src/project-settings/assets/mainpage/features/component/ProjectSelector.tsx | Migrates dropdown/option toolkit components to vscode-elements equivalents. |
| src/project-settings/assets/mainpage/features/component/Footer.tsx | Migrates to <vscode-button> and adjusts disabled handling for web component behavior. |
| src/project-settings/assets/mainpage/features/component/Exception.tsx | Removes now-unnecessary React import. |
| src/project-settings/assets/mainpage/features/App.tsx | Removes now-unnecessary React import. |
| src/project-settings/assets/index.tsx | Migrates entrypoint to React 19 createRoot. |
| src/project-settings/assets/compiler/features/components/Hint.tsx | Replaces VSCodeLink with native <a> for build file navigation hint. |
| src/project-settings/assets/compiler/features/CompilerConfigurationView.tsx | Migrates multiple UI Toolkit components to vscode-elements equivalents and replaces links with <a>. |
| src/project-settings/assets/classpath/style.scss | Adds ghost button styling and new layout styles for sources/JDK runtime sections. |
| src/project-settings/assets/classpath/features/components/UnmanagedFolderSources.tsx | Replaces toolkit datagrid + buttons with plain div layout and <vscode-button>. |
| src/project-settings/assets/classpath/features/components/Sources.tsx | Replaces toolkit datagrid/textfields/buttons with custom layout and web components. |
| src/project-settings/assets/classpath/features/components/Output.tsx | Migrates VSCodeTextField/VSCodeButton to <vscode-textfield>/<vscode-button>. |
| src/project-settings/assets/classpath/features/components/Libraries.tsx | Replaces toolkit datagrid + buttons with div layout and <vscode-button>. |
| src/project-settings/assets/classpath/features/components/JdkRuntime.tsx | Migrates dropdown/options to <vscode-single-select> + <vscode-option> and adds native event wiring. |
| src/project-settings/assets/classpath/features/components/Hint.tsx | Replaces VSCodeLink with native <a> for build file navigation hint. |
| src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx | Replaces VSCodePanels with <vscode-tabs> / headers / panels. |
| src/java-runtime/assets/ToolingJDKPanel.tsx | Refactors to functional component and migrates buttons to <vscode-button>. |
| src/java-runtime/assets/ProjectJDKPanel.tsx | Refactors to functional component and migrates table/buttons to vscode-elements components. |
| src/java-runtime/assets/index.ts | Migrates java-runtime entrypoint to React 19 createRoot. |
| src/java-runtime/assets/components/ProjectTypeHint.tsx | Refactors ProjectTypeHint to a functional component. |
| src/java-runtime/assets/components/DefaultJDKSelector.tsx | Refactors DefaultJDKSelector to a functional component and migrates edit button to <vscode-button>. |
| src/install-jdk/assets/index.tsx | Migrates install-jdk entrypoint to React 19 createRoot. |
| src/install-jdk/assets/features/InstallJDKView.tsx | Migrates panels/tabs/buttons/links to vscode-elements and native HTML. |
| src/install-jdk/assets/features/components/OtherJDKsPanel.tsx | Converts class component to functional and replaces VSCodeLink with <a>. |
| src/install-jdk/assets/features/components/AdoptiumJDKPanel.tsx | Migrates radio groups/progress ring/button to vscode-elements components. |
| src/install-jdk/assets/App.tsx | Converts App to a functional component. |
| src/formatter-settings/assets/index.tsx | Migrates formatter-settings entrypoint to React 19 createRoot. |
| src/formatter-settings/assets/features/formatterSettings/FormatterSettingView.tsx | Replaces react-bootstrap layout/nav with div/nav markup and data-driven category list. |
| src/formatter-settings/assets/features/formatterSettings/components/Setting.tsx | Migrates dropdowns to vscode-elements and replaces react-bootstrap form controls with native controls. |
| src/formatter-settings/assets/features/formatterSettings/components/Highlight.tsx | Removes now-unnecessary React import. |
| src/formatter-settings/assets/App.tsx | Converts App to a functional component. |
| src/beginner-tips/assets/tabs/QuickStartPanel.tsx | Removes now-unnecessary React import. |
| src/beginner-tips/assets/tabs/FaqPanel.tsx | Migrates VSCodeDataGrid usage to vscode-elements table components. |
| src/beginner-tips/assets/tabs/DebuggingPanel.tsx | Migrates VSCodeDataGrid usage to vscode-elements table components. |
| src/beginner-tips/assets/tabs/CodeEditingPanel.tsx | Migrates VSCodeDataGrid usage to vscode-elements table components. |
| src/beginner-tips/assets/style.scss | Adds additional utility classes and layout tweaks. |
| src/beginner-tips/assets/index.tsx | Migrates beginner-tips entrypoint to React 19 createRoot. |
| src/beginner-tips/assets/BeginnerTips.tsx | Migrates VSCodePanels to <vscode-tabs> markup. |
| src/assets/vscode.scss | Replaces Bootstrap import with a custom utility/style system intended to cover shared webview UI primitives. |
| package.json | Updates React/types + replaces UI toolkit deps with @vscode-elements/elements and other dependency bumps/overrides. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Author
|
Contributor
Author
|
Contributor
|
consider remove |
Contributor
|
Great work on migrating away from the vulnerable dependencies! A few suggestions on bundle size optimization — the current changes likely increase the overall bundle size due to @vscode-elements/elements (~794 KB minified) outweighing the removed react-bootstrap + @vscode/webview-ui-toolkit (~366 KB combined). Here are some actionable items: High priority:
// Instead of: import '@vscode-elements/elements';
import '@vscode-elements/elements/dist/vscode-button';
import '@vscode-elements/elements/dist/vscode-table';This alone could save 400-500 KB.
Medium priority:
These optimizations combined could make the post-migration bundle smaller than before. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate all webview UIs from React 16 + react-bootstrap + deprecated
@vscode/webview-ui-toolkitto React 19 +@vscode-elements/elements, with custom Bootstrap-equivalent SCSS.Changes
Dependencies
react-jsxtransform@vscode/webview-ui-toolkit~0.2.33for compatibilityBuild & Config
tsconfig.json:"jsx": "react-jsx","jsxImportSource": "react"webpack.config.js: updated for React 19 compatibilitysrc/vscode-elements.d.tsTypeScript declarations for web componentsWebview Migrations (all pages)
Tabs/ListGroup→ native HTMLvscode-tableweb components → plaindivlayout with hover actionscreateRootAPIStyling
src/assets/vscode.scss— comprehensive Bootstrap-equivalent utility classes (grid, list-group, card, nav, buttons, forms, tables, spacing, flex, text)Testing