fhp

@rowanmanning/fastify-htm-preact-views

Render Preact views via HTM in Fastify applications

Showing:

Popularity

Downloads/wk

3

GitHub Stars

6

Maintenance

Last Commit

7mos ago

Contributors

1

Package

Dependencies

3

Size (min+gzip)

3.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Fastify HTM Preact Views

Render Preact views via HTM in Fastify applications.

This offers a compilation-free views with Preact as a Fastify plugin. See "alternatives to JSX" in the Preact docs to learn more about why you might do this.

Table of contents

Requirements

This library requires the following to run:

Usage

Install with npm (you'll also need to install Preact alongside this module):

npm install preact @rowanmanning/fastify-htm-preact-views

Register the plugin before your routes in your Fastify application, using a require call:

const fastify = require('fastify')();

fastify.register(require('@rowanmanning/fastify-htm-preact-views'));

fastify.get('/', (request, reply) => {
    reply.view('example', {
        thing: 'World'
    });
});

fastify.listen(8080);

In the above example, you'll need to provide a view in <CWD>/views/example.js:

module.exports = ({html, thing}) => {
    return html`
        <h1>Hello ${thing}!</h1>
    `;
};

In all views, the html prop is an htm tagged template function, pre-bound to Preact.

App-wide properties

You can specify a default set of global properties as an option when you register the plugin:

fastify.register(require('@rowanmanning/fastify-htm-preact-views'), {
    defaultProps: {
        thing: 'World'
    }
});

Now when you render a view, you can override this default property or don't supply props and it will fall back to the default. Using the example view defined above:


// Renders "Hello World" because it falls back to the default
fastify.get('/1', (request, reply) => {
    reply.view('example');
});

// Renders "Hello Friend"
fastify.get('/2', (request, reply) => {
    reply.view('example', {
        thing: 'Friend'
    });
});

Reply properties

You can specify additional properties on a reply object, which will be available to later routes:

fastify.addHook('preHandler', (request, reply, done) => {
    reply.props = {
        thing: 'Friend'
    };
    done();
});

// Renders "Hello Friend"
fastify.get('/', (request, reply) => {
    reply.view('example');
});

Layouts and partials

You can wrap views in a layout by defining a Preact component in a new file and requiring it in. Partials can be required in the same way and used like you would any shared component.

In views/layouts/default.js, define the layout:

module.exports = ({children, html, title}) => {
    return html`
        <html>
            <head>
                <title>${title}</title>
            </head>
            <body>
                ${children}
            </body>
        </html>
    `;
};

In views/example.js, load it in and wrap content in it. You'll need to pass props through:

const Layout = require('./layouts/default');

module.exports = props => {
    const {html, thing} = props;
    return html`
        <${Layout} ...${props}>
            <h1>Hello ${thing}!</h1>
        </>
    `;
};

Changing the doctype and content-type

By default, an HTML5 doctype is send with the rendered output, and the Content-Type header is set to text/html. These are both configurable as props passed into reply.view.

fastify.get('/', (request, reply) => {
    reply.view('example', {
        doctype: '<?xml version="1.0" encoding="UTF-8"?>',
        contentType: 'text/xml'
    });
});

Both of these properties can be set to a falsy value, which means they will not be sent with the response.

Config options

This plugin can configured using options passed into the Fastify register function:

fastify.register(require('@rowanmanning/fastify-htm-preact-views'), {
    // Options go here
});

The available options are:

  • defaultProps: Object. An object containing default application-wide properties.

  • viewsFolder: String. The folder to look for view files in. Defaults to <CWD>/views.

  • prettyOutput: Boolean. Whether to output pretty HTML. Defaults to true.

Contributing

The contributing guide is available here. All contributors must follow this library's code of conduct.

License

Licensed under the MIT license.
Copyright © 2021, Rowan Manning.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial