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!
@kitajs/fastify-html-plugin is a fastify plugin to seamlessly integrate the KitaJS Html JSX engine into your fastify application.
npm install @kitajs/fastify-html-plugin
Caution
You must have followed the @kitajs/html's
Installing
guide before continuing, otherwise you will be vulnerable to XSS attacks.
import kitaHtmlPlugin from '@kitajs/fastify-html-plugin';
import fastify from 'fastify';
const app = fastify();
app.register(kitaHtmlPlugin);Every option is well documented through their respective JSDoc comments, below are the default options.
| Name | Description | Default |
|---|---|---|
autoDoctype |
Whether to automatically add <!doctype html> to a response starting with <html>, if not found. |
true |
@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/htmldocumentation for help with templating, and all other stuff related to<jsx />. - Read
@kitajs/ts-html-plugindocumentation. for help setting up the XSS detector and IDE intellisense.
Sends the html to the browser. This method supports all types of components, including
<Suspense /> and <ErrorBoundary />.
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 Suspenses 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.
app
.get('/html', (req, reply) =>
reply.html(
<html lang="en">
<body>
<h1>Hello, world!</h1>
</body>
</html>
)
)
.get('/stream', (req, reply) =>
reply.html(
<Suspense rid={req.id} fallback={<div>Loading...</div>}>
<MyAsyncComponent />
</Suspense>
)
);Licensed under the MIT. See LICENSE for more informations.