Transforms doT files to template functions
Compatible only with Parcel 2, and uses the latest 2.0 beta release of doT.js
npm install parcel-transformer-dot
yarn add parcel-transformer-dot
In your .parcelrc
add:
"transformers": {
"*.dot": ["parcel-transformer-dot"]
}
Optionally, add the following config to your package.json
file, the defaults are shown below:
{
"parcel-transformer-dot": {
"argName": "it",
"strip": "true",
"selfContained": "false",
// "defsDir": undefined
}
}
Import your doT template:
<!-- template.dot -->
<div class="content">
{{= message }}
</div>
// index.js
import templateFunction from './template.dot'
const data = { message: "hello world" }
document.body.innerHTML = templateFunction( data );
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
You can just write valid Javascript.. no need for anything as unwieldy and bloated as the Handlebars Helpers!
{{ for(var prop in it) { }}
<div>{{=prop}}</div>
{{ } }}
See below for re-useable partials
{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}
{{#def.snippet}}
Can stack as many "if-else's" as you need
{{? it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? it.age === 0}}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still don't have a name?
{{?}}
{{~object:value:key}}
<div data-key="{{=key}}">{{=value}}</div>
{{~}}
{{~array:value:index}}
<div data-index="{{=index}}">{{=value}}</div>
{{~}}
There is a built in compile time helper to read and embed other text files into your template.
{{#def.loadfile("./src/assets/yourfile.svg") }}
Make sure to specify in the package.json
file:
"parcel-transformer-dot": {
"defsDir": "src/templates/defs/"
}
A relative path (local to your package.json file) specifying a directory of .dot
files. Each file must specify only one doT partial. The name of the file is for your organization only. The partial should be defined as follows:
{{##def.my_partial:my_parameter:
<div class="thing"> Partial: {{= my_paramter }} </div>
#}}
Then, in any of your standard templates, you may access these re-useable partials. Partials are only prepended to the templates that make use them.
{{#def.my_partial:it.that_parameter}}