Replace ESLint and Prettier with Biome (#1819)

.github/workflows/ci.yml

@@ -18,32 +18,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Cache Yarn cache
-        uses: actions/cache@v4
-        env:
-          cache-name: yarn-cache
-        with:
-          path: ~/.yarn/berry/cache
-          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ env.cache-name }}
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install dependencies
-        run: yarn --immutable
-
-      - name: Build package
-        run: yarn build
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
 
       - name: Run tests
-        run: yarn lint
+        run: biome lint
 
   typescript:
     name: Type checking (React ${{ matrix.react }})
@@ -99,29 +78,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Cache Yarn cache
-        uses: actions/cache@v4
-        env:
-          cache-name: yarn-cache
-        with:
-          path: ~/.yarn/berry/cache
-          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ env.cache-name }}
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install dependencies
-        run: yarn --immutable
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
 
       - name: Run formatting
-        run: yarn format
+        run: biome format
 
   unit:
     name: Unit tests (React ${{ matrix.react }})

.husky/pre-commit

@@ -1 +1 @@
-yarn lint-staged
+yarn format --staged --no-errors-on-unmatched --write

.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "eamodio.gitlens", "esbenp.prettier-vscode"],
+  "recommendations": ["biomejs.biome", "eamodio.gitlens"],
   "unwantedRecommendations": ["dbaeumer.jshint"]
 }

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
   "search.exclude": {
     "**/.yarn": true

biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "files": {
+    "ignore": [".tsimp", "coverage", "dist", ".pnp.cjs", ".pnp.loader.mjs"]
+  },
+  "formatter": {
+    "lineWidth": 100,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "rules": {
+      "complexity": {
+        "noUselessSwitchCase": "off"
+      },
+      "suspicious": {
+        "noConsoleLog": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "overrides": [
+    {
+      "include": ["**/package.json"],
+      "formatter": {
+        "lineWidth": 1
+      }
+    },
+    {
+      "include": ["**/vite.config.ts"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noConsoleLog": "off"
+          }
+        }
+      }
+    }
+  ]
+}

package.json

@@ -18,12 +18,9 @@
     "unit": "yarn workspaces foreach --all run unit"
   },
   "devDependencies": {
-    "husky": "^9.0.0",
-    "lint-staged": "^15.0.0",
-    "prettier": "^3.2.0"
+    "husky": "^9.0.0"
   },
   "resolutions": {
-    "eslint-plugin-import": "npm:eslint-plugin-i@^2.28.0",
     "pdfjs-dist": "patch:pdfjs-dist@npm:4.3.136#.yarn/patches/pdfjs-dist-npm-4.3.136-35a0e70ced.patch"
   },
   "packageManager": "[email protected]"

packages/react-pdf/package.json

@@ -36,8 +36,8 @@
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist/esm && cpy 'src/**/*.css' dist/cjs",
-    "format": "prettier --check . --cache",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "format": "biome format",
+    "lint": "biome lint",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
@@ -65,6 +65,7 @@
     "warning": "^4.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
@@ -74,11 +75,8 @@
     "canvas": "^2.11.2",
     "core-js": "^3.37.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-wojtekmaj": "^1.0.0",
     "jsdom": "^24.0.0",
     "nodemon": "^3.0.0",
-    "prettier": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",

packages/react-pdf/src/Document.tsx

@@ -208,13 +208,11 @@ export type DocumentProps = {
 const defaultOnPassword: OnPassword = (callback, reason) => {
   switch (reason) {
     case PasswordResponses.NEED_PASSWORD: {
-      // eslint-disable-next-line no-alert
       const password = prompt('Enter the password to open this PDF file.');
       callback(password);
       break;
     }
     case PasswordResponses.INCORRECT_PASSWORD: {
-      // eslint-disable-next-line no-alert
       const password = prompt('Invalid password. Please try again.');
       callback(password);
       break;
@@ -357,6 +355,7 @@ const Document = forwardRef(function Document(
     sourceDispatch({ type: 'RESET' });
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect intentionally triggered on file change
   useEffect(resetSource, [file, sourceDispatch]);
 
   const findDocumentSource = useCallback(async (): Promise<Source | null> => {
@@ -439,23 +438,19 @@ const Document = forwardRef(function Document(
     };
   }, [findDocumentSource, sourceDispatch]);
 
-  useEffect(
-    () => {
-      if (typeof source === 'undefined') {
-        return;
-      }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Ommitted callbacks so they are not called every time they change
+  useEffect(() => {
+    if (typeof source === 'undefined') {
+      return;
+    }
 
-      if (source === false) {
-        onSourceError();
-        return;
-      }
+    if (source === false) {
+      onSourceError();
+      return;
+    }
 
-      onSourceSuccess();
-    },
-    // Ommitted callbacks so they are not called every time they change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [source],
-  );
+    onSourceSuccess();
+  }, [source]);
 
   /**
    * Called when a document is read successfully
@@ -494,9 +489,11 @@ const Document = forwardRef(function Document(
     pdfDispatch({ type: 'RESET' });
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect intentionally triggered on source change
   useEffect(resetDocument, [pdfDispatch, source]);
 
-  function loadDocument() {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Ommitted callbacks so they are not called every time they change
+  useEffect(() => {
     if (!source) {
       return;
     }
@@ -530,48 +527,35 @@ const Document = forwardRef(function Document(
     return () => {
       loadingTask.destroy();
     };
-  }
+  }, [options, pdfDispatch, source]);
 
-  useEffect(
-    loadDocument,
-    // Ommitted callbacks so they are not called every time they change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [options, pdfDispatch, source],
-  );
-
-  useEffect(
-    () => {
-      if (typeof pdf === 'undefined') {
-        return;
-      }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Ommitted callbacks so they are not called every time they change
+  useEffect(() => {
+    if (typeof pdf === 'undefined') {
+      return;
+    }
 
-      if (pdf === false) {
-        onLoadError();
-        return;
-      }
+    if (pdf === false) {
+      onLoadError();
+      return;
+    }
 
-      onLoadSuccess();
-    },
-    // Ommitted callbacks so they are not called every time they change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pdf],
-  );
+    onLoadSuccess();
+  }, [pdf]);
 
-  function setupLinkService() {
+  useEffect(() => {
     linkService.current.setViewer(viewer.current);
     linkService.current.setExternalLinkRel(externalLinkRel);
     linkService.current.setExternalLinkTarget(externalLinkTarget);
-  }
+  }, [externalLinkRel, externalLinkTarget]);
 
-  useEffect(setupLinkService, [externalLinkRel, externalLinkTarget]);
-
-  function registerPage(pageIndex: number, ref: HTMLDivElement) {
+  const registerPage = useCallback((pageIndex: number, ref: HTMLDivElement) => {
     pages.current[pageIndex] = ref;
-  }
+  }, []);
 
-  function unregisterPage(pageIndex: number) {
+  const unregisterPage = useCallback((pageIndex: number) => {
     delete pages.current[pageIndex];
-  }
+  }, []);
 
   const childContext = useMemo(
     () => ({
@@ -584,10 +568,14 @@ const Document = forwardRef(function Document(
       rotate,
       unregisterPage,
     }),
-    [imageResourcesPath, onItemClick, pdf, renderMode, rotate],
+    [imageResourcesPath, onItemClick, pdf, registerPage, renderMode, rotate, unregisterPage],
   );
 
-  const eventProps = useMemo(() => makeEventProps(otherProps, () => pdf), [otherProps, pdf]);
+  const eventProps = useMemo(
+    () => makeEventProps(otherProps, () => pdf),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
+    [otherProps, pdf],
+  );
 
   function renderChildren() {
     return <DocumentContext.Provider value={childContext}>{children}</DocumentContext.Provider>;

packages/react-pdf/src/LinkService.ts

@@ -85,7 +85,6 @@ export default class LinkService implements IPDFLinkService {
     this.pdfViewer.currentPageNumber = value;
   }
 
-  // eslint-disable-next-line @typescript-eslint/class-literal-property-style
   get rotation() {
     return 0;
   }