Tplit

A simple, small, fast, all-purpose templating engine using the power and flexibility of native JavaScript template literals.

---

Environment and browser support

Node	ES Module	Browser	UMD	CLI
✓	✓	x	✓	x

Install

npm i -D @brikcss/tplit

Usage

There are two ways to use tplit, each has their pros and cons:

1. Pass a string with tplit():

   Pros: Most flexible, most configuration options.
   Cons: Can not use outside scope / context (though you can pass your own context data object).

   Syntax:

   tplit((template = ""), (options = {}))((context = {}));

   Example:

   import tplit from "@brikcss/tplit";
   const compiled = tplit("Hello ${this.name}")({ name: "World" });
   const compiledWithOptions = tplit("Hello ${this.name}", {
     prop: "props",
     map: value => value.toUpperCase()
   })({ name: "World" });
   // console.log(compiled) => 'Hello World'
   // console.log(compiledWithOptions) => 'Hello WORLD'

2. Call with template literal function with tplitReduce():

   Pros: Can use outside scope / context.
   Cons: Fewer configuration options.

   Syntax:

   tplitReduce((map = arg => arg))`My template string`;

   Example:

   import { tplitReduce } from "@brikcss/tplit";
   const name = "World";
   const compiled = tplitReduce(
     (map = arg => arg.toUpperCase())
   )`Hello ${name}`;
   // console.log(compiled) => 'Hello WORLD'

Options

• prop {String} (this): Property to use for context Object. Note: Not available with default tplit() method.
• split {Boolean} (false): Set true to split the template and return an Array of [chunks, ...values]. This would allow you to pass to other functions and further manipulate the template as desired. Note: Not available with default tplit() method.
• map {Function} ((value, key, context) => value): Function to manipulate template values. This would allow you to, for example, sanitize HTML or otherwise manipulate context values.

Examples

For more examples, see the tests.