Comments (19)
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.
from react-transform-jspm-hmr.
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.
from react-transform-jspm-hmr.
I can confirm this one works... Also I actually think you can directly use @gaearon 's
from react-transform-jspm-hmr.
@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
from react-transform-jspm-hmr.
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.
from react-transform-jspm-hmr.
@gaearon Specifically on react exports?
from react-transform-jspm-hmr.
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.
from react-transform-jspm-hmr.
In other words, doing it for all exported functions is fine.
from react-transform-jspm-hmr.
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.
from react-transform-jspm-hmr.
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.
from react-transform-jspm-hmr.
I would also specifically leave out the webpack specific hot variable.
from react-transform-jspm-hmr.
What hot
variable are you referring to?
from react-transform-jspm-hmr.
https://github.com/gaearon/react-transform-hmr/blob/master/src/index.js
line 27
from react-transform-jspm-hmr.
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
?
from react-transform-jspm-hmr.
@gaearon I'm currently converting react-hot-boilerplate
to use jspm.
Is there another issue we can take this discussion to?
from react-transform-jspm-hmr.
gaearon/react-hot-boilerplate#61? This is where it’s going.
from react-transform-jspm-hmr.
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"
]
}
]
}
]
]
}
}
}
...
from react-transform-jspm-hmr.
@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
from react-transform-jspm-hmr.
@alexisvincent great to hear you're thinking through this stuff. Just let me know if there is anything I can do to assist here.
from react-transform-jspm-hmr.
Related Issues (3)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-transform-jspm-hmr.