Hot-loading with zero build tools.
const hp = require('hot-pockets')
const elem = document.createElement('div')
document.body.appendChild(elem)
const state = {
counter: 0
}
hp(() => {
// When you change something inside the hot-pocket, the code
// is executed live with no page refresh.
// When you change something outside the hot-pocket the page
// automatically reloads.
state.counter += 1
elem.innerHTML = `This pocket has run ${state.counter} times since the last page refresh`
elem.style.color = 'red'
})If no hot-pockets instructions are found in a module it is considered a "pure" module, and the whole thing will be hot-loaded.
When you save changes to a pure module, any hp(() => { ... }) that uses it will be re-executed with the new code.
If you know a module causes side-effects, but you don't want to create a hot-pocket, you can tell hot-pockets to ignore the module by placing //@hp:ignore at the top.
Working, but still experimental.
At the moment it's only working in electron but there's a pretty clear path forward if we want to port it to browser.
Suggestions Welcome! :)
Check out the example.