On this page
CONTENTS
- Install
- Usage
- Custom
start
andend
token - Tokenize with js syntax
- Remove token when errors occur
- Custom identification delimiter
- Options
1. Download
npm install @master/text-template
CDN
Usage
Getting start
import { TextTemplate } from '@master/text-template';
options
Behaviors of defaultconst template = new TextTemplate(text);
equal to
const template = new TextTemplate(text, {
start: '{{',
end: '}}',
behavior: '', // replace
language: '', // /* data */ /* */,
removeOnError: false,
delimiter: ' ',
});
Replace with data tokens
const template = new TextTemplate('Hi {{ username }}');
const renderedText = template.render({ username: 'Aron' });
output renderedText
:
Hi Aron
Insert with slot tokens
const html = `
<title>
<!-- title --><!-- -->
<title>
`;
const template = new TextTemplate(html, {
behavior: 'slot',
language: 'html'
});
const renderedHtml = template.render({ title: 'Hello World' });
output renderedHtml
:
<title>
<!-- title -->Hello World<!-- -->
<title>
The slot token isn't removed, which means you can keep result and render multiple times.
Combo above behaviors
const readmeText = `
# Hi {{ username }}
<!-- description --><!-- -->
`;
const data = {
username: 'Aron',
description: 'Hello World {{ username }}'
}
// 1. Insert
const slotTemplate = new TextTemplate(readmeText, {
behavior: 'slot',
language: 'readme'
});
// 2. Replace
const template = new TextTemplate(slotTemplate.render(data));
const renderedReadmeText = template.render(data);
output renderedReadmeText
:
# Hi Aron
<!-- description -->Hello World Aron<!-- -->
start
and end
token
Custom const template = new TextTemplate('Hi ${ username }', {
start: '${',
end: '}'
});
Tokenize with js syntax
const data = {
people: ['Aron', 'Joy']
}
const text = `/* people.join(' ❤️ ') */ /* */`;
const template = new TextTemplate(text);
const renderedText = template.render(data);
output renderedText
/* people.join(' ❤️ ') */ Aron ❤️ Joy /* */
Remove token when errors occur
removeOnError: true
const text = 'Hi {{ username }}, welcome.';
const data = {};
const t1 = new TextTemplate(text);
const t2 = new TextTemplate(text, { removeOnError: true });
const r1 = t1.render(data);
const r2 = t2.render(data);
output r1
Hi {{ username }}, welcome.
output r2
Hi , welcome.
Custom identification delimiter
default
const template = new TextTemplate(html, {
behavior: 'slot',
language: 'html'
});
<title><!-- name -->text-template<!----></title>
custom
const template = new TextTemplate(html, {
behavior: 'slot',
language: 'html',
delimiter: ' / '
});
<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
Requiredbehavior: 'slot'
. Specify using comment language to setstart
andend
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
Defaultbehavior: 'slot'
. Specify middle delimiter for identifying end -
removeOnError
Defaultfalse
. Iftrue
, the token will be removed when the data doesn't match or js syntax go wrong.