whetstone / redux-devtools-diff-monitor Goto Github PK

Cannot require redux-devtools-diff-monitor in node with webpack:

/Users/panferov-s/Workspace/alfa-listing/node_modules/redux-devtools-diff-monitor/node_modules/mousetrap/mousetrap.js:1021
}) (window, document);
    ^
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/panferov-s/Workspace/alfa-listing/node_modules/redux-devtools-diff-monitor/node_modules/mousetrap/mousetrap.js:1021:5)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/panferov-s/Workspace/alfa-listing/node_modules/redux-devtools-diff-monitor/lib/index.js:33:18)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)

Now DiffMonitor has position fixed, so it overflow user content.
Is it possible to set it's style passing props?

Ctrl+] is not accessible on a keyboard with AZERTY layout.

(Part of) Europe says thanks !
Looks awesome anyway :)

Change was not made in master, but was released on NPM in the last day.

Reverting to 4.0.1 fixes the issue.

When an action is fired the entire app slows down while the devtools updates.

In #24 there was also some discussion of slowness. Apparently the diffing is expensive.

This is the most useful devtools monitor so far, would love to see this slowness resolved so that it is usable.

We should allow users to pass shortcut key(s) as a prop.

Following scenarios would be much eased if we can check action as object like what LogMonitor do.

When the monitor is updated, I got warning

Unsupported CSS property "WebkitUserSelect$" in component "ManifestActionComponent"

I'm using Firefox 44.0.2 on Mac OS X El Capitian

Hello! I'm trying to use this monitor with some Immutable stores. The changes are caught just fine but they are not displayed correctly, like this:

timeline._root.entries.0.1: [] [3,50,1,4,52,51] 
timeline._root.entries.1.1: 0 1 
timeline._root.entries.2.1: 0 1 

Since the default LogMonitor display Immutable stores correctly, do you think that should be possible to implement the same algorithm here too?

First of all thanks for creating this. It has been really useful in helping me to understand what is happening with my redux state.

Unfortunately, it has also been grinding my application to halt. I have tracked this down to repeated calculation of the state diff and have implemented a very simple fix for my purposes. The fix that I came up with was to not render any of the action reports when the tool is not being displayed.

A more thorough solution might involve caching the calculation of the state diffs in some manner; but I don't have time to into that right now.

If you'd like to make use of the changes I made they can be seen at benarmston@3b563ab. I can create a pull request for these, or you are free to copy them across as you prefer. They were made against branch 2.0.3.

ERROR in ./~/redux-devtools-diff-monitor/lib/index.js
Module not found: Error: Cannot resolve module 'aphrodite' in /Users/<project-redacted>/node_modules/redux-devtools-diff-monitor/lib
 @ ./~/redux-devtools-diff-monitor/lib/index.js 27:17-37

I am getting this error after I updated from 4.0.1 to 5.0.3

Installing redux-devtools-diff-monitor 4.0.0 from npm leaves a broken install which is missing the built files in lib/

Workaround is to go into node_modules/redux-devtools-diff-monitor and run:
npm install
npm run build

Found in console log:

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

Hi:

When installing the diff monitor with npm install redux-devtools-diff-monitor --save on Windows, npm reported the following error.

The installed version of diff monitor was v5.0.5, but it seems to be using a version of khan/inline-style-prefixer that no longer exist? I believe this was caused by the transitive dependency of the [email protected] library.

When using this crippled setup, the Chrome browser will simply hang with 100% CPU.

Any idea?

> npm install redux-devtools-diff-monitor --save
npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:213:12)
npm WARN addRemoteGit     at emitTwo (events.js:87:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:172:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:818:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:319:11)
npm WARN addRemoteGit     at emitOne (events.js:77:13)
npm WARN addRemoteGit     at Socket.emit (events.js:169:7)
npm WARN addRemoteGit     at Pipe._onclose (net.js:469:12)
npm WARN addRemoteGit  khan/inline-style-prefixer#f41f3040ac27eeec3b7a1fb7450ddce250cac4e4 resetting remote C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\git-github-com-khan-inline-style-prefixer-git-f41f3040ac27eeec3b7a1fb7450ddce250cac4e4-497663b6 because of error: { [Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit ]
npm WARN addRemoteGit   killed: false,
npm WARN addRemoteGit   code: 1,
npm WARN addRemoteGit   signal: null,
npm WARN addRemoteGit   cmd: 'git -c core.longpaths=true config --get remote.origin.url' }
npm ERR! git clone --template=C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/khan/inline-style-prefixer.git C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\git-github-com-khan-inline-style-prefixer-git-f41f3040ac27eeec3b7a1fb7450ddce250cac4e4-497663b6: Cloning into bare repository 'C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\git-github-com-khan-inline-style-prefixer-git-f41f3040ac27eeec3b7a1fb7450ddce250cac4e4-497663b6'...
npm ERR! git clone --template=C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/khan/inline-style-prefixer.git C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\git-github-com-khan-inline-style-prefixer-git-f41f3040ac27eeec3b7a1fb7450ddce250cac4e4-497663b6: fatal: unable to connect to github.com:
npm ERR! git clone --template=C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/khan/inline-style-prefixer.git C:\Users\test\AppData\Roaming\npm-cache\_git-remotes\git-github-com-khan-inline-style-prefixer-git-f41f3040ac27eeec3b7a1fb7450ddce250cac4e4-497663b6: github.com[0: 192.30.253.112]: errno=Invalid argument
[email protected] C:\test\app
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected]  (git+https://github.com/khan/inline-style-prefixer.git#f41f3040ac27eeec3b7a1fb7450ddce250cac4e4)
  └── [email protected]

Right now only action text is clickable and I often can't unfold action by one click. I think that it's better to make whole action panel clickable.

A color: '#FFF' could cascade to the monitor, rendering it unusable.

Redux DevTools beta is out with breaking changes. For monitors, there are a few of them:

• Instead of receiving action creators in props, you now get dispatch in props and have to import { ActionCreators } from 'redux-devtools' to get access to commit, rollback, etc
• The action props are now indexed by ID, so instead of stagedActions and skippedActions you get actionsById, stagedActionIds and skippedActionIds. toggleAction() now accepts id instead of index. To grab vanilla action object by ID, use this.props.actionsById[id].action.
• The monitor now has to export a reducer static property. For what it's worth, it could be a no-op function, but it must exist. In more interesting case, it will be (state, action, props) => nextState function where state is the monitor's own state available to it as monitorState prop. You are free to use it to let monitor react to any action and remember any data. This is why setMonitorState prop is gone.
• Monitors shouldn't take care anymore of isVisible (hiding or showing themselves) or doing so on special key presses. We're moving towards a composable monitor model, where you'd use a special dock monitor to contain other monitor. Therefore monitors should only be worried about rendering themselves.

The diff of the default LogMonitor can serve as an inspiration for these changes.
You can try the new version of Redux DevTools on the next branch.

Please let me know if you find any issues. The API might change slightly in the final release, but this is pretty close, and it involves some work, so let me know if you need any help.

I'm trying to use redux-devtools-diff-monitor with React v0.14.0-rc1 and redux-devtools v2.1.2.

I'm getting the following error:

To reproduce the issue:

$ git clone [email protected]:moroshko/accessible-colors.git
$ cd accessible-colors
$ git checkout diff-monitor
$ npm install
$ npm start

Open http://localhost:3000/dist/index.html in a browser and you'll see the error above.

Note that if I change DiffMonitor to LogMonitor, everything works fine.

Tried this monitor and got more problems than help I wanted.

First, I'm using React server side rendering and 'mousetrap' could not bind to window since it not exist.
Second, it's using Redux 2, but I see commits from 13 days ago and redux got to version 3 about a month ago.

It's promising, if I got time I'll update myself.