fix: ObservableLog no longer extends Function

docs/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Changed
 
+- fix: ObservableLog no longer extends Function and class instance can no longer be called. Fixes an issue when running in a browser extension context.
 - chore: updates dfinity/conventional-pr-title-action to v3.2.0
 
 ## [1.3.0] - 2024-05-01

packages/agent/src/agent/http/index.ts

@@ -409,7 +409,10 @@ export class HttpAgent implements Agent {
 
     const body = cbor.encode(transformedRequest.body);
 
-    this.log(`fetching "/api/v2/canister/${ecid.toText()}/call" with request:`, transformedRequest);
+    this.log.log(
+      `fetching "/api/v2/canister/${ecid.toText()}/call" with request:`,
+      transformedRequest,
+    );
 
     // Run both in parallel. The fetch is quite expensive, so we have plenty of time to
     // calculate the requestId locally.
@@ -455,7 +458,7 @@ export class HttpAgent implements Agent {
     const { ecid, transformedRequest, body, requestId, backoff, tries } = args;
 
     const delay = tries === 0 ? 0 : backoff.next();
-    this.log(`fetching "/api/v2/canister/${ecid.toString()}/query" with tries:`, {
+    this.log.log(`fetching "/api/v2/canister/${ecid.toString()}/query" with tries:`, {
       tries,
       backoff,
       delay,
@@ -476,7 +479,7 @@ export class HttpAgent implements Agent {
     let response: ApiQueryResponse;
     // Make the request and retry if it throws an error
     try {
-      this.log(
+      this.log.log(
         `fetching "/api/v2/canister/${ecid.toString()}/query" with request:`,
         transformedRequest,
       );
@@ -541,7 +544,7 @@ export class HttpAgent implements Agent {
     // Convert the timestamp to milliseconds
     const timeStampInMs = Number(BigInt(timestamp) / BigInt(1_000_000));
 
-    this.log('watermark and timestamp', {
+    this.log.log('watermark and timestamp', {
       waterMark: this.waterMark,
       timestamp: timeStampInMs,
     });
@@ -635,8 +638,8 @@ export class HttpAgent implements Agent {
       ? Principal.from(fields.effectiveCanisterId)
       : Principal.from(canisterId);
 
-    this.log(`ecid ${ecid.toString()}`);
-    this.log(`canisterId ${canisterId.toString()}`);
+    this.log.log(`ecid ${ecid.toString()}`);
+    this.log.log(`canisterId ${canisterId.toString()}`);
     const makeQuery = async () => {
       const id = await (identity !== undefined ? await identity : await this._identity);
       if (!id) {
@@ -706,7 +709,7 @@ export class HttpAgent implements Agent {
     // Make query and fetch subnet keys in parallel
     const [query, subnetStatus] = await Promise.all([makeQuery(), getSubnetStatus()]);
 
-    this.log('Query response:', query);
+    this.log.log('Query response:', query);
     // Skip verification if the user has disabled it
     if (!this.#verifyQuerySignatures) {
       return query;
@@ -852,7 +855,7 @@ export class HttpAgent implements Agent {
     const transformedRequest = request ?? (await this.createReadStateRequest(fields, identity));
     const body = cbor.encode(transformedRequest.body);
 
-    this.log(
+    this.log.log(
       `fetching "/api/v2/canister/${canister}/read_state" with request:`,
       transformedRequest,
     );
@@ -882,10 +885,10 @@ export class HttpAgent implements Agent {
     }
     const decodedResponse: ReadStateResponse = cbor.decode(await response.arrayBuffer());
 
-    this.log('Read state response:', decodedResponse);
+    this.log.log('Read state response:', decodedResponse);
     const parsedTime = await this.parseTimeFromResponse(decodedResponse);
     if (parsedTime > 0) {
-      this.log('Read state response time:', parsedTime);
+      this.log.log('Read state response time:', parsedTime);
       this.#waterMark = parsedTime;
     }
 
@@ -910,8 +913,8 @@ export class HttpAgent implements Agent {
         throw new Error('Time was not found in the response or was not in its expected format.');
       }
       const date = decodeTime(bufFromBufLike(timeLookup));
-      this.log('Time from response:', date);
-      this.log('Time from response in milliseconds:', Number(date));
+      this.log.log('Time from response:', date);
+      this.log.log('Time from response in milliseconds:', Number(date));
       return Number(date);
     } else {
       this.log.warn('No certificate found in response');
@@ -928,7 +931,7 @@ export class HttpAgent implements Agent {
     const callTime = Date.now();
     try {
       if (!canisterId) {
-        this.log(
+        this.log.log(
           'Syncing time with the IC. No canisterId provided, so falling back to ryjl3-tyaaa-aaaaa-aaaba-cai',
         );
       }
@@ -955,7 +958,7 @@ export class HttpAgent implements Agent {
         }
       : {};
 
-    this.log(`fetching "/api/v2/status"`);
+    this.log.log(`fetching "/api/v2/status"`);
     const backoff = this.#backoffStrategy();
     const response = await this.#requestAndRetry({
       backoff,

packages/agent/src/observable.test.ts

@@ -10,9 +10,6 @@ describe('Observable', () => {
     observable.notify(42);
     expect(observer1).toHaveBeenCalledWith(42);
     expect(observer2).toHaveBeenCalledWith(42);
-    observable(24);
-    expect(observer1).toHaveBeenCalledWith(24);
-    expect(observer2).toHaveBeenCalledWith(24);
   });
 
   it('should notify only subscribed observers', () => {

packages/agent/src/observable.ts

@@ -2,15 +2,11 @@ import { AgentError } from './errors';
 
 export type ObserveFunction<T> = (data: T, ...rest: unknown[]) => void;
 
-export class Observable<T> extends Function {
+export class Observable<T> {
   observers: ObserveFunction<T>[];
 
   constructor() {
-    super();
     this.observers = [];
-    return new Proxy(this, {
-      apply: (target, _, args) => target.#call(args[0], ...args.slice(1)),
-    });
   }
 
   #call(message: T, ...rest: unknown[]) {
@@ -44,9 +40,6 @@ export type AgentLog =
 export class ObservableLog extends Observable<AgentLog> {
   constructor() {
     super();
-    return new Proxy(this, {
-      apply: (target, _, args) => target.#call(args[0], ...args.slice(1)),
-    });
   }
   log(message: string, ...rest: unknown[]) {
     this.notify({ message, level: 'info' }, ...rest);