calesce / redux-slider-monitor

A custom monitor for Redux DevTools to replay recorded Redux actions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React 0.14 support?

laurentvd opened this issue · comments

Love this kind of monitor. It is what you need 90% of the times, well done. I'm currently building an app using React 0.14 beta and it is giving some warnings about getDOMNode and findDOMNode. Are there any plans to make it 0.14 compatible?

Thanks! I haven't played with 0.14 yet, so I hadn't seen this. I'm using react-slider, but had a lot of things I wanted to change (such as making the styles all inline so DevTools users don't have to add their own). I'll take a look this evening to see whether I can remove the calls to getDOMNode and findDOMNode.

Yeah I guess the real problem lies within react-slider. You could consider switching to a simple <input type="range" /> as this is a dev only tool and all devs use modern browsers ;-)

That's a good point! I assumed those were not style-able, similar to <select>. That would make things much simpler. Looking here, I see a lot of good ideas 😸 Thanks!

@laurentvd:
I took a look at using the HTML slider and while it's very simple, styling it requires pseudo-element selectors such as input[type=range]::-webkit-slider-thumb, which aren't possible using inline styles. I want to follow Redux-Devtools and be able to let people use its themes here, so I can't import those themes in CSS without duplicating all of them by hand. I'll probably stick with the current custom slider for now.

In the meantime, I'll try to find a way to remove the calls to findDOMNode. They're used to figure out which parts of the slider should trigger change events, using DOM node sizes. I might be able to calculate those without the DOM node sizes but I'm not sure (maybe I can emulate it using window.innerWidth?). If that's not possible, hopefully 0.14 comes out soon so I can just import ReactDOM from 'react-dom' instead.

Right, I didn't know that you could only style it like that. Ah well, I'll try to ignore the warnings for now and wait until 0.14 is officially released ;-) Thanks anyway.

You can still find dom nodes in 0.14, I'm pretty sure its just a different API now (because they split react-core from react-dom)

Hey, I pushed this in the react-0.14 branch, and published a 1.0 beta release, which also includes the updates to the new DevTools API, so it'll require DevTools 3.0 beta. Try out npm i redux-slider-monitor@1.0.0-beta-1 and let me know what you think!

I've got the same problem as vyorkin with the react-0.14 branch.
(Uncaught TypeError: _reactDom.findDOMNode is not a function)

In the meantime, I'll try to find a way to remove the calls to findDOMNode.

Maybe use this.refs.slider.getDOMNode(); instead of findDOMNode(this.refs.slider);?.
I tried that but ran into other problems. Wanted to help but can't fix it, sorry.

Were you using the counter example? I just noticed that I forgot to update to React 0.14 for that example, since I mostly test things out with the TodoMVC example.

1.0.0 is out, which supports React 0.14. Let me know how it goes!

Awesome, looks great!