Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mcollina/fastify-html
https://github.com/mcollina/fastify-html
Last synced: about 22 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/mcollina/fastify-html
- Owner: mcollina
- License: mit
- Created: 2023-09-05T15:18:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-10T07:39:03.000Z (3 months ago)
- Last Synced: 2025-01-01T00:11:37.315Z (8 days ago)
- Language: JavaScript
- Size: 51.8 KB
- Stars: 77
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fastify-html
Generate html in the most natural Fastify way, using template tags,
layouts and the plugin system.
Template expressions are escaped by default unless they are prefixed with `!`.
## Install
```bash
npm i fastify fastify-html
```
## Usage
```js
import fastify from 'fastify'
import fastifyHtml from 'fastify-html'
const app = fastify()
await app.register(fastifyHtml)
app.addLayout(function (inner, reply) {
return app.html`
!${inner}
`
}, { skipOnHeader: 'hx-request' })
app.get('/', async (req, reply) => {
const name = req.query.name || 'World'
return reply.html`
Hello ${name}
`
})
app.get('/complex-response/:page', async (req, reply) => {
const name = req.query.name || 'World'
const userInfo = await getUserInfo(name) || {}
const demand = req.query.demand
return reply.html`
Welcome, ${name}.
User information:
!${Object.keys(userInfo).map(
(key) => app.html`
${key}: ${userInfo[key]}
`
)}
!${
demand
? app.html`
Your demand: ${demand}
`
: ""
}
`
})
await app.listen({ port: 3000 })
async function getUserInfo(name) {
return { age: 25, location: "Earth" };
}
```
## Async Mode Usage
```js
import fastify from 'fastify'
import fastifyHtml from 'fastify-html'
import { createReadStream } from 'node:fs'
const app = fastify()
await app.register(fastifyHtml, { async: true })
app.addLayout(function (inner, reply) {
return app.html`
!${inner}
`
}, { skipOnHeader: 'hx-request' })
app.get('/:name', async (req, reply) => {
return reply.html`
Welcome, ${req.params.name}.
User information:
!${getUserInfoPromise(req.params.name)}
File content:
!${createReadStream('./path/to/file.txt')}
`
})
await app.listen({ port: 3000 })
async function getUserInfoPromise(name) {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ age: 25, location: "Earth" });
}, 1000);
});
}
```
### Plugins
Encapsulation is supported and respected for layouts, meaning that `addLayout`
calls will be not exposed to the parent plugin, like the following:
```js
import fastify from 'fastify'
import fastifyHtml from 'fastify-html'
const app = fastify()
await app.register(fastifyHtml)
app.addLayout(function (inner, reply) {
return app.html`
!${inner}
`
})
app.get('/', async (req, reply) => {
const name = req.query.name || 'World'
strictEqual(reply.html`
Hello ${name}
`, reply)
return reply
})
app.register(async function (app) {
app.addLayout(function (inner) {
return app.html`
!${inner}
`
})
app.get('/nested', async (req, reply) => {
const name = req.query.name || 'World'
return reply.html`
Nested ${name}
`
})
})
await app.listen({ port: 3000 })
```
## Options
- `async`: Enables async mode for handling asynchronous template expressions. Set this option to true when registering the fastify-html plugin to take advantage of features like promise resolution, stream handling, and async generator support.
## License
MIT