Update eslint v4 to v8, prettier v2 to v3

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: ['airbnb', 'prettier'],
   parser: '@babel/eslint-parser',
   plugins: ['jest'],
   env: {
@@ -24,6 +24,7 @@ module.exports = {
     'no-nested-ternary': 0,
     'no-mixed-operators': 0,
     'react/prop-types': 0,
+    'max-classes-per-file': 0,
     indent: 0,
   },
 

.github/workflows/test.yml

@@ -2,52 +2,52 @@ name: Run Unit tests
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   node16:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Test using Node.js 16.x
-      uses: actions/setup-node@v2
-      with:
-        node-version: 16.x
-    - run: yarn install --frozen-lockfile --ignore-engines
-    - run: yarn lint
-    - run: yarn test
+      - uses: actions/checkout@v2
+      - name: Test using Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+      - run: yarn install --frozen-lockfile --ignore-engines
+      - run: yarn lint
+      - run: yarn test
 
   node18:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Test using Node.js 18.x
-      uses: actions/setup-node@v2
-      with:
-        node-version: 18.x
-    - run: yarn install --frozen-lockfile --ignore-engines
-    - run: yarn test
+      - uses: actions/checkout@v2
+      - name: Test using Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - run: yarn install --frozen-lockfile --ignore-engines
+      - run: yarn test
 
   node20:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Test using Node.js 20.x
-      uses: actions/setup-node@v2
-      with:
-        node-version: 20.x
-    - run: yarn install --frozen-lockfile --ignore-engines
-    - run: yarn test
+      - uses: actions/checkout@v2
+      - name: Test using Node.js 20.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20.x
+      - run: yarn install --frozen-lockfile --ignore-engines
+      - run: yarn test
 
   node22:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Test using Node.js 22.x
-      uses: actions/setup-node@v2
-      with:
-        node-version: 22.x
-    - run: yarn install --frozen-lockfile --ignore-engines
-    - run: yarn test
+      - uses: actions/checkout@v2
+      - name: Test using Node.js 22.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 22.x
+      - run: yarn install --frozen-lockfile --ignore-engines
+      - run: yarn test

.importjs.js

@@ -1,11 +1,9 @@
 module.exports = {
   logLevel: 'debug',
   environments: ['node'],
-  excludes: [
-    './build/**',
-  ],
+  excludes: ['./build/**'],
   aliases: {
-    'fetch': 'node-fetch',
+    fetch: 'node-fetch',
   },
   declarationKeyword: 'import',
   importDevDependencies: true,

CONTRIBUTING.md

@@ -10,6 +10,7 @@ A Happo plugin is basically an object with a few methods/properties defined,
 along with an optional set of files.
 
 ### `customizeWebpackConfig`
+
 Similar to the `customizeWebpackConfig` configuration option, this is a method
 that allows you to extend/customize the default webpack configuration used by
 Happo.
@@ -23,6 +24,7 @@ module.exports = {
 ```
 
 ### `pathToExamplesFile`
+
 Specify a path to a file that gets added to the list of happo example files
 being parsed. The most common usecase here would be to auto-generate Happo
 examples from a different source.
@@ -32,6 +34,5 @@ const path = require('path');
 
 module.exports = {
   pathToExamplesFile: path.resolve(__dirname, 'myHappoExamples.js'),
-}
+};
 ```
-

README.md

@@ -5,6 +5,6 @@ compare the visual appearance of UI components before and after a change.
 Screenshots are taken in different browsers and across different screen sizes
 to ensure consistent cross-browser and responsive styling of your application.
 
-*See [docs.happo.io](https://docs.happo.io/) for up-to-date documentation*
+_See [docs.happo.io](https://docs.happo.io/) for up-to-date documentation_
 
 ## https://docs.happo.io/

package.json

@@ -88,18 +88,19 @@
     "adm-zip": "^0.4.13",
     "babel-jest": "^27.4.5",
     "babel-loader": "^9.1.0",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.11.0",
-    "eslint-plugin-jest": "^21.15.1",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.3",
     "file-loader": "^6.1.1",
     "happo-plugin-puppeteer": "^1.3.2",
     "http-server": "^0.12.0",
     "jest": "^27.4.5",
     "multiparty": "^4.2.2",
-    "prettier": "^2.2.0",
+    "prettier": "^3.3.2",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "webpack": "^5.2.0"

src/Logger.js

@@ -19,7 +19,7 @@ export function logTag(project) {
 
 function printDuration(print, startTime) {
   if (startTime) {
-    print(dim(` (${(Date.now() - startTime)}ms)`));
+    print(dim(` (${Date.now() - startTime}ms)`));
   }
 }
 

src/MultipleErrors.js

@@ -1,7 +1,9 @@
 export default class MultipleErrors extends Error {
   constructor(errors) {
     super(`Found ${errors.length} error(s)`);
-    this.stack = this.message + '\n\n' +
+    this.stack =
+      this.message +
+      '\n\n' +
       errors.map(({ stack }) => stack).join('\n----------------\n');
   }
 }

src/RemoteBrowserTarget.js

@@ -14,9 +14,11 @@ async function waitFor({ requestId, endpoint, apiKey, apiSecret }) {
     { apiKey, apiSecret, retryCount: 5 },
   );
   if (status === 'done') {
-    return result.map((i) => Object.assign({}, i, { snapRequestId: requestId }));
+    return result.map((i) => ({ ...i, snapRequestId: requestId }));
   }
-  await new Promise((r) => setTimeout(r, POLL_INTERVAL));
+  await new Promise((r) => {
+    setTimeout(r, POLL_INTERVAL);
+  });
   return waitFor({ requestId, endpoint, apiKey, apiSecret });
 }
 

src/browser/processor.js

@@ -1,4 +1,3 @@
-/* global window */
 /* eslint-disable no-continue */
 import WrappedError from '../WrappedError';
 import findAssetPaths from '../findAssetPaths';
@@ -107,9 +106,7 @@ export default class Processor {
     }
     if (Array.isArray(exportsFromFile)) {
       window.verbose(`Found ${exportsFromFile.length} component(s) in ${fileName}`);
-      this.addExamples(
-        exportsFromFile.map((obj) => Object.assign({ fileName }, obj)),
-      );
+      this.addExamples(exportsFromFile.map((obj) => ({ fileName, ...obj })));
     } else {
       const component = getComponentNameFromFileName(fileName);
       window.verbose(
@@ -192,9 +189,9 @@ export default class Processor {
     const html = elem.innerHTML.trim();
     const duration = new Date().getTime() - start;
     if (html === '' && duration < this.asyncTimeout) {
-      return new Promise((resolve) =>
-        setTimeout(() => resolve(this.waitForHTML(elem, start, attempt + 1)), 10),
-      );
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(this.waitForHTML(elem, start, attempt + 1)), 10);
+      });
     }
     if (attempt > 0) {
       window.verbose(

src/commands/debug.js

@@ -1,16 +1,18 @@
 // import { createServer } from 'http-server';
 
 // export default function debugCommand({ port = 4430 }, config) {
-  // const server = createServer({ root: config.tmpdir, cache: -1 });
-  // server.listen({ port }, (err) => {
-  //   if (err) {
-  //     console.error(err);
-  //     process.exit(1);
-  //     return;
-  //   }
-  //   console.log(`Debug server running at http://localhost:${port}/`);
-  // });
+// const server = createServer({ root: config.tmpdir, cache: -1 });
+// server.listen({ port }, (err) => {
+//   if (err) {
+//     console.error(err);
+//     process.exit(1);
+//     return;
+//   }
+//   console.log(`Debug server running at http://localhost:${port}/`);
+// });
 // }
 export default function debugCommand() {
-  throw new Error('The debug command is temporarily disabled. See https://github.com/happo/happo.io/issues/73 for context');
+  throw new Error(
+    'The debug command is temporarily disabled. See https://github.com/happo/happo.io/issues/73 for context',
+  );
 }

src/commands/hasReport.js

@@ -1,6 +1,9 @@
 import fetchReport from '../fetchReport';
 
-export default async function hasReport(sha, { apiKey, apiSecret, endpoint, project }) {
+export default async function hasReport(
+  sha,
+  { apiKey, apiSecret, endpoint, project },
+) {
   try {
     await fetchReport({
       sha,

src/createHash.js

@@ -1,8 +1,5 @@
 import crypto from 'crypto';
 
 export default function createHash(data) {
-  return crypto
-    .createHash('md5')
-    .update(data)
-    .digest('hex');
+  return crypto.createHash('md5').update(data).digest('hex');
 }

src/debug.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/executeCli.js

@@ -105,9 +105,11 @@ commander
   .command('empty <sha>')
   .description('mark a report as empty')
   .action(async (sha) => {
-    await uploadReport(
-      Object.assign({ snaps: [], sha }, await loadUserConfig(commander.config)),
-    );
+    await uploadReport({
+      snaps: [],
+      sha,
+      ...(await loadUserConfig(commander.config)),
+    });
     process.exit(0);
   });
 

src/loadUserConfig.js

@@ -31,7 +31,9 @@ async function getPullRequestSecret({ endpoint }, prUrl) {
   });
 
   if (!res.ok) {
-    throw new Error(`Failed to get pull request secret: ${res.status} - ${await res.text()}`);
+    throw new Error(
+      `Failed to get pull request secret: ${res.status} - ${await res.text()}`,
+    );
   }
   const { secret } = await res.json();
   return secret;

src/makeRequest.js

@@ -49,8 +49,8 @@ export default async function makeRequest(
       const body = formData
         ? prepareFormData(formData)
         : jsonBody
-        ? JSON.stringify(jsonBody)
-        : undefined;
+          ? JSON.stringify(jsonBody)
+          : undefined;
 
       const encodedSecret = new TextEncoder().encode(apiSecret);
       // https://github.com/panva/jose/blob/main/docs/classes/jwt_sign.SignJWT.md
@@ -72,19 +72,14 @@ export default async function makeRequest(
         controller.abort();
       }, timeout);
       try {
-        const response = await fetch(
-          url,
-          Object.assign(
-            {
-              headers,
-              compress: true,
-              agent: HTTP_PROXY ? new HttpsProxyAgent(HTTP_PROXY) : undefined,
-              signal: controller.signal,
-            },
-            requestAttributes,
-            { body },
-          ),
-        );
+        const response = await fetch(url, {
+          headers,
+          compress: true,
+          agent: HTTP_PROXY ? new HttpsProxyAgent(HTTP_PROXY) : undefined,
+          signal: controller.signal,
+          ...requestAttributes,
+          body,
+        });
         if (!response.ok) {
           const e = new Error(
             `Request to ${method} ${url} failed: ${

src/pageRunner.js

@@ -13,7 +13,11 @@ export default async function pagesRunner(
     const outerStartTime = Date.now();
     const targetNames = Object.keys(targets);
     const tl = targetNames.length;
-    logger.info(`${logTag(project)}Generating screenshots in ${tl} target${tl > 1 ? 's' : ''}...`);
+    logger.info(
+      `${logTag(project)}Generating screenshots in ${tl} target${
+        tl > 1 ? 's' : ''
+      }...`,
+    );
     const results = await Promise.all(
       targetNames.map(async (name) => {
         const startTime = Date.now();

src/processSnapsInBundle.js

@@ -28,8 +28,6 @@ export default async function processSnapsInBundle(
     }
 
     result.css = await domProvider.extractCSS();
-  } catch (e) {
-    throw e;
   } finally {
     await domProvider.close();
   }

src/renderWrapperReact.js

@@ -48,5 +48,6 @@ class ErrorBoundary extends React.Component {
     return children;
   }
 }
-export default (result, { component, variant }) =>
-  React.createElement(ErrorBoundary, { component, variant }, result);
+export default function renderWrapperReact(result, { component, variant }) {
+  return React.createElement(ErrorBoundary, { component, variant }, result);
+}

src/validateArchive.js

@@ -9,7 +9,7 @@ export default function validateArchive(totalBytes, entries) {
   ];
   const fileSizes = entries.map((entry) => ({
     name: entry.name,
-    size: entry.stats ? entry.stats.size : (entry.size || 0),
+    size: entry.stats ? entry.stats.size : entry.size || 0,
   }));
   fileSizes
     .sort((a, b) => b.size - a.size)