Bump eslint-config-pixiebrix and prettier (#4808)

Co-authored-by: Federico Brigante <me@fregante.com>

.pre-commit-config.yaml

@@ -8,6 +8,8 @@ repos:
       - id: trailing-whitespace
       - id: detect-private-key
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.5.1
+    rev: v2.5.1 # Ignored
     hooks:
       - id: prettier
+        additional_dependencies:
+          - prettier@2.8.1 # Required because pre-commit is poorly maintained

package.json

@@ -225,7 +225,7 @@
     "css-minimizer-webpack-plugin": "^3.4.1",
     "dotenv": "^15.0.0",
     "eslint": "^8.29.0",
-    "eslint-config-pixiebrix": "^0.20.1",
+    "eslint-config-pixiebrix": "^0.21.0",
     "fake-indexeddb": "^4.0.0",
     "geckodriver": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",

src/background/deployment.test.ts

@@ -28,6 +28,10 @@ import MockAdapter from "axios-mock-adapter";
 import axios from "axios";
 import { updateDeployments } from "@/background/deployment";
 import { reportEvent } from "@/telemetry/events";
+import { isLinked, readAuthData } from "@/auth/token";
+import { refreshRegistries } from "@/hooks/useRefresh";
+import { isUpdateAvailable } from "@/background/installer";
+import { getSettingsState, saveSettingsState } from "@/store/settingsStorage";
 
 browser.permissions.contains = jest.fn().mockResolvedValue(true);
 
@@ -95,11 +99,6 @@ jest.mock("@/background/installer", () => ({
   isUpdateAvailable: jest.fn().mockReturnValue(false),
 }));
 
-import { isLinked, readAuthData } from "@/auth/token";
-import { refreshRegistries } from "@/hooks/useRefresh";
-import { isUpdateAvailable } from "@/background/installer";
-import { getSettingsState, saveSettingsState } from "@/store/settingsStorage";
-
 const isLinkedMock = isLinked as jest.Mock;
 const readAuthDataMock = readAuthData as jest.Mock;
 const getManifestMock = browser.runtime.getManifest as jest.Mock;

src/blocks/readers/ImageExifReader.ts

@@ -21,7 +21,7 @@ import axios from "axios";
 
 function base64ToArrayBuffer(base64: string): ArrayBuffer {
   // Adapted from https://github.com/exif-js/exif-js/blob/master/exif.js#L343
-  base64 = base64.replace(/^data:([^;]+);base64,/gim, "");
+  base64 = base64.replace(/^data:([^;]+);base64,/im, "");
   const binary = atob(base64);
   const length_ = binary.length;
   const buffer = new ArrayBuffer(length_);

src/blocks/readers/factory.ts

@@ -130,7 +130,7 @@ export function readerFactory(component: unknown): IReader {
     async read(root: ReaderRoot): Promise<ReaderOutput> {
       const doRead = _readerFactories.get(reader.type);
       if (doRead) {
-        return doRead(reader as any, root);
+        return doRead(reader, root);
       }
 
       throw new Error(`Reader type ${reader.type} not implemented`);

src/blocks/readers/jquery.ts

@@ -66,7 +66,7 @@ export interface JQueryConfig {
 }
 
 function cleanValue(value: string): string {
-  return value.trim().replace(/\s+/g, " ");
+  return value.trim().replaceAll(/\s+/g, " ");
 }
 
 function castValue(value: string, type?: CastType): Result {

src/blocks/renderers/customForm.test.tsx

@@ -129,7 +129,6 @@ describe("form data normalization", () => {
       age: null,
       isAdmin: null,
       rating: null,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- relaxed type checking in test
     } as any;
 
     expect(normalizedData).toStrictEqual(expectedData);

src/components/Markdown.tsx

@@ -19,7 +19,7 @@ import React, { useMemo } from "react";
 import sanitize from "@/utils/sanitize";
 import { marked } from "marked";
 
-type MarkdownProps = {
+export type MarkdownProps = {
   markdown: string | null;
   as?: React.ElementType;
   className?: string;

src/components/MarkdownLazy.tsx

@@ -16,6 +16,7 @@
  */
 
 import React, { Suspense } from "react";
+import { type MarkdownProps } from "./Markdown";
 
 const MarkdownLoader = React.lazy(
   async () =>
@@ -25,7 +26,7 @@ const MarkdownLoader = React.lazy(
     )
 );
 
-const MarkdownLazy: React.FC<any> = (props) => (
+const MarkdownLazy: React.FC<MarkdownProps> = (props) => (
   <Suspense fallback={null}>
     <MarkdownLoader {...props} />
   </Suspense>

src/components/logViewer/LogTable.stories.tsx

@@ -16,9 +16,6 @@
  */
 
 import { ContextError } from "@/errors/genericErrors";
-
-Object.assign(global, { chrome: { runtime: { id: 42 } } });
-
 import React from "react";
 import { type ComponentStory, type ComponentMeta } from "@storybook/react";
 import { validateRegistryId, uuidv4 } from "@/types/helpers";
@@ -29,6 +26,8 @@ import { InputValidationError } from "@/blocks/errors";
 import { type Schema } from "@/core";
 import type { LogEntry } from "@/telemetry/logging";
 
+Object.assign(global, { chrome: { runtime: { id: 42 } } });
+
 export default {
   title: "Editor/LogTable",
   component: LogTable,

src/components/selectionToolPopover/SelectionToolPopover.tsx

@@ -29,8 +29,7 @@ import switchStyle from "@/components/form/widgets/switchButton/SwitchButtonWidg
 import switchButtonStyle from "bootstrap-switch-button-react/src/style.css?loadAsUrl";
 import custom from "./SelectionToolPopover.module.scss?loadAsUrl";
 import { Stylesheets } from "@/components/Stylesheets";
-import { Button } from "react-bootstrap";
-import { FormLabel } from "react-bootstrap";
+import { Button, FormLabel } from "react-bootstrap";
 import pluralize from "@/utils/pluralize";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGripHorizontal } from "@fortawesome/free-solid-svg-icons";

src/contentScript/contentScript.ts

@@ -15,8 +15,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// IMPORTANT: do not import anything that has a transitive dependency of the messenger.
-// See for more information: https://github.com/pixiebrix/pixiebrix-extension/issues/4058
 import "./contentScript.scss";
 import { uuidv4 } from "@/types/helpers";
 import {

src/contrib/google/auth.ts

@@ -41,6 +41,7 @@ export async function ensureAuth(
     });
     if (token) {
       // https://bumbu.me/gapi-in-chrome-extension
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- GAPI types are unnecessarily strict
       gapi.auth.setToken({ access_token: token } as any);
       return token;
     }

src/development/cryptoNodePolyfill.js

@@ -1,4 +1,4 @@
-import crypto from "crypto";
+import crypto from "node:crypto";
 
 globalThis.crypto ??= crypto;
 

src/development/headers.ts

@@ -15,20 +15,20 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import fs from "fs";
+import fs from "node:fs";
 // eslint-disable-next-line import/no-unassigned-import -- Until Node adds the global
 import "./cryptoNodePolyfill.js";
 import blockRegistry from "@/blocks/registry";
 
-// Maintaining this number is a simple way to ensure bricks don't accidentally get dropped
-const EXPECTED_HEADER_COUNT = 105;
-
 // Import for side-effects (these modules register the blocks)
 // NOTE: we don't need to also include extensionPoints because we got rid of all the legacy hard-coded extension points
 // (e.g., the Pipedrive calendar extension point, and TechCrunch entity extension point)
 import registerBuiltinBlocks from "@/blocks/registerBuiltinBlocks";
 import registerContribBlocks from "@/contrib/registerContribBlocks";
 
+// Maintaining this number is a simple way to ensure bricks don't accidentally get dropped
+const EXPECTED_HEADER_COUNT = 105;
+
 registerBuiltinBlocks();
 registerContribBlocks();
 

src/errors/businessErrors.ts

@@ -136,7 +136,7 @@ export class InvalidTemplateError extends BusinessError {
   constructor(message: string, template: string) {
     // Remove excess whitespace/newlines and truncate to ensure the message isn't too long. The main point of including
     // the template is to identify which expression generated the problem
-    const normalized = truncate(template.replace(/\s+/g, " ").trim(), {
+    const normalized = truncate(template.replaceAll(/\s+/g, " ").trim(), {
       length: 32,
     });
     super(`Invalid template: ${message}. Template: "${normalized}"`);

src/messaging/protocol.ts

@@ -86,8 +86,9 @@ export const withReadWindow = createSendScriptMessage(
   READ_WINDOW
 ) as unknown as ReadSpec;
 
-export const withSearchWindow =
-  createSendScriptMessage<{ results: unknown[] }>(SEARCH_WINDOW);
+export const withSearchWindow = createSendScriptMessage<{ results: unknown[] }>(
+  SEARCH_WINDOW
+);
 
 export const withDetectFrameworkVersions = createSendScriptMessage<
   FrameworkMeta[]

src/pageEditor/analysisManager.ts

@@ -24,11 +24,10 @@ import TraceAnalysis from "@/analysis/analysisVisitors/traceAnalysis";
 import ReduxAnalysisManager from "@/analysis/ReduxAnalysisManager";
 import { type UUID } from "@/core";
 import { type TraceRecord } from "@/telemetry/trace";
-import { type PayloadAction } from "@reduxjs/toolkit";
+import { type PayloadAction, isAnyOf } from "@reduxjs/toolkit";
 import { type RootState } from "./pageEditorTypes";
 import { actions as editorActions } from "@/pageEditor/slices/editorSlice";
 import runtimeSlice from "./slices/runtimeSlice";
-import { isAnyOf } from "@reduxjs/toolkit";
 import RequestPermissionAnalysis from "@/analysis/analysisVisitors/requestPermissionAnalysis";
 import FormBrickAnalysis from "@/analysis/analysisVisitors/formBrickAnalysis";
 import { selectActiveElementTraces } from "./slices/runtimeSelectors";
@@ -46,7 +45,7 @@ const nodeListMutationActions = [
   editorActions.addNode,
   editorActions.moveNode,
   editorActions.removeNode,
-];
+] as const;
 
 pageEditorAnalysisManager.registerAnalysisEffect(
   (
@@ -70,23 +69,20 @@ pageEditorAnalysisManager.registerAnalysisEffect(
 pageEditorAnalysisManager.registerAnalysisEffect(
   () => new BlockTypeAnalysis(),
   {
-    // @ts-expect-error: spreading the array as args
     matcher: isAnyOf(...nodeListMutationActions),
   }
 );
 
 pageEditorAnalysisManager.registerAnalysisEffect(
   () => new FormBrickAnalysis(),
   {
-    // @ts-expect-error: spreading the array as args
     matcher: isAnyOf(...nodeListMutationActions),
   }
 );
 
 pageEditorAnalysisManager.registerAnalysisEffect(
   () => new RenderersAnalysis(),
   {
-    // @ts-expect-error: spreading the array as args
     matcher: isAnyOf(...nodeListMutationActions),
   }
 );

src/pageEditor/tabs/effect/ExtensionPointPreview.tsx

@@ -27,8 +27,10 @@ import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 import { faSync } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import AsyncButton from "@/components/AsyncButton";
-import { type FormState } from "@/pageEditor/extensionPoints/formStateTypes";
-import { type TriggerFormState } from "@/pageEditor/extensionPoints/formStateTypes";
+import {
+  type FormState,
+  type TriggerFormState,
+} from "@/pageEditor/extensionPoints/formStateTypes";
 import { DataPanelTabKey } from "@/pageEditor/tabs/editTab/dataPanel/dataPanelTypes";
 import DataTabJsonTree from "@/pageEditor/tabs/editTab/dataPanel/DataTabJsonTree";
 

src/pageScript/pageScript.ts

@@ -17,33 +17,14 @@
 
 /**
  * The script that gets injected into the host page. Shares a JS context with the host page
+ *
+ * IMPORTANT: do not import anything that has a transitive dependency of the messenger.
+ * See for more information: https://github.com/pixiebrix/pixiebrix-extension/issues/4058
  */
 
-import { uuidv4 } from "@/types/helpers";
 // eslint-disable-next-line import/no-unassigned-import -- monkey patching import
 import "@/utils/jqueryHack";
-
-const JQUERY_WINDOW_PROP = "$$jquery";
-const PAGESCRIPT_SYMBOL = Symbol.for("pixiebrix-page-script");
-
-declare global {
-  interface Window {
-    [PAGESCRIPT_SYMBOL]?: string;
-    [JQUERY_WINDOW_PROP]?: unknown;
-  }
-}
-
-// eslint-disable-next-line security/detect-object-injection -- using constant symbol defined above
-if (window[PAGESCRIPT_SYMBOL]) {
-  throw new Error(
-    // eslint-disable-next-line security/detect-object-injection -- using constant symbol defined above
-    `PixieBrix pageScript already installed: ${window[PAGESCRIPT_SYMBOL]}`
-  );
-}
-
-// eslint-disable-next-line security/detect-object-injection -- using constant symbol defined above
-window[PAGESCRIPT_SYMBOL] = uuidv4();
-
+import { uuidv4 } from "@/types/helpers";
 import { isEmpty, identity, castArray, cloneDeep } from "lodash";
 import {
   CONNECT_EXTENSION,
@@ -81,6 +62,27 @@ import {
 } from "@/runtime/pathHelpers";
 import { type UnknownObject } from "@/types";
 
+const JQUERY_WINDOW_PROP = "$$jquery";
+const PAGESCRIPT_SYMBOL = Symbol.for("pixiebrix-page-script");
+
+declare global {
+  interface Window {
+    [PAGESCRIPT_SYMBOL]?: string;
+    [JQUERY_WINDOW_PROP]?: unknown;
+  }
+}
+
+// eslint-disable-next-line security/detect-object-injection -- using constant symbol defined above
+if (window[PAGESCRIPT_SYMBOL]) {
+  throw new Error(
+    // eslint-disable-next-line security/detect-object-injection -- using constant symbol defined above
+    `PixieBrix pageScript already installed: ${window[PAGESCRIPT_SYMBOL]}`
+  );
+}
+
+// eslint-disable-next-line security/detect-object-injection -- using constant symbol defined above
+window[PAGESCRIPT_SYMBOL] = uuidv4();
+
 const MAX_READ_DEPTH = 5;
 
 const attachListener = initialize();

src/runtime/renderers.ts

@@ -23,8 +23,6 @@ import { type UnknownObject } from "@/types";
 import { isErrorObject } from "@/errors/errorHelpers";
 import { InvalidTemplateError } from "@/errors/businessErrors";
 
-const hyphenRegex = /-/gi;
-
 export type Renderer = (template: string, context: unknown) => unknown;
 
 const ensureNunjucks = once(async () => {
@@ -68,7 +66,7 @@ export async function engineRenderer(
       return (template, ctxt) => {
         // Convert top level data from kebab case to snake case in order to be valid identifiers
         const snakeCased = mapKeys(ctxt as UnknownObject, (value, key) =>
-          key.replace(hyphenRegex, "_")
+          key.replaceAll("-", "_")
         );
 
         try {

src/testUtils/testAfterEnv.js

@@ -19,7 +19,7 @@ import "@testing-library/jest-dom";
 // eslint-disable-next-line import/no-unassigned-import -- mocking the indexedDB
 import "fake-indexeddb/auto";
 import $ from "jquery";
-import crypto from "crypto";
+import crypto from "node:crypto";
 
 global.$ = $;
 global.jQuery = $;

src/testUtils/testEnv.js

@@ -15,9 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// Jest fails without these
-// eslint-disable-next-line node/prefer-global/text-decoder, node/prefer-global/text-encoder
-import { TextEncoder, TextDecoder } from "util";
+// TODO: Drop after https://github.com/jsdom/jsdom/issues/2524
+import { TextEncoder, TextDecoder } from "node:util";
 
 // eslint-disable-next-line import/no-unassigned-import -- It's a polyfill
 import "urlpattern-polyfill";

src/utils/escape.ts

@@ -17,5 +17,5 @@
 
 export function escapeSingleQuotes(str: string): string {
   // https://gist.github.com/getify/3667624
-  return str.replace(/\\([\S\s])|(')/g, "\\$1$2");
+  return str.replaceAll(/\\([\S\s])|(')/g, "\\$1$2");
 }