mobxjs / mobx-reactive2015-demo Goto Github PK

fresh git clone from github, npm install && npm start.

Node was updated yesterday (2016/02/12), so it's currently the most up-to-date version.

OS: OSX 10.11.1

Something I'm doing wrong?

[HMR] Waiting for update signal from WDS...
index.js:1 Starting mobservable-react-devtools...
warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Canvas`.warning @ warning.js:45
invariant.js:46 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Canvas`.
index.js:1 Initialized mobservable-react-devtools.

Hey, this just cost me a ton of time.

in domain-state.js, it looks like someone put in all the work required to get hot reloading working (the code is certainly very deliberate), with state serialization and restore on hot reload. However, it's only working by coincidence. I just spent a few hours going off of this example to try to get hot reload working of mobx stores working, and it was all a waste of time, so I am a bit irked.

Despite the very particular strategy in the code, it's doing nothing except preventing a full page reload with module.hot.accept(). If you remove all but these lines, you will see no difference in the code. This is the first proof.

Essentially what's happening is you get a new store in memory, but all the react components are still pointed to the old instance of the store. It looks like the state of the store is being serialized and used in the new code, but in reality, the new code is being ignored, so naturally the state is preserved.

I also have a second more elaborate proof. If you add some behavior to the store, like so (in domain-state.js)

extendObservable(store, { boxCount: function() { return store.boxes.length; } });

and then bind this into the view (canvas.js)

<div style={{color: 'red', position: 'absolute', zIndex: 10}}>{store.boxCount}</div>

and now we can see in red the number "2" when the page reloads. (you'll have to manually refresh, since hot reload isn't working...but that's not even the 2nd proof).

If you change the computed function, say, returning store.boxes.length * 2, then this change will have no effect via hot reload, it requires a full refresh. This is the real 2nd proof. This is exactly the type of change you would want to make in a store on the fly.

There are other guides on how to do hot reload, so probably best that you at least add a comment in domain-state.js that it is not working and should not be followed for the goal of getting hot reload on store js code working.

Because nodejs v8 add package-lock.json as default action when npm install