monta

v0.5.5

Published

2 years ago

Monta template compiler

Downloads

0High
0Medium
0Low

woubuc

language template compiler view html parser render

Monta

Yet another template language for Node.

Project status: early development

Not recommended for production, but should be okay for testing and playing around with. The basics work but expect bugs and frequent updates.

Why

Not indentation-based
Inheritance (extends & blocks)
Pipe syntax
Templates are HTML

How

Install the package in your project:

npm install monta

Create a template file:

<!-- my-template.mt -->
<p>${ foo }</p>

Compile the template:

const Monta = require('monta');

const monta = new Monta();

const render = await monta.compileFile('my-template.mt');

Render your page:

const result = await render({ foo: 'bar' });

console.log(result); // <p>bar</p>

Or do both in one go:

const result = await monta.renderFile('my-template.mt', { foo: 'bar' });

console.log(result); // <p>bar</p>

You can also compile and render plain code:

monta.compile('<p>${ foo }</p>');
monta.render('<p>${ foo }</p>', { foo: 'bar' });

Use with Express

const express = require('express');
const Monta = require('monta');

const monta = new Monta({ templateRoot: './views' });

const app = express();
app.engine('mt', monta.express);

app.get('/', (req, res) => {
    res.render('my-template.mt', { foo: 'bar' });
});

Syntax

Monta templates are basically just HTML files. You can use any file extension you like, but all project code and examples will use the .mt extension.

<!-- Print a variable -->
${ myVar }

<!-- Extend a base template file (must be the first thing in a file) -->
${ extends('otherTemplate.mt') }

<!-- Define a block -->
${ define('blockName') }

<!-- Define a block with default content -->
${ define('blockName'): }
  <p>Default content</p>
${ :end }

<!-- Use a block -->
${ block('blockName'): }
  <p>Block content</p>
${ :end }

<!-- Include another template file (in-place) -->
${ include('otherTemplate.mt') }

<!-- Array iteration -->
${ myArr | foreach(): }
  <!-- Use ${ this } or ${ . } for the top-level 
       object or variable in the current scope -->
  <p>${ this }</p>
${ :end }

<!-- Control flow -->
${ myVar | eq("foo"): }
  <p>Variable is "foo"</p>
${ :end }

${ myVar | eq("foo"): }
  <p>Variable is "foo"</p>
${ :else: }
  <p>Variable is not "foo"</p>
${ :end }

<!-- All control flow functions -->
${ myVar | eq("foo"): } <!-- Equal (strict) -->
${ myVar | neq("foo"): } <!-- Not equal (strict) -->
${ myVar | lt("foo"): } <!-- Less than -->
${ myVar | gt("foo"): } <!-- Greater than -->

<!-- Checks if a value exists in an array, or a key in an object -->
${ myVar | has("foo"): }

<!-- String operations -->
${ myVar | trim() }
${ myVar | upper() }
${ myVar | lower() }
${ myVar | padLeft(6) }
${ myVar | padRight(6) }

Plugins

Monta is designed to be modular and extendable through plugins.

To add a plugin to Monta, simply install it to the dependencies of your project. Monta should discover it automatically when it's initialised.

To add a plugin to Monta that it can't discover (e.g. because it's not in the dependencies of the top-level package.json file), you can add the plugins object to the Monta options.

const monta = new Monta({
  plugins: {
    'plugin-name': 'path/to/custom/plugin',
  }
});

List of Plugins

resources

If you've made a plugin, feel free to open a PR to add it to this list.

CLI

See the monta-cli package.

Example

views/base.mt:

<html>
  <head>
    ${ define('head'): }
      <title>Monta Example</title>
    ${ :end }
  </head>
<body>
  <main>
    ${ define('body') }
  </main>

  <footer>Copyright ${ year }</footer>
</body>
</html>

views/page.mt:

${ extends('base.html') }

${ block('head'): }
  <title>Monta Page</title>
${ :end }

${ body('body'): }
  <p>Welcome to my site, ${ name | upper() }</p>
${ :end }

app.js:

const Monta = require('monta');

const monta = new Monta({ templateRoot: './views' });

(async function main() {
  const result = await monta.renderFile('page.mt', {
    name: 'woubuc',
    year: 2019,
  });

  console.log(result);
})();

Output:

<html>
  <head>
    <title>Monta Page</title>
  </head>
<body>
  <main>
    <p>Welcome to my site, WOUBUC</p>
  </main>

  <footer>Copyright 2019</footer>
</body>
</html>

Why's it called Monta?

Uninspired as I was, I used this to find a name for the project, and Monta was the first name that I didn't hate and that wasn't taken on npm.

There is no further meaning to the name.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme