Better warnings

react-dnd · May 1, 2015 · ac8ddb9 · ac8ddb9
1 parent 0a5aa79
commit ac8ddb9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 32 deletions.
diff --git a/src/ComponentDragSource.js b/src/ComponentDragSource.js
@@ -1,16 +1,16 @@
 import { DragSource } from 'dnd-core';
 import invariant from 'invariant';
 import isObject from 'lodash/lang/isObject';
+import isValidType from './utils/isValidType';
 
 export default class ComponentDragSource extends DragSource {
   constructor(type, spec, props, getComponentRef) {
     super();
 
-    invariant(
-      typeof type === 'string' || typeof type === 'symbol',
-      'Expected type to be a string or a symbol.'
-    );
-    invariant(isObject(spec), 'Expected spec to be an object.');
+    if (process.env.NODE_ENV !== 'production') {
+      invariant(isValidType(type), 'Expected the drag source type to either be a string or a symbol. Instead received %s.', type);
+      invariant(isObject(spec), 'Expected spec to be an object.');
+    }
 
     this.type = type;
     this.spec = spec;

diff --git a/src/ComponentDropTarget.js b/src/ComponentDropTarget.js
@@ -1,19 +1,16 @@
 import { DropTarget } from 'dnd-core';
 import invariant from 'invariant';
-import isArray from 'lodash/lang/isArray';
 import isObject from 'lodash/lang/isObject';
+import isValidType from './utils/isValidType';
 
 export default class ComponentDropTarget extends DropTarget {
   constructor(type, spec = {}, props, getComponentRef) {
     super();
 
-    invariant(
-      typeof type === 'string' ||
-      typeof type === 'symbol' ||
-      isArray(type),
-      'Expected type to be a string, a symbol, or an array.'
-    );
-    invariant(isObject(spec), 'Expected spec to be an object.');
+    if (process.env.NODE_ENV !== 'production') {
+      invariant(isValidType(type, true), 'Expected the drop target type to either be a string, a symbol, or an array of either. Instead received %s.', type);
+      invariant(isObject(spec), 'Expected spec to be an object.');
+    }
 
     this.type = type;
     this.spec = spec;

diff --git a/src/configureDragDrop.js b/src/configureDragDrop.js
@@ -7,7 +7,7 @@ import shallowEqual from './utils/shallowEqual';
 import shallowEqualScalar from './utils/shallowEqualScalar';
 import assign from 'lodash/object/assign';
 import invariant from 'invariant';
-import validateDecoratorArguments from './utils/validateDecoratorArguments';
+import checkDecoratorArguments from './utils/checkDecoratorArguments';
 
 const DEFAULT_KEY = '__default__';
 
@@ -17,18 +17,22 @@ function isComponentDragDropHandler(obj) {
 }
 
 export default function configureDragDrop(configure, collect, options = {}) {
-  validateDecoratorArguments('configureDragDrop', ...arguments);
+  checkDecoratorArguments('configureDragDrop', ...arguments);
   const { arePropsEqual = shallowEqualScalar } = options;
 
   invariant(
     typeof configure === 'function',
     'configureDragDrop call is missing its first required parameter, ' +
-    'a function that registers drag sources and/or drop targets.'
+    'a function that registers drag sources and/or drop targets. ' +
+    'Instead received %s.',
+    configure
   );
   invariant(
     typeof collect === 'function',
     'configureDragDrop call is missing its second required parameter, ' +
-    'a function that collects props to inject into the component.'
+    'a function that collects props to inject into the component. ' +
+    'Instead received %s.',
+    collect
   );
 
   return function (DecoratedComponent) {
@@ -111,27 +115,29 @@ export default function configureDragDrop(configure, collect, options = {}) {
           }
         };
 
-        let handlers = configure(register, props);
-        if (isComponentDragDropHandler(handlers)) {
-          handlers = { [DEFAULT_KEY]: handlers };
-        }
+        const handlers = configure(register, props);
+        const wrappedHandlers = isComponentDragDropHandler(handlers) ? {
+          [DEFAULT_KEY]: handlers
+        } : handlers;
 
         if (process.env.NODE_ENV !== 'production') {
           invariant(
-            handlers != null &&
-            typeof handlers === 'object' &&
-            Object.keys(handlers).every(key =>
-              isComponentDragDropHandler(handlers[key])
+            wrappedHandlers != null &&
+            typeof wrappedHandlers === 'object' &&
+            Object.keys(wrappedHandlers).every(key =>
+              isComponentDragDropHandler(wrappedHandlers[key])
             ),
             'Expected the first argument to configureDragDrop for %s to ' +
             'either return the result of calling register.dragSource() ' +
             'or register.dropTarget(), or an object containing only such values. ' +
+            'Instead received %s. ' +
             'Read more: https://gist.github.com/gaearon/9222a74aaf82ad65fd2e',
-            displayName
+            displayName,
+            handlers
           );
         }
 
-        return handlers;
+        return wrappedHandlers;
       }
 
       getCurrentState() {

diff --git a/src/configureDragDropContext.js b/src/configureDragDropContext.js
@@ -1,10 +1,10 @@
 import React, { Component, PropTypes } from 'react';
 import { DragDropManager } from 'dnd-core';
 import invariant from 'invariant';
-import validateDecoratorArguments from './utils/validateDecoratorArguments';
+import checkDecoratorArguments from './utils/checkDecoratorArguments';
 
 export default function configureDragDropContext(backend) {
-  validateDecoratorArguments('configureDragDropContext', ...arguments);
+  checkDecoratorArguments('configureDragDropContext', ...arguments);
 
   // Auto-detect ES6 default export for people still using ES5
   if (typeof backend === 'object' && typeof backend.default === 'function') {

diff --git a/src/configureDragDropLayer.js b/src/configureDragDropLayer.js
@@ -3,10 +3,10 @@ import { DragDropManager } from 'dnd-core';
 import shallowEqual from './utils/shallowEqual';
 import shallowEqualScalar from './utils/shallowEqualScalar';
 import invariant from 'invariant';
-import validateDecoratorArguments from './utils/validateDecoratorArguments';
+import checkDecoratorArguments from './utils/checkDecoratorArguments';
 
 export default function configureDragDropLayer(collect, options = {}) {
-  validateDecoratorArguments('configureDragDropLayer', ...arguments);
+  checkDecoratorArguments('configureDragDropLayer', ...arguments);
   const { arePropsEqual = shallowEqualScalar } = options;
 
   invariant(

diff --git a/src/utils/validateDecoratorArguments.js → src/utils/checkDecoratorArguments.js b/src/utils/validateDecoratorArguments.js → src/utils/checkDecoratorArguments.js
@@ -1,4 +1,4 @@
-export default function validateDecoratorArguments(functionName, ...args) {
+export default function checkDecoratorArguments(functionName, ...args) {
   if (process.env.NODE_ENV !== 'production') {
     for (let i = 0; i < args.length; i++) {
       const arg = args[i];

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