fix: fix circularity on JSHandle interface (#9661)

docs/api/index.md

@@ -149,6 +149,7 @@ sidebar_label: API
 | [ElementFor](./puppeteer.elementfor.md)                                   |                                                                                                                                                         |
 | [ErrorCode](./puppeteer.errorcode.md)                                     |                                                                                                                                                         |
 | [EvaluateFunc](./puppeteer.evaluatefunc.md)                               |                                                                                                                                                         |
+| [EvaluateFuncWith](./puppeteer.evaluatefuncwith.md)                       |                                                                                                                                                         |
 | [EventType](./puppeteer.eventtype.md)                                     |                                                                                                                                                         |
 | [FlattenHandle](./puppeteer.flattenhandle.md)                             |                                                                                                                                                         |
 | [HandleFor](./puppeteer.handlefor.md)                                     |                                                                                                                                                         |

docs/api/puppeteer.elementhandle.__eval.md

@@ -15,9 +15,10 @@ class ElementHandle {
   $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [HandleFor<Array<NodeFor<Selector>>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[HandleFor<Array<NodeFor<Selector>>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

docs/api/puppeteer.elementhandle._eval.md

@@ -15,9 +15,10 @@ class ElementHandle {
   $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,

docs/api/puppeteer.evaluatefuncwith.md

@@ -0,0 +1,15 @@
+---
+sidebar_label: EvaluateFuncWith
+---
+
+# EvaluateFuncWith type
+
+#### Signature:
+
+```typescript
+export type EvaluateFuncWith<V, T extends unknown[]> = (
+  ...params: [V, ...InnerParams<T>]
+) => Awaitable<unknown>;
+```
+
+**References:** [InnerParams](./puppeteer.innerparams.md), [Awaitable](./puppeteer.awaitable.md)

docs/api/puppeteer.frame.__eval.md

@@ -15,9 +15,10 @@ class Frame {
   $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [Array<NodeFor<Selector>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

docs/api/puppeteer.frame._eval.md

@@ -15,9 +15,10 @@ class Frame {
   $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,

docs/api/puppeteer.jshandle.evaluate.md

@@ -12,9 +12,7 @@ Evaluates the given function with the current handle as its first argument.
 class JSHandle {
   evaluate<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<T, Params> = EvaluateFuncWith<T, Params>
-      [this, ...Params]
-    >
   >(
     pageFunction: Func | string,
     ...args: Params

docs/api/puppeteer.jshandle.evaluatehandle.md

@@ -12,9 +12,7 @@ Evaluates the given function with the current handle as its first argument.
 class JSHandle {
   evaluateHandle<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<T, Params> = EvaluateFuncWith<T, Params>
-      [this, ...Params]
-    >
   >(
     pageFunction: Func | string,
     ...args: Params

docs/api/puppeteer.page.__eval.md

@@ -13,9 +13,10 @@ class Page {
   $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [Array<NodeFor<Selector>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

docs/api/puppeteer.page._eval.md

@@ -13,9 +13,10 @@ class Page {
   $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,

packages/puppeteer-core/src/api/ElementHandle.ts

@@ -15,15 +15,20 @@
  */
 
 import {Protocol} from 'devtools-protocol';
+import {CDPSession} from '../common/Connection.js';
+import {ExecutionContext} from '../common/ExecutionContext.js';
 import {Frame} from '../common/Frame.js';
+import {MouseButton} from '../common/Input.js';
 import {WaitForSelectorOptions} from '../common/IsolatedWorld.js';
+import {
+  ElementFor,
+  EvaluateFuncWith,
+  HandleFor,
+  NodeFor,
+} from '../common/types.js';
+import {KeyInput} from '../common/USKeyboardLayout.js';
 import {JSHandle} from './JSHandle.js';
 import {ScreenshotOptions} from './Page.js';
-import {ElementFor, EvaluateFunc, HandleFor, NodeFor} from '../common/types.js';
-import {KeyInput} from '../common/USKeyboardLayout.js';
-import {MouseButton} from '../common/Input.js';
-import {ExecutionContext} from '../common/ExecutionContext.js';
-import {CDPSession} from '../common/Connection.js';
 
 /**
  * @public
@@ -234,21 +239,16 @@ export class ElementHandle<
   async $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,
     ...args: Params
   ): Promise<Awaited<ReturnType<Func>>>;
-  async $eval<
+  async $eval(): Promise<unknown> {
-    Selector extends string,
-    Params extends unknown[],
-    Func extends EvaluateFunc<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
-  >(): Promise<Awaited<ReturnType<Func>>> {
     throw new Error('Not implemented');
   }
 
@@ -288,21 +288,16 @@ export class ElementHandle<
   async $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [HandleFor<Array<NodeFor<Selector>>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[HandleFor<Array<NodeFor<Selector>>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,
     ...args: Params
   ): Promise<Awaited<ReturnType<Func>>>;
-  async $$eval<
+  async $$eval(): Promise<unknown> {
-    Selector extends string,
-    Params extends unknown[],
-    Func extends EvaluateFunc<
-      [HandleFor<Array<NodeFor<Selector>>>, ...Params]
-    > = EvaluateFunc<[HandleFor<Array<NodeFor<Selector>>>, ...Params]>
-  >(): Promise<Awaited<ReturnType<Func>>> {
     throw new Error('Not implemented');
   }
 

packages/puppeteer-core/src/api/JSHandle.ts

@@ -15,10 +15,10 @@
  */
 
 import Protocol from 'devtools-protocol';
-import {ElementHandle} from './ElementHandle.js';
-import {EvaluateFunc, HandleFor, HandleOr} from '../common/types.js';
-import {ExecutionContext} from '../common/ExecutionContext.js';
 import {CDPSession} from '../common/Connection.js';
+import {ExecutionContext} from '../common/ExecutionContext.js';
+import {EvaluateFuncWith, HandleFor, HandleOr} from '../common/types.js';
+import {ElementHandle} from './ElementHandle.js';
 
 declare const __JSHandleSymbol: unique symbol;
 
@@ -80,19 +80,12 @@ export class JSHandle<T = unknown> {
    */
   async evaluate<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<T, Params> = EvaluateFuncWith<T, Params>
-      [this, ...Params]
-    >
   >(
     pageFunction: Func | string,
     ...args: Params
   ): Promise<Awaited<ReturnType<Func>>>;
-  async evaluate<
+  async evaluate(): Promise<unknown> {
-    Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
-      [this, ...Params]
-    >
-  >(): Promise<Awaited<ReturnType<Func>>> {
     throw new Error('Not implemented');
   }
 
@@ -102,19 +95,12 @@ export class JSHandle<T = unknown> {
    */
   async evaluateHandle<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<T, Params> = EvaluateFuncWith<T, Params>
-      [this, ...Params]
-    >
   >(
     pageFunction: Func | string,
     ...args: Params
   ): Promise<HandleFor<Awaited<ReturnType<Func>>>>;
-  async evaluateHandle<
+  async evaluateHandle(): Promise<HandleFor<unknown>> {
-    Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
-      [this, ...Params]
-    >
-  >(): Promise<HandleFor<Awaited<ReturnType<Func>>>> {
     throw new Error('Not implemented');
   }
 

packages/puppeteer-core/src/api/Page.ts

@@ -21,7 +21,6 @@ import type {ConsoleMessage} from '../common/ConsoleMessage.js';
 import type {Coverage} from '../common/Coverage.js';
 import {Device} from '../common/Device.js';
 import type {Dialog} from '../common/Dialog.js';
-import type {ElementHandle} from './ElementHandle.js';
 import {EventEmitter, Handler} from '../common/EventEmitter.js';
 import type {FileChooser} from '../common/FileChooser.js';
 import type {
@@ -39,17 +38,23 @@ import type {
   Touchscreen,
 } from '../common/Input.js';
 import type {WaitForSelectorOptions} from '../common/IsolatedWorld.js';
-import type {JSHandle} from './JSHandle.js';
 import type {PuppeteerLifeCycleEvent} from '../common/LifecycleWatcher.js';
 import type {Credentials, NetworkConditions} from '../common/NetworkManager.js';
 import type {PDFOptions} from '../common/PDFOptions.js';
 import type {Viewport} from '../common/PuppeteerViewport.js';
 import type {Target} from '../common/Target.js';
 import type {Tracing} from '../common/Tracing.js';
-import type {EvaluateFunc, HandleFor, NodeFor} from '../common/types.js';
+import type {
+  EvaluateFunc,
+  EvaluateFuncWith,
+  HandleFor,
+  NodeFor,
+} from '../common/types.js';
 import type {WebWorker} from '../common/WebWorker.js';
 import type {Browser} from './Browser.js';
 import type {BrowserContext} from './BrowserContext.js';
+import type {ElementHandle} from './ElementHandle.js';
+import type {JSHandle} from './JSHandle.js';
 
 /**
  * @public
@@ -956,21 +961,16 @@ export class Page extends EventEmitter {
   async $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,
     ...args: Params
   ): Promise<Awaited<ReturnType<Func>>>;
-  async $eval<
+  async $eval(): Promise<unknown> {
-    Selector extends string,
-    Params extends unknown[],
-    Func extends EvaluateFunc<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
-  >(): Promise<Awaited<ReturnType<Func>>> {
     throw new Error('Not implemented');
   }
 
@@ -1039,21 +1039,16 @@ export class Page extends EventEmitter {
   async $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [Array<NodeFor<Selector>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,
     ...args: Params
   ): Promise<Awaited<ReturnType<Func>>>;
-  async $$eval<
+  async $$eval(): Promise<unknown> {
-    Selector extends string,
-    Params extends unknown[],
-    Func extends EvaluateFunc<
-      [Array<NodeFor<Selector>>, ...Params]
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
-  >(): Promise<Awaited<ReturnType<Func>>> {
     throw new Error('Not implemented');
   }
 

packages/puppeteer-core/src/common/ElementHandle.ts

@@ -15,17 +15,28 @@
  */
 
 import {Protocol} from 'devtools-protocol';
+import {
+  BoundingBox,
+  BoxModel,
+  ClickOptions,
+  ElementHandle,
+  Offset,
+  Point,
+  PressOptions,
+} from '../api/ElementHandle.js';
+import {JSHandle} from '../api/JSHandle.js';
+import {Page, ScreenshotOptions} from '../api/Page.js';
 import {assert} from '../util/assert.js';
+import {CDPSession} from './Connection.js';
 import {ExecutionContext} from './ExecutionContext.js';
 import {Frame} from './Frame.js';
 import {FrameManager} from './FrameManager.js';
 import {WaitForSelectorOptions} from './IsolatedWorld.js';
-import {JSHandle} from '../api/JSHandle.js';
+import {CDPPage} from './Page.js';
-import {Page, ScreenshotOptions} from '../api/Page.js';
 import {getQueryHandlerAndSelector} from './QueryHandler.js';
 import {
   ElementFor,
-  EvaluateFunc,
+  EvaluateFuncWith,
   HandleFor,
   HandleOr,
   NodeFor,
@@ -37,17 +48,6 @@ import {
   releaseObject,
   valueFromRemoteObject,
 } from './util.js';
-import {CDPPage} from './Page.js';
-import {
-  BoundingBox,
-  BoxModel,
-  ClickOptions,
-  ElementHandle,
-  Offset,
-  Point,
-  PressOptions,
-} from '../api/ElementHandle.js';
-import {CDPSession} from './Connection.js';
 
 const applyOffsetsToQuad = (
   quad: Point[],
@@ -105,29 +105,27 @@ export class CDPElementHandle<
 
   override async evaluate<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<ElementType, Params> = EvaluateFuncWith<
-      [this, ...Params]
+      ElementType,
+      Params
     >
   >(
-    pageFunction: string | Func,
+    pageFunction: Func | string,
     ...args: Params
-  ): // @ts-expect-error Circularity here is okay because we only need the return
+  ): Promise<Awaited<ReturnType<Func>>> {
-  // type which doesn't use `this`.
-  Promise<Awaited<ReturnType<Func>>> {
     return this.executionContext().evaluate(pageFunction, this, ...args);
   }
 
   override evaluateHandle<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<ElementType, Params> = EvaluateFuncWith<
-      [this, ...Params]
+      ElementType,
+      Params
     >
   >(
-    pageFunction: string | Func,
+    pageFunction: Func | string,
     ...args: Params
-  ): // @ts-expect-error Circularity here is okay because we only need the return
+  ): Promise<HandleFor<Awaited<ReturnType<Func>>>> {
-  // type which doesn't use `this`.
-  Promise<HandleFor<Awaited<ReturnType<Func>>>> {
     return this.executionContext().evaluateHandle(pageFunction, this, ...args);
   }
 
@@ -212,16 +210,15 @@ export class CDPElementHandle<
   override async $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [CDPElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[CDPElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,
     ...args: Params
-  ): // @ts-expect-error Circularity here is okay because we only need the return
+  ): Promise<Awaited<ReturnType<Func>>> {
-  // type which doesn't use `this`.
-  Promise<Awaited<ReturnType<Func>>> {
     const elementHandle = await this.$(selector);
     if (!elementHandle) {
       throw new Error(
@@ -236,9 +233,10 @@ export class CDPElementHandle<
   override async $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [HandleFor<Array<NodeFor<Selector>>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[HandleFor<Array<NodeFor<Selector>>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

packages/puppeteer-core/src/common/Frame.ts

@@ -15,10 +15,11 @@
  */
 
 import {Protocol} from 'devtools-protocol';
+import {ElementHandle} from '../api/ElementHandle.js';
+import {Page} from '../api/Page.js';
 import {assert} from '../util/assert.js';
 import {isErrorLike} from '../util/ErrorLike.js';
 import {CDPSession} from './Connection.js';
-import {ElementHandle} from '../api/ElementHandle.js';
 import {ExecutionContext} from './ExecutionContext.js';
 import {FrameManager} from './FrameManager.js';
 import {HTTPResponse} from './HTTPResponse.js';
@@ -29,12 +30,11 @@ import {
   WaitForSelectorOptions,
 } from './IsolatedWorld.js';
 import {MAIN_WORLD, PUPPETEER_WORLD} from './IsolatedWorlds.js';
-import {LifecycleWatcher, PuppeteerLifeCycleEvent} from './LifecycleWatcher.js';
-import {Page} from '../api/Page.js';
-import {getQueryHandlerAndSelector} from './QueryHandler.js';
-import {EvaluateFunc, HandleFor, NodeFor} from './types.js';
-import {importFS} from './util.js';
 import {LazyArg} from './LazyArg.js';
+import {LifecycleWatcher, PuppeteerLifeCycleEvent} from './LifecycleWatcher.js';
+import {getQueryHandlerAndSelector} from './QueryHandler.js';
+import {EvaluateFunc, EvaluateFuncWith, HandleFor, NodeFor} from './types.js';
+import {importFS} from './util.js';
 
 /**
  * @public
@@ -518,9 +518,10 @@ export class Frame {
   async $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,
@@ -552,9 +553,10 @@ export class Frame {
   async $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [Array<NodeFor<Selector>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

packages/puppeteer-core/src/common/IsolatedWorld.ts

@@ -15,6 +15,7 @@
  */
 
 import {Protocol} from 'devtools-protocol';
+import {JSHandle} from '../api/JSHandle.js';
 import {assert} from '../util/assert.js';
 import {createDeferredPromise} from '../util/DeferredPromise.js';
 import {isErrorLike} from '../util/ErrorLike.js';
@@ -24,10 +25,15 @@ import {Frame} from './Frame.js';
 import {FrameManager} from './FrameManager.js';
 import {MouseButton} from './Input.js';
 import {MAIN_WORLD, PUPPETEER_WORLD} from './IsolatedWorlds.js';
-import {JSHandle} from '../api/JSHandle.js';
 import {LifecycleWatcher, PuppeteerLifeCycleEvent} from './LifecycleWatcher.js';
 import {TimeoutSettings} from './TimeoutSettings.js';
-import {EvaluateFunc, HandleFor, InnerLazyParams, NodeFor} from './types.js';
+import {
+  EvaluateFunc,
+  EvaluateFuncWith,
+  HandleFor,
+  InnerLazyParams,
+  NodeFor,
+} from './types.js';
 import {createJSHandle, debugError, pageBindingInitString} from './util.js';
 import {TaskManager, WaitTask} from './WaitTask.js';
 
@@ -220,9 +226,10 @@ export class IsolatedWorld {
   async $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,
@@ -235,9 +242,10 @@ export class IsolatedWorld {
   async $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [Array<NodeFor<Selector>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

packages/puppeteer-core/src/common/JSHandle.ts

@@ -20,7 +20,7 @@ import {assert} from '../util/assert.js';
 import {CDPSession} from './Connection.js';
 import type {CDPElementHandle} from './ElementHandle.js';
 import {ExecutionContext} from './ExecutionContext.js';
-import {EvaluateFunc, HandleFor, HandleOr} from './types.js';
+import {EvaluateFuncWith, HandleFor, HandleOr} from './types.js';
 import {createJSHandle, releaseObject, valueFromRemoteObject} from './util.js';
 
 declare const __JSHandleSymbol: unique symbol;
@@ -64,15 +64,11 @@ export class CDPJSHandle<T> extends JSHandle<T> {
    */
   override async evaluate<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<T, Params> = EvaluateFuncWith<T, Params>
-      [this, ...Params]
-    >
   >(
     pageFunction: Func | string,
     ...args: Params
-  ): // @ts-expect-error Circularity here is okay because we only need the return
+  ): Promise<Awaited<ReturnType<Func>>> {
-  // type which doesn't use `this`.
-  Promise<Awaited<ReturnType<Func>>> {
     return await this.executionContext().evaluate(pageFunction, this, ...args);
   }
 
@@ -81,15 +77,11 @@ export class CDPJSHandle<T> extends JSHandle<T> {
    */
   override async evaluateHandle<
     Params extends unknown[],
-    Func extends EvaluateFunc<[this, ...Params]> = EvaluateFunc<
+    Func extends EvaluateFuncWith<T, Params> = EvaluateFuncWith<T, Params>
-      [this, ...Params]
-    >
   >(
     pageFunction: Func | string,
     ...args: Params
-  ): // @ts-expect-error Circularity here is okay because we only need the return
+  ): Promise<HandleFor<Awaited<ReturnType<Func>>>> {
-  // type which doesn't use `this`.
-  Promise<HandleFor<Awaited<ReturnType<Func>>>> {
     return await this.executionContext().evaluateHandle(
       pageFunction,
       this,

packages/puppeteer-core/src/common/Page.ts

@@ -72,7 +72,7 @@ import {TargetManagerEmittedEvents} from './TargetManager.js';
 import {TaskQueue} from './TaskQueue.js';
 import {TimeoutSettings} from './TimeoutSettings.js';
 import {Tracing} from './Tracing.js';
-import {EvaluateFunc, HandleFor, NodeFor} from './types.js';
+import {EvaluateFunc, EvaluateFuncWith, HandleFor, NodeFor} from './types.js';
 import {
   createJSHandle,
   debugError,
@@ -535,9 +535,10 @@ export class CDPPage extends Page {
   override async $eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<NodeFor<Selector>, Params> = EvaluateFuncWith<
-      [ElementHandle<NodeFor<Selector>>, ...Params]
+      NodeFor<Selector>,
-    > = EvaluateFunc<[ElementHandle<NodeFor<Selector>>, ...Params]>
+      Params
+    >
   >(
     selector: Selector,
     pageFunction: Func | string,
@@ -549,9 +550,10 @@ export class CDPPage extends Page {
   override async $$eval<
     Selector extends string,
     Params extends unknown[],
-    Func extends EvaluateFunc<
+    Func extends EvaluateFuncWith<
-      [Array<NodeFor<Selector>>, ...Params]
+      Array<NodeFor<Selector>>,
-    > = EvaluateFunc<[Array<NodeFor<Selector>>, ...Params]>
+      Params
+    > = EvaluateFuncWith<Array<NodeFor<Selector>>, Params>
   >(
     selector: Selector,
     pageFunction: Func | string,

packages/puppeteer-core/src/common/types.ts

@@ -75,6 +75,13 @@ export type EvaluateFunc<T extends unknown[]> = (
   ...params: InnerParams<T>
 ) => Awaitable<unknown>;
 
+/**
+ * @public
+ */
+export type EvaluateFuncWith<V, T extends unknown[]> = (
+  ...params: [V, ...InnerParams<T>]
+) => Awaitable<unknown>;
+
 /**
  * @public
  */