Handlebars

Primate runs Handlebars templates with server-side rendering and props mapped to template variables.

Setup

Install

npm install @primate/handlebars

Configure

import config from "primate/config";
import handlebars from "@primate/handlebars";

export default config({
  modules: [handlebars()],
});

Templates

Create Handlebars templates in components using Handlebars syntax.

<!-- components/post-index.hbs -->
<h1>All posts</h1>
<div>
{{#each posts}}
  <h2><a href="/post/view/{{this.id}}">{{this.title}}</a></h2>
{{/each}}
</div>

Serve the template from a route:

// routes/posts.ts
import response from "primate/response/response";
import route from "primate/route";

route.get(() => {
  const posts = [
    { id: 1, title: "First Post" },
    { id: 2, title: "Second Post" },
  ];

  return response.view("post-index.hbs", { posts });
});

Props

Props passed to response.view are available directly in templates as variables.

Pass props from a route:

import response from "primate/response/response";
import route from "primate/route";

route.get(() => {
  return response.view("user.hbs", {
    user: { name: "John", role: "Developer" },
    permissions: ["read", "write"],
  });
});

Access the props in the template:

<!-- components/user.hbs -->
<div>
  <h2>{{user.name}}</h2>
  <p>Role: {{user.role}}</p>
  <ul>
    {{#each permissions}}
    <li>{{this}}</li>
    {{/each}}
  </ul>
</div>

Configuration

Example

import handlebars from "@primate/handlebars";
import config from "primate/config";

export default config({
  modules: [
    handlebars({
      // add `.handlebars` to associated extensions
      fileExtensions: [".hbs", ".handlebars"],
    }),
  ],
});

Resources

• Documentation