Using this package? Please consider donating to support my open source work ❤️
Help @kitajs/fastify-html-plugin grow! Star and share this amazing repository with your friends and co-workers!
🖨️ Fastify KitaJS Html Plugin
@kitajs/fastify-html-plugin is a fastify plugin to seamlessly integrate the KitaJS Html JSX engine into your fastify application.
- [Installing](#installing)
- [Preview](#preview)
- [Installing](#installing-1)
- [Configuration](#configuration)
- [Documentation](#documentation)
- [API](#api)
- [`reply.html()`](#replyhtml)
- [License](#license)
## Installing
```sh
npm install @kitajs/fastify-html-plugin
```
## Preview
## Installing
> [!CAUTION]
> You **must have followed the `@kitajs/html`'s
> [Installing](https://github.com/kitajs/html/tree/master/packages/html#installing)
> guide** before continuing, otherwise you will be vulnerable to XSS attacks.
```ts
import kitaHtmlPlugin from '@kitajs/fastify-html-plugin';
import fastify from 'fastify';
const app = fastify();
app.register(kitaHtmlPlugin);
```
## Configuration
Every option is well documented through their respective JSDoc comments, below are the
default options.
| Name | Description | Default |
| ------------- | -------------------------------------------------------------------------------------------------- | ------- |
| `autoDoctype` | Whether to automatically add `` to a response starting with ``, if not found. | `true` |
## Documentation
`@kitajs/html` is a `JSX` -> `string` runtime, this package seamlessly integrates with
`fastify` to improve the developer experience while also providing faster implementations
for this use case.
- Read [`@kitajs/html` documentation](https://github.com/kitajs/html) for help with
templating, and all other stuff related to ``.
- Read
[`@kitajs/ts-html-plugin` documentation.](https://github.com/kitajs/html/tree/master/packages/ts-html-plugin)
for help setting up the **XSS** detector and IDE intellisense.
## API
### `reply.html()`
Sends the html to the browser. This method supports all types of components, including
`` and ``.
The entire component tree will be awaited before being sent to the browser as a single
piece.
When Suspense components are found, their fallback will be synchronously awaited and sent
to the browser in the original stream, as its children are resolved, new pieces of html
will be sent to the browser. When all `Suspense`s pending promises are resolved, the
connection is closed normally.
> [!NOTE]
> `req.id` must be used as the `Suspense`'s `rid` parameter
If the HTML does not start with a doctype and `opts.autoDoctype` is enabled, it will be
added automatically. The correct `Content-Type` header will also be defined.
```tsx
app
.get('/html', (req, reply) =>
reply.html(
Hello, world!
)
)
.get('/stream', (req, reply) =>
reply.html(
Loading...}>
)
);
```
## License
Licensed under the **MIT**. See [`LICENSE`](LICENSE) for more informations.
