chore: upgrade and pin prettier dependencies (#7232)

We're seeing odd failures with Prettier on some CI branches; my hunch is that they are installing different versions of the package and therefore getting formatting conflicts. This PR updates them all and pins them to specific versions - something we should probably consider generally, or remove our `package-lock.json` from the gitignore.

package.json

@@ -88,10 +88,10 @@
     "commonmark": "^0.28.1",
     "cross-env": "^7.0.2",
     "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-mocha": "^8.0.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-unicorn": "^22.0.0",
     "esprima": "^4.0.0",
     "expect": "^25.2.7",
@@ -103,7 +103,7 @@
     "ncp": "^2.0.0",
     "pixelmatch": "^4.0.2",
     "pngjs": "^5.0.0",
-    "prettier": "^2.1.2",
+    "prettier": "2.3.0",
     "sinon": "^9.0.2",
     "source-map-support": "^0.5.19",
     "standard-version": "^9.0.0",

src/common/AriaQueryHandler.ts

@@ -52,7 +52,8 @@ function parseAriaSelector(selector: string): ariaQueryOption {
   const normalize = (value: string): string => value.replace(/ +/g, ' ').trim();
   const knownAttributes = new Set(['name', 'role']);
   const queryOptions: ariaQueryOption = {};
-  const attributeRegexp = /\[\s*(?<attribute>\w+)\s*=\s*"(?<value>\\.|[^"\\]*)"\s*\]/g;
+  const attributeRegexp =
+    /\[\s*(?<attribute>\w+)\s*=\s*"(?<value>\\.|[^"\\]*)"\s*\]/g;
   const defaultName = selector.replace(
     attributeRegexp,
     (_, attribute: string, value: string) => {

src/common/Browser.ts

@@ -722,9 +722,8 @@ export class BrowserContext extends EventEmitter {
     permissions: Permission[]
   ): Promise<void> {
     const protocolPermissions = permissions.map((permission) => {
-      const protocolPermission = WEB_PERMISSION_TO_PROTOCOL_PERMISSION.get(
+      const protocolPermission =
-        permission
+        WEB_PERMISSION_TO_PROTOCOL_PERMISSION.get(permission);
-      );
       if (!protocolPermission)
         throw new Error('Unknown permission: ' + permission);
       return protocolPermission;

src/common/BrowserConnector.ts

@@ -89,16 +89,14 @@ export const connectToBrowser = async (
     connection = new Connection('', transport, slowMo);
   } else if (browserWSEndpoint) {
     const WebSocketClass = await getWebSocketTransportClass();
-    const connectionTransport: ConnectionTransport = await WebSocketClass.create(
+    const connectionTransport: ConnectionTransport =
-      browserWSEndpoint
+      await WebSocketClass.create(browserWSEndpoint);
-    );
     connection = new Connection(browserWSEndpoint, connectionTransport, slowMo);
   } else if (browserURL) {
     const connectionURL = await getWSEndpoint(browserURL);
     const WebSocketClass = await getWebSocketTransportClass();
-    const connectionTransport: ConnectionTransport = await WebSocketClass.create(
+    const connectionTransport: ConnectionTransport =
-      connectionURL
+      await WebSocketClass.create(connectionURL);
-    );
     connection = new Connection(connectionURL, connectionTransport, slowMo);
   }
 

src/common/Coverage.ts

@@ -192,10 +192,8 @@ export class JSCoverage {
     } = {}
   ): Promise<void> {
     assert(!this._enabled, 'JSCoverage is already enabled');
-    const {
+    const { resetOnNavigation = true, reportAnonymousScripts = false } =
-      resetOnNavigation = true,
+      options;
-      reportAnonymousScripts = false,
-    } = options;
     this._resetOnNavigation = resetOnNavigation;
     this._reportAnonymousScripts = reportAnonymousScripts;
     this._enabled = true;

src/common/DOMWorld.ts

@@ -484,9 +484,8 @@ export class DOMWorld {
     selector: string,
     options: WaitForSelectorOptions
   ): Promise<ElementHandle | null> {
-    const { updatedSelector, queryHandler } = getQueryHandlerAndSelector(
+    const { updatedSelector, queryHandler } =
-      selector
+      getQueryHandlerAndSelector(selector);
-    );
     return queryHandler.waitFor(this, updatedSelector, options);
   }
 
@@ -687,10 +686,8 @@ export class DOMWorld {
     options: { polling?: string | number; timeout?: number } = {},
     ...args: SerializableOrJSHandle[]
   ): Promise<JSHandle> {
-    const {
+    const { polling = 'raf', timeout = this._timeoutSettings.timeout() } =
-      polling = 'raf',
+      options;
-      timeout = this._timeoutSettings.timeout(),
-    } = options;
     const waitTaskOptions: WaitTaskOptions = {
       domWorld: this,
       predicateBody: pageFunction,

src/common/EmulationManager.ts

@@ -31,9 +31,10 @@ export class EmulationManager {
     const width = viewport.width;
     const height = viewport.height;
     const deviceScaleFactor = viewport.deviceScaleFactor || 1;
-    const screenOrientation: Protocol.Emulation.ScreenOrientation = viewport.isLandscape
+    const screenOrientation: Protocol.Emulation.ScreenOrientation =
-      ? { angle: 90, type: 'landscapePrimary' }
+      viewport.isLandscape
-      : { angle: 0, type: 'portraitPrimary' };
+        ? { angle: 90, type: 'landscapePrimary' }
+        : { angle: 0, type: 'portraitPrimary' };
     const hasTouch = viewport.hasTouch || false;
 
     await Promise.all([

src/common/ExecutionContext.ts

@@ -267,10 +267,8 @@ export class ExecutionContext {
         error.message += ' Are you passing a nested JSHandle?';
       throw error;
     }
-    const {
+    const { exceptionDetails, result: remoteObject } =
-      exceptionDetails,
+      await callFunctionOnPromise.catch(rewriteError);
-      result: remoteObject,
-    } = await callFunctionOnPromise.catch(rewriteError);
     if (exceptionDetails)
       throw new Error(
         'Evaluation failed: ' + helper.getExceptionMessage(exceptionDetails)

src/common/JSHandle.ts

@@ -776,9 +776,8 @@ export class ElementHandle<
   async $<T extends Element = Element>(
     selector: string
   ): Promise<ElementHandle<T> | null> {
-    const { updatedSelector, queryHandler } = getQueryHandlerAndSelector(
+    const { updatedSelector, queryHandler } =
-      selector
+      getQueryHandlerAndSelector(selector);
-    );
     return queryHandler.queryOne(this, updatedSelector);
   }
 
@@ -789,9 +788,8 @@ export class ElementHandle<
   async $$<T extends Element = Element>(
     selector: string
   ): Promise<Array<ElementHandle<T>>> {
-    const { updatedSelector, queryHandler } = getQueryHandlerAndSelector(
+    const { updatedSelector, queryHandler } =
-      selector
+      getQueryHandlerAndSelector(selector);
-    );
     return queryHandler.queryAll(this, updatedSelector);
   }
 
@@ -873,9 +871,8 @@ export class ElementHandle<
     ) => ReturnType | Promise<ReturnType>,
     ...args: SerializableOrJSHandle[]
   ): Promise<WrapElementHandle<ReturnType>> {
-    const { updatedSelector, queryHandler } = getQueryHandlerAndSelector(
+    const { updatedSelector, queryHandler } =
-      selector
+      getQueryHandlerAndSelector(selector);
-    );
     const arrayHandle = await queryHandler.queryAllArray(this, updatedSelector);
     const result = await arrayHandle.evaluate<
       (

src/common/NetworkManager.ts

@@ -278,9 +278,8 @@ export class NetworkManager extends EventEmitter {
       !event.request.url.startsWith('data:')
     ) {
       const requestId = event.requestId;
-      const requestPausedEvent = this._requestIdToRequestPausedEvent.get(
+      const requestPausedEvent =
-        requestId
+        this._requestIdToRequestPausedEvent.get(requestId);
-      );
 
       this._requestIdToRequestWillBeSentEvent.set(requestId, event);
 
@@ -338,9 +337,8 @@ export class NetworkManager extends EventEmitter {
       return;
     }
 
-    let requestWillBeSentEvent = this._requestIdToRequestWillBeSentEvent.get(
+    let requestWillBeSentEvent =
-      requestId
+      this._requestIdToRequestWillBeSentEvent.get(requestId);
-    );
 
     // redirect requests have the same `requestId`,
     if (

src/common/Page.ts

@@ -1827,11 +1827,15 @@ export class Page extends EventEmitter {
       clip = { x: 0, y: 0, width, height, scale: 1 };
 
       if (!captureBeyondViewport) {
-        const { isMobile = false, deviceScaleFactor = 1, isLandscape = false } =
+        const {
-          this._viewport || {};
+          isMobile = false,
-        const screenOrientation: Protocol.Emulation.ScreenOrientation = isLandscape
+          deviceScaleFactor = 1,
-          ? { angle: 90, type: 'landscapePrimary' }
+          isLandscape = false,
-          : { angle: 0, type: 'portraitPrimary' };
+        } = this._viewport || {};
+        const screenOrientation: Protocol.Emulation.ScreenOrientation =
+          isLandscape
+            ? { angle: 90, type: 'landscapePrimary' }
+            : { angle: 0, type: 'portraitPrimary' };
         await this._client.send('Emulation.setDeviceMetricsOverride', {
           mobile: isMobile,
           width,

src/common/QueryHandler.ts

@@ -215,9 +215,10 @@ export function clearCustomQueryHandlers(): void {
 /**
  * @internal
  */
-export function getQueryHandlerAndSelector(
+export function getQueryHandlerAndSelector(selector: string): {
-  selector: string
+  updatedSelector: string;
-): { updatedSelector: string; queryHandler: InternalQueryHandler } {
+  queryHandler: InternalQueryHandler;
+} {
   const hasCustomQueryHandler = /^[a-zA-Z]+\//.test(selector);
   if (!hasCustomQueryHandler)
     return { updatedSelector: selector, queryHandler: _defaultHandler };

src/node/BrowserFetcher.ts

@@ -58,8 +58,7 @@ const browserConfig = {
     destination: '.local-chromium',
   },
   firefox: {
-    host:
+    host: 'https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central',
-      'https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central',
     destination: '.local-firefox',
   },
 } as const;

src/node/BrowserRunner.ts

@@ -62,14 +62,8 @@ export class BrowserRunner {
   }
 
   start(options: LaunchOptions): void {
-    const {
+    const { handleSIGINT, handleSIGTERM, handleSIGHUP, dumpio, env, pipe } =
-      handleSIGINT,
+      options;
-      handleSIGTERM,
-      handleSIGHUP,
-      dumpio,
-      env,
-      pipe,
-    } = options;
     let stdio: Array<'ignore' | 'pipe'> = ['pipe', 'pipe', 'pipe'];
     if (pipe) {
       if (dumpio) stdio = ['ignore', 'pipe', 'pipe', 'pipe', 'pipe'];

src/node/Launcher.ts

@@ -587,9 +587,10 @@ class FirefoxLauncher implements ProductLauncher {
   }
 }
 
-function resolveExecutablePath(
+function resolveExecutablePath(launcher: ChromeLauncher | FirefoxLauncher): {
-  launcher: ChromeLauncher | FirefoxLauncher
+  executablePath: string;
-): { executablePath: string; missingText?: string } {
+  missingText?: string;
+} {
   let downloadPath: string;
   // puppeteer-core doesn't take into account PUPPETEER_* env variables.
   if (!launcher._isPuppeteerCore) {

src/node/Puppeteer.ts

@@ -84,12 +84,8 @@ export class PuppeteerNode extends Puppeteer {
       productName?: Product;
     } & CommonPuppeteerSettings
   ) {
-    const {
+    const { projectRoot, preferredRevision, productName, ...commonSettings } =
-      projectRoot,
+      settings;
-      preferredRevision,
-      productName,
-      ...commonSettings
-    } = settings;
     super(commonSettings);
     this._projectRoot = projectRoot;
     this.__productName = productName;

test/click.spec.ts

@@ -74,10 +74,9 @@ describe('Page.click', function () {
     const { page } = getTestState();
 
     const newPage = await page.browser().newPage();
-    await Promise.all([
+    await Promise.all([newPage.close(), newPage.mouse.click(1, 2)]).catch(
-      newPage.close(),
+      () => {}
-      newPage.mouse.click(1, 2),
+    );
-    ]).catch(() => {});
   });
   it('should click the button after navigation ', async () => {
     const { page, server } = getTestState();

test/cookies.spec.ts

@@ -475,11 +475,8 @@ describe('Cookie specs', () => {
     itFailsFirefox(
       'should set secure same-site cookies from a frame',
       async () => {
-        const {
+        const { httpsServer, puppeteer, defaultBrowserOptions } =
-          httpsServer,
+          getTestState();
-          puppeteer,
-          defaultBrowserOptions,
-        } = getTestState();
 
         const browser = await puppeteer.launch({
           ...defaultBrowserOptions,

test/elementhandle.spec.ts

@@ -320,7 +320,8 @@ describe('ElementHandle specs', function () {
           )
         );
       }
-      const handlerNamesAfterUnregistering = puppeteer.customQueryHandlerNames();
+      const handlerNamesAfterUnregistering =
+        puppeteer.customQueryHandlerNames();
       expect(handlerNamesAfterUnregistering.includes('getById')).toBeFalsy();
     });
     it('should throw with invalid query names', () => {

test/launcher.spec.ts

@@ -531,11 +531,8 @@ describe('Launcher specs', function () {
         ]);
       });
       it('should support ignoreHTTPSErrors option', async () => {
-        const {
+        const { httpsServer, puppeteer, defaultBrowserOptions } =
-          httpsServer,
+          getTestState();
-          puppeteer,
-          defaultBrowserOptions,
-        } = getTestState();
 
         const originalBrowser = await puppeteer.launch(defaultBrowserOptions);
         const browserWSEndpoint = originalBrowser.wsEndpoint();

utils/check_availability.js

@@ -18,8 +18,8 @@
 const assert = require('assert');
 const https = require('https');
 // run `npm run dev-install` if lib dir is missing
-const BrowserFetcher = require('../lib/cjs/puppeteer/node/BrowserFetcher.js')
+const BrowserFetcher =
-  .BrowserFetcher;
+  require('../lib/cjs/puppeteer/node/BrowserFetcher.js').BrowserFetcher;
 
 const SUPPORTER_PLATFORMS = ['linux', 'mac', 'win32', 'win64'];
 const fetchers = SUPPORTER_PLATFORMS.map(

utils/doclint/preprocessor/index.js

@@ -20,7 +20,8 @@ const IS_RELEASE = Boolean(process.env.IS_RELEASE);
 
 module.exports.ensureReleasedAPILinks = function (sources, version) {
   // Release version is everything that doesn't include "-".
-  const apiLinkRegex = /https:\/\/github.com\/puppeteer\/puppeteer\/blob\/v[^/]*\/docs\/api.md/gi;
+  const apiLinkRegex =
+    /https:\/\/github.com\/puppeteer\/puppeteer\/blob\/v[^/]*\/docs\/api.md/gi;
   const lastReleasedAPI = `https://github.com/puppeteer/puppeteer/blob/v${
     version.split('-')[0]
   }/docs/api.md`;

utils/fetch_devices.js

@@ -222,11 +222,9 @@ function loadFromJSONV1(json) {
 
   const result = {};
   result.type = /** @type {string} */ (parseValue(json, 'type', 'string'));
-  result.userAgent = /** @type {string} */ (parseValue(
+  result.userAgent = /** @type {string} */ (
-    json,
+    parseValue(json, 'user-agent', 'string')
-    'user-agent',
+  );
-    'string'
-  ));
 
   const capabilities = parseValue(json, 'capabilities', 'object', []);
   if (!Array.isArray(capabilities))
@@ -238,11 +236,9 @@ function loadFromJSONV1(json) {
     result.capabilities.push(capabilities[i]);
   }
 
-  result.deviceScaleFactor = /** @type {number} */ (parseValue(
+  result.deviceScaleFactor = /** @type {number} */ (
-    json['screen'],
+    parseValue(json['screen'], 'device-pixel-ratio', 'number')
-    'device-pixel-ratio',
+  );
-    'number'
-  ));
   if (result.deviceScaleFactor < 0 || result.deviceScaleFactor > 100)
     throw new Error(
       'Emulated device has wrong deviceScaleFactor: ' + result.deviceScaleFactor