mozilla / reflex

Functional reactive UI library
MIT License
367 stars 20 forks source link

Fix hot reloading #35

Closed gaearon closed 8 years ago

gaearon commented 9 years ago

This fixes hot reloading as requested in https://github.com/gaearon/react-hot-loader/issues/191.

I removed React Hot Loader because it is irrelevant here. Instead, I'm using vanilla Webpack Hot Module Replacement API.

Interesting bits:

You can now update anything in ./counter (both view and updater functions) and it should Just Work.

Cheers! Love Reflex and eager to play more with it.

Gozala commented 9 years ago

This fixes hot reloading as requested in gaearon/react-hot-loader#191.

Thank you so much @gaearon!!

I removed React Hot Loader because it is irrelevant here. Instead, I'm using vanilla Webpack Hot Module Replacement API.

I just read web pack's hot module replacement API and I think I finally understand how diff pieces fit together. So does react-hot-loader just pre-wraps each module with a module.hot.accept hook that updates component implementations then ?

I split types because we don't want to reevaluate them—this seems to screw things up due to their previous versions being used somewhere inside Reflex and the reliance on instanceof checks.

Reflex does not actually hold's on to any types only thing that it maybe holding with older types is a last state model, which could misbehave if model type has changed. I'll try to investigate to see what exactly is going on there.

I changed import to let assignment because I need to update it continually in response to new module versions. Conceivably one could write a Webpack loader to turn a module into observable of exports instead but I don't think it's worth bothering.

I'm not sure if this is what you are suggesting, but I wonder if I could write a web pack loader would transform top level module like this:

`module.factory = function() { ${source} }
 if (module.hot) {
  module.hot.accept("*", function() { module.factory() });
}
module.factory();
`

The reason I'm was interested doing it react-hot-loader level though is because you could still use plain react components in view functions and for those I imagine I would need to do what react-hot-loader does.

gaearon commented 9 years ago

So does react-hot-loader just pre-wraps each module with a module.hot.accept hook that updates component implementations then ?

Yep.

I'm not sure if this is what you are suggesting, but I wonder if I could write a web pack loader would transform top level module like this:

I don't quite understand your example.

The reason I'm was interested doing it react-hot-loader level though is because you could still use plain react components in view functions and for those I imagine I would need to do what react-hot-loader does.

If that is the case, yes. Still, I wouldn't advise using React Hot Loader for this. I'm planning to deprecate RHL in favor of babel-plugin-react-transform + react-transform-webpack-hmr.