npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

monta

v0.5.5

Published

Monta template compiler

Downloads

8

Readme

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.