Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

monta

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

monta

Monta template compiler

0.5.5
latest
Source
npm

Version published: 5 years ago

Weekly downloads: 3; increased by50%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

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.

Keywords

FAQs

What is monta?

Is monta popular?

Is monta well maintained?

Package last updated on 09 Jul 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install