https://github.com/fastify/fastify-hotwire

Use the Hotwire pattern with Fastify
https://github.com/fastify/fastify-hotwire

fastify fastify-plugin hotwire-turbo

Last synced: about 1 month ago
JSON representation

Use the Hotwire pattern with Fastify

• Host: GitHub
• URL: https://github.com/fastify/fastify-hotwire
• Owner: fastify
• License: mit
• Created: 2021-02-26T14:46:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-23T10:43:42.000Z (about 2 months ago)
• Last Synced: 2024-07-23T12:49:16.875Z (about 2 months ago)
• Topics: fastify, fastify-plugin, hotwire-turbo
• Language: JavaScript
• Homepage:
• Size: 109 KB
• Stars: 73
• Watchers: 17
• Forks: 6
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @fastify/hotwire

![CI](https://github.com/fastify/fastify-hotwire/workflows/CI/badge.svg)

[![NPM version](https://img.shields.io/npm/v/@fastify/hotwire.svg?style=flat)](https://www.npmjs.com/package/@fastify/hotwire)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://standardjs.com/)

Do you enjoy writing applications with the [hotwire](http://hotwire.dev) 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](./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!

```js

// in your fastify app

fastify.register(require('@fastify/hotwire'), {

  templates: join(__dirname, 'views'),

  filename: join(__dirname, 'worker.js')

})

```

```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`

```js

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.

```js

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.

```js

fastify.get('/', async (req, reply) => {

  return reply.turboStream.append('filename', 'target', { data })

})

```

## License

[MIT](./LICENSE)