Steal-HMR
Frictionless hot module replacement for apps loaded with StealJS
What is it
StealJS is a great module loader on top of System.js that allows you to load ES6/CJS/AMD modules right inside your browser while working with NPM packages too.
And Steal-HMR is a small add-on for StealJS/System.js that allow to tune hot module replacement nicely.
Hot module replacement/reloading with StealJS/System.js works actually faster (in terms of DX) than alternative solutions for example Webpack. Because there is no need to prepare something (for example diff bundle) on on server side, it just loads only changed file(s) and replaces already loaded modules using SystemJS mechanics.
CanJS UI framework
This demo shows hot reloading implemented with Steal-HMR forInstall
npm install steal-hmr
Usage
NB! To use HMR module you need something that will notify it about file changes. This example uses Watchalive Dev Server that generously provides HMR not only with a list of changes but also supplies with sources of changed files so loader will not even have to make a single request to the server.
Try demo app
Try and test how all this works with module's demo app.
git clone http://github.com/whitecolor/steal-hmrnpm install # please, use NPM 3, otherwice remove system.npmAlgorithm in package.json npm run start # app will run on 7000, to use other port: npm run start -- --port your_port
- Open your browser
http://localhost:7000
- You can changes files
js/css/less
inside the app folder and see what happens - Notice that css/less reload do not made any changes to apps current state
- See example of hot reloading for CanJS UI framework
Licence
ISC.