Setup

Add f-templates-loader to your project:

yarn add @justeat/f-templates-loader

Then, inside your script import the functions you need from f-templates-loader.

const { getTemplateNames, getCompiledTemplate } = require('@justeat/f-templates-loader');

const templateNames = getTemplateNames();

templateNames.forEach(templateName => {
    const compiledTemplate = getCompiledTemplate(templateName);
    ...
});

Methods

getTemplateNames

Looks for directories in the root /templates directory and returns an array containing their names. An optional parameter can be passed in which takes a list of directory names which should not be included in result list.

getMainTemplate

Locate and return the main template content.

getTemplateTranslations

Locate and return any translations data associated with a template. Returns any translations data found, or an empty object.

getTemplateDocsData

Locate and return any docs data associated with a template. Returns any docs data found, or an empty object.

getCompiledTemplate

Internally, this function calls registerPartials, getMainTemplate, getTemplateTranslations, and getTemplateDocsData.

Compiles a template using data from translation and docs data.

registerPartials

Registers any partials associated with a template.

Template path and filename conventions

There are certain conventions which need to be followed in order for the templates to be compiled and the data to be loaded correctly.

All files should live inside a /templates directory in the root of your application, under this there should be a /resources directory which contains translations and docs data for your template, and a directory with the name of your template which contains the actual template files.

As they say, a picture is worth a thousand words:

Main template

Format: /templates/{templateName}/index.hbs

The main template should be called index.hbs and should live in the root of a directory which has the name of the template.

Example: /templates/header/index.hbs.

Template partials

Format: /templates/{templateName}/partials/{templateName}-*.hbs

Partials should have the template name prefixed in the filename in order to avoid conflict between shared templates e.g. header-logo.hbs.

They should live in a directory called /partials inside your template directory.

Example: /templates/header/partials/header-logo.hbs

Translations

Format: /templates/resources/{templateName}.json

The translations should be called {templateName}.json and should live in the resources directory.

Example: /templates/resources/header.json.

Docs Data

Format: /templates/resources/{templateName}-docs-data.json

Any documentation data (data to be used purely in documentation) should be called {templateName}-docs-data.json and should live in the resources directory.

Example: /templates/resources/header-docs-data.json.