Use Babel 6, Update ESLint and Airbnb config

react-dnd · Jan 25, 2017 · 3b3a521 · 3b3a521
1 parent cb62598
commit 3b3a521
Show file tree

Hide file tree

Showing 21 changed files with 1,098 additions and 787 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,4 @@
 {
-  "stage": 0,
-  "loose": ["es6.modules", "es6.classes"]
+  "presets": ["latest", "stage-2"],
+  "plugins": ["transform-decorators-legacy"]
 }
diff --git a/.eslintrc b/.eslintrc
@@ -1,24 +1,29 @@
 {
-  "extends": "airbnb",
+  "extends": "eslint-config-airbnb",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalDecorators": true
+    }
+  },
   "env": {
     "browser": true,
-    "mocha": true,
     "node": true
   },
   "rules": {
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,
-    "react/sort-comp": 0,
-    "react/no-multi-comp": 0,
-    "comma-dangle": 0,
-    "id-length": 0,
-    "new-cap": 0,
-    "eol-last": 0,
-    "jsx-quotes": 0,
-    "consistent-return": 0
-  },
-  "plugins": [
-    "react"
-  ]
+    "react/jsx-filename-extension": "off",
+    "react/sort-comp": "off",
+    "react/no-multi-comp": "off",
+    "class-methods-use-this": "off",
+    "no-plusplus": "off",
+    "comma-dangle": "off",
+    "id-length": "off",
+    "new-cap": "off",
+    "eol-last": "off",
+    "jsx-quotes": "off",
+    "consistent-return": "off"
+  }
 }
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ lib
 .DS_Store
 .idea
 __site__
-__site_prerender__
+__site_prerender__
+*-debug.log
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "vsicons.presets.angular": true
+}
diff --git a/examples/.eslintrc b/examples/.eslintrc
@@ -0,0 +1,32 @@
+{
+    "rules": {
+        "arrow-parens": "off",
+        "import/extensions": "off",
+        "import/first": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-unresolved": "off",
+        "import/prefer-default-export": "off",
+        "indent": "off",
+        "jsx-a11y/label-has-for": "off",
+        "max-len": "off",
+        "no-mixed-operators": "off",
+        "no-param-reassign": "off",
+        "object-curly-spacing": "off",
+        "object-shorthand": "off",
+        "prefer-template": "off",
+        "quote-props": "off",
+        "react/forbid-prop-types": "off",
+        "react/jsx-closing-bracket-location": "off",
+        "react/jsx-first-prop-new-line": "off",
+        "react/jsx-indent-props": "off",
+        "react/no-array-index-key": "off",
+        "react/no-find-dom-node": "off",
+        "react/no-unescaped-entities": "off",
+        "react/no-unused-prop-types": "off",
+        "react/prefer-stateless-function": "off",
+        "react/require-default-props": "off"
+    },
+    "env": {
+        "jest": true
+    }
+}
diff --git a/examples/03 Nesting/Drop Targets/Dustbin.js b/examples/03 Nesting/Drop Targets/Dustbin.js
@@ -68,7 +68,7 @@ export default class Dustbin extends Component {
     return connectDropTarget(
       <div style={getStyle(backgroundColor)}>
         {text}
-        <br/>
+        <br />
         {hasDropped &&
           <span>dropped {hasDroppedOnChild && ' on child'}</span>
         }

diff --git a/examples/04 Sortable/Cancel on Drop Outside/Container.js b/examples/04 Sortable/Cancel on Drop Outside/Container.js
@@ -81,15 +81,13 @@ export default class Container extends Component {
 
     return connectDropTarget(
       <div style={style}>
-        {cards.map(card => {
-          return (
-            <Card key={card.id}
-                  id={card.id}
-                  text={card.text}
-                  moveCard={this.moveCard}
-                  findCard={this.findCard} />
-          );
-        })}
+        {cards.map(card => (
+          <Card key={card.id}
+                id={card.id}
+                text={card.text}
+                moveCard={this.moveCard}
+                findCard={this.findCard} />
+        ))}
       </div>
     );
   }

diff --git a/examples/04 Sortable/Simple/Container.js b/examples/04 Sortable/Simple/Container.js
@@ -58,15 +58,13 @@ export default class Container extends Component {
 
     return (
       <div style={style}>
-        {cards.map((card, i) => {
-          return (
-            <Card key={card.id}
-                  index={i}
-                  id={card.id}
-                  text={card.text}
-                  moveCard={this.moveCard} />
-          );
-        })}
+        {cards.map((card, i) => (
+          <Card key={card.id}
+                index={i}
+                id={card.id}
+                text={card.text}
+                moveCard={this.moveCard} />
+        ))}
       </div>
     );
   }

diff --git a/examples/04 Sortable/Stress Test/Container.js b/examples/04 Sortable/Stress Test/Container.js
@@ -76,14 +76,12 @@ export default class Container extends Component {
 
     return (
       <div style={style}>
-        {cardsByIndex.map(card => {
-          return (
-            <Card key={card.id}
-                  id={card.id}
-                  text={card.text}
-                  moveCard={this.moveCard} />
-          );
-        })}
+        {cardsByIndex.map(card => (
+          <Card key={card.id}
+                id={card.id}
+                text={card.text}
+                moveCard={this.moveCard} />
+        ))}
       </div>
     );
   }

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
   },
   "homepage": "https://github.com/react-dnd/react-dnd",
   "dependencies": {
+    "babel-eslint": "^7.1.1",
     "disposables": "^1.0.1",
     "dnd-core": "^2.0.1",
     "hoist-non-react-statics": "^1.2.0",
@@ -58,14 +59,17 @@
   "devDependencies": {
     "animation-frame": "^0.2.4",
     "autoprefixer": "^5.0.0",
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.24",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.0.0",
+    "babel-cli": "^6.22.2",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-latest": "^6.22.0",
+    "babel-preset-stage-2": "^6.22.0",
     "css-loader": "^0.9.1",
-    "eslint": "^1.6.0",
-    "eslint-config-airbnb": "^0.1.0",
-    "eslint-plugin-react": "^3.5.1",
+    "eslint": "^3.14.0",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.9.0",
     "expect": "^1.6.0",
     "extract-text-webpack-plugin": "^0.3.8",
     "faker": "^2.1.3",

diff --git a/src/DragDropContext.js b/src/DragDropContext.js
@@ -1,11 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import { DragDropManager } from 'dnd-core';
 import invariant from 'invariant';
-import checkDecoratorArguments from './utils/checkDecoratorArguments';
 import hoistStatics from 'hoist-non-react-statics';
+import checkDecoratorArguments from './utils/checkDecoratorArguments';
 
 export default function DragDropContext(backendOrModule) {
-  checkDecoratorArguments('DragDropContext', 'backend', ...arguments);
+  checkDecoratorArguments('DragDropContext', 'backend', ...arguments); // eslint-disable-line prefer-rest-params
 
   // Auto-detect ES6 default export for people still using ES5
   let backend;
@@ -41,7 +41,7 @@ export default function DragDropContext(backendOrModule) {
       };
 
       getDecoratedComponentInstance() {
-        return this.refs.child;
+        return this.childRef;
       }
 
       getManager() {
@@ -54,8 +54,10 @@ export default function DragDropContext(backendOrModule) {
 
       render() {
         return (
-          <DecoratedComponent {...this.props}
-                              ref='child' />
+          <DecoratedComponent
+            {...this.props}
+            ref={e => (this.childRef = e)}
+          />
         );
       }
     }

diff --git a/src/DragLayer.js b/src/DragLayer.js
@@ -1,13 +1,13 @@
 import React, { Component, PropTypes } from 'react';
-import shallowEqual from './utils/shallowEqual';
-import shallowEqualScalar from './utils/shallowEqualScalar';
+import hoistStatics from 'hoist-non-react-statics';
 import isPlainObject from 'lodash/isPlainObject';
 import invariant from 'invariant';
+import shallowEqual from './utils/shallowEqual';
+import shallowEqualScalar from './utils/shallowEqualScalar';
 import checkDecoratorArguments from './utils/checkDecoratorArguments';
-import hoistStatics from 'hoist-non-react-statics';
 
 export default function DragLayer(collect, options = {}) {
-  checkDecoratorArguments('DragLayer', 'collect[, options]', ...arguments);
+  checkDecoratorArguments('DragLayer', 'collect[, options]', ...arguments); // eslint-disable-line prefer-rest-params
   invariant(
     typeof collect === 'function',
     'Expected "collect" provided as the first argument to DragLayer ' +
@@ -42,12 +42,12 @@ export default function DragLayer(collect, options = {}) {
       }
 
       getDecoratedComponentInstance() {
-        return this.refs.child;
+        return this.childRef;
       }
 
       shouldComponentUpdate(nextProps, nextState) {
         return !arePropsEqual(nextProps, this.props) ||
-               !shallowEqual(nextState, this.state);
+          !shallowEqual(nextState, this.state);
       }
 
       constructor(props, context) {
@@ -106,9 +106,11 @@ export default function DragLayer(collect, options = {}) {
 
       render() {
         return (
-          <DecoratedComponent {...this.props}
-                              {...this.state}
-                              ref='child' />
+          <DecoratedComponent
+            {...this.props}
+            {...this.state}
+            ref={e => (this.childRef = e)}
+          />
         );
       }
     }

diff --git a/src/DragSource.js b/src/DragSource.js
@@ -9,7 +9,7 @@ import createSourceConnector from './createSourceConnector';
 import isValidType from './utils/isValidType';
 
 export default function DragSource(type, spec, collect, options = {}) {
-  checkDecoratorArguments('DragSource', 'type, spec, collect[, options]', ...arguments);
+  checkDecoratorArguments('DragSource', 'type, spec, collect[, options]', ...arguments); // eslint-disable-line prefer-rest-params
   let getType = type;
   if (typeof type !== 'function') {
     invariant(

diff --git a/src/DropTarget.js b/src/DropTarget.js
@@ -9,7 +9,7 @@ import createTargetConnector from './createTargetConnector';
 import isValidType from './utils/isValidType';
 
 export default function DropTarget(type, spec, collect, options = {}) {
-  checkDecoratorArguments('DropTarget', 'type, spec, collect[, options]', ...arguments);
+  checkDecoratorArguments('DropTarget', 'type, spec, collect[, options]', ...arguments); // eslint-disable-line prefer-rest-params
   let getType = type;
   if (typeof type !== 'function') {
     invariant(

diff --git a/src/createSourceFactory.js b/src/createSourceFactory.js
@@ -5,7 +5,7 @@ const ALLOWED_SPEC_METHODS = ['canDrag', 'beginDrag', 'isDragging', 'endDrag'];
 const REQUIRED_SPEC_METHODS = ['beginDrag'];
 
 export default function createSourceFactory(spec) {
-  Object.keys(spec).forEach(key => {
+  Object.keys(spec).forEach((key) => {
     invariant(
       ALLOWED_SPEC_METHODS.indexOf(key) > -1,
       'Expected the drag source specification to only have ' +
@@ -25,7 +25,7 @@ export default function createSourceFactory(spec) {
       spec[key]
     );
   });
-  REQUIRED_SPEC_METHODS.forEach(key => {
+  REQUIRED_SPEC_METHODS.forEach((key) => {
     invariant(
       typeof spec[key] === 'function',
       'Expected %s in the drag source specification to be a function. ' +

diff --git a/src/createTargetFactory.js b/src/createTargetFactory.js
@@ -4,7 +4,7 @@ import isPlainObject from 'lodash/isPlainObject';
 const ALLOWED_SPEC_METHODS = ['canDrop', 'hover', 'drop'];
 
 export default function createTargetFactory(spec) {
-  Object.keys(spec).forEach(key => {
+  Object.keys(spec).forEach((key) => {
     invariant(
       ALLOWED_SPEC_METHODS.indexOf(key) > -1,
       'Expected the drop target specification to only have ' +

diff --git a/src/decorateHandler.js b/src/decorateHandler.js
@@ -1,10 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 import { Disposable, CompositeDisposable, SerialDisposable } from 'disposables';
-import shallowEqual from './utils/shallowEqual';
-import shallowEqualScalar from './utils/shallowEqualScalar';
 import isPlainObject from 'lodash/isPlainObject';
 import invariant from 'invariant';
 import hoistStatics from 'hoist-non-react-statics';
+import shallowEqual from './utils/shallowEqual';
+import shallowEqualScalar from './utils/shallowEqualScalar';
 
 export default function decorateHandler({
   DecoratedComponent,
@@ -173,9 +173,11 @@ export default function decorateHandler({
 
     render() {
       return (
-        <DecoratedComponent {...this.props}
-                            {...this.state}
-                            ref={this.handleChildRef} />
+        <DecoratedComponent
+          {...this.props}
+          {...this.state}
+          ref={this.handleChildRef}
+        />
       );
     }
   }

diff --git a/src/utils/checkDecoratorArguments.js b/src/utils/checkDecoratorArguments.js
@@ -4,9 +4,9 @@ export default function checkDecoratorArguments(functionName, signature, ...args
       const arg = args[i];
       if (arg && arg.prototype && arg.prototype.render) {
         console.error( // eslint-disable-line no-console
-          `You seem to be applying the arguments in the wrong order. ` +
+          'You seem to be applying the arguments in the wrong order. ' +
           `It should be ${functionName}(${signature})(Component), not the other way around. ` +
-          `Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#you-seem-to-be-applying-the-arguments-in-the-wrong-order`
+          'Read more: http://react-dnd.github.io/react-dnd/docs-troubleshooting.html#you-seem-to-be-applying-the-arguments-in-the-wrong-order'
         );
         return;
       }

diff --git a/src/utils/isValidType.js b/src/utils/isValidType.js
@@ -3,5 +3,5 @@ import isArray from 'lodash/isArray';
 export default function isValidType(type, allowArray) {
   return typeof type === 'string' ||
          typeof type === 'symbol' ||
-         allowArray && isArray(type) && type.every(t => isValidType(t, false));
+         (allowArray && isArray(type) && type.every(t => isValidType(t, false)));
 }