TEMPJS is a fast, low code and no dependencies templating langage where you can use javascript inside html!
npm install tempjs-template
$ npm i tempjs-template
`
Or directly in the browser with
`html
`
Import
`ts
import tempjs from "tempjs-template";
`
Simple example
> NOTE: You can use any javascript syntax into the template just ensure to use = operator if you want to return something (never use return)
In this example we render a list and apply a color on the index
`js
const todos = ["Make a chatbot", "Eat an apple", "Do some sports"];
const data = { todos };
document.body.innerHTML = tempjs.compile(
,
data
);
`
Simple example with async
Working with async is pretty simple
`js
await tempjs.compile(
,
{
/some data here/
},
{ async: true }
);
`
Usage
$3
> NOTE: The return type is calculed on the options so it will be automatically set to string or Promise\. Below is just a simplified version of the return type.
- tempjs.compile(template: string, data: Record\, options: Options): string | Promise\
- tempjs.compileFromFile(filePath: string, data: Record\, options: Options): string | Promise\
- tempjs.compileFromFileBrowser(filePath: string, data: Record\, options: Options): Promise\
- tempjs.createFunction(filePath: string, data: Record\, options: Options): () => string | Promise\
- tempjs.debug(filePath: string, data: Record\, options: Options): { template, options, data, generatedFunction, generatedCode, dataListName, dataListValue, pluginsName, pluginsFunctions }
$3
#### Include from nodejs
include(filaname: string, data: Record, options: Options): string | Promise\
`
{%@ include("header.html", { userName: "Yoann" }) %}
`
#### Include from browser
> NOTE: Don't forget to set the option "async: true" if the file also have an includeBrowser
includeBrowser(filaname: string, data: Record, options: Options): Promise\
`
{%@ await includeBrowser("header.html", { userName: "Yoann" }) %}
`
$3
#### Remove white spaces
> NOTE: It can be combined with custom delimiters (example: {%_# I'm a comment _%})
- {%_ Remove white spaces before the first delimiter
- _%} Remove white spaces after the last delimiter
`html
{% if(5 > 0){ _%}
Five is greater than 0
{%_ } %}
`
Should compile as follow:
$3
#### Return a value
`html
{% const greeting = "Hello World!" %}
{%= greeting %}
`
Should compile as follow:
#### Return a value without escaping HTML
> XSS injection warning: Only use this with include/includeBrowser or if you are sure about what you are doing
The html will be executed
`
{% const greeting = "Hello World!
" %}
{%@ greeting %}
`
Should compile as follow:
#### Writting comments
`html
{%# You can write some comments here it will not be shown or evaluate
console.log("I ll not show") %}
I love Tempjs
`
Should compile as follow:
#### Skip js instruction
`
{%% greeting %}
`
Should compile as follow: {% greeting %}
$3
`ts
type Options = {
openDelimiter?: string;
closeDelimiter?: string;
context?: unknown;
async?: boolean;
minimified?: boolean;
root?: string;
removeWhitespace?: boolean;
delimiters?: {
name: string;
description: string;
delimiter: string;
fn: (content: string, options: Options) => string;
}[];
plugins?: { name: string; description: string; fn: Function }[];
};
`
- openDelimiter (default: {%) : Open delimiter
- closeDelimiter (default: %}) : Close delimiter
- context (default: null) : Context of the function
- async (default: false) : Make asynchronous requests in the template
- minimified (default: true) : Make the generated code more readable in debug mode
- root (default: null): Specifie a root directory for including files
- removeWhitespace (default: false): Remove all whitespace before and after js instruction
- delimiters : Create customs delimiters. By default you have:
`
= return a value
@ return a value without escaping HTML
create a comment
% Ingnore js instruction and display is as text with delimiters
`
Examples of implementation:
- Comment
`js
{
name: "comment",
description: "Shortcut to turn some code into a comment",
delimiter: "#",
fn: function (content, options) {
return "/" + content + "/";
},
}
`
- Return value
`js
{
name: "return",
description: "Allow user to add variable to the output",
delimiter: "=",
fn: function (content, options) {
return $__output += escapeHTML(${content});
},
},
`
- plugins : Create custom acessibles function into the template. By default you have "include" and "includeBrowser" that allow you to render other template into the current template:
`ts
include(filaname: string, data: Record, options: Options): string | Promise
includeBrowser(filaname: string, data: Record, options: Options): Promise
//Can be useful to create your own plugins
escapeHTML(obj: unknow): unknow //if the obj is a string HTML will be escaped
`
Example of implementation:
`ts
{
name: "truncat",
description: "Truncat some text",
fn: function(text: string, size: number){
return text.trim().substring(0, size);
},
},
``