Adopt the published @microsoft/vscode-ext-webview, retire the local @cosmosdb/webview-rpc by tnaum-ms · Pull Request #3217 · microsoft/vscode-cosmosdb

Tomasz Naumowicz (tnaum-ms) · 2026-07-30T06:08:02Z

Adopt the published `@microsoft/vscode-ext-webview`, retire the local `@cosmosdb/webview-rpc`

Swaps the in-repo packages/webview-rpc workspace package for the published @microsoft/vscode-ext-webview (~0.10.0) across the extension, then removes the local package. This is a transport-layer swap with no user-facing behavior change. The actual code changes are small and mostly mechanical: updated import paths plus a few call-site renames (27 source files, about +90/-85 lines). The bulk of the diff is just removing the local package.

Why

The local @cosmosdb/webview-rpc and the published @microsoft/vscode-ext-webview share the same roots: both grew from the same webview tRPC transport. Since then the published package has gained the flexibility that advanced, all-in-one consumers like this extension need: a generic telemetry runner that carries the full IActionContext on the procedure context, a host attachTrpc primitive that fits the panel model your BaseTab already uses, and a useTrpcClient() / useRpcEvents() hook split. Now we can bring the two back together again :)

Commits

build: add @microsoft/vscode-ext-webview and @trpc peer deps adds the package and its required @trpc/client and @trpc/server ~11.18.0 peers.
refactor(trpc): migrate extension-host layer moves all of src/panels/** to the package: initWebviewTrpc, attachTrpc, the package middleware bodies, and cancellation via getInvocationSignal.
refactor(webviews): migrate React layer moves all webview code to /react, so useTrpcClient() returns the client and useRpcEvents() supplies the event channel, and updates the GenerateQueryInput test mock.
chore: remove local @cosmosdb/webview-rpc package deletes packages/webview-rpc, its path aliases (tsconfig, both vite configs, vitest), its packages/README.md row, and refreshes docs/trpc-webview-guide.md.
build(views): pre-bundle @microsoft/vscode-ext-webview subpaths in dev lists the package's dev-facing subpaths in optimizeDeps.include so Vite pre-bundles the still-CommonJS package at dev-server start, avoiding a re-optimize and reload on first webview open. Dev-only, removable once the package ships ESM.

One work item per commit, for easy review.

Please smoke-test

I verified the four webviews open and work, but you know this extension far better than I do. Please give it a pass to confirm behavior matches pre-migration, especially Query Editor, Document, Migration Assistant, and Account Overview, including live subscriptions and events, cancellation (Stop), and error surfacing. Flag anything that feels different.

Local dev note

The webview dev server uses port 18080, which collides with vscode-documentdb's dev server. If you run both, only one can own the port; see #3216. This does not affect the shipped code in this PR.

Adds the published webview transport package and its required @trpc/client and @trpc/server peer dependencies ahead of migrating off the local @cosmosdb/webview-rpc workspace package.

…-webview Repoints all src/panels/** transport code from the local @cosmosdb/webview-rpc workspace package to the published @microsoft/vscode-ext-webview package: - trpc.ts: initTRPC.context().create() -> initWebviewTrpc(); the logging body is now wired per-invocation (loggingMiddlewareBody(opts, logger)) and the curried telemetry body is applied directly. - setupTrpc() -> attachTrpc() in the four panel tabs. - azextTelemetryRunner: reads cancellation via getInvocationSignal(ctx). - BaseRouterContext / TypedEventSink / ProcedureLogger now come from the package. No behavior change: the runner still injects { actionContext } and procedures keep reading ctx.actionContext.

Repoints all webview React code from @cosmosdb/webview-rpc/react to @microsoft/vscode-ext-webview/react and adopts the 0.10.0 hook split: - useTrpcClient() now returns the tRPC client directly instead of a { trpcClient, events } tuple. - Views that observe webview-wide RPC outcomes (Document, Query Editor) read the event channel from the new useRpcEvents() hook. - WithWebviewContext / WebviewState / TrpcClient / AnyRouter now come from the package. - GenerateQueryInput test mock updated to the new hook contract.

The extension now consumes the published @microsoft/vscode-ext-webview package everywhere, so the local workspace package is no longer needed. - Deletes packages/webview-rpc and its packages/README.md entry. - Removes the @cosmosdb/webview-rpc path aliases from tsconfig.base.json, vite.config.ext.mjs, vite.config.views.mjs, and vitest.config.ts. - Updates docs/trpc-webview-guide.md to reference attachTrpc and the package import paths. - Refreshes package-lock.json.

@microsoft/vscode-ext-webview ships CommonJS. List its dev-facing subpaths in optimizeDeps.include so Vite pre-bundles the CJS->ESM interop shim at dev-server start, instead of triggering a re-optimize and a full webview reload the first time a panel opens. Dev-only and removable once the package ships an ESM build.

github-actions · 2026-07-30T06:08:29Z

✅ Build (Compile, Lint, Prettier, l10n, Package)

🧱 Step Results

Validate Version: ✅ success
Localization: ✅ success
Lint: ✅ success
Prettier: ✅ success
Compile (tsc): ✅ success
Package: ✅ success
External Skills (info): ✅ success

📥 Artifacts (run)

dev-tnuam-use-npm-webview-api-0.35.2-620206e — 3.66 MB

Tomasz Naumowicz (tnaum-ms) · 2026-07-30T06:08:58Z

Note: this write-up is AI generated and reviewed before posting.

Suggestion for the maintainers: it would help to have an agreed place in this repo to store per-PR write-ups like this one, the what and the why behind a change, so the reasoning stays discoverable after merge. We do this successfully in the vscode-documentdb repo and it has made reviews and later archaeology noticeably easier. Introducing it is your call and this PR does not touch it, but I am happy to help set it up if useful.

Full story: what was done and why

Background

The webview tRPC transport in this extension (the postMessage wire protocol, the abort-aware host dispatcher, the client links, TypedEventSink, the pluggable logging and telemetry middleware, and the React bindings) and the published @microsoft/vscode-ext-webview share the same roots. Both grew from the same transport: one lived on as the in-repo @cosmosdb/webview-rpc workspace package, and one became the package we later published and hardened across the two extensions. This PR brings them back together again :)

Part of that shared work was making the published package flexible enough for the more advanced, all-in-one scenarios this extension relies on, not only the simple case:

A four-subpath, side-safe layout (. shared, ./host, ./webview, ./react), so the extension-host and webview build graphs each import only what they are allowed to.
A generic TelemetryRunner<TEnrichment> (shipped in 0.10.0). The telemetry middleware body is a thin, dependency-free delegator, and the consumer's runner calls invoke(enrichment) to merge arbitrary fields into the procedure context. That is what lets this extension keep injecting the full IActionContext on ctx.actionContext through callWithTelemetryAndErrorHandling, with no changes to any procedure body.
attachTrpc as a bring-your-own-panel host primitive, which matches the panel ownership model your BaseTab already uses.
A useTrpcClient() / useRpcEvents() hook split, so only the views that observe webview-wide RPC outcomes subscribe to the event channel.

The one contract that made this possible

Earlier package versions exposed only a minimal telemetry bag on the context. This extension needs the full IActionContext on ctx.actionContext (around forty read sites plus helpers). The generic runner in 0.10.0 covers that directly: the runner keeps injecting { actionContext }, and procedures keep reading ctx.actionContext unchanged. The result is a clean, full-package adoption rather than a partial one.

Commit by commit

build: add @microsoft/vscode-ext-webview and @trpc peer deps adds the package and its required @trpc/client and @trpc/server peers.
refactor(trpc): migrate extension-host layer covers all of src/panels/**: initTRPC.context<T>().create() becomes initWebviewTrpc<T>(), the logging body is wired per invocation (loggingMiddlewareBody(opts, logger)) and the curried telemetry body is applied directly, setupTrpc() becomes attachTrpc(), the telemetry runner reads cancellation with getInvocationSignal(ctx), and BaseRouterContext, TypedEventSink, and ProcedureLogger now come from the package.
refactor(webviews): migrate React layer moves all webview code to @microsoft/vscode-ext-webview/react. useTrpcClient() returns the client directly, the Document and Query Editor contexts read the event channel from the new useRpcEvents() hook, and the GenerateQueryInput test mock is updated to the new contract.
chore: remove local @cosmosdb/webview-rpc package deletes packages/webview-rpc, removes its path aliases from tsconfig.base.json, vite.config.ext.mjs, vite.config.views.mjs, and vitest.config.ts, drops its row from packages/README.md, and updates docs/trpc-webview-guide.md.
build(views): pre-bundle @microsoft/vscode-ext-webview subpaths in dev lists the package's dev-facing subpaths in optimizeDeps.include. The package is still CommonJS, so this pre-bundles its interop shim at dev-server start and avoids a re-optimize plus reload on the first webview open. It is dev-only and can be removed once the package ships an ESM build.

One type-safety fix worth calling out

The new ProcedureErrorLike is intentionally narrow (name, message, code, cause, all optional) and does not expose stack. The previous runner relied on a loose parameter annotation that made the middleware result any, which silently allowed error.stack. The runner now lets the generic bind properly and reads the stack with a small explicit widening, so the telemetry output is unchanged while the code is type-safe.

Validation

npm run build (three tsc projects), npm run lint (oxlint and eslint), npm run prettier-fix, and npm run l10n (no string changes) all pass. The full unit suite is green (1871 passing, 1 skipped). A clean rimraf node_modules and reinstall produces an identical lockfile.

Risk and suggested smoke test

Low. The runner still injects { actionContext }, procedures still read ctx.actionContext, and the wire protocol and per-panel transport are unchanged. Worth a manual pass over the four webviews (Query Editor, Document, Migration Assistant, Account Overview), including subscriptions and the output channel plus telemetry logging.

Copilot

Pull request overview

Migrates the extension and its webviews from the in-repo @cosmosdb/webview-rpc workspace package to the published @microsoft/vscode-ext-webview package, then removes the local transport package and its related build/test path aliases.

Changes:

Swap tRPC/webview transport imports and host wiring to @microsoft/vscode-ext-webview (including attachTrpc, initWebviewTrpc, useTrpcClient, and useRpcEvents).
Remove packages/webview-rpc and delete corresponding TS/Vite/Vitest aliases.
Update build tooling/deps (Vite optimizeDeps.include, root dependencies) and refresh tRPC webview documentation.

Reviewed changes

Copilot reviewed 57 out of 58 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
vitest.config.ts	Removes `@cosmosdb/webview-rpc` test-time path aliases.
vite.config.views.mjs	Pre-bundles `@microsoft/vscode-ext-webview` subpaths; removes `@cosmosdb/webview-rpc` aliases.
vite.config.ext.mjs	Removes `@cosmosdb/webview-rpc` extension-bundle aliases.
tsconfig.base.json	Removes `@cosmosdb/webview-rpc*` path mappings.
src/webviews/utils/context/BaseContextProvider.tsx	Switches React-layer tRPC client types to `@microsoft/vscode-ext-webview/react`.
src/webviews/index.tsx	Switches `WithWebviewContext`/`WebviewState` import to `@microsoft/vscode-ext-webview/react`.
src/webviews/cosmosdb/QueryEditor/state/QueryEditorContextProvider.tsx	Switches `TrpcClient` type import to `@microsoft/vscode-ext-webview/react`.
src/webviews/cosmosdb/QueryEditor/state/QueryEditorContext.tsx	Adopts `useTrpcClient()` + `useRpcEvents()` hook split.
src/webviews/cosmosdb/QueryEditor/quickStart/QuickStartProvider.tsx	Updates `useTrpcClient()` usage to new return type (client only).
src/webviews/cosmosdb/QueryEditor/QueryPanel/GenerateQueryInput.tsx	Updates `useTrpcClient()` usage to new return type (client only).
src/webviews/cosmosdb/QueryEditor/QueryPanel/GenerateQueryInput.test.tsx	Updates mocks to match new `useTrpcClient()`/`useRpcEvents()` contract.
src/webviews/cosmosdb/Migration/state/MigrationChannel.ts	Switches `TrpcClient` type import to `@microsoft/vscode-ext-webview/react`.
src/webviews/cosmosdb/Migration/MigrationAssistant.tsx	Updates `useTrpcClient()` usage to new return type (client only).
src/webviews/cosmosdb/Document/state/DocumentContextProvider.tsx	Switches `TrpcClient` type import to `@microsoft/vscode-ext-webview/react`.
src/webviews/cosmosdb/Document/state/DocumentContext.tsx	Adopts `useTrpcClient()` + `useRpcEvents()` hook split.
src/webviews/cosmosdb/AccountOverview/AccountOverview.tsx	Updates `useTrpcClient()` usage to new return type (client only).
src/panels/trpc/trpc.ts	Moves server-side tRPC initialization and middleware bodies to `@microsoft/vscode-ext-webview` / `host`.
src/panels/trpc/routers/queryEditorEventsRouter.ts	Switches `TypedEventSink` import to `@microsoft/vscode-ext-webview`.
src/panels/trpc/routers/migrationEventsRouter.ts	Switches `TypedEventSink` import to `@microsoft/vscode-ext-webview`.
src/panels/trpc/middleware/outputChannelLogger.ts	Switches `ProcedureLogger` type import to `@microsoft/vscode-ext-webview/host`.
src/panels/trpc/middleware/azextTelemetryRunner.ts	Updates telemetry runner to new host types/APIs (e.g., `getInvocationSignal`).
src/panels/trpc/appRouter.ts	Switches base context + event sink imports to `@microsoft/vscode-ext-webview`.
src/panels/QueryEditorTab.ts	Replaces `setupTrpc` with `attachTrpc` from `@microsoft/vscode-ext-webview/host`.
src/panels/MigrationAssistantTab.ts	Replaces `setupTrpc` with `attachTrpc` from `@microsoft/vscode-ext-webview/host`.
src/panels/migration/steps/phase4Provisioning.ts	Switches `TypedEventSink` type import to `@microsoft/vscode-ext-webview`.
src/panels/migration/steps/phase3SchemaConversion.ts	Switches `TypedEventSink` type import to `@microsoft/vscode-ext-webview`.
src/panels/migration/steps/phase2Assessment.ts	Switches `TypedEventSink` type import to `@microsoft/vscode-ext-webview`.
src/panels/migration/steps/phase1Discovery.ts	Switches `TypedEventSink` type import to `@microsoft/vscode-ext-webview`.
src/panels/migration/helpers/migrationHelpers.ts	Switches `TypedEventSink` type import to `@microsoft/vscode-ext-webview`.
src/panels/DocumentTab.ts	Replaces `setupTrpc` with `attachTrpc` from `@microsoft/vscode-ext-webview/host`.
src/panels/AccountOverviewTab.ts	Replaces `setupTrpc` with `attachTrpc` from `@microsoft/vscode-ext-webview/host`.
packages/webview-rpc/tsconfig.json	Removes local transport package config (package retirement).
packages/webview-rpc/src/shared/vscodeProtocol.ts	Removes local transport shared protocol types (package retirement).
packages/webview-rpc/src/shared/TypedEventSink.ts	Removes local TypedEventSink implementation (package retirement).
packages/webview-rpc/src/shared/TypedEventSink.test.ts	Removes local TypedEventSink tests (package retirement).
packages/webview-rpc/src/server/setupTrpc.ts	Removes local host-side setupTrpc implementation (package retirement).
packages/webview-rpc/src/server/middleware/types.ts	Removes local middleware shared types (package retirement).
packages/webview-rpc/src/server/middleware/telemetryMiddleware.ts	Removes local telemetry middleware body (package retirement).
packages/webview-rpc/src/server/middleware/loggingMiddleware.ts	Removes local logging middleware body (package retirement).
packages/webview-rpc/src/server/middleware/index.ts	Removes local middleware barrel export (package retirement).
packages/webview-rpc/src/server/index.ts	Removes local server-side entrypoint (package retirement).
packages/webview-rpc/src/server/baseRouterContext.ts	Removes local base router context types (package retirement).
packages/webview-rpc/src/react/WebviewContext.tsx	Removes local React provider (package retirement).
packages/webview-rpc/src/react/useTrpcClient.ts	Removes local React hook implementation (package retirement).
packages/webview-rpc/src/react/index.ts	Removes local React subpath barrel (package retirement).
packages/webview-rpc/src/index.ts	Removes local package root barrel (package retirement).
packages/webview-rpc/src/client/vscodeLink.ts	Removes local client-side transport link (package retirement).
packages/webview-rpc/src/client/vscodeLink.test.ts	Removes local client-side transport tests (package retirement).
packages/webview-rpc/src/client/index.ts	Removes local client-side entrypoint (package retirement).
packages/webview-rpc/src/client/events.ts	Removes local client-side events channel (package retirement).
packages/webview-rpc/src/client/errorLink.ts	Removes local client-side errorLink (package retirement).
packages/webview-rpc/src/client/errorLink.test.ts	Removes local client-side errorLink tests (package retirement).
packages/webview-rpc/README.md	Removes local package documentation (package retirement).
packages/webview-rpc/package.json	Removes local package manifest (package retirement).
packages/README.md	Removes `@cosmosdb/webview-rpc` from active packages list.
package.json	Adds `@microsoft/vscode-ext-webview` and required `@trpc/*` deps.
package-lock.json	Locks new dependencies and removes workspace link for the retired package.
docs/trpc-webview-guide.md	Updates guide to reference `attachTrpc` and new package imports.

github-code-quality · 2026-07-30T06:11:31Z

Code Coverage Overview

Languages: TypeScript

TypeScript / code-coverage/vitest

The overall coverage in commit 620206e in the dev/tnuam/use-npm-we... branch is 76%. The coverage in commit 91f6424 in the main branch is 77%.

Show a code coverage summary of the most impacted files.

File	`main` 91f6424	`dev/tnuam/use-npm-we...` 620206e	+/-
`packages/webvie...t/vscodeLink.ts`	100%	0%	-100%
`packages/webvie...pedEventSink.ts`	100%	0%	-100%
`packages/webvie...nt/errorLink.ts`	100%	0%	-100%
`packages/webvie...lient/events.ts`	90%	0%	-90%
`src/webviews/co...itorContext.tsx`	30%	29%	-1%

github-actions · 2026-07-30T06:12:01Z

🧪 Tests (Unit + Integration)

🧪 Results

Unit Tests (vitest): ✅ success
Integration Tests (extension host): ✅ success

📈 Coverage

Download HTML report

github-actions · 2026-07-30T06:15:15Z

🎭 E2E Tests (Playwright + VS Code)

🧪 Result

E2E Tests: ✅ success

📥 Artifacts (run)

e2e-results-1 — 15.72 MB
e2e-html-report-1 — 7.57 MB

Tip: the HTML report artifact contains a self-contained Playwright report.
Download the zip, extract, and open index.html — or run
npx playwright show-report <extracted-dir> for the interactive view.

Tomasz Naumowicz (tnaum-ms) added 5 commits July 29, 2026 20:50

build: add @microsoft/vscode-ext-webview and @trpc peer deps

1cb4eb2

Adds the published webview transport package and its required @trpc/client and @trpc/server peer dependencies ahead of migrating off the local @cosmosdb/webview-rpc workspace package.

Copilot AI review requested due to automatic review settings July 30, 2026 06:08

Tomasz Naumowicz (tnaum-ms) requested a review from a team as a code owner July 30, 2026 06:08

Copilot started reviewing on behalf of Tomasz Naumowicz (tnaum-ms) July 30, 2026 06:08 View session

Tomasz Naumowicz (tnaum-ms) mentioned this pull request Jul 30, 2026

@microsoft/vscode-ext-webview: ship an ESM (dual ESM+CJS) build microsoft/vscode-documentdb#824

Open

Copilot AI reviewed Jul 30, 2026

View reviewed changes

Comment thread src/panels/trpc/middleware/azextTelemetryRunner.ts

Dmitrii Shilov (bk201-) approved these changes Jul 30, 2026

View reviewed changes

Navigation Menu

Uh oh!

Adopt the published @microsoft/vscode-ext-webview, retire the local @cosmosdb/webview-rpc - #3217

Adopt the published @microsoft/vscode-ext-webview, retire the local @cosmosdb/webview-rpc#3217
Tomasz Naumowicz (tnaum-ms) wants to merge 5 commits into
mainfrom
dev/tnuam/use-npm-webview-api

Tomasz Naumowicz (tnaum-ms) commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

Tomasz Naumowicz (tnaum-ms) commented Jul 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-code-quality Bot commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

github-actions Bot commented Jul 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Tomasz Naumowicz (tnaum-ms) commented Jul 30, 2026