Skip to main content

Tempura

Link: Tempura

Tempura is a light and fast template engine with Handlebars-like syntax.

You need to install the tempura package:

npm i -D tempura

preprocessor: 'tempura'​

For example, there is the template src/views/page/home.hbs

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  {{#include src='header.hbs' }}
  <div class="container">
    <h1>Tempura</h1>
    <div>{{ persons.length }} persons:</div>
    <ul class="person">
      {{#each persons as person}}
        <li>{{person.name}} is {{person.age}} years old.</li>
      {{/each}}
    </ul>
  </div>
  {{#include src='footer.hbs' }}
</body>
</html>

Define the preprocessor as tempura:

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define templates here
        index: {
          import: 'src/views/pages/home.hbs', // => dist/index.html
          // pass data to template as an object
          data: {
            title: 'Tempura',
             persons: [
                { name: 'Robert', age: 30 },
                ...
             ],
          },
        },
      },
      // use tempura templating engine
      preprocessor: 'tempura',
      // define options
      preprocessorOptions: {
        views: ['src/views/partials'],
      },
    }),
  ],
};

Source code of the example

preprocessorOptions​

The preprocessor has built-in include helper, to load a partial file.

{
  preprocessor: 'tempura',
  preprocessorOptions: {
    // defaults process.cwd(), root path for includes with an absolute path (e.g., /file.html)
    root: path.join(__dirname, 'src/views/'), // defaults process.cwd()
    // defaults [], an array of paths to use when resolving includes with relative paths
    views: [
      'src/views/includes', // relative path
      path.join(__dirname, 'src/views/partials'), // absolute path
    ],
    blocks: {
      // define here custom helpers
      bar: ({ value }) => `<bar>${value}</bar>`,
    },
  },
},

For all available options, see the Tempura API options.

Using build-in include helper​

The src attribute contains a path to the partial file.

The path relative to current working directory (defaults webpack config directory):

{{#include src='src/views/partials/header.hbs' }}

The path relative to directory defined in root option, e.g. root: 'src/view':

{{#include src='partials/header.hbs' }}

The path relative to one of directories defined in views option, e.g. views: ['src/views/partials']:

{{#include src='header.hbs' }}