Add React webview system with pnpm workspaces #761

EhabY · 2026-01-28T12:40:22Z

Summary

Adds a React-based webview system to the extension using pnpm workspaces. 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

packages/
├── shared/                      # Shared types and React utilities
│   ├── src/
│   │   ├── index.ts             # WebviewMessage type
│   │   └── react/               # VS Code webview hooks
│   │       ├── api.ts           # postMessage, getState, setState
│   │       └── hooks.ts         # useMessage, useVsCodeState
│   ├── extension.d.ts           # Types exposed to extension (excludes react/)
│   └── vite.config.base.ts      # Shared Vite config factory
└── tasks/                       # Tasks panel webview (placeholder)
    └── src/
        ├── index.tsx            # Entry point
        └── App.tsx              # Root component

src/webviews/
├── util.ts                      # getWebviewHtml() with CSP
└── tasks/
    └── TasksPanel.ts            # WebviewViewProvider

Key Features

Type-safe message passing: WebviewMessage type shared between extension and webviews
React hooks: useMessage() for receiving messages, useVsCodeState() for persisted state
Secure CSP: Nonce-based Content Security Policy for script execution
Type isolation: Extension can only import types from @coder/shared (not React code) via extension.d.ts
Proper lifecycle management: Disposable pattern for event listeners, visibility change handling

Changes

Add pnpm workspace configuration
Add @coder/shared package with types and React hooks
Add @coder/tasks-webview package (placeholder Tasks panel)
Add src/webviews/util.ts with getWebviewHtml() helper
Add src/webviews/tasks/TasksPanel.ts WebviewViewProvider
Register Tasks panel in package.json (visible when authenticated + devMode)
Add ESLint rules for React
Add webviews documentation to CONTRIBUTING.md

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

code-asher

Nice, looks like a good base for webviews.

code-asher · 2026-01-29T20:35:24Z

packages/shared/src/react/api.ts

+export function postMessage(message: WebviewMessage): void {
+	getVsCodeApi().postMessage(message);
+}
+
+export function getState<T>(): T | undefined {
+	return getVsCodeApi().getState() as T | undefined;
+}
+
+export function setState<T>(state: T): void {
+	getVsCodeApi().setState(state);
+}


I have not seen how this is used yet but do we need the wrappers? Seems like callers could grab the API via getVsCodeApi() and then call whatever they need, without having to duplicate everything.

Not a big deal either way.

If we keep these wrappers though there is probably no need to export getVsCodeApi() (it seems to be unused externally right now). Maybe the wrappers are better actually because it could be confusing why there is both a getVsCodeApi() and an acquireVsCodeApi() with such similar names.

code-asher · 2026-01-29T20:49:25Z

packages/shared/src/react/api.ts

+// Singleton - acquireVsCodeApi can only be called once
+let vscodeApi: WebviewApi<unknown> | undefined;
+
+declare function acquireVsCodeApi(): WebviewApi<unknown>;


Could we throw a comment on here saying VS Code provides this inside webviews?

Actually do we need it? I removed it and still get completion and docs for acquireVsCodeApi, but maybe something is just cached.

code-asher · 2026-01-29T20:49:56Z

packages/shared/src/react/api.ts

@@ -0,0 +1,25 @@
+import type { WebviewApi } from "vscode-webview";


Bit of a nit, but this is in react yet has no React-related code. It feels more webview related than React related to me.

Also instead of calling this @coder/shared what do you think about calling it @coder/webview?

code-asher · 2026-01-29T20:57:34Z

packages/shared/src/react/api.ts

+
+import type { WebviewMessage } from "../index";
+
+// Singleton - acquireVsCodeApi can only be called once


Could we expand on this a little, say something like trying to acquire the API more than once will throw an error.

code-asher · 2026-01-29T21:02:40Z

packages/shared/vite.config.base.ts

+			// No sourcemaps in production (not needed in packaged extension)
+			sourcemap: !production,


It could be nice to have sourcemaps for stack traces.

code-asher · 2026-01-29T21:51:35Z

CONTRIBUTING.md

+pnpm watch         # Rebuild extension on changes
+pnpm dev:webviews  # Rebuild webviews on changes (run in separate terminal)


Ah bummer is there no way to watch everything with one command?

code-asher · 2026-01-29T21:53:14Z

eslint.config.mjs

+			},
+		},
+		rules: {
+			// Only add React-specific rules, TS rules already applied via **/*.ts config above


**/*.ts would not match .tsx would it? Or wait does it?

code-asher · 2026-01-29T21:55:34Z

package.json

+		"build": "pnpm build:webviews && tsc --noEmit && node esbuild.mjs",
+		"build:production": "NODE_ENV=production pnpm build:webviews && tsc --noEmit && node esbuild.mjs --production",
+		"build:webviews": "pnpm -r --filter \"./packages/*\" build",
+		"dev:webviews": "pnpm -r --filter \"./packages/*\" --parallel dev",


For parity should this be watch:webviews?

code-asher · 2026-01-29T22:00:01Z

src/webviews/util.ts

+		vscode.Uri.joinPath(baseUri, "index.js"),
+	);
+	const styleUri = webview.asWebviewUri(
+		vscode.Uri.joinPath(baseUri, "index.css"),


The tasks example has no stylesheet, should we add a blank one for now?

code-asher · 2026-01-29T22:04:08Z

src/webviews/tasks/TasksPanel.ts

+			"tasks",
+		);
+
+		// Re-initialize when visibility changes (webview may have been restored)


When the webview is restored does the HTML not get loaded again? Which means it would send ready and we would send back init and would not need this block. Actually having this block could mean we would send init before the plugin said it was ready.

But, if the HTML does stay loaded when the webview is not visible, maybe we should send a visible event instead, so the plugin can tell the difference between a fresh load and being toggled.

EhabY self-assigned this Jan 28, 2026

EhabY added 2 commits January 29, 2026 13:52

Refactoring and moving things around

0d6e5f8

Share types between the extension and the webviews

487407b

EhabY force-pushed the add-webview-architecture branch from 7cc1aaf to 487407b Compare January 29, 2026 10:52

Simplify the CONTRIBUTING.md webview section

9b458f9

code-asher approved these changes Jan 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add React webview system with pnpm workspaces #761

Add React webview system with pnpm workspaces #761

EhabY commented Jan 28, 2026 •

edited

Loading

Uh oh!

code-asher left a comment

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026

Uh oh!

code-asher Jan 29, 2026 •

edited

Loading

Uh oh!

code-asher Jan 29, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,25 @@
		import type { WebviewApi } from "vscode-webview";


		import type { WebviewMessage } from "../index";

		// Singleton - acquireVsCodeApi can only be called once

		// No sourcemaps in production (not needed in packaged extension)
		sourcemap: !production,

		pnpm watch # Rebuild extension on changes
		pnpm dev:webviews # Rebuild webviews on changes (run in separate terminal)

Add React webview system with pnpm workspaces #761

Are you sure you want to change the base?

Add React webview system with pnpm workspaces #761

Conversation

EhabY commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Architecture

Key Features

Changes

Uh oh!

code-asher left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

code-asher Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

code-asher Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

EhabY commented Jan 28, 2026 •

edited

Loading

code-asher Jan 29, 2026 •

edited

Loading

code-asher Jan 29, 2026 •

edited

Loading