Modernize eslint + prettier configuration

Author: akx

.eslintrc.json

@@ -5,16 +5,12 @@
     "node": true,
     "mocha": true
   },
-  "extends": "eslint:recommended",
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "plugins": [],
-  "rules": {
-    "semi": "error"
-  }
+  "extends": [
+    "eslint:recommended",
+    "standard",
+    "prettier"
+  ],
+  "plugins": [
+    "prettier"
+  ]
 }

.prettierrc

@@ -34,32 +34,33 @@
     "start": "run-s watch"
   },
   "peerDependencies": {
-    "react": ">=15.0.0",
-    "cytoscape": "^3.2.19"
+    "cytoscape": "^3.2.19",
+    "react": ">=15.0.0"
   },
   "devDependencies": {
     "chai": "^4.1.2",
-    "eslint": "^4.6.1",
-    "eslint-config-standard": "^10.2.1",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.1.1",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-n": "^15.2.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.0",
     "immutable": "^3.8.2",
     "microbundle": "^0.15.0",
     "mocha": "^5.2.0",
     "mocha-chrome": "^1.1.0",
     "npm-run-all": "^4.1.1",
-    "prettier": "^1.13.7",
+    "prettier": "^2.7.1",
     "react": "^16.4.1",
     "react-docgen": "^2.21.0",
     "react-dom": "^16.4.1",
     "rimraf": "^2.6.2"
   },
-  "engines": {
-    "node": ">=8.11.3"
-  },
   "dependencies": {
     "prop-types": "^15.6.2"
+  },
+  "prettier": {
+    "singleQuote": true
   }
 }

package.json

@@ -39,7 +39,7 @@ export default class CytoscapeComponent extends React.Component {
 
   constructor(props) {
     super(props);
-    this.displayName = `CytoscapeComponent`;
+    this.displayName = 'CytoscapeComponent';
     this.containerRef = React.createRef();
   }
 
@@ -55,7 +55,7 @@ export default class CytoscapeComponent extends React.Component {
       motionBlur,
       motionBlurOpacity,
       wheelSensitivity,
-      pixelRatio
+      pixelRatio,
     } = this.props;
 
     const cy = (this._cy = new Cytoscape({
@@ -67,7 +67,7 @@ export default class CytoscapeComponent extends React.Component {
       motionBlur,
       motionBlurOpacity,
       wheelSensitivity,
-      pixelRatio
+      pixelRatio,
     }));
 
     if (global) {
@@ -103,7 +103,7 @@ export default class CytoscapeComponent extends React.Component {
       ref: this.containerRef,
       id,
       className,
-      style
+      style,
     });
   }
 }

src/component.js

@@ -1,28 +1,28 @@
 import { shallowObjDiff } from './diff';
 import { get, toJson, forEach } from './json';
 
-export const identity = x => x;
+export const identity = (x) => x;
 
 export const elements = [
   { data: { id: 'a', label: 'Example node A' } },
   { data: { id: 'b', label: 'Example node B' } },
-  { data: { id: 'e', source: 'a', target: 'b' } }
+  { data: { id: 'e', source: 'a', target: 'b' } },
 ];
 
 export const stylesheet = [
   {
     selector: 'node',
     style: {
-      label: 'data(label)'
-    }
-  }
+      label: 'data(label)',
+    },
+  },
 ];
 
 export const zoom = 1;
 
 export const pan = {
   x: 0,
-  y: 0
+  y: 0,
 };
 
 export const defaults = {
@@ -33,5 +33,5 @@ export const defaults = {
   elements,
   stylesheet,
   zoom,
-  pan
+  pan,
 };

src/defaults.js

@@ -1,5 +1,3 @@
-const typeofObj = typeof {};
-
 const eitherIsNil = (a, b) => a == null || b == null;
 
 export const hashDiff = (a, b) => {
@@ -17,13 +15,13 @@ export const shallowObjDiff = (a, b) => {
   }
 
   // non-object values can be compared with the equality operator
-  if (typeof a !== typeofObj || typeof b !== typeofObj) {
+  if (typeof a !== 'object' || typeof b !== 'object') {
     return a !== b;
   }
 
-  let aKeys = Object.keys(a);
-  let bKeys = Object.keys(b);
-  let mismatches = key => a[key] !== b[key];
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  const mismatches = (key) => a[key] !== b[key];
 
   if (aKeys.length !== bKeys.length) {
     return true;

src/diff.js

@@ -1,5 +1,5 @@
 export const get = (obj, key) => (obj != null ? obj[key] : null);
 
-export const toJson = obj => obj;
+export const toJson = (obj) => obj;
 
 export const forEach = (arr, iterator) => arr.forEach(iterator);

src/json.js

@@ -46,8 +46,8 @@ export const patch = (cy, json1, json2, diff, toJson, get, forEach) => {
       'boxSelectionEnabled',
       'autoungrabify',
       'autolock',
-      'autounselectify'
-    ].forEach(key => {
+      'autounselectify',
+    ].forEach((key) => {
       if (isDiffAtKey(json1, json2, diff, key)) {
         patchJson(cy, key, atKey(json1, key), atKey(json2, key), toJson);
       }
@@ -87,19 +87,19 @@ const patchElements = (cy, eles1, eles2, toJson, get, forEach, diff) => {
   const toPatch = [];
   const eles1Map = {};
   const eles2Map = {};
-  const eles1HasId = id => eles1Map[id] != null;
-  const eles2HasId = id => eles2Map[id] != null;
-  const getEle1 = id => eles1Map[id];
-  const getId = ele => get(get(ele, 'data'), 'id');
+  const eles1HasId = (id) => eles1Map[id] != null;
+  const eles2HasId = (id) => eles2Map[id] != null;
+  const getEle1 = (id) => eles1Map[id];
+  const getId = (ele) => get(get(ele, 'data'), 'id');
 
-  forEach(eles2, ele2 => {
+  forEach(eles2, (ele2) => {
     const id = getId(ele2);
 
     eles2Map[id] = ele2;
   });
 
   if (eles1 != null) {
-    forEach(eles1, ele1 => {
+    forEach(eles1, (ele1) => {
       const id = getId(ele1);
 
       eles1Map[id] = ele1;
@@ -110,7 +110,7 @@ const patchElements = (cy, eles1, eles2, toJson, get, forEach, diff) => {
     });
   }
 
-  forEach(eles2, ele2 => {
+  forEach(eles2, (ele2) => {
     const id = getId(ele2);
     const ele1 = getEle1(id);
 
@@ -138,17 +138,17 @@ const patchElement = (cy, ele1, ele2, toJson, get, diff) => {
   const id = get(get(ele2, 'data'), 'id');
   const cyEle = cy.getElementById(id);
   const patch = {};
-  let jsonKeys = [
+  const jsonKeys = [
     'data',
     'position',
     'selected',
     'selectable',
     'locked',
     'grabbable',
-    'classes'
+    'classes',
   ];
 
-  jsonKeys.forEach(key => {
+  jsonKeys.forEach((key) => {
     const data2 = get(ele2, key);
 
     if (diff(data2, get(ele1, key))) {

src/patch.js

@@ -271,5 +271,5 @@ export const types = {
    * A rendering hint that specifies, for renderers which support the hint, the pixel ratio that
    * should be used.  May be 'auto' or a positive number.
    */
-  pixelRatio: oneOfType([string, object])
+  pixelRatio: oneOfType([string, object]),
 };