refactor(thread): refactor hasCapability call with a better readable way

clients/tabby-chat-panel/src/index.ts

@@ -383,7 +383,7 @@ export function createClient(target: HTMLIFrameElement, api: ClientApiMethods):
   })
 }
 
-export function createServer(api: ServerApi): ClientApi {
+export function createServer(api: ServerApi): Promise<ClientApi> {
   return createThreadFromInsideIframe({
     expose: {
       init: api.init,

clients/tabby-chat-panel/src/react.ts

@@ -26,7 +26,7 @@ function useServer(api: ServerApi) {
     const isInIframe = window.self !== window.top
     if (isInIframe && !isCreated) {
       isCreated = true
-      setServer(createServer(api))
+      createServer(api).then(setServer)
     }
   }, [])
 

clients/tabby-threads/source/targets/iframe/nested.ts

@@ -15,7 +15,7 @@ import { CHECK_MESSAGE, RESPONSE_MESSAGE } from "./shared";
  * const thread = createThreadFromInsideIframe();
  * await thread.sendMessage('Hello world!');
  */
-export function createThreadFromInsideIframe<
+export async function createThreadFromInsideIframe<
   Self = Record<string, never>,
   Target = Record<string, never>,
 >({
@@ -74,7 +74,7 @@ export function createThreadFromInsideIframe<
     );
   }
 
-  return createThread(
+  const thread = createThread(
     {
       send(message, transfer) {
         return parent.postMessage(message, targetOrigin, transfer);
@@ -92,4 +92,6 @@ export function createThreadFromInsideIframe<
     },
     options
   );
+  await thread.requestMethods();
+  return thread;
 }

clients/tabby-threads/source/targets/target.ts

@@ -4,16 +4,13 @@ import type {
   ThreadEncoder,
   ThreadEncoderApi,
   AnyFunction,
-} from "../types.ts";
-
-import {
-  RELEASE_METHOD,
-  RETAINED_BY,
-  RETAIN_METHOD,
-  StackFrame,
-  isMemoryManageable,
-} from "../memory";
+} from "../types";
+
+import { RELEASE_METHOD, RETAINED_BY, RETAIN_METHOD } from "../constants";
+
+import { StackFrame, isMemoryManageable } from "../memory";
 import { createBasicEncoder } from "../encoding/basic";
+import { RESPONSE_MESSAGE } from "./iframe/shared";
 
 export type { ThreadTarget };
 
@@ -69,6 +66,7 @@ const RELEASE = 3;
 const FUNCTION_APPLY = 5;
 const FUNCTION_RESULT = 6;
 const CHECK_CAPABILITY = 7;
+const EXPOSE_LIST = 8;
 
 interface MessageMap {
   [CALL]: [string, string | number, any];
@@ -78,6 +76,7 @@ interface MessageMap {
   [FUNCTION_APPLY]: [string, string, any];
   [FUNCTION_RESULT]: [string, Error?, any?];
   [CHECK_CAPABILITY]: [string, string];
+  [EXPOSE_LIST]: [string, string[]];
 }
 
 type MessageData = {
@@ -107,6 +106,9 @@ export function createThread<
   const idsToFunction = new Map<string, AnyFunction>();
   const idsToProxy = new Map<string, AnyFunction>();
 
+  // Cache for the other side's methods
+  let theirMethodsCache: string[] | null = null;
+
   if (expose) {
     for (const key of Object.keys(expose)) {
       const value = expose[key as keyof typeof expose];
@@ -121,7 +123,17 @@ export function createThread<
     ) => void
   >();
 
-  const call = createCallable<Thread<Target>>(handlerForCall, callable);
+  // Create proxy for method calls
+  const call = createCallable<Thread<Target>>(
+    handlerForCall,
+    callable,
+    {
+      requestMethods,
+    },
+    {
+      isTerminated: () => terminated,
+    }
+  );
 
   const encoderApi: ThreadEncoderApi = {
     functions: {
@@ -207,6 +219,7 @@ export function createThread<
     functionsToId.clear();
     idsToFunction.clear();
     idsToProxy.clear();
+    theirMethodsCache = null; // Clear the cache when connection is terminated
   };
 
   signal?.addEventListener(
@@ -231,7 +244,38 @@ export function createThread<
     target.send([type, args], transferables);
   }
 
+  // Create a function to request methods from the other side
+  async function requestMethods() {
+    // If we have cached methods and connection is still active, return them
+    if (theirMethodsCache !== null && !terminated) {
+      return theirMethodsCache;
+    }
+
+    const id = uuid();
+
+    // Create a promise that will resolve with the other side's methods
+    const methodsPromise = new Promise<string[]>((resolve) => {
+      callIdsToResolver.set(id, (_, __, value) => {
+        const theirMethods = encoder.decode(value, encoderApi) as string[];
+        // Cache the methods for future use
+        theirMethodsCache = theirMethods;
+        resolve(theirMethods);
+      });
+    });
+
+    // Send EXPOSE_LIST with empty methods array to request other side's methods
+    send(EXPOSE_LIST, [id, []]);
+
+    return methodsPromise;
+  }
+
   async function listener(rawData: unknown) {
+    // this method receives messages from the other side means the other side is ready
+    if (rawData === RESPONSE_MESSAGE) {
+      requestMethods().catch(() => {});
+      return;
+    }
+
     const isThreadMessageData =
       Array.isArray(rawData) &&
       typeof rawData[0] === "number" &&
@@ -333,6 +377,23 @@ export function createThread<
         send(RESULT, [id, undefined, encoder.encode(hasMethod, encoderApi)[0]]);
         break;
       }
+      case EXPOSE_LIST: {
+        const [id, theirMethods] = data[1];
+
+        // Store their methods for future use
+        const theirMethodsList = theirMethods as string[];
+        // Save their methods in cache
+        theirMethodsCache = theirMethodsList;
+        // Send back our methods as RESULT
+        const ourMethods = Array.from(activeApi.keys()).map(String);
+
+        send(RESULT, [
+          id,
+          undefined,
+          encoder.encode(ourMethods, encoderApi)[0],
+        ]);
+        break;
+      }
     }
   }
 
@@ -345,7 +406,7 @@ export function createThread<
 
         if (typeof property !== "string" && typeof property !== "number") {
           throw new Error(
-            `Can’t call a symbol method on a thread: ${property.toString()}`
+            `Can't call a symbol method on a thread: ${property.toString()}`
           );
         }
 
@@ -410,6 +471,89 @@ export function createThread<
       callIdsToResolver.delete(callId);
     }
   }
+
+  function createCallable<T>(
+    handlerForCall: (
+      property: string | number | symbol
+    ) => AnyFunction | undefined,
+    callable?: (keyof T)[],
+    methods?: {
+      requestMethods: () => Promise<string[]>;
+    },
+    state?: {
+      isTerminated: () => boolean;
+    }
+  ): T {
+    let call: any;
+
+    if (callable == null) {
+      if (typeof Proxy !== "function") {
+        throw new Error(
+          `You must pass an array of callable methods in environments without Proxies.`
+        );
+      }
+
+      const cache = new Map<
+        string | number | symbol,
+        AnyFunction | undefined
+      >();
+
+      call = new Proxy(
+        {},
+        {
+          get(_target, property) {
+            switch (property) {
+              // FIXME: remove this, now is hack way
+              case "then":
+                return undefined;
+              case "requestMethods":
+                return methods?.requestMethods;
+              case "hasCapability":
+                return handlerForCall(property);
+              default:
+                if (!theirMethodsCache?.includes(String(property))) {
+                  return undefined;
+                }
+                if (cache.has(property)) {
+                  return cache.get(property);
+                }
+
+                const handler = handlerForCall(property);
+                cache.set(property, handler);
+                return handler;
+            }
+          },
+          has(_target, property) {
+            if (property === "then" || property === "requestMethods") {
+              return true;
+            }
+            if (!state) {
+              return false;
+            }
+            const cache = theirMethodsCache;
+            console.log("cache for has", cache);
+            if (cache !== null && !state.isTerminated()) {
+              return cache.includes(String(property));
+            }
+            return false;
+          },
+        }
+      );
+    } else {
+      call = {};
+
+      for (const method of callable) {
+        Object.defineProperty(call, method, {
+          value: handlerForCall(method),
+          writable: false,
+          configurable: true,
+          enumerable: true,
+        });
+      }
+    }
+
+    return call;
+  }
 }
 
 class ThreadTerminatedError extends Error {
@@ -425,50 +569,3 @@ function defaultUuid() {
 function uuidSegment() {
   return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16);
 }
-
-function createCallable<T>(
-  handlerForCall: (
-    property: string | number | symbol
-  ) => AnyFunction | undefined,
-  callable?: (keyof T)[]
-): T {
-  let call: any;
-
-  if (callable == null) {
-    if (typeof Proxy !== "function") {
-      throw new Error(
-        `You must pass an array of callable methods in environments without Proxies.`
-      );
-    }
-
-    const cache = new Map<string | number | symbol, AnyFunction | undefined>();
-
-    call = new Proxy(
-      {},
-      {
-        get(_target, property) {
-          if (cache.has(property)) {
-            return cache.get(property);
-          }
-
-          const handler = handlerForCall(property);
-          cache.set(property, handler);
-          return handler;
-        },
-      }
-    );
-  } else {
-    call = {};
-
-    for (const method of callable) {
-      Object.defineProperty(call, method, {
-        value: handlerForCall(method),
-        writable: false,
-        configurable: true,
-        enumerable: true,
-      });
-    }
-  }
-
-  return call;
-}

clients/tabby-threads/source/types.ts

@@ -3,7 +3,7 @@ import type {
   RETAIN_METHOD,
   ENCODE_METHOD,
   RETAINED_BY,
-} from './constants.ts';
+} from "./constants.ts";
 
 /**
  * A thread represents a target JavaScript environment that exposes a set
@@ -18,6 +18,14 @@ export type Thread<Target> = {
       ? Target[K]
       : never
     : never;
+} & {
+  /**
+   * Request methods from the other side and wait for response.
+   * Returns a promise that resolves with the list of available methods.
+   * This is useful when you want to get the methods list from the other side
+   * without sending your own methods.
+   */
+  requestMethods(): Promise<string[]>;
 };
 
 /**
@@ -82,7 +90,7 @@ export interface ThreadEncoder {
   decode(
     value: unknown,
     api: ThreadEncoderApi,
-    retainedBy?: Iterable<MemoryRetainer>,
+    retainedBy?: Iterable<MemoryRetainer>
   ): unknown;
 }
 
@@ -112,7 +120,7 @@ export interface ThreadEncoderApi {
  * An object that provides a custom process to encode its value.
  */
 export interface ThreadEncodable {
-  [ENCODE_METHOD](api: {encode(value: any): unknown}): any;
+  [ENCODE_METHOD](api: { encode(value: any): unknown }): any;
 }
 
 export type AnyFunction = Function;