monta
v0.5.5
Published
Monta template compiler
Downloads
8
Maintainers
Readme
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
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.