Merge pull request #368 from goatslacker/debug-component

A debug component

.eslintrc

@@ -4,6 +4,7 @@
  "browser": true,
  "es6": true
  },
+ "parser": "babel-eslint",
  "ecmaFeatures": {
  "modules": true,
  "jsx": true
@@ -25,7 +26,7 @@
  }],
  "no-use-before-define": 2,
  // possible errors
- "comma-dangle": [2, "never"],
+ "comma-dangle": [0, "always"],
  "no-cond-assign": [2, "always"],
  "no-debugger": 1,
  "no-alert": 1,

package.json

@@ -15,6 +15,7 @@
  "babel": "^5.6.6",
  "babel-core": "^5.6.6",
  "babel-loader": "^5.1.4",
+ "babel-eslint": "3.1.18",
  "chai": "^2.3.0",
  "coveralls": "^2.11.2",
  "envify": "^3.4.0",

src/alt/index.js

@@ -24,7 +24,15 @@ class Alt {
  }
 
  dispatch(action, data, details) {
- this.batchingFunction(() => this.dispatcher.dispatch({ action, data, details }))
+ this.batchingFunction(() => {
+ const id = Math.random().toString(18).substr(2, 16)
+ return this.dispatcher.dispatch({
+ id,
+ action,
+ data,
+ details
+ })
+ })
  }
 
  createUnsavedStore(StoreModel, ...args) {

src/utils/Debugger.js

@@ -0,0 +1,30 @@
+/*eslint-disable */
+import DebugActions from './debug/DebugActions'
+import DispatcherDebugger from './DispatcherDebugger'
+import React from 'react'
+import StoreExplorer from './StoreExplorer'
+
+class Debugger extends React.Component {
+ componentDidMount() {
+ DebugActions.setAlt(this.props.alt)
+ }
+
+ renderInspectorWindow() {
+ return this.props.inspector
+ ? <this.props.inspector />
+ : null
+ }
+
+ render() {
+ return (
+ <div>
+ <h1>Debug</h1>
+ <DispatcherDebugger alt={this.props.alt} />
+ <StoreExplorer alt={this.props.alt} />
+ {this.renderInspectorWindow()}
+ </div>
+ )
+ }
+}
+
+export default Debugger

src/utils/DispatcherDebugger.js

@@ -0,0 +1,196 @@
+/*eslint-disable */
+import React from 'react'
+import { Column, Table } from 'fixed-data-table'
+import makeFinalStore from './makeFinalStore'
+import connectToStores from './connectToStores'
+
+import FixedDataTableCss from './debug/FixedDataTableCss'
+
+import DebugActions from './debug/DebugActions'
+import DispatcherStore from './debug/DispatcherStore'
+
+class DispatcherDebugger extends React.Component {
+ constructor() {
+ super()
+
+ this.getDispatch = this.getDispatch.bind(this)
+ this.renderName = this.renderName.bind(this)
+ this.renderReplay = this.renderReplay.bind(this)
+ this.renderRevert = this.renderRevert.bind(this)
+ this.view = this.view.bind(this)
+ }
+
+ componentDidMount() {
+ const finalStore = makeFinalStore(this.props.alt)
+ finalStore.listen(state => DebugActions.addDispatch(state.payload))
+ DebugActions.setAlt(this.props.alt)
+ }
+
+ clear() {
+ DebugActions.clear()
+ }
+
+ getDispatch(idx) {
+ const dispatch = this.props.dispatches[idx]
+ return {
+ id: dispatch.id,
+ action: dispatch.action,
+ data: dispatch.data,
+ details: dispatch.details,
+ recorded: dispatch.recorded,
+ dispatchedStores: dispatch.dispatchedStores,
+ mtime: this.props.mtime,
+ }
+ }
+
+ loadRecording() {
+ const json = prompt('Give me a serialized recording')
+ if (json) DebugActions.loadRecording(json)
+ }
+
+ revert(ev) {
+ const data = ev.target.dataset
+ DebugActions.revert(data.dispatchId)
+ }
+
+ saveRecording() {
+ DebugActions.saveRecording()
+ }
+
+ startReplay() {
+ DebugActions.startReplay()
+ DebugActions.replay()
+ }
+
+ stopReplay() {
+ DebugActions.stopReplay()
+ }
+
+ toggleLogDispatches() {
+ DebugActions.toggleLogDispatches()
+ }
+
+ togglePauseReplay() {
+ DebugActions.togglePauseReplay()
+ }
+
+ toggleRecording() {
+ DebugActions.toggleRecording()
+ }
+
+ view(ev) {
+ const data = ev.target.dataset
+ const dispatch = this.props.dispatches[data.index]
+ DebugActions.selectData(dispatch)
+ }
+
+ renderName(name, _, dispatch, idx) {
+ return (
+ <div
+ data-index={idx}
+ onClick={this.view}
+ style={{ cursor: 'pointer' }}
+ >
+ {name}
+ </div>
+ )
+ }
+
+ renderReplay() {
+ if (this.props.inReplayMode) {
+ return (
+ <span>
+ <span onClick={this.togglePauseReplay}>
+ {this.props.isReplaying ? 'Pause Replay' : 'Resume Replay'}
+ </span>
+ {' | '}
+ <span onClick={this.stopReplay}>
+ Stop Replay
+ </span>
+ </span>
+ )
+ }
+
+ return (
+ <span onClick={this.startReplay}>
+ Start Replay
+ </span>
+ )
+ }
+
+ renderRevert(a, b, dispatch) {
+ return (
+ <div>
+ <span
+ data-dispatch-id={dispatch.id}
+ onClick={this.revert}
+ style={{ cursor: 'pointer' }}
+ >
+ Revert
+ </span>
+ <span dangerouslySetInnerHTML={{
+ __html: this.props.currentStateId === dispatch.id ? '&#10003;' : ''
+ }} />
+ </div>
+ )
+ }
+
+ render() {
+ return (
+ <div>
+ <h3>Dispatches</h3>
+ <FixedDataTableCss />
+ <div>
+ <span onClick={this.toggleRecording}>
+ {this.props.isRecording ? 'Stop Recording' : 'Record'}
+ </span>
+ {' | '}
+ <span onClick={this.clear}>
+ Clear
+ </span>
+ {' | '}
+ <span onClick={this.saveRecording}>
+ Save
+ </span>
+ {' | '}
+ <span onClick={this.loadRecording}>
+ Load
+ </span>
+ {' | '}
+ {this.renderReplay()}
+ </div>
+ <Table
+ headerHeight={30}
+ height={480}
+ rowGetter={this.getDispatch}
+ rowHeight={30}
+ rowsCount={this.props.dispatches.length}
+ width={320}
+ >
+ <Column
+ cellRenderer={this.renderName}
+ dataKey="action"
+ label="Name"
+ width={250}
+ />
+ <Column
+ cellRenderer={this.renderRevert}
+ dataKey=""
+ label="Revert"
+ width={70}
+ />
+ </Table>
+ </div>
+ )
+ }
+}
+
+export default connectToStores({
+ getPropsFromStores() {
+ return DispatcherStore.getState()
+ },
+
+ getStores() {
+ return [DispatcherStore]
+ }
+}, DispatcherDebugger)

src/utils/DispatcherRecorder.js

@@ -110,8 +110,9 @@ DispatcherRecorder.prototype.replay = function (replayTime, done) {
 DispatcherRecorder.prototype.serializeEvents = function () {
  const events = this.events.map((event) => {
  return {
+ id: event.id,
  action: event.action,
- data: event.data
+ data: event.data || {}
  }
  })
  return JSON.stringify(events)
@@ -129,6 +130,7 @@ DispatcherRecorder.prototype.loadEvents = function (events) {
  data: event.data
  }
  })
+ return parsedEvents
 }
 
 export default DispatcherRecorder