On this page

• Quick Start
  • 1. Download
  • 2. Import into your js file

CONTENTS

• Install
  • CDN
• Usage
  • Getting start
    • Behaviors of default options
  • Replace with data tokens
  • Insert with slot tokens
  • Combo above behaviors
• Custom start and end token
• Tokenize with js syntax
• Remove token when errors occur
• Custom identification delimiter
• Options

1. Download

1npm install @master/text-template

CDN

• jsdelivr
• unpkg

Usage

Getting start

1import { TextTemplate } from '@master/text-template';

Behaviors of default options

1const template = new TextTemplate(text);

equal to

1const template = new TextTemplate(text, {
2    start: '{{',
3    end: '}}',
4    behavior: '', // replace
5    language: '', // /* data */ /* */,
6    removeOnError: false,
7    delimiter: ' ',
8});

Replace with data tokens

1const template = new TextTemplate('Hi {{ username }}');
2const renderedText = template.render({ username: 'Aron' });

output renderedText:

1Hi Aron

Insert with slot tokens

1const html = `
2    <title>
3        <!-- title --><!-- -->
4    <title>
5`;
6const template = new TextTemplate(html, {
7    behavior: 'slot',
8    language: 'html'
9});
10const renderedHtml = template.render({ title: 'Hello World' });

output renderedHtml:

1<title>
2    <!-- title -->Hello World<!-- -->
3<title>

The slot token isn't removed, which means you can keep result and render multiple times.

Combo above behaviors

1const readmeText = `
2    # Hi {{ username }}
3    <!-- description --><!-- -->
4`;
5
6const data = {
7    username: 'Aron',
8    description: 'Hello World {{ username }}'
9}
10
11// 1. Insert
12const slotTemplate = new TextTemplate(readmeText, {
13    behavior: 'slot',
14    language: 'readme'
15});
16
17// 2. Replace
18const template = new TextTemplate(slotTemplate.render(data));
19
20const renderedReadmeText = template.render(data);

output renderedReadmeText:

1# Hi Aron
2<!-- description -->Hello World Aron<!-- -->

Custom start and end token

1const template = new TextTemplate('Hi ${ username }', {
2    start: '${',
3    end: '}'
4});

Tokenize with js syntax

1const data = {
2    people:  ['Aron', 'Joy']
3}
4const text = `/* people.join(' ❤️ ') */ /* */`;
5const template = new TextTemplate(text);
6const renderedText = template.render(data);

output renderedText

1/* people.join(' ❤️ ') */ Aron ❤️ Joy /* */

Remove token when errors occur

removeOnError: true

1const text = 'Hi {{ username }}, welcome.';
2const data = {};
3const t1 = new TextTemplate(text);
4const t2 = new TextTemplate(text, { removeOnError: true });
5const r1 = t1.render(data);
6const r2 = t2.render(data);

output r1

Hi {{ username }}, welcome.

output r2

Hi , welcome.

Custom identification delimiter

default

1const template = new TextTemplate(html, {
2    behavior: 'slot',
3    language: 'html'
4});

1<title><!-- name -->text-template<!----></title>

custom

1const template = new TextTemplate(html, {
2    behavior: 'slot',
3    language: 'html',
4    delimiter: ' / ' 
5});

1<title><!-- name --><!-- / --></title>

Options

The default values of all options are undefined, and each has a default behavior.

• start Default {{. Replace or slot start token
• end Default }}. Replace or slot end token
• behavior Default replace. Specify render behavior
• language Required behavior: 'slot'. Specify using comment language to set start and end quickly.
  • '' relative to /* data */ /* */ as default
  • 'html', readme relative to <!-- data --> <!-- -->
  • 'pascal' relative to (* data *) (* *) or { data } { }
  • 'forth' relative to ( data ) ()
  • 'haskell' relative to {- data -} {- -}
• delimiter Default . Required behavior: 'slot'. Specify middle delimiter for identifying end
• removeOnError Default false. If true, the token will be removed when the data doesn't match or js syntax go wrong.