Upgrade remotedev-app to v0.8 & New features

[jhen0409]

remotedev-app v0.8 have big refactor from v0.7, now we can better integrate into the RNDebugger.

New remotedev-app features

• Pausing and locking (See redux-devtools-extension v2.7.0)
• Better time travelling with changes right in the Graph Monitor (See redux-devtools-extension v2.8.0)
• Print the graph view of the app state or the changes log (See redux-devtools-extension v2.8.1) (NOTE It's doesn't have preview on Electron)
• ......

New reduxNativeDevToolsCompose

Refer to redux-devtools-extension, we provide a new way instead of reduxNativeDevTools and reduxNativeDevTools.updateStore:

const composeEnhancers = global.reduxNativeDevToolsCompose ?
  global.reduxNativeDevToolsCompose({
    /* options */
  }) :
  compose;
const enhancer = composeEnhancers(
  applyMiddleware(...middlewares)
);

Multi-store support

Now we can use reduxNativeDevTools for each store, and we can switch instances on monitor:

[zalmoxisus]

haha, agree that the outline around the slider monitor looks ugly, but it's for accessibility reason, so you can move between buttons and slider by pressing Tab. Otherwise you don't know what element is selected.

[jhen0409]

@zalmoxisus Ah, sounds good to me, I'll revert it. 👍

[zalmoxisus]

Maybe we can enhance rebass slider so it will have an outline only for the circle like material-ui does.

Of course we could juse use Material-UI slider and I tried it, but found rebass' themes better to extend and in future even to add a material design theme there as an option. So, we'll switch all the components to rebass.

[jhen0409]

@zalmoxisus, I think we can have a .connect function to let mobx-remotedev work. Do you think we should have alias __REDUX_DEVTOOLS_EXTENSION__.connect, or just add check for reduxNativeDevTools.connect to remotedev?

[zalmoxisus]

@jhen0409, Why not just to use window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ (instead of global.reduxNativeDevTools) also for Redux? So the same store can be inspected in the browser (with the extension) and React Native (with your app) without any changes? I was probably too fast renaming it from window.devToolsExtension. I suggested just to use something more generic like window.remotedev to make it more universal, but there wasn't any interest in that discussion.

Checking reduxNativeDevTools.connect inside remotedev lib could be also a solution, but there's not a big advantage instead of suggesting users to import the lib and specify the required parameters (host and port). Even for the extension the recommended way is to use the npm lib.

As a side note. The idea of remotedev project (not referring that lib only) is that users have a remote server, which offers them the ability to develop together. So you'll be able to share bugs and demos with your team just with few clicks without downloading and uploading files manually. Even more, the end-users can help developers without need to explain the bugs - just one click and you have everything.

Of course, those are more just ideas, there's still a lot of work in order to make that possible, and I was stuck making the extension performant and reliable. Also thanks for your help! Maybe we could raise also some support for our work :)

[jhen0409]

Why not just to use window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ (instead of global.reduxNativeDevTools

Actually I'm ready to add it, this way we can directly use npm package of redux-devtools-extension.

As a side note.

This is great idea, so recently I'm planing to use redux-remotedev in my team, this is why I made docker-remotedev-server, although it's still not really being used..

Also, currently the updates of react-native-debugger haven't get reports, just recently I didn't have enough time to look it.

Also thanks for your help! Maybe we could raise also some support for our work :)

Thanks @zalmoxisus! I'll continue to support it, because it's really useful for improve my development experience. :)

[zalmoxisus]

Also, currently the updates of react-native-debugger haven't get reports, just recently I didn't have enough time to look it.

It should work already if you use remotede-app's middleware. And remotedev-slider shows them when appear: