React-hot-loader compitability

[ArmorDarks]

Here stated that it is possible to use react-hot-loader with this project.

However, I see that react-hot-loader changed major version. Is it still compatible with systemjs-hot-reloader? I'd like to test it out, but because of complete lack of documentation how to add it, I can't figure it out (yeap, I'm too dump for those things. Yet).

Can someone elaborate on this? Thanks!

[alexisvincent]

Looks like v3 is finally out. Haven't had time to write docs yet. But basically, its just a babel transform.

Follow the steps here: https://github.com/gaearon/react-hot-loader/tree/master/docs

In summary, its something like this:

1. Install react-hot-loader@next
2. Add react-hot-loader/babel to your babel plugins
3. import react-hot-loader/patch in your app BEFORE your app code runs. You could also import it before you import your app if you want to.
4. wrap your top level component in AppComponent imported via import { AppContainer } from 'react-hot-loader'.

Last I checked that worked. I did run into an issue however where it only worked if your top level component used JSX. You can use normal react functions in the rest of your app. But otherwise this should give you persistent react state :)

Let me know how it works for you

[ArmorDarks]

Thanks for the instructions!

Btw, import { AppContainer } from 'react-hot-loader' no longer works in SystemJS 0.20.0.

So we need to do this instead:

import rhl from 'react-hot-loader'

const { AppContainer } = rhl

However, while it doesn't throw any errors, I tried to make counter ticking on index page, and it gets resetted after hot reloading. So, it doesn't work.

Instructions and official example shows, that we also need to add something like

if (module.hot) module.hot.accept('./App', () => render(App));

I believe module is hydrate somewhere from webpack, thus it doesn't work in JSPM.

Those changes were introduced in v3, so I think it will no longer work that easily for JSPM.

[NickPadilla]

Hello,

I have this all working with JSPM.

What they are doing is just ensuring that the HMR only works under development scenarios. There is only filtering logic there, use x for dev and y for prod. We can easily use JSPM to map our requirements. You just have to add this to your jspm.config.js - since it will work well for both dev/prod.

 packages: {
    "your-app": {
....
    map: {
          "react-hot-loader-patch": {
              "~production": "npm:react-hot-loader@next/lib/patch.dev.js",
              "production": "npm:react-hot-loader@next/lib/patch.prod.js"
          },
          "react-hot-loader-container": {
              "~production": "npm:react-hot-loader@next/lib/AppContainer.dev",
              "production": "npm:react-hot-loader@next/lib/AppContainer.prod"
          }
      }
  }

Then you just import the two like so..

import 'react-hot-loader-patch'
import AppContainer from 'react-hot-loader-container'

The only problem here is the fact we have to use the @next qualifier here - so once they are general release this will have to change. If I missed something so that we don't have to use the qualifier, then please let us know.

[alexisvincent]

Apologies that I haven't been present. Have major deadlines for Friday. Will be pushing forwards next week.

@ArmorDarks you don't need that. The systemjs mechanics are such that this is baked in. Everything should still work ATM. But you may need to use JSX at the top level (due to a bug in react-hot-loader).