chore: use deferred promises in web worker (#8824)

docs/api/puppeteer.webworker.executioncontext.md

@@ -4,7 +4,9 @@ sidebar_label: WebWorker.executionContext
 
 # WebWorker.executionContext() method
 
-Returns the ExecutionContext the WebWorker runs in
+> Warning: This API is now obsolete.
+>
+> Do not use directly.
 
 **Signature:**
 

docs/api/puppeteer.webworker.md

@@ -42,5 +42,5 @@ for (const worker of page.workers()) {
 | ----------------------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [evaluate(pageFunction, args)](./puppeteer.webworker.evaluate.md)             |           | If the function passed to the <code>worker.evaluate</code> returns a Promise, then <code>worker.evaluate</code> would wait for the promise to resolve and return its value. If the function passed to the <code>worker.evaluate</code> returns a non-serializable value, then <code>worker.evaluate</code> resolves to <code>undefined</code>. DevTools Protocol also supports transferring some additional values that are not serializable by <code>JSON</code>: <code>-0</code>, <code>NaN</code>, <code>Infinity</code>, <code>-Infinity</code>, and bigint literals. Shortcut for <code>await worker.executionContext()).evaluate(pageFunction, ...args)</code>. |
 | [evaluateHandle(pageFunction, args)](./puppeteer.webworker.evaluatehandle.md) |           | The only difference between <code>worker.evaluate</code> and <code>worker.evaluateHandle</code> is that <code>worker.evaluateHandle</code> returns in-page object (JSHandle). If the function passed to the <code>worker.evaluateHandle</code> returns a <code>Promise</code>, then <code>worker.evaluateHandle</code> would wait for the promise to resolve and return its value. Shortcut for <code>await worker.executionContext()).evaluateHandle(pageFunction, ...args)</code>                                                                                                                                                                                   |
-| [executionContext()](./puppeteer.webworker.executioncontext.md)               |           | Returns the ExecutionContext the WebWorker runs in                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| [executionContext()](./puppeteer.webworker.executioncontext.md)               |           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | [url()](./puppeteer.webworker.url.md)                                         |           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

src/common/WebWorker.ts

@@ -21,6 +21,7 @@ import {EventEmitter} from './EventEmitter.js';
 import {ExecutionContext} from './ExecutionContext.js';
 import {JSHandle} from './JSHandle.js';
 import {debugError} from './util.js';
+import {createDeferredPromise} from '../util/DeferredPromise.js';
 
 /**
  * @internal
@@ -38,8 +39,6 @@ export type ExceptionThrownCallback = (
   details: Protocol.Runtime.ExceptionDetails
 ) => void;
 
-type JSHandleFactory = (obj: Protocol.Runtime.RemoteObject) => JSHandle;
-
 /**
  * This class represents a
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API | WebWorker}.
@@ -67,10 +66,10 @@ type JSHandleFactory = (obj: Protocol.Runtime.RemoteObject) => JSHandle;
  * @public
  */
 export class WebWorker extends EventEmitter {
+  #executionContext = createDeferredPromise<ExecutionContext>();
+
   #client: CDPSession;
   #url: string;
-  #executionContextPromise: Promise<ExecutionContext>;
-  #executionContextCallback!: (value: ExecutionContext) => void;
 
   /**
    * @internal
@@ -84,32 +83,36 @@ export class WebWorker extends EventEmitter {
     super();
     this.#client = client;
     this.#url = url;
-    this.#executionContextPromise = new Promise<ExecutionContext>(x => {
-      return (this.#executionContextCallback = x);
-    });
 
-    let jsHandleFactory: JSHandleFactory;
     this.#client.once('Runtime.executionContextCreated', async event => {
-      // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+      const context = new ExecutionContext(client, event.context);
-      jsHandleFactory = remoteObject => {
+      this.#executionContext.resolve(context);
-        return new JSHandle(executionContext, client, remoteObject);
-      };
-      const executionContext = new ExecutionContext(client, event.context);
-      this.#executionContextCallback(executionContext);
     });
-
+    this.#client.on('Runtime.consoleAPICalled', async event => {
-    // This might fail if the target is closed before we receive all execution contexts.
+      const context = await this.#executionContext;
-    this.#client.send('Runtime.enable').catch(debugError);
-    this.#client.on('Runtime.consoleAPICalled', event => {
       return consoleAPICalled(
         event.type,
-        event.args.map(jsHandleFactory),
+        event.args.map((object: Protocol.Runtime.RemoteObject) => {
+          return new JSHandle(context, this.#client, object);
+        }),
         event.stackTrace
       );
     });
     this.#client.on('Runtime.exceptionThrown', exception => {
       return exceptionThrown(exception.exceptionDetails);
     });
+
+    // This might fail if the target is closed before we receive all execution contexts.
+    this.#client.send('Runtime.enable').catch(debugError);
+  }
+
+  /**
+   * @deprecated Do not use directly.
+   *
+   * @returns The ExecutionContext the web worker runs in.
+   */
+  async executionContext(): Promise<ExecutionContext> {
+    return this.#executionContext;
   }
 
   /**
@@ -119,14 +122,6 @@ export class WebWorker extends EventEmitter {
     return this.#url;
   }
 
-  /**
-   * Returns the ExecutionContext the WebWorker runs in
-   * @returns The ExecutionContext the web worker runs in.
-   */
-  async executionContext(): Promise<ExecutionContext> {
-    return this.#executionContextPromise;
-  }
-
   /**
    * If the function passed to the `worker.evaluate` returns a Promise, then
    * `worker.evaluate` would wait for the promise to resolve and return its
@@ -148,10 +143,8 @@ export class WebWorker extends EventEmitter {
     pageFunction: Func | string,
     ...args: Params
   ): Promise<Awaited<ReturnType<Func>>> {
-    return (await this.#executionContextPromise).evaluate(
+    const context = await this.#executionContext;
-      pageFunction,
+    return context.evaluate(pageFunction, ...args);
-      ...args
-    );
   }
 
   /**
@@ -173,9 +166,7 @@ export class WebWorker extends EventEmitter {
     pageFunction: Func | string,
     ...args: Params
   ): Promise<HandleFor<Awaited<ReturnType<Func>>>> {
-    return (await this.#executionContextPromise).evaluateHandle(
+    const context = await this.#executionContext;
-      pageFunction,
+    return context.evaluateHandle(pageFunction, ...args);
-      ...args
-    );
   }
 }