Simple module to enable hot reloading of html. Using a virtual DOM, hotloader updates the DOM without page reloads.
Hotloader does not care how these html files are created.
creates an instance of hotloader
listener
, a HTTP server. This gets passed into socket.io. See the socket.io docs for more information.
hotloader
: An instance of hotloader.
watchFiles
, (string or array of strings). Paths to files, dirs to be watched recursively, or glob patterns. See the watch method in the chokidar docs for more detail. Change events on watched files cause the hotloader to update the page.getHtml
, (function). Takes a single callback argument. You should pass html into this function as the second argument. This will be called whenever a change is detected, as well as to fetch the initial html. You can pass in static files, or html generated from a template engine.onHotloaderReady
, (function). receives an error and html as arguments. The html should be served to the client, hotloader will do the rest from there.
const http = require('http')
const path = require('path')
const fs = require('fs')
const initHotloader = require('hotloader')
const router = (request, response) => {
const ext = request.url.split('.')[1]
if (ext === 'html')
return htmlHandler(request, response)
response.end('not found')
}
const server = http.createServer(router)
const hotloader = initHotloader(server)
const htmlHandler = (request, response) => {
const filePath = path.join(__dirname, request.url)
const readFile = cb => fs.readFile(filePath, cb)
const sendHtml = (_, html) => response.end(html)
if (process.env.NODE_ENV === 'development')
return hotloader.registerView(
filePath, // watch this file
readFile, // get its contents when it changes
sendHtml // respond with hotloader when ready
)
readFile(sendHtml)
}
server.listen(4000, () => { console.log('listening on 4000') })
Rather than use this module directly, this should be used to create middleware / plugins to enable hotloading of html.
more coming soon ...