Merge pull request #3 from hbmartin/refinements

Support multiple API context providers

Author: hbmartin

src/lib/client/WebviewContext.tsx

@@ -1,17 +1,14 @@
-import { createContext } from 'react';
 import type { ClientCalls, HostCalls, VsCodeApi } from '../types';
 
 /**
  * Context value interface providing type-safe API access
  */
-export interface WebviewContextValue {
+export interface WebviewContextValue<T extends ClientCalls> {
   api: {
-    [K in keyof ClientCalls]: (...args: Parameters<ClientCalls[K]>) => ReturnType<ClientCalls[K]>;
+    [K in keyof T]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
   };
   addListener: <E extends keyof HostCalls>(key: E, callback: HostCalls[E]) => void;
   removeListener: <E extends keyof HostCalls>(key: E, callback: HostCalls[E]) => void;
   isReady: boolean;
   vscode: VsCodeApi;
 }
-
-export const WebviewContext = createContext<WebviewContextValue | undefined>(undefined);

src/lib/client/WebviewProvider.tsx

@@ -1,32 +1,39 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef } from 'react';
+import { createContext, useEffect, useMemo, useRef } from 'react';
 import {
   isViewApiError,
   isViewApiEvent,
   isViewApiResponse,
   type ClientCalls,
+  type CtxKey,
   type HostCalls,
   type RequestContext,
   type ViewApiRequest,
   type VsCodeApi,
 } from '../types';
 import { generateId } from '../utils';
-import { DeferredPromise, type WebviewContextValue } from './types';
+import { DeferredPromise } from './types';
+import { TypedContexts } from './useWebviewApi';
+import type { WebviewContextValue } from './WebviewContext';
 
 declare function acquireVsCodeApi(): VsCodeApi;
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const vscodeApi = acquireVsCodeApi();
 
-interface WebviewProviderProps {
+interface WebviewProviderProps<T extends ClientCalls> {
   viewType: string;
   children: React.ReactNode;
+  contextKey: CtxKey<T>;
 }
 
 /**
  * WebviewProvider provides type-safe API access to webview components
  */
-export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, viewType }) => {
+export const WebviewProvider = <T extends ClientCalls, H extends HostCalls>({
+  children,
+  viewType,
+  contextKey,
+}: WebviewProviderProps<T>) => {
   const pendingRequests = useRef<Map<string, DeferredPromise<any>>>(new Map());
   const listeners = useRef<Map<keyof HostCalls, Set<(...args: any[]) => void>>>(new Map());
 
@@ -41,14 +48,14 @@ export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, view
   /**
    * Type-safe API caller with request/response matching
    */
-  const callApi = <K extends keyof ClientCalls>(
+  const callApi = <K extends keyof T = keyof T>(
     key: K,
-    ...params: Parameters<ClientCalls[K]>
-  ): ReturnType<ClientCalls[K]> => {
+    ...params: Parameters<T[K]>
+  ): Promise<ReturnType<T[K]>> => {
     const id = generateId('req');
-    const deferred = new DeferredPromise<Awaited<ReturnType<ClientCalls[K]>>>(key);
+    const deferred = new DeferredPromise<Awaited<ReturnType<T[K]>>>(key as string);
 
-    const request: ViewApiRequest<K> = {
+    const request: ViewApiRequest<T, K> = {
       type: 'request',
       id,
       key,
@@ -63,7 +70,7 @@ export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, view
     try {
       vscodeApi.postMessage(request);
     } catch (error) {
-      console.error(`Failed to send API request ${key}:`, error);
+      console.error(`Failed to send API request ${key as string}:`, error);
       deferred.clearTimeout();
       pendingRequests.current.delete(id);
       deferred.reject(error instanceof Error ? error : new Error(String(error)));
@@ -75,12 +82,12 @@ export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, view
   /**
    * Create typed API object using Proxy for dynamic method access
    */
-  const api = new Proxy({} as WebviewContextValue['api'], {
+  const api = new Proxy({} as WebviewContextValue<T>['api'], {
     // eslint-disable-next-line code-complete/enforce-meaningful-names
     get: (_, key: string) => {
       return (...args: any[]) => {
         // Type assertion is safe here because the proxy ensures correct typing at usage
-        return callApi(key, ...(args as Parameters<ClientCalls[keyof ClientCalls]>));
+        return callApi(key, ...(args as Parameters<T[keyof T]>));
       };
     },
   });
@@ -107,6 +114,7 @@ export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, view
    * Handle messages from the extension host
    */
   useEffect(() => {
+    // eslint-disable-next-line sonarjs/cognitive-complexity
     const handleMessage = (event: MessageEvent<unknown>) => {
       const message = event.data;
 
@@ -128,9 +136,9 @@ export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, view
         } else {
           console.warn(`No pending request found for error ID: ${message.id}`);
         }
-      } else if (isViewApiEvent(message)) {
+      } else if (isViewApiEvent<H>(message)) {
         // Handle event
-        const callbacks = listeners.current.get(message.key);
+        const callbacks = listeners.current.get(message.key as keyof HostCalls);
         if (callbacks && callbacks.size > 0) {
           for (const callback of callbacks) {
             try {
@@ -172,13 +180,19 @@ export const WebviewProvider: React.FC<WebviewProviderProps> = ({ children, view
     };
   }, []);
 
-  const contextValue: WebviewContextValue = {
+  const context = useMemo(() => {
+    const context = createContext<WebviewContextValue<T> | undefined>(undefined);
+    TypedContexts.set(contextKey, context);
+    return context;
+  }, [contextKey]);
+
+  const contextValue: WebviewContextValue<T> = {
     api,
     addListener,
     removeListener,
     isReady: true,
     vscode: vscodeApi,
   };
 
-  return <WebviewContext.Provider value={contextValue}>{children}</WebviewContext.Provider>;
+  return <context.Provider value={contextValue}>{children}</context.Provider>;
 };

src/lib/client/hooks.tsx

@@ -1,5 +1,3 @@
-import type { ClientCalls, HostCalls, VsCodeApi } from '../types';
-
 /**
  * Deferred promise for handling async responses with timeout management
  */

src/lib/client/types.ts

@@ -1,22 +1,18 @@
 /* eslint-disable no-console */
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
+import type { VsCodeApi } from '../types';
 import { WebviewLogger } from '../host/WebviewLogger';
-import { WebviewContext } from './WebviewContext';
 import type { ILogger } from '../host/ILogger';
 
 /**
  * React hook to get a logger instance for use in webview components.
  * The logger automatically sends all log messages to the extension host
  * where they are written to the VS Code output channel.
  */
-export function useLogger(tag: string): ILogger {
-  const context = useContext(WebviewContext);
+export function useLogger(tag: string, vscode?: VsCodeApi): ILogger {
   return useMemo(
-    () =>
-      context?.vscode === undefined
-        ? createConsoleLogger(tag)
-        : new WebviewLogger(context.vscode, tag),
-    [context?.vscode, tag]
+    () => (vscode === undefined ? createConsoleLogger(tag) : new WebviewLogger(vscode, tag)),
+    [vscode, tag]
   );
 }
 

src/lib/client/useLogger.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { VsCodeApi } from '../types';
 import {
   ACT,
   type Patch,
@@ -8,43 +9,42 @@ import {
   type StateReducer,
   isFnKey,
 } from '../types/ipcReducer';
-import { useWebviewApi } from './WebviewContext';
 
 type PostAction<A extends object> = Pick<Action<A>, 'key' | 'params'>;
 
-function isMyPatchMessage<A extends object>(msg: any, id: WebviewKey): msg is Patch<A> {
+function isMyPatchMessage<A extends object>(message: unknown, id: WebviewKey): message is Patch<A> {
   return (
-    msg !== null &&
-    msg !== undefined &&
-    typeof msg === 'object' &&
-    'providerId' in msg &&
-    'type' in msg &&
-    'key' in msg &&
-    'patch' in msg &&
-    msg.type === PATCH &&
-    typeof msg.providerId === 'string' &&
-    msg.providerId === id
+    message !== null &&
+    message !== undefined &&
+    typeof message === 'object' &&
+    'providerId' in message &&
+    'type' in message &&
+    'key' in message &&
+    'patch' in message &&
+    message.type === PATCH &&
+    typeof message.providerId === 'string' &&
+    message.providerId === id
   );
 }
 
 const dangerousKeys = new Set(['__proto__', 'constructor', 'prototype']);
 
 export function useVscodeState<S, A extends object>(
+  vscode: VsCodeApi,
   providerId: WebviewKey,
   postReducer: StateReducer<S, A>,
   initialState: S | (() => S)
 ): readonly [S, A] {
   const [state, setState] = useState<S>(
     typeof initialState === 'function' ? (initialState as () => S)() : initialState
   );
-  const { vscode } = useWebviewApi();
   const validKeys = useMemo(
     () => new Set(Object.keys(postReducer).filter((k) => !dangerousKeys.has(k))),
     [postReducer]
   );
 
   useEffect(() => {
-    const handler = (event: MessageEvent) => {
+    const handler = (event: MessageEvent<unknown>) => {
       const { data } = event;
       if (isMyPatchMessage<A>(data, providerId)) {
         if (
@@ -83,6 +83,7 @@ export function useVscodeState<S, A extends object>(
   );
 
   const actor = new Proxy({} as A, {
+    // eslint-disable-next-line code-complete/enforce-meaningful-names
     get(_, prop) {
       if (typeof prop !== 'string' && typeof prop !== 'symbol') {
         throw new TypeError(`Invalid action type: ${String(prop)}`);
@@ -94,6 +95,7 @@ export function useVscodeState<S, A extends object>(
         throw new Error(`Unknown or invalid action: ${String(prop)}`);
       }
       return (...args: unknown[]) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const params = args as A[typeof prop] extends (...args: unknown[]) => any
           ? Parameters<A[typeof prop]>
           : never;

src/lib/client/useVscodeState.ts

@@ -0,0 +1,24 @@
+import { useContext, type Context } from 'react';
+import type { ClientCalls, CtxKey, WebviewContextValue } from '..';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const TypedContexts = new WeakMap<CtxKey<any>, Context<any>>();
+
+export const useWebviewApi = <T extends ClientCalls>(
+  contextKey: CtxKey<T>
+): WebviewContextValue<T> => {
+  // eslint-disable-next-line sonarjs/no-empty-collection
+  if (!TypedContexts.has(contextKey)) {
+    throw new Error('useWebviewApi must be used within WebviewProvider with matching key');
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-non-null-assertion, sonarjs/no-empty-collection
+  const context = useContext(TypedContexts.get(contextKey)!);
+  if (context === undefined) {
+    throw new Error('useWebviewApi must be used within WebviewProvider with matching key');
+  }
+  return context as WebviewContextValue<T>;
+};
+
+export function createCtxKey<T extends ClientCalls>(contextKey: string): CtxKey<T> {
+  return { id: Symbol(contextKey) } as CtxKey<T>;
+}

src/lib/client/useWebviewApi.ts

@@ -0,0 +1,21 @@
+import type { ComponentType, FC } from 'react';
+import { createCtxKey } from './useWebviewApi';
+import { WebviewProvider } from './WebviewProvider';
+
+/**
+ * Higher-order component to ensure WebviewProvider is available
+ */
+export function withWebviewApi<P extends object>(Component: ComponentType<P>): ComponentType<P> {
+  const WrappedComponent: FC<P> = (props: P) => {
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      <WebviewProvider viewType={Component.name} contextKey={createCtxKey(Component.name)}>
+        <Component {...props} />
+      </WebviewProvider>
+    );
+  };
+
+  WrappedComponent.displayName = `withWebviewApi(${Component.displayName ?? Component.name})`;
+
+  return WrappedComponent;
+}