Share types between the extension and the webviews

EhabY · EhabY · commit 7cc1aaf9a71e · 2026-01-29T13:31:30.000+03:00
diff --git a/.vscodeignore b/.vscodeignore
@@ -29,8 +29,6 @@ pnpm-workspace.yaml
 
 # Webview packages (exclude everything except built output in dist/webviews)
 packages/**
-tsconfig.webview.json
-vite.config.base.ts
 !dist/webviews/**
 
 # Nix/flake files
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -201,6 +201,10 @@ code, use "Developer: Reload Webviews" or close/reopen the panel to see updates.
 
 ### Shared Package (`@coder/shared`)
 
+The extension can import types from `@coder/shared` via path mapping in `tsconfig.json`.
+The mapping points to `extension.d.ts`, which re-exports only the types meant for
+extension use (excluding `@coder/shared/react` which is webview-only).
+
 Type-safe message passing between extension and webview:
 
 ```typescript
diff --git a/packages/shared/extension.d.ts b/packages/shared/extension.d.ts
@@ -0,0 +1,2 @@
+// Types exposed to the extension (react/ subpath is excluded).
+export type { WebviewMessage } from "./src/index";
diff --git a/src/webviews/tasks/TasksPanel.ts b/src/webviews/tasks/TasksPanel.ts
@@ -1,6 +1,8 @@
 import * as vscode from "vscode";
 
-import { getWebviewHtml, type WebviewMessage } from "../util";
+import { getWebviewHtml } from "../util";
+
+import type { WebviewMessage } from "@coder/shared";
 
 export class TasksPanel implements vscode.WebviewViewProvider {
 	public static readonly viewType = "coder.tasksPanel";
diff --git a/src/webviews/util.ts b/src/webviews/util.ts
@@ -2,49 +2,25 @@ import { randomBytes } from "node:crypto";
 import * as vscode from "vscode";
 
 /**
- * Message type for webview communication.
- * Matches @coder/shared WebviewMessage for consistency.
- */
-export interface WebviewMessage<T = unknown> {
-	type: string;
-	data?: T;
-}
-
-/**
- * Generate a cryptographically secure nonce for CSP
- */
-export function getNonce(): string {
-	return randomBytes(16).toString("base64");
-}
-
-/**
- * Get the HTML content for a webview
+ * Get the HTML content for a webview.
  */
 export function getWebviewHtml(
 	webview: vscode.Webview,
 	extensionUri: vscode.Uri,
 	webviewName: string,
 ): string {
 	const nonce = getNonce();
-
+	const baseUri = vscode.Uri.joinPath(
+		extensionUri,
+		"dist",
+		"webviews",
+		webviewName,
+	);
 	const scriptUri = webview.asWebviewUri(
-		vscode.Uri.joinPath(
-			extensionUri,
-			"dist",
-			"webviews",
-			webviewName,
-			"index.js",
-		),
+		vscode.Uri.joinPath(baseUri, "index.js"),
 	);
-
 	const styleUri = webview.asWebviewUri(
-		vscode.Uri.joinPath(
-			extensionUri,
-			"dist",
-			"webviews",
-			webviewName,
-			"index.css",
-		),
+		vscode.Uri.joinPath(baseUri, "index.css"),
 	);
 
 	return `<!DOCTYPE html>
@@ -61,3 +37,7 @@ export function getWebviewHtml(
 </body>
 </html>`;
 }
+
+function getNonce(): string {
+	return randomBytes(16).toString("base64");
+}
diff --git a/test/tsconfig.json b/test/tsconfig.json
@@ -3,7 +3,8 @@
 	"compilerOptions": {
 		"baseUrl": "..",
 		"paths": {
-			"@/*": ["src/*"]
+			"@/*": ["src/*"],
+			"@coder/shared": ["packages/shared/extension.d.ts"]
 		}
 	},
 	"include": [".", "../src"]
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,7 +9,10 @@
 		"sourceMap": true,
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitOverride": true,
-		"noImplicitReturns": true
+		"noImplicitReturns": true,
+		"paths": {
+			"@coder/shared": ["./packages/shared/extension.d.ts"]
+		}
 	},
 	"include": ["src"]
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Types exposed to the extension (react/ subpath is excluded).`
	`2`	`+export type { WebviewMessage } from "./src/index";`