Separate Entry Points for client and host

package.json

@@ -21,6 +21,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./host": {
+      "types": "./dist/host.d.ts",
+      "import": "./dist/host.js",
+      "require": "./dist/host.cjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "require": "./dist/client.cjs"
     }
   },
   "files": [

src/lib/client.ts

@@ -0,0 +1,9 @@
+export { type WebviewContextValue } from './client/WebviewContext';
+export { WebviewProvider } from './client/WebviewProvider';
+export { createCtxKey, useWebviewApi } from './client/useWebviewApi';
+export { useVscodeState } from './client/useVscodeState';
+export { useLogger } from './client/useLogger';
+export { isViewApiRequest, isViewApiResponse, isViewApiEvent, type CtxKey } from './types';
+export type { ClientCalls, ViewApiResponse, ViewApiError } from './types';
+export type { StateReducer, WebviewKey } from './types/ipcReducer';
+export type { WebviewLayout } from './types';

src/lib/client/WebviewProvider.tsx

@@ -51,7 +51,7 @@ export const WebviewProvider = <T extends ClientCalls, H extends HostCalls>({
   const callApi = <K extends keyof T = keyof T>(
     key: K,
     ...params: Parameters<T[K]>
-  ): Promise<ReturnType<T[K]>> => {
+  ): ReturnType<T[K]> => {
     const id = generateId('req');
     const deferred = new DeferredPromise<Awaited<ReturnType<T[K]>>>(key as string);
 
@@ -76,7 +76,7 @@ export const WebviewProvider = <T extends ClientCalls, H extends HostCalls>({
       deferred.reject(error instanceof Error ? error : new Error(String(error)));
     }
 
-    return deferred.promise;
+    return deferred.promise as ReturnType<T[K]>;
   };
 
   /**

src/lib/client/useWebviewApi.ts

@@ -1,5 +1,6 @@
 import { useContext, type Context } from 'react';
-import type { ClientCalls, CtxKey, WebviewContextValue } from '..';
+import type { ClientCalls, CtxKey } from '../types';
+import type { WebviewContextValue } from './WebviewContext';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const TypedContexts = new WeakMap<CtxKey<any>, Context<any>>();
@@ -20,5 +21,5 @@ export const useWebviewApi = <T extends ClientCalls>(
 };
 
 export function createCtxKey<T extends ClientCalls>(contextKey: string): CtxKey<T> {
-  return { id: Symbol(contextKey) } as CtxKey<T>;
+  return Object.freeze({ id: Symbol(contextKey) }) as CtxKey<T>;
 }

src/lib/host.ts

@@ -0,0 +1,8 @@
+export type { ILogger } from './host/ILogger';
+export { Logger, getLogger, disallowedLogKeys } from './host/logger';
+export { WebviewApiProvider } from './host/WebviewApiProvider';
+export { BaseWebviewViewProvider } from './host/BaseWebviewViewProvider';
+export { isViewApiRequest, isViewApiResponse, isViewApiEvent, type CtxKey } from './types';
+export type { HostCalls, ViewApiResponse, ViewApiError } from './types';
+export type { ActionDelegate, StateReducer, WebviewKey } from './types/ipcReducer';
+export type { WebviewLayout } from './types';

src/lib/host/BaseWebviewViewProvider.ts

@@ -9,7 +9,7 @@ import {
   type Patches,
   type WebviewKey,
 } from '../types/ipcReducer';
-import { LogLevel } from './ILogger';
+import { LogLevel, type ILogger } from './ILogger';
 import { getLogger } from './logger';
 import { isLogMessage, type LogMessage } from './WebviewLogger';
 import type { WebviewApiProvider } from './WebviewApiProvider';
@@ -18,14 +18,14 @@ export abstract class BaseWebviewViewProvider<A extends object>
   implements vscode.WebviewViewProvider
 {
   protected _view?: vscode.WebviewView;
-  protected readonly logger;
+  protected readonly logger: ILogger;
   protected abstract readonly webviewActionDelegate: ActionDelegate<A>;
   constructor(
     private readonly providerId: WebviewKey,
     private readonly extensionUri: vscode.Uri,
     private readonly apiProvider?: WebviewApiProvider<HostCalls>
   ) {
-    this.logger = getLogger(providerId.split('.')[1]);
+    this.logger = getLogger(providerId.split('.')[1] ?? providerId);
   }
 
   public resolveWebviewView(

src/lib/host/logger.ts

@@ -1,7 +1,8 @@
 import * as vscode from 'vscode';
-import { disallowedLogKeys } from '..';
 import { LogLevel, type ILogger } from './ILogger';
 
+export const disallowedLogKeys = ['password', 'secret', 'token', 'apiKey', 'apiSecret', 'content'];
+
 function removePromptsFromData<T>(dictionary: T | undefined | null): T | undefined {
   if (dictionary === null || dictionary === undefined) {
     return undefined;

src/lib/index.ts

@@ -1,15 +1,13 @@
-export const disallowedLogKeys = ['password', 'secret', 'token', 'apiKey', 'apiSecret', 'content'];
-
 export { type WebviewContextValue } from './client/WebviewContext';
 export { WebviewProvider } from './client/WebviewProvider';
 export { createCtxKey, useWebviewApi } from './client/useWebviewApi';
 export { useVscodeState } from './client/useVscodeState';
 export { useLogger } from './client/useLogger';
 export { withWebviewApi } from './client/withWebviewApi';
 export type { StateReducer, WebviewKey } from './types/ipcReducer';
 export type { WebviewLayout } from './types';
 export type { ILogger } from './host/ILogger';
-export { Logger, getLogger } from './host/logger';
+export { Logger, getLogger, disallowedLogKeys } from './host/logger';
 export { WebviewApiProvider } from './host/WebviewApiProvider';
 export { isViewApiRequest, isViewApiResponse, isViewApiEvent, type CtxKey } from './types';
 export type { ClientCalls, HostCalls, ViewApiResponse, ViewApiError } from './types';

src/lib/types.ts

@@ -3,7 +3,7 @@ export type Brand<T, B> = T & { readonly __brand: B };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type HostCalls = Record<string, (...args: any[]) => any>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ClientCalls = Record<string | symbol, (...args: any[]) => PromiseLike<any>>;
+export type ClientCalls = Record<string, (...args: any[]) => PromiseLike<any>>;
 
 // eslint-disable-next-line code-complete/enforce-meaningful-names
 declare const __t: unique symbol;

vite.config.ts

@@ -15,13 +15,13 @@ export default defineConfig({
   ],
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/lib/index.ts'),
+      entry: {
+        index: resolve(__dirname, 'src/lib/index.ts'),
+        host: resolve(__dirname, 'src/lib/host.ts'),
+        client: resolve(__dirname, 'src/lib/client.ts'),
+      },
       formats: ['es', 'cjs'],
       name: 'ReactVSCodeWebviewIPC',
-      fileName: (format) => {
-        const extension = format === 'es' ? 'js' : 'cjs';
-        return `index.${extension}`;
-      },
     },
     rollupOptions: {
       external: ['react', 'react-dom', 'react/jsx-runtime', 'vscode'],