feat: clean up the codebase

.babelrc

@@ -1,9 +1,13 @@
 {
   "plugins": [
-    "add-module-exports",
     "lodash"
   ],
   "presets": [
-    "es2015"
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead"
+      }
+    ]
   ]
 }

package.json

@@ -1,40 +1,55 @@
 {
+  "ava": {
+    "babel": {
+      "compileAsTests": [
+        "test/helpers/**/*"
+      ]
+    },
+    "files": [
+      "test/swing/**/*"
+    ],
+    "require": [
+      "@babel/register",
+      "./test/helpers/setupBrowserEnvironment.js"
+    ]
+  },
   "author": {
     "email": "gajus@gajus.com",
     "name": "Gajus Kuizinas",
     "url": "http://gajus.com"
   },
   "dependencies": {
-    "hammerjs": "^2.0.4",
-    "lodash": "^4.6.1",
-    "raf": "^3.1.0",
-    "rebound": "^0.0.13",
-    "sister": "^3.0.0",
+    "hammerjs": "^2.0.8",
+    "lodash": "^4.17.15",
+    "raf": "^3.4.1",
+    "rebound": "^0.1.0",
+    "sister": "^3.0.2",
     "vendor-prefix": "^0.1.0"
   },
   "description": "A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.",
   "devDependencies": {
-    "babel": "^6.5.2",
-    "babel-cli": "^6.18.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "@ava/babel": "^1.0.1",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/node": "^7.8.7",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/register": "^7.9.0",
+    "ava": "^3.6.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-register": "^6.18.0",
-    "chai": "^3.2.0",
-    "eslint": "^3.9.1",
-    "eslint-config-canonical": "^6.1.0",
-    "husky": "^0.11.9",
-    "jsdom": "^6.3.0",
-    "jsonfile": "^2.2.1",
-    "mocha": "^3.1.2",
-    "semantic-release": "^4.3.5",
-    "sinon": "^1.16.1",
-    "webpack": "^1.12.1"
+    "browser-env": "^3.3.0",
+    "chai": "^4.2.0",
+    "eslint": "^6.8.0",
+    "eslint-config-canonical": "^19.0.4",
+    "husky": "^4.2.3",
+    "jsdom": "^16.2.2",
+    "jsonfile": "^6.0.1",
+    "semantic-release": "^17.0.4",
+    "sinon": "^9.0.1",
+    "webpack": "^4.42.1"
   },
   "keywords": [
     "swipe",
-    "cards",
-    "swipeable"
+    "cards"
   ],
   "license": "BSD-3-Clause",
   "main": "./dist/index.js",
@@ -43,11 +58,15 @@
     "type": "git",
     "url": "https://github.com/gajus/swing"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run test"
+    }
+  },
   "scripts": {
     "build": "babel ./src --out-dir ./dist --copy-files",
     "lint": "eslint ./src ./test",
-    "precommit": "npm run lint && npm run test",
-    "test": "mocha --compilers js:babel-register"
+    "test": "ava --verbose --serial"
   },
   "version": "3.1.0"
 }

src/Card.js

@@ -7,7 +7,7 @@ import raf from 'raf';
 import Direction from './Direction';
 import {
   elementChildren,
-  isTouchDevice
+  isTouchDevice,
 } from './utilities';
 
 /**
@@ -24,7 +24,7 @@ const computeDirection = (fromX, fromY, allowedDirections) => {
 
   const direction = isHorizontal ? isLeftDirection : isUpDirection;
 
-  if (allowedDirections.indexOf(direction) === -1) {
+  if (!allowedDirections.includes(direction)) {
     return Direction.INVALID;
   }
 
@@ -35,7 +35,7 @@ const computeDirection = (fromX, fromY, allowedDirections) => {
  * @param {Stack} stack
  * @param {HTMLElement} targetElement
  * @param {boolean} prepend
- * @returns {Object} An instance of Card.
+ * @returns {object} An instance of Card.
  */
 const Card = (stack, targetElement, prepend) => {
   let card;
@@ -70,10 +70,10 @@ const Card = (stack, targetElement, prepend) => {
     lastThrow = {};
     lastTranslate = {
       coordinateX: 0,
-      coordinateY: 0
+      coordinateY: 0,
     };
 
-        /* Mapping directions to event names */
+    /* Mapping directions to event names */
     throwDirectionToEventName = {};
     throwDirectionToEventName[Direction.LEFT] = 'throwoutleft';
     throwDirectionToEventName[Direction.RIGHT] = 'throwoutright';
@@ -93,10 +93,10 @@ const Card = (stack, targetElement, prepend) => {
         [
           Hammer.Pan,
           {
-            threshold: 2
-          }
-        ]
-      ]
+            threshold: 2,
+          },
+        ],
+      ],
     });
 
     if (prepend) {
@@ -109,7 +109,7 @@ const Card = (stack, targetElement, prepend) => {
       Card.appendToParent(targetElement);
 
       eventEmitter.trigger('dragstart', {
-        target: targetElement
+        target: targetElement,
       });
 
       currentX = 0;
@@ -141,7 +141,7 @@ const Card = (stack, targetElement, prepend) => {
         coordinateX,
         coordinateY,
         targetElement,
-        config.throwOutConfidence(coordinateX, coordinateY, targetElement)
+        config.throwOutConfidence(coordinateX, coordinateY, targetElement),
       );
 
       // Not really sure about computing direction here and filtering on directions here.
@@ -155,7 +155,7 @@ const Card = (stack, targetElement, prepend) => {
       }
 
       eventEmitter.trigger('dragend', {
-        target: targetElement
+        target: targetElement,
       });
     });
 
@@ -171,7 +171,7 @@ const Card = (stack, targetElement, prepend) => {
       targetElement.addEventListener('touchend', () => {
         if (isDraging && !isPanning) {
           eventEmitter.trigger('dragend', {
-            target: targetElement
+            target: targetElement,
           });
         }
       });
@@ -209,7 +209,7 @@ const Card = (stack, targetElement, prepend) => {
 
         if (isDraging && !isPanning) {
           eventEmitter.trigger('dragend', {
-            target: targetElement
+            target: targetElement,
           });
         }
       });
@@ -236,7 +236,7 @@ const Card = (stack, targetElement, prepend) => {
     springThrowIn.addListener({
       onSpringAtRest: () => {
         eventEmitter.trigger('throwinend', {
-          target: targetElement
+          target: targetElement,
         });
       },
       onSpringUpdate: (spring) => {
@@ -245,13 +245,13 @@ const Card = (stack, targetElement, prepend) => {
         const coordianteY = rebound.MathUtil.mapValueInRange(value, 0, 1, lastThrow.fromY, 0);
 
         onSpringUpdate(coordianteX, coordianteY);
-      }
+      },
     });
 
     springThrowOut.addListener({
       onSpringAtRest: () => {
         eventEmitter.trigger('throwoutend', {
-          target: targetElement
+          target: targetElement,
         });
       },
       onSpringUpdate: (spring) => {
@@ -272,7 +272,7 @@ const Card = (stack, targetElement, prepend) => {
         }
 
         onSpringUpdate(coordianteX, coordianteY);
-      }
+      },
     });
 
     /**
@@ -298,7 +298,7 @@ const Card = (stack, targetElement, prepend) => {
         offset: coordinateX,
         target: targetElement,
         throwDirection: computeDirection(coordinateX, coordianteY, config.allowedDirections),
-        throwOutConfidence: config.throwOutConfidence(coordinateX, coordianteY, targetElement)
+        throwOutConfidence: config.throwOutConfidence(coordinateX, coordianteY, targetElement),
       });
     };
 
@@ -338,21 +338,21 @@ const Card = (stack, targetElement, prepend) => {
 
         eventEmitter.trigger('throwin', {
           target: targetElement,
-          throwDirection: lastThrow.direction
+          throwDirection: lastThrow.direction,
         });
       } else if (where === Card.THROW_OUT) {
         Card.appendToParent(targetElement);
         springThrowOut.setCurrentValue(0).setAtRest().setVelocity(100).setEndValue(1);
 
         eventEmitter.trigger('throwout', {
           target: targetElement,
-          throwDirection: lastThrow.direction
+          throwDirection: lastThrow.direction,
         });
 
-                /* Emits more accurate events about specific directions */
+        /* Emits more accurate events about specific directions */
         eventEmitter.trigger(throwDirectionToEventName[lastThrow.direction], {
           target: targetElement,
-          throwDirection: lastThrow.direction
+          throwDirection: lastThrow.direction,
         });
       } else {
         throw new Error('Invalid throw event.');
@@ -412,15 +412,15 @@ const Card = (stack, targetElement, prepend) => {
 /**
  * Creates a configuration object.
  *
- * @param {Object} config
- * @returns {Object}
+ * @param {object} config
+ * @returns {object}
  */
 Card.makeConfig = (config = {}) => {
   const defaultConfig = {
     allowedDirections: [
       Direction.RIGHT,
       Direction.LEFT,
-      Direction.UP
+      Direction.UP,
     ],
     allowMovement: () => {
       return true;
@@ -432,7 +432,7 @@ Card.makeConfig = (config = {}) => {
     rotation: Card.rotation,
     throwOutConfidence: Card.throwOutConfidence,
     throwOutDistance: Card.throwOutDistance,
-    transform: Card.transform
+    transform: Card.transform,
   };
 
   return _.assign({}, defaultConfig, config);
@@ -472,8 +472,8 @@ Card.appendToParent = (element) => {
   const appended = targetIndex + 1 !== siblings.length;
 
   if (appended) {
-    parentNode.removeChild(element);
-    parentNode.appendChild(element);
+    element.remove();
+    parentNode.append(element);
   }
 
   return appended;
@@ -487,12 +487,12 @@ Card.appendToParent = (element) => {
  * Invoked when card is added to the stack (when prepend is true).
  *
  * @param {HTMLElement} element The target element.
- * @return {undefined}
+ * @returns {undefined}
  */
 Card.prependToParent = (element) => {
   const parentNode = element.parentNode;
 
-  parentNode.removeChild(element);
+  element.remove();
   parentNode.insertBefore(element, parentNode.firstChild);
 };
 
@@ -504,12 +504,12 @@ Card.prependToParent = (element) => {
  * Invoked when card is added to the stack (when prepend is true).
  *
  * @param {HTMLElement} element The target element.
- * @return {undefined}
+ * @returns {undefined}
  */
 Card.prependToParent = (element) => {
   const parentNode = element.parentNode;
 
-  parentNode.removeChild(element);
+  element.remove();
   parentNode.insertBefore(element, parentNode.firstChild);
 };
 

src/Direction.js

@@ -3,7 +3,7 @@ const Direction = {
   INVALID: Symbol('INVALID'),
   LEFT: Symbol('LEFT'),
   RIGHT: Symbol('RIGHT'),
-  UP: Symbol('UP')
+  UP: Symbol('UP'),
 };
 
 export default Direction;