`handlebars` package in Puck codebase.

#handlebars #opensource

In this article, we review handlebars package in Puck codebase. We will look at:

What is Handlebars.js package?
Usage in Puck codebase

What is Handlebars.js package?

Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.

<p>{{firstname}} {{lastname}}</p>

A handlebars expression is a {{, some contents, followed by a }}. When the template is executed, these expressions are replaced with values from an input object.

Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.

Checkout the official Handlebars docs site at https://handlebarsjs.com/ and the live demo at http://tryhandlebarsjs.com/.

Example

Once you have a template, use the Handlebars.compile method to compile the template into a function. The generated function takes a context argument, which will be used to render the template.

var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
             "{{kids.length}} kids:</p>" +
             "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);

var data = { "name": "Alan", "hometown": "Somewhere, TX",
             "kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var result = template(data);

// Would render:
// <p>Hello, my name is Alan. I am from Somewhere, TX. I have 2 kids:</p>
// <ul>
//   <li>Jimmy is 12</li>
//   <li>Sally is 4</li>
// </ul>

Usage in Puck codebase

You will find the following code in puck/packages/create-puck-app/index.js.

if (path.extname(filePath) === ".hbs") {
  const templateString = fs.readFileSync(filePath, "utf-8");

  const template = Handlebars.compile(templateString);
  data = template({
    ...answers,
    appName,
    puckVersion: `^${packageJson.version}`,
  });
} else {
  data = fs.readFileSync(filePath, "utf-8");
}