hyperapp-hmr v0.1.0
hyperapp-hmr
Persist the app state while the code reloads
A HyperApp mixin that lets you perform Hot Module Replacement without needing any ties into your build mechanism.
var { h, app } = require('hyperapp')
var hmr = require('hyperapp-hmr')
app({
// Simply load HMR as a mixin
mixins: [ hmr ],
// The rest of your application stays unchanged, e.g. state:
state: { count: 0 },
// Try changing action's functionality as the app is running with HMR
// Then when you reload, the state is persisted and the functions are updated
actions: {
add: (state) => ({ count: state.count + 1 })
},
// Also change the view freely with the HMR
view: (state, actions) =>
<div class='app'>
<button onclick={actions.add}>Add one</button>
<span>Current value: {state.count}</span>
</div>
})
TODO: Replace this example with a screen capture of the test
See Usage for more details, and Testing for seeing an example
Install
npm i hyperapp-hmr
Usage
The module exports an hmr
mixin, which will persist all of the app's state between reloads, so the actions and views can change seamlessly underneath.
Take an example: You go to a route on your page, open up a sidebar, click a button that opens a prompt, type in the prompt... These are a lot of steps you have to repeat over and over without the state being persisted. HMR solves this.
hmr
The mixin that you load into your app:
var hmr = require('hyperapp-hmr')
app({
mixin: [ hmr ]
})
What about live-reloading?
Live-reloading is not provided out of the box in hyperapp-hmr
because:
- There are standalone auto-reload servers you can opt-in to using with this package with no problems. For example, see
budo
for a prototyping tool that lets you live-reload super easy. - There may be people who are uninterested in what it takes to setup auto-reloading, and don't mind just hitting F5 with the same HMR benefits.
- It would significantly increase the complexity of the package, as there would need to be a server-side so we could detect file changes, and communicate that to client-side for reloading, etc. which makes it less appealing to some.
Integration with Webpack?
I personally main Browserify, which is why there nothing made using module.hot
.
That being said, happy to accept PRs that can integrate those features with the same usage shown here.
Testing
To run the tests, clone the repository and run:
npm i
npm run test:browser
This will create temporary server that hosts and live-reloads test/index.js
.
Go into test/index.js
and make edits to the view and actions see if the HMR is working.
(Note: it is intentionally not npm test
so release tools don't think they're unit tests)
7 years ago