stach

Stach is a mustache-like string templating system for Node or Browsers.

import { Stach } from "stach"

const templated = Stach("Hello {{name}} 😸", {name: "mr Bond"})
console.log( templated ) // Hello mr Bond 😸

Concept

Why do we need Stach with literal template strings available everywhere ? Stach can be useful when any small templating is needed when the template source is not coming from javascript itself. For example, if you need to process a template from a user generated file, a dictionary, or any other kind of input.

Stach is ultra-lightweight and compatible with Node and Browsers environments. It uses Javascript's Regex based String.replace function to be super effective. It's also compatible with multiline files / inputs. Typescript definitions are included ✌️

Scope

Stach can do variable replacement, function calls, and short ternary evaluations. THAT'S IT. It cannot do advanced conditions, listing, HTML transformations, etc... If you need all of this, check others template engines like Mustache, Handlebars or even React JSX in some cases.

Installation

To install Stach in your project :

• NPM : npm install stach
• Yarn : yarn add stach

Usage

If you are using CommonJS syntax :

const { Stach } = require('stach')

Better, if ES-Modules syntax is available :

import { Stach } from 'stach'

Simple variable replacement

Stach('Hello {{username}}', {
    username: 'James Bond'
});
// 'Hello James Bond'

Values can be functions

const user = { balance : 12 };
Stach('Your current balance is {{balance}}€', {
    balance: () => user.balance
});
// 'Your current balance is 12€'

Ternary conditions can be used :

Stach('Condition is {{test ? truthy : falsy}}', {
    test: 0
});
// 'Condition is falsy'

Or, with the help of functions :

Stach('{{name}} is {{age}} {{isAgePlural ? years : year}} old', {
    name: 'Brad Pitt',
    age: 55,
    // Note that v here is the current value object
    // So we can access dynamically to the age property
    isAgePlural: v => v.age > 1
});
// 'Brad Pitt is 55 years old'

More functions

Stach('{{plainFunction}} == 15', {
    value: 15,
	// This works
    plainFunction () {
        return this.value;
    }
});
// '15 == 15'

Complex example mixing functions and ternaries

const user = {
    name: 'James Bond',
    gender: 'male',
    balance: 15
}
Stach('Hello {{ isMale ? mr : mrs }} {{ getLastName }}. Your balance is {{ balance }}€.', {
  ...user,
  isMale: v => v.gender == 'male',
  getLastName: v => v.name.split(' ')[1]
});
// 'Hello mr Bond. Your balance is 15€.'

Advanced, delimiters regex can be changed

Here is the default delimiter regex : /{{(.*?)}}/gm see

This will set delimiters from {{var}} to {var}. Use regexr.com to create easily your delimiter's Regex.

const singleCurlyRegex = /{(.*?)}/gm 	// regex for single curly braces
const template = 'Hello { username }' 	// template using single curly braces
const data = { username: 'Mr Bond' }
Stach( template, data, singleCurlyRegex ); // "Hello Mr Bond" 

Unpkg

Stach is available on unpkg

Usage :

<script src="https://unpkg.com/[email protected]/dist/stach.es2017.min.js"></script>
<script>
	Stach("Hello from {{name}} !", { name: 'unpkg' })
</script>

Built

Stach is built from typescript thanks to tsbundle

TODO / Not working

We need a way to escape {{ when templating code-like files or simply keep not found variables.

Ex :

const source = `
	...
	const Test{{FileName}} = "Source {{doNotReplace}}"
	...
`
Stach( source, {
	FileName : "Replace" 
})

will try to replace {{doNotReplace}} which is something to keep in output.