html

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
Preview
Installing
Configuration
Documentation
API
- reply.html()
License

Installing

npm install @kitajs/fastify-html-plugin

Preview

Example of an error thrown by this LSP plugin.

Installing

[!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);

Configuration

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`

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 for help with templating, and all other stuff related to <jsx />.
Read @kitajs/ts-html-plugin documentation. 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 <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>
    )
  );

License

Licensed under the MIT. See LICENSE for more informations.

This site is open source. Improve this page.