@justeat/f-templates-loader

Locate and register shared templates and data.

Stats

StarsIssuesVersionUpdatedCreatedSize
@justeat/f-templates-loader
0.1.13 years ago3 years agoMinified + gzip package size for @justeat/f-templates-loader in KB

Readme

f-templates-loader

Fozzie Bear

Locate and register shared templates and data.


npm version Build Status Dependency Status

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:

Template folder structure

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.