Status

[alexisvincent]

Whats the status on this? Does it work in jspm 17?

[tyscorp]

I'm not sure if this works with jspm 17.

I don't really plan on supporting this much further, as @gaearon is planning a different approach for the future which looks like it will work with jspm 17's hmr.

[gaearon]

I don’t know much about jspm but I want to support it right in React Hot Loader 3 if possible. But for this, I need somebody to help with looking at my approach and figuring out what needs to be done to have support for jspm as well.

[alexisvincent]

I can confirm this one works... Also I actually think you can directly use @gaearon 's

[alexisvincent]

@gaearon I'm interested in getting a jspm working properly with hot reloading. So I can give some limited time into this. I just got RedBox and hmr working with jspm

[gaearon]

Basically the approach I’m taking in RHL3 is to tag any exported function with a __source property that includes fileName and exportName. A separate bundler-independent runtime part then uses that info.

react-hot-loader/webpack will add __source via Webpack loader API by transforming text files and adding module.exports enumeration. Another option I plan to add is react-hot-loader/babel which would put __source as a Babel transform. If most jspm users already use Babel, then I guess no special support will be necessary.

[alexisvincent]

@gaearon Specifically on react exports?

[gaearon]

Preferably but this really doesn’t matter because the transform is not React-specific. There’s no harm in putting __source: { fileName, exportName } on functions as well even if this info is generally not used. It’s very hard to distinguish components from regular functions, especially after 0.14, so I think not even trying is better.

[gaearon]

In other words, doing it for all exported functions is fine.

[tyscorp]

It looks like the same approach as react-hot-loader/webpack could be implemented fairly similarly as a jspm plugin for jspm users that don't use Babel.

[gaearon]

If so, I think we’d like to keep this in the RHL repo. I’m leaning towards a monorepo because I’m tired of issues scattered across semi-related projects.

[alexisvincent]

I would also specifically leave out the webpack specific hot variable.

[gaearon]

What hot variable are you referring to?

[alexisvincent]

https://github.com/gaearon/react-transform-hmr/blob/master/src/index.js line 27

[gaearon]

Oh, the new version won’t be using react-transform-hmr.

The new Babel plugin (it’s not written yet) will do exactly what the new Webpack plugin does: tag every exported function with __source, nothing more than that.

In case of Webpack, the consumer would need to use HMR API directly. I presume jspm has something similar, if it’s not called module.hot?

[tyscorp]

@gaearon I'm currently converting react-hot-boilerplate to use jspm.

Is there another issue we can take this discussion to?

[gaearon]

https://github.com/gaearon/react-hot-boilerplate/pull/61? This is where it’s going.

[alexisvincent]

Looks good. Basically jspm doesn't have any hmr system at the moment. However a lot of people are using https://github.com/capaj/systemjs-hot-reloader. The approch is basically to:

• listen to local changes
• send the file name over to the client and get systemjs-hot-reloader to recursively bust the local registry of all modules up the tree and then reimport the root module.

I have a feeling @guybedford is going to build this into systemjs?

@tyscorp RedBox works :D So you can include it in your boilerplate:

SystemJS.config({
  transpiler: "plugin-babel",
  meta: {
    "*.js": {
      "babelOptions": {
        "stage1": true,
        "plugins": [
          [
            "react-transform",
            {
              "transforms": [
                {
                  "transform": "react-transform-jspm-hmr"
                },
                {
                  "transform": "react-transform-catch-errors",
                  "imports": [
                    "react",
                    "redbox-react"
                  ]
                }
              ]
            }
          ]
        ]
      }
    }
  }
...

[alexisvincent]

@tyscorp I also have a feeling directly using @gaearon's react-transform-hmr will work, unless you're using ReactHotLoader 3. Assuming theres an alpha

[guybedford]

@alexisvincent great to hear you're thinking through this stuff. Just let me know if there is anything I can do to assist here.