❤
npm
Sign UpSign In

monta
TypeScript icon, indicating that this package has built-in type declarations

0.5.5 • Public • Published

Monta

Yet another template language for Node.

npm license Build Status Codecov David

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.

Readme

Keywords

Package Sidebar

Install

npm i monta

Repository

github.com/woubuc/monta

Homepage

github.com/woubuc/monta/tree/master/packages/monta#readme

Weekly Downloads

3

Version

0.5.5

License

ISC

Unpacked Size

131 kB

Total Files

66

Last publish

Collaborators

  • woubuc
Try on RunKit
Report malware