@jackdbd/fastify-webc

Fastify plugin to render WebC templates and components.

Installation
Configuration
TypeScript
Tips
Dependencies
References
License

Installation

npm install @jackdbd/fastify-webc

Configuration

This plugin decorates FastifyReply with a render method. This method takes two arguments: a WebC template and an optional data object.

import webc from '@jackdbd/fastify-webc'

fastify.register(webc, {
  components: ['src/components/**/*.webc'],
  templates: [path.join(__dirname, 'templates')]
})

fastify.get('/demo', function (request, reply) {
  const data = { foo: 'bar' }
  return reply.render('demo.webc', data)
})

TypeScript

To ensure TypeScript recognizes the render method as part of the FastifyReply object, you must use declaration merging to extend the FastifyReply interface.

declare module 'fastify' {
  interface FastifyReply {
    render(template: string, data?: Record<string, any>): Promise<void>
  }
}

Tips

You can access the WebC instance from your WebC template/component using this.webc.

<code>this.webc</code>
<pre @text="JSON.stringify(this.webc, null, 2)"></pre>

You can access the data available to the WebC template/component using this.$data.

<code>this.$data</code>
<pre @text="JSON.stringify(this.$data, null, 2)"></pre>

Dependencies

Package	Version
@11ty/webc	`^0.11.4`
fastify-plugin	`^5.0.1`

⚠️ Peer Dependencies

This package defines 1 peer dependency.

Peer	Version range
`fastify`	`>=5.0.0`