Update ESLint, update ESLint config, configure Prettier, format all f…

…iles using new config
wojtekmaj · Jan 29, 2022 · de77b8f · de77b8f
1 parent 0d2b1f0
commit de77b8f
Show file tree

Hide file tree

Showing 74 changed files with 1,493 additions and 2,245 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,22 +1,18 @@
 {
-  "presets": [
-    "@babel/env",
-    "@babel/react"
-  ],
-  "plugins": [
-    "@babel/transform-runtime"
-  ],
+  "presets": ["@babel/env", "@babel/react"],
+  "plugins": ["@babel/transform-runtime"],
   "env": {
     "production-esm": {
       "presets": [
-        ["@babel/env", {
-          "modules": false
-        }],
+        [
+          "@babel/env",
+          {
+            "modules": false
+          }
+        ],
         "@babel/react"
       ],
-      "plugins": [
-        ["@babel/transform-runtime", { "useESModules": true }]
-      ]
+      "plugins": [["@babel/transform-runtime", { "useESModules": true }]]
     }
   }
 }
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,16 +1,8 @@
 {
-  "extends": "wojtekmaj/react",
-  "parser": "babel-eslint",
-  "rules": {
-    "no-underscore-dangle": ["error", { "allow": ["_pdfInfo", "_pageIndex", "_pageInfo"] }],
-    "react/sort-comp": "off"
-  },
+  "extends": "wojtekmaj/react-no-automatic-runtime",
   "overrides": [
     {
-      "files": [
-        "sample/**",
-        "test/**"
-      ],
+      "files": ["sample/**", "test/**"],
       "rules": {
         "import/no-unresolved": "off"
       }

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretty-quick --staged
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+.cache
+.yarn
+coverage
+dist
+*.yml
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,9 +1,4 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "eamodio.gitlens"
-  ],
-  "unwantedRecommendations": [
-    "dbaeumer.jshint"
-  ]
+  "recommendations": ["dbaeumer.vscode-eslint", "eamodio.gitlens", "esbenp.prettier-vscode"],
+  "unwantedRecommendations": ["dbaeumer.jshint"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,6 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "search.exclude": {
     "**/.yarn": true
   }

diff --git a/README.md b/README.md
diff --git a/jest.config.json b/jest.config.json
@@ -8,8 +8,6 @@
   "moduleNameMapper": {
     "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
   },
-  "setupFiles": [
-    "<rootDir>/jest.setup.js"
-  ],
+  "setupFiles": ["<rootDir>/jest.setup.js"],
   "testEnvironment": "<rootDir>/jest.env.js"
 }
diff --git a/jest.env.js b/jest.env.js
@@ -8,17 +8,15 @@ const JSDOMEnvironment = require('jest-environment-jsdom');
 
 class CustomJSDOMEnvironment extends JSDOMEnvironment {
   constructor(config) {
-    super(
-      {
-        ...config,
-        globals: {
-          ...config.globals,
-          Uint32Array,
-          Uint8Array,
-          ArrayBuffer,
-        },
+    super({
+      ...config,
+      globals: {
+        ...config.globals,
+        Uint32Array,
+        Uint8Array,
+        ArrayBuffer,
       },
-    );
+    });
   }
 }
 

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "copy-styles": "node ./copy-styles.js",
     "jest": "jest",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
+    "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn jest"
   },
@@ -88,11 +89,13 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "babel-eslint": "^10.0.0",
     "enzyme": "^3.10.0",
-    "eslint": "~7.19.0",
-    "eslint-config-wojtekmaj": "^0.5.0",
+    "eslint": "^8.5.0",
+    "eslint-config-wojtekmaj": "^0.6.5",
+    "husky": "^7.0.0",
     "jest": "^27.0.0",
+    "prettier": "^2.5.0",
+    "pretty-quick": "^3.1.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "rimraf": "^3.0.0",

diff --git a/sample/create-react-app-5/public/index.html b/sample/create-react-app-5/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>react-pdf sample page</title>
   </head>
   <body>

diff --git a/sample/create-react-app-5/src/Sample.jsx b/sample/create-react-app-5/src/Sample.jsx
@@ -28,30 +28,14 @@ export default function Sample() {
       </header>
       <div className="Example__container">
         <div className="Example__container__load">
-          <label htmlFor="file">Load from file:</label>
-          {' '}
-          <input
-            onChange={onFileChange}
-            type="file"
-          />
+          <label htmlFor="file">Load from file:</label>{' '}
+          <input onChange={onFileChange} type="file" />
         </div>
         <div className="Example__container__document">
-          <Document
-            file={file}
-            onLoadSuccess={onDocumentLoadSuccess}
-            options={options}
-          >
-            {
-              Array.from(
-                new Array(numPages),
-                (el, index) => (
-                  <Page
-                    key={`page_${index + 1}`}
-                    pageNumber={index + 1}
-                  />
-                ),
-              )
-            }
+          <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
+            {Array.from(new Array(numPages), (el, index) => (
+              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+            ))}
           </Document>
         </div>
       </div>

diff --git a/sample/parcel/.babelrc b/sample/parcel/.babelrc
@@ -1,8 +1,11 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "modules": false
-    }],
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
     "@babel/react"
   ]
 }
diff --git a/sample/parcel/Sample.jsx b/sample/parcel/Sample.jsx
@@ -30,30 +30,14 @@ export default function Sample() {
       </header>
       <div className="Example__container">
         <div className="Example__container__load">
-          <label htmlFor="file">Load from file:</label>
-          {' '}
-          <input
-            onChange={onFileChange}
-            type="file"
-          />
+          <label htmlFor="file">Load from file:</label>{' '}
+          <input onChange={onFileChange} type="file" />
         </div>
         <div className="Example__container__document">
-          <Document
-            file={file}
-            onLoadSuccess={onDocumentLoadSuccess}
-            options={options}
-          >
-            {
-              Array.from(
-                new Array(numPages),
-                (el, index) => (
-                  <Page
-                    key={`page_${index + 1}`}
-                    pageNumber={index + 1}
-                  />
-                ),
-              )
-            }
+          <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
+            {Array.from(new Array(numPages), (el, index) => (
+              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+            ))}
           </Document>
         </div>
       </div>

diff --git a/sample/parcel/Sample.less b/sample/parcel/Sample.less
@@ -5,13 +5,14 @@ body {
 }
 
 .Example {
-  input, button {
+  input,
+  button {
     font: inherit;
   }
 
   header {
     background-color: rgb(50, 54, 57);
-    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
     padding: 20px;
     color: white;
 
@@ -44,8 +45,8 @@ body {
         }
 
         &__Page {
-          max-width: calc(~"100% - 2em");
-          box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+          max-width: calc(~'100% - 2em');
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
           margin: 1em;
 
           canvas {

diff --git a/sample/parcel/index.html b/sample/parcel/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>react-pdf sample page</title>
   </head>
   <body>

diff --git a/sample/parcel2/Sample.jsx b/sample/parcel2/Sample.jsx
@@ -30,30 +30,14 @@ export default function Sample() {
       </header>
       <div className="Example__container">
         <div className="Example__container__load">
-          <label htmlFor="file">Load from file:</label>
-          {' '}
-          <input
-            onChange={onFileChange}
-            type="file"
-          />
+          <label htmlFor="file">Load from file:</label>{' '}
+          <input onChange={onFileChange} type="file" />
         </div>
         <div className="Example__container__document">
-          <Document
-            file={file}
-            onLoadSuccess={onDocumentLoadSuccess}
-            options={options}
-          >
-            {
-              Array.from(
-                new Array(numPages),
-                (el, index) => (
-                  <Page
-                    key={`page_${index + 1}`}
-                    pageNumber={index + 1}
-                  />
-                ),
-              )
-            }
+          <Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
+            {Array.from(new Array(numPages), (el, index) => (
+              <Page key={`page_${index + 1}`} pageNumber={index + 1} />
+            ))}
           </Document>
         </div>
       </div>

diff --git a/sample/parcel2/Sample.less b/sample/parcel2/Sample.less
@@ -5,13 +5,14 @@ body {
 }
 
 .Example {
-  input, button {
+  input,
+  button {
     font: inherit;
   }
 
   header {
     background-color: rgb(50, 54, 57);
-    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
     padding: 20px;
     color: white;
 
@@ -44,8 +45,8 @@ body {
         }
 
         &__Page {
-          max-width: calc(~"100% - 2em");
-          box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+          max-width: calc(~'100% - 2em');
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
           margin: 1em;
 
           canvas {

diff --git a/sample/parcel2/index.html b/sample/parcel2/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>react-pdf sample page</title>
   </head>
   <body>

diff --git a/sample/webpack4/.babelrc b/sample/webpack4/.babelrc
@@ -1,8 +1,11 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "modules": false
-    }],
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
     "@babel/react"
   ]
 }