@vrbo/catalyst-render

@vrbo/catalyst-render

• Introduction
• Usage
• Api
• Development
• Further Reading

Introduction

A Hapi.js plugin that works with the catalyst-server to aid in server-side rendering using Handlebars and React. It allows you to relate a Handlebars template and a React component to a route. This route will automatically be registered with the server and will decorate request.pre.component with the react component and the request.pre.template with the template. It will also register @hapi/vision and server views with Handlebars rendering for the page scaffolding

Usage

Install:

npm install @vrbo/catalyst-render

Register the plugin in the application's manifest:

...
"register": {
    "catalyst-render": {
        "plugin": "require:@vrbo/catalyst-render",
        "options": {
            "routes": [{
                "route": "require:./routes/application.js",
                "component": "require:../components/App/server.js",
                "template": "./templates/welcome.hbs"
            }]
        }
    }
}
...

The require:./routes/application.js points to a route file that exports a Hapi.js route object and will look something like this (with a very basic render):

module.exports = {
    method: 'GET',
    path: '/',
    options: {
        handler(request, h){
            const template = request.pre.template;
            const Component = request.pre.component;
            const body = ReactDOMServer.renderToString(<Component/>);
            return h.view(template, { body })
        },
        id: 'root'
    }
}

API

Register the plugin server.register(server, options)

Param	Type	Description
server	object	Hapi.js server
options	object	Overriding options
options.routes	array	A list of route objects to register on server.
[options.viewsOptions]	object	Options to add to (or override) when on server.views method is called for adding things like partials ,, layouts, helpers and others.
[options.visionOptions]	object	Proxy for options when registering @hapi/vision.
[options.resolveAssetHelper]	object	A Handlebars helper to help resolve static assets, as in publishing to a CDN.
options.resolveAssetHelper.name	string	Name of helper.
options.resolveAssetHelper.helper	function	Helper function.

Route

This is an object for registering routes, React components, and templates

Property	Type	Description
route	object	Hapi.js route object to register on server.
component	object	A React component to render. Available as request.pre.component in handler in above route.
template	array	A Handlebars template to use to render page scaffold. Available as request.pre.template in handler in above route.

Further Reading

• License
• Code of conduct
• Contributing
• Changelog