npm package: @justeat/f-templates-loader
Description: Locate and register shared templates and data.
Latest version: 0.1.1

<div align="center">
<h1>f-templates-loader</h1>

<img width="125" alt="Fozzie Bear" src="bear.png" />

<p>Locate and register shared templates and data.</p>
</div>

---

[![npm version](https://badge.fury.io/js/%40justeat%2Ff-templates-loader.svg)](https://badge.fury.io/js/%40justeat%2Ff-templates-loader)
[![Build Status](https://travis-ci.org/justeat/f-templates-loader.svg)](https://travis-ci.org/justeat/f-templates-loader)
[![Dependency Status](https://gemnasium.com/badges/github.com/justeat/f-templates-loader.svg)](https://gemnasium.com/github.com/justeat/f-templates-loader)


## Setup

Add `f-templates-loader` to your project:

```bash
yarn add @justeat/f-templates-loader
```

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

```js
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](#main-template).

### `getTemplateTranslations`

Locate and return any [translations data associated with a template](#translations). Returns any translations data found, or an empty object.

### `getTemplateDocsData`

Locate and return any [docs data associated with a template](#docs-data). Returns any docs data found, or an empty object.

### `getCompiledTemplate`

Internally, this function calls [`registerPartials`](#registerpartials), [`getMainTemplate`](#getmaintemplate), [`getTemplateTranslations`](#gettemplatetranslations), and [`getTemplateDocsData`](#gettemplatedocsdata).

Compiles a template using data from [translation](#gettemplatetranslations) and [docs](#gettemplatedocsdata) data.

### `registerPartials`

Registers any [partials associated with a template](#template-partials).


## 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](template-folder-structure.png)

### 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](#main-template).

**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`.