Enforce Prettier + ESLint w/ Rules of Hooks (#528)

* Typescript-ify. * Converted `CountUp` to a Functional Component. Now just need to switch it to use `useCountUp`. * Fix this possibly backwards-incompatible type. * Fix instance config to only support hook. * Fix some effect issues. * The hook version and the component version used two different methods -- the component initialized immediately and set "0" as the value, and the hook delayed initialization and returned "" as the value. This breaks backwards compatibility by setting both to "0", though it may need to be re-thought. * Remove unnecessary prop. * Test fixes and some TypeScript fixes. * Add TS to build process. * Fix build script. * Check delay for undefined-ness as well. * Remove proptypes. * Timeout should use the return type of setTimeout, as it could be NodeJS.Timeout in node, or number in the browser. * Check for existing instance before checking for instance.target. * Fixed createInstance Element warning. * Fixed createInstance element warning (2) * Clean up package.json. * Remove @babel/plugin-class-properties as we no longer use a class. * Remove prop-types from rollup config. * Remove plugin-proposal-class-properties as we no longer use a class. * Use destructuring in useCountUp. * Initialize and run prettier + eslint with rules of hooks checks. * Missed a line from my previous commit. * Remove prop-types. * Add extension recommendations and vscode jest launcher.
glennreyes · Aug 27, 2021 · 601014e · 601014e
1 parent 8fbbaa6
commit 601014e
Show file tree

Hide file tree

Showing 24 changed files with 1,295 additions and 225 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,2 @@
+[*]
+end_of_line=lf
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/prop-types": 0
+  }
+}
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,16 +1,16 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: monthly
-    time: "04:00"
-  open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: "@testing-library/react"
-    versions:
-    - 11.2.2
-    - 11.2.3
-  - dependency-name: "@testing-library/react-hooks"
-    versions:
-    - 3.7.0
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: monthly
+      time: '04:00'
+    open-pull-requests-limit: 10
+    ignore:
+      - dependency-name: '@testing-library/react'
+        versions:
+          - 11.2.2
+          - 11.2.3
+      - dependency-name: '@testing-library/react-hooks'
+        versions:
+          - 3.7.0
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,14 +19,14 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: Install dependencies
-      run: npm install
-    - name: Build project
-      run: npm run build
-    - name: Run tests
-      run: npm run test
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install
+      - name: Build project
+        run: npm run build
+      - name: Run tests
+        run: npm run test
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "node"
+  - 'node'
 cache: yarn
 jobs:
   include:

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint",
+    "orta.vscode-jest"
+  ]
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  "configurations": [
+    {
+      "type": "node",
+      "name": "Run Tests",
+      "request": "launch",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "npm",
+      "args": ["run", "test", "--runInBand", "--watchAll=false"]
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "jest.jestCommandLine": "yarn test"
+}
diff --git a/README.md b/README.md
@@ -153,8 +153,8 @@ Note that `delay={0}` will automatically start the count up.
 import { useCountUp } from 'react-countup';
 
 const SimpleHook = () => {
-  useCountUp({ ref: "counter", end: 1234567 });
-  return <span id="counter"/>;
+  useCountUp({ ref: 'counter', end: 1234567 });
+  return <span id="counter" />;
 };
 ```
 
@@ -179,7 +179,7 @@ const CompleteHook = () => {
   });
   return (
     <div>
-      <div ref={countUpRef}/>
+      <div ref={countUpRef} />
       <button onClick={start}>Start</button>
       <button onClick={reset}>Reset</button>
       <button onClick={pauseResume}>Pause/Resume</button>
@@ -340,10 +340,10 @@ If `redraw` is set to `true` your component will start the transition on every c
 You need to check if your counter in viewport, [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) can be used for this purpose.
 
 ```js
-import React from "react";
-import CountUp from "react-countup";
-import VisibilitySensor from "react-visibility-sensor";
-import "./styles.css";
+import React from 'react';
+import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
+import './styles.css';
 
 export default function App() {
   return (

diff --git a/babel.config.json b/babel.config.json
@@ -6,9 +6,7 @@
   ],
   "env": {
     "test": {
-      "presets": [
-        ["@babel/preset-env", { "targets": { "node": "current" } }]
-      ]
+      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
     }
   }
 }
diff --git a/demo/README.md b/demo/README.md
@@ -456,7 +456,7 @@ class App extends Component {
       .then(({ moduleA }) => {
         // Use moduleA
       })
-      .catch(err => {
+      .catch((err) => {
         // Handle failure
       });
   };
@@ -711,7 +711,7 @@ If you put a file into the `public` folder, it will **not** be processed by Webp
 Inside `index.html`, you can use it like this:
 
 ```html
-<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 ```
 
 Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
@@ -1235,11 +1235,13 @@ Note that the server will use a self-signed certificate, so your web browser wil
 Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta property="og:title" content="__OG_TITLE__">
-    <meta property="og:description" content="__OG_DESCRIPTION__">
+    <meta property="og:title" content="__OG_TITLE__" />
+    <meta property="og:description" content="__OG_DESCRIPTION__" />
+  </head>
+</html>
 ```
 
 Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
@@ -1972,7 +1974,7 @@ const app = express();
 
 app.use(express.static(path.join(__dirname, 'build')));
 
-app.get('/', function(req, res) {
+app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
 

diff --git a/demo/public/index.html b/demo/public/index.html
@@ -1,31 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Overpass+Mono" rel="stylesheet">
-  <!-- Notice the use of %PUBLIC_URL% in
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Overpass+Mono"
+      rel="stylesheet"
+    />
+    <!-- Notice the use of %PUBLIC_URL% in
     the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public`
     folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly
     both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run
     build`. -->
-  <title>React CountUp</title>
-</head>
+    <title>React CountUp</title>
+  </head>
 
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -35,6 +38,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
+  </body>
 </html>
diff --git a/demo/src/registerServiceWorker.js b/demo/src/registerServiceWorker.js
@@ -55,7 +55,7 @@ export default function register() {
 function registerValidSW(swUrl) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         installingWorker.onstatechange = () => {
@@ -76,22 +76,22 @@ function registerValidSW(swUrl) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
 
 function checkValidServiceWorker(swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
         response.status === 404 ||
         response.headers.get('content-type').indexOf('javascript') === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -110,7 +110,7 @@ function checkValidServiceWorker(swUrl) {
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }

diff --git a/package.json b/package.json
@@ -44,7 +44,14 @@
     "@testing-library/react": "12.0.0",
     "@testing-library/react-hooks": "7.0.1",
     "@types/warning": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
     "babel-jest": "27.0.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "27.0.6",
     "prettier": "2.3.2",
     "pretty-quick": "3.1.1",