-
Notifications
You must be signed in to change notification settings - Fork 37
Add React webview system with pnpm workspaces #761
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
EhabY
wants to merge
5
commits into
coder:main
Choose a base branch
from
EhabY:add-webview-architecture
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Conversation
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
7cc1aaf to
487407b
Compare
code-asher
approved these changes
Jan 29, 2026
Member
code-asher
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, looks like a good base for webviews.
Introduce a webview architecture for building rich UI panels using React 19, Vite, and @vscode-elements/react-elements. Webviews are organized as pnpm workspace packages under packages/. Architecture: - packages/shared: Shared types and React hooks for VS Code API - packages/tasks: Example Tasks panel webview - src/webviews/: Extension-side WebviewViewProvider implementations - vite.config.base.ts: Shared Vite config factory for webviews Key features: - Type-safe message passing between extension and webviews - CSP-compliant HTML generation with nonce-based script loading - Vite with SWC for fast development builds - Webview watch via `pnpm dev:webviews` Build commands: - `pnpm build` - Build webviews + extension - `pnpm watch` - Watch extension - `pnpm dev:webviews` - Rebuild webviews on change
- Rename packages/shared to packages/webview-shared - Use @repo namespace for internal packages - Move api.ts out of react folder (not React-specific) - Move tsconfig.webview.json to packages folder for sharing - Fix tsBuildInfoFile location to prevent stale build issues - Add concurrently for watch:all command - Add warnOnUnassignedImports to ESLint for CSS import ordering - Remove unnecessary visibility handler from TasksPanel - Add title parameter to getWebviewHtml - Add index.css placeholder to tasks package - Rename vite config helper to avoid Vitest detection
b99597f to
fa36b0c
Compare
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
Adds a React-based webview system to the extension using
pnpmworkspaces. This provides the foundation for building rich UI panels (like the Tasks panel) with React while maintaining type safety between the extension and webviews.Architecture
Key Features
WebviewMessagetype shared between extension and webviewsuseMessage()for receiving messages,useVsCodeState()for persisted state@coder/shared(not React code) viaextension.d.tsChanges
@coder/sharedpackage with types and React hooks@coder/tasks-webviewpackage (placeholder Tasks panel)src/webviews/util.tswithgetWebviewHtml()helpersrc/webviews/tasks/TasksPanel.tsWebviewViewProviderpackage.json(visible when authenticated + devMode)CONTRIBUTING.md