Broccoli Handlebars Precompiler ESM

Disclaimer: This repo is a fork of the great jakkor/broccoli-handlebars-precompiler. The difference between implementations being that the original focused on only working with global JavaScript variables, whereas this version focuses on working with more modern JavaScript standards, i.e. ECMAScript Modules (ESM).

---

A Broccoli plugin that gives us an easy way to precompile Handlebars templates into ECMAScript Modules, aka ESM.

It works by taking each input Handlebars file, precompiles it using Handlebars.precompile and outputs a JS file (by default) that can be later combined by a different tool.

Install

npm install --save broccoli-handlebars-precompiler-esm

yarn add broccoli-handlebars-precompiler-esm

Usage

const BroccoliHandlebars = require('broccoli-handlebars-precompiler-esm');

// ...
let precompiledTemplates = new BroccoliHandlebars(templates, {
  extensions: ['handlebars'],
});

API

const precompiledTemplates = new BroccoliHandlebars(inputNodes, options);

• inputNodes: An array of node objects that this plugin will read from. Nodes are usually other plugin instances; they were formerly known as "trees".

Options

• annotation (optional): Same as broccoli-plugin; see there.
• extensions (optional): Array of handlebars file extensions. Default: ['hbs', 'handlebars'].
• targetExtension (optional): The file extension of the corresponding output files. Default: js.

How to use it in JavaScript application

Input

my-handlebars-template.hbs

<div class="my-class"></div>

Output

my-handlebars-template.js

import Handlebars from 'handlebars';

const _template = Handlebars.template({
  "compiler": [8, ">= 4.3.0"],
  "main": function (container, depth0, helpers, partials, data) {
    return "<div class=\"my-class\"></div>\n";
  },
  "useData": true
});

export default _template;

Using the template

You must have a copy of the Handlebars runtime available in your application. See the Handlebars docs for more information how to install it.

To use in your app you then import the template and invoke it passing any data it needs. See Handlebars docs for more details.

import myHandlebarsTemplate from './my-handlebars-template.js';
myHandlebarsTemplate(data)