@fastify/hotwire

Do you enjoy writing applications with the hotwire pattern? We have 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!

Install

npm i @fastify/hotwire

Usage

Add the plugin to Fastify, with at least two options:

• templates: the location of your folder with your templates
• filename: 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'
}

API

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, before, after, refresh. 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 })
})

License

Licensed under MIT.