Add 'debugMode' option to DndContext (#1190)

* feat: adds debug mode that allows devs to inspect dnd-core state changes

* feat: switch to the Redux DevTools instead of redux-logger

This eliminates the need for a new dependency

* refactor: streamline makeStoreInstance

* docs: clean up the debug-mode flag in the header

packages/dnd-core/src/DragDropManagerImpl.ts

@@ -14,6 +14,21 @@ import {
 } from './interfaces'
 import { State } from './reducers'
 
+function makeStoreInstance(debugMode: boolean) {
+	// TODO: if we ever make a react-native version of this,
+	// we'll need to consider how to pull off dev-tooling
+	const reduxDevTools = window && (window as any).__REDUX_DEVTOOLS_EXTENSION__
+	return createStore(
+		reducer,
+		debugMode &&
+			reduxDevTools &&
+			reduxDevTools({
+				name: 'dnd-core',
+				instanceId: 'dnd-core',
+			}),
+	)
+}
+
 export default class DragDropManagerImpl<Context>
 	implements DragDropManager<Context> {
 	private store: Store<State>
@@ -24,8 +39,9 @@ export default class DragDropManagerImpl<Context>
 	constructor(
 		createBackend: BackendFactory,
 		private context: Context = {} as Context,
+		debugMode = false,
 	) {
-		const store = createStore(reducer)
+		const store = makeStoreInstance(debugMode)
 		this.store = store
 		this.monitor = new DragDropMonitorImpl(
 			store,

packages/dnd-core/src/factories.ts

@@ -4,6 +4,7 @@ import { DragDropManager, BackendFactory } from './interfaces'
 export function createDragDropManager<C>(
 	backend: BackendFactory,
 	context: C,
+	debugMode?: boolean,
 ): DragDropManager<C> {
-	return new DragDropManagerImpl(backend, context)
+	return new DragDropManagerImpl(backend, context, debugMode)
 }

packages/documentation-examples/package.json

@@ -18,11 +18,13 @@
 	},
 	"dependencies": {
 		"@types/faker": "^4.1.4",
+		"@types/query-string": "^6.1.1",
 		"@types/styled-components": "^4.0.3",
 		"dnd-core": "^6.0.0",
 		"faker": "^4.1.0",
 		"immutability-helper": "^2.8.1",
 		"lodash": "^4.17.11",
+		"query-string": "^6.2.0",
 		"react-dnd": "^6.0.0",
 		"react-dnd-html5-backend": "^6.0.0",
 		"styled-components": "^4.0.3"

packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx

@@ -3,6 +3,8 @@ import { DragDropContextProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
 import Dustbin from '../Single Target/Dustbin'
 import Box from '../Single Target/Box'
+import { isDebugMode } from '../../isDebugMode'
+
 const {
 	default: Frame,
 	FrameContextConsumer,
@@ -13,7 +15,11 @@ class FrameBindingContext extends React.Component {
 		return (
 			<FrameContextConsumer>
 				{({ window }: any) => (
-					<DragDropContextProvider backend={HTML5Backend} context={window}>
+					<DragDropContextProvider
+						backend={HTML5Backend}
+						context={window}
+						debugMode={isDebugMode()}
+					>
 						{this.props.children}
 					</DragDropContextProvider>
 				)}

packages/documentation-examples/src/index.ts

@@ -16,6 +16,7 @@ import customizeDropEffects from './05 Customize/Drop Effects'
 import customizeHandlesAndPreviews from './05 Customize/Handles and Previews'
 import otherNativeFiles from './06 Other/Native Files'
 
+export * from './isDebugMode'
 export const componentIndex = {
 	chessboard,
 	'dustbin-single-target': dustbinSingleTarget,

packages/documentation-examples/src/isDebugMode.ts

@@ -0,0 +1,6 @@
+import { parse } from 'query-string'
+
+export function isDebugMode() {
+	const queryObject = parse(window.location.search)
+	return queryObject.debugMode !== undefined
+}

packages/documentation/package.json

@@ -4,6 +4,7 @@
   "version": "6.0.0",
   "private": true,
   "dependencies": {
+    "@types/query-string": "^6.1.1",
     "@types/react": "^16.4.18",
     "@types/react-dom": "^16.0.9",
     "@types/react-helmet": "^5.0.7",
@@ -26,6 +27,7 @@
     "gatsby-transformer-remark": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.8",
     "prismjs": "^1.15.0",
+    "query-string": "^6.2.0",
     "react": "^16.6.1",
     "react-dnd": "^6.0.0",
     "react-dnd-documentation-examples": "^6.0.0",

packages/documentation/src/components/header.tsx

@@ -2,8 +2,19 @@ import * as React from 'react'
 import styled from 'styled-components'
 import NavBar from './navbar'
 
-const Header: React.SFC = () => (
+export interface HeaderProps {
+	debugMode?: boolean
+}
+
+const DebugModeFlag = () => (
+	<a className="github-fork-ribbon" data-ribbon="Debug Mode" title="Debug Mode">
+		Debug Mode
+	</a>
+)
+
+const Header: React.SFC<HeaderProps> = ({ debugMode }) => (
 	<Container>
+		{debugMode ? <DebugModeFlag /> : null}
 		<NavBar />
 	</Container>
 )

packages/documentation/src/components/layout.tsx

@@ -3,6 +3,8 @@ import * as React from 'react'
 import Helmet from 'react-helmet'
 import styled from 'styled-components'
 import HTML5Backend from 'react-dnd-html5-backend'
+import { isDebugMode } from 'react-dnd-documentation-examples'
+
 import { DragDropContextProvider } from 'react-dnd'
 import PageBody from './pagebody'
 import Sidebar from './sidebar'
@@ -26,6 +28,7 @@ const Layout: React.SFC<LayoutProps> = props => {
 		.startsWith('/examples')
 	const sidebarItems: PageGroup[] = isExampleUrl ? ExamplePages : APIPages
 	const hideSidebar = props.hideSidebar || sitepath === '/about'
+	const debugMode = isDebugMode()
 	return (
 		<>
 			<Helmet
@@ -37,9 +40,13 @@ const Layout: React.SFC<LayoutProps> = props => {
 				link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }]}
 			>
 				<html lang="en" />
+				<link
+					rel="stylesheet"
+					href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css"
+				/>
 			</Helmet>
-			<Header />
-			<DragDropContextProvider backend={HTML5Backend}>
+			<Header debugMode={debugMode} />
+			<DragDropContextProvider backend={HTML5Backend} debugMode={debugMode}>
 				<ContentContainer>
 					<PageBody hasSidebar={sitepath !== '/about'}>
 						{hideSidebar ? null : (

packages/documentation/src/pages/404.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react'
 import Layout from '../components/layout'
-import { DragDropContextProvider } from 'react-dnd'
-import Backend from 'react-dnd-html5-backend'
 
+/**
+ * TODO: Add some fancy drag/droppable stuff here
+ */
 const NotFoundPage: React.SFC = () => (
 	<Layout hideSidebar={true}>
-		<DragDropContextProvider backend={Backend}>
-			<h1>NOT FOUND</h1>
-			<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-		</DragDropContextProvider>
+		<h1>NOT FOUND</h1>
+		<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
 	</Layout>
 )
 

packages/react-dnd/src/DragDropContext.tsx

@@ -32,24 +32,26 @@ export const { Consumer, Provider } = React.createContext<DragDropContext<any>>(
 export function createChildContext<BackendContext>(
 	backend: BackendFactory,
 	context?: BackendContext,
+	debugMode?: boolean,
 ) {
 	return {
-		dragDropManager: createDragDropManager(backend, context),
+		dragDropManager: createDragDropManager(backend, context, debugMode),
 	}
 }
 
 export interface DragDropContextProviderProps<BackendContext> {
 	backend: BackendFactory
 	context?: BackendContext
+	debugMode?: boolean
 }
 
 /**
  * A React component that provides the React-DnD context
  */
 export const DragDropContextProvider: React.SFC<
 	DragDropContextProviderProps<any>
-> = ({ backend, context, children }) => {
-	const contextValue = createChildContext(backend, context)
+> = ({ backend, context, debugMode, children }) => {
+	const contextValue = createChildContext(backend, context, debugMode)
 	return <Provider value={contextValue}>{children}</Provider>
 }
 
@@ -62,9 +64,14 @@ export const DragDropContextProvider: React.SFC<
 export function DragDropContext(
 	backendFactory: BackendFactory,
 	backendContext?: any,
+	debugMode?: boolean,
 ) {
 	checkDecoratorArguments('DragDropContext', 'backend', backendFactory)
-	const childContext = createChildContext(backendFactory, backendContext)
+	const childContext = createChildContext(
+		backendFactory,
+		backendContext,
+		debugMode,
+	)
 
 	return function decorateContext<
 		TargetClass extends
@@ -89,9 +96,7 @@ export function DragDropContext(
 				return this.ref.current
 			}
 
-			public getManager() {
-				return childContext.dragDropManager
-			}
+			public getManager = () => childContext.dragDropManager
 
 			public render() {
 				return (

yarn.lock

@@ -1893,6 +1893,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
   integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==
 
+"@types/query-string@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-6.1.1.tgz#1cfd9209c8dbd91b940192c8a2b7005d2a743e6f"
+  integrity sha512-wRUeF7KN2yxCMw4VoXzPh3GWStbGaiyVjyX22fG7mpSzt6etLvsA2S0g0IuGeXGwVNIlztzVmGP6AxZMmYTQhw==
+
 "@types/reach__router@^1.0.0":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.2.2.tgz#1bd96626c2866a61937758ef6be2f06309124805"
@@ -13362,6 +13367,14 @@ query-string@^5.0.1:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.2.0.tgz#468edeb542b7e0538f9f9b1aeb26f034f19c86e1"
+  integrity sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -15152,6 +15165,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-argv@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"