The template engine encodes the operations within HTML comments.
Replace the placeholder with teh value of `viewModel.key`.
<!-- key -->
Include the file content
<!-- include(filename.html); -->
The file content will be included if `viewModel.isInclude` is true.
<!-- includeIf(isInclude, filename.html); -->
<!-- renderIf(property); -->
This content is conditonal
<!-- endIf(); -->const html = "<h1><!-- title --></h1>" +
"<!-- include(hello-world.txt); -->" +
"<!-- includeIf(hello, hello-world.txt); -->" +
"<!-- renderIf(section); -->" +
" <h2>Section</h2>" +
"<!-- endIf(); -->";
const viewModel = { title: "Hello, World!", hello: true, section: true };
const result = await renderTemplate(html, viewModel, ".");Template syntax: <!-- key --> Where key is a property in the viewModel.
const html = "<h1><!-- title --></h1>";
const viewModel = { title: "Hello, World!" };
const result = replacePlaceholders(html, viewModel);
console.log(result); // "<h1>Hello, World!</h1>"Template syntax: <!-- include(filename.html); -->
const html = "<div><!-- include(hello-world.txt); --></div>";
const result = await includeFiles(html, ".");
console.log(result); // "<div>Hello, World!</div>"Template syntax: <!-- includeIf(isInclude, filename.html); --> Where
isInclude is a property in the viewModel. If the property is true, the file
is loaded and its content replaces the placeholder.
const html = "<div><!-- includeIf(show, hello-world.txt); --></div>";
const viewModel = { show: true };
const result = await includeFilesIf(html, ".", viewModel);
console.log(result); // "<div>Hello, World!</div>"<h1>Template file</h1>
<!-- renderIf(property); -->
<h2>Content to render if the property is true.</h2>
<!-- endIf(); -->const html = "<h1>Template file</h1>" +
"<!-- renderIf(show); -->" +
"<h2>Shown</h2>" +
"<!-- endIf(); -->" +
"<!-- renderIf(dontShow); -->" +
"<h2>Not shown</h2>" +
"<!-- endIf(); -->";
const viewModel = { show: true, dontShow: false };
const result = renderIf(html, viewModel);
console.log(result); // "<h1>Template file</h1><h2>Shown</h2>"const html = " <div><span>Hello, World!</span><!-- Comment --></div> ";
const result = minifyHtml(html); //=> "<div><span>Hello, World!</span></div>"