Use the Hotwire pattern with Fastify
MIT License
Do you enjoy writing applications with the hotwire pattern? We got you covered!
This plugin adds all the necessary utilities to Fastify for creating a fullstack application with Hotwire. Take a look at the example folder to see it in action!
npm i @fastify/hotwire
Add the plugin to Fastify, with at least two options:
templates
: the location of your folder with your templatesfilename
: the location of your html generator, any templating language is supported!// in your fastify app
fastify.register(require('@fastify/hotwire'), {
templates: join(__dirname, 'views'),
filename: join(__dirname, 'worker.js')
})
// worker.js
module.exports = ({ file, data, fragment }) => {
// your favorite templating library
return 'generated html'
}
reply.render(filename, data)
Generates the entire initial page, it calls the worker with fragment: false
fastify.get('/', async (req, reply) => {
return reply.render('filename', { data })
})
reply.turboGenerate.*(filename, target, data)
Every turbo stream action is supported: append
, prepend
, replace
, update
, remove
.
It generates and returns a turbo compatible fragment.
fastify.get('/', async (req, reply) => {
const fragment = await reply.turboGenerate.append('filename', 'target', { data })
// send it via SSE or websockets
})
reply.turboStream.*(filename, target, data)
Every turbo stream action is supported: append
, prepend
, replace
, update
, remove
.
It generates and send a turbo compatible fragment and configures the appropriate content type.
fastify.get('/', async (req, reply) => {
return reply.turboStream.append('filename', 'target', { data })
})