js-email-template-compiler
v0.0.2
Published
JS Email Template Compiler with TypeScript support
Downloads
12
Maintainers
davinderkambojReadme
JS Email Template Compiler
A JavaScript library for compiling email templates with dynamic content, conditional rendering, and iteration using jsdom. The logic is handled via custom HTML attributes such as js-value, js-if, js-if-not, and js-each.
Table of Contents
Installation
Install the package using npm:
npm install js-email-template-compilerUsage
JavaScript Example
const { renderTemplate } = require('js-email-template-compiler');
// Example HTML template
const htmlTemplate = `
<div>
<p js-value="user.name"></p>
<p js-if="user.isAdmin">Admin Section</p>
<p js-if-not="user.isAdmin">User Section</p>
<ul>
<li js-each="item in user.items">
<span js-value="item.name"></span>
</li>
</ul>
</div>
`;
// Example data
const data = {
user: {
name: 'John Doe',
isAdmin: true,
items: [
{ name: 'Item 1' },
{ name: 'Item 2' }
]
}
};
// Render template
renderTemplate(htmlTemplate, data, true).then((renderedHtml) => {
console.log(renderedHtml);
});TypeScript Example
import { renderTemplate } from 'js-email-template-compiler';
const htmlTemplate = `
<div>
<h1 js-value="user.name">Placeholder</h1>
<h2 js-if="user.isAdmin">Admin Section</h2>
<h3 js-if-not="user.isAdmin">User Section</h3>
<ul>
<li js-each="order in user.orders">
<span js-value="order.name"></span> - <span js-value="order.date"></span>
</li>
</ul>
</div>
`;
const data = {
user: {
name: "John Doe",
isAdmin: true,
orders: [
{ name: "Order 1", date: "2023-01-01" },
{ name: "Order 2", date: "2023-02-01" }
]
}
};
renderTemplate(htmlTemplate, data, true).then((renderedHtml) => {
console.log(renderedHtml);
});Options
The renderTemplate function accepts the following arguments:
htmlString(string): The HTML template string to process.data(object): The data object for binding dynamic values.removeJsAttributes(boolean): Whether to removejs-*attributes after rendering. Iftrue, these attributes will be removed from the resulting HTML.
Attributes
The library uses custom attributes to define dynamic logic inside the HTML template.
js-value
Inserts dynamic content into the template from the provided data.
Example:
<p js-value="user.name"></p>This replaces the content of the <p> tag with the value of user.name from the data object.
js-if
Conditionally renders an element if the expression evaluates to true.
Example:
<p js-if="user.isAdmin">Admin Section</p>This shows the element only if user.isAdmin is true.
js-if-not
Conditionally renders an element if the expression evaluates to false.
Example:
<p js-if-not="user.isAdmin">User Section</p>This shows the element only if user.isAdmin is false.
js-each
Iterates over an array and renders multiple elements based on the items in the array.
Example:
<ul>
<li js-each="item in user.items">
<span js-value="item.name"></span>
</li>
</ul>This repeats the <li> element for each item in the user.items array.
Examples
Advanced Example with Nested Iteration
const { renderTemplate } = require('js-email-template-compiler');
// Example HTML template
const htmlTemplate = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template Renderer</title>
</head>
<body>
<h1 js-value="user.name">example name</h1>
<h1 js-value="user.email">example email</h1>
<h2 js-if="user.isAdmin">Admin Section
<span js-if="user.isSuperAdmin">Super Admin Section</span>
</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Orders</th>
<th>Admin</th>
</tr>
<tr js-each="user in users">
<td js-value="user.name"></td>
<td style="text-align: center" js-value="user.email"></td>
<td>
<table border="1">
<tr js-each="order in user.orders">
<td js-value="order.name">example order name</td>
<td js-value="order.date">example order date</td>
<td js-value="global.user.name">example global name</td>
<td js-value="user.name">example user name</td>
</tr>
</table>
</td>
<td style="text-align: center" js-if="user.isAdmin">Admin</td>
<td style="text-align: center" js-if-not="user.isAdmin">Not Admin</td>
</tr>
</table>
</body>
</html>
`;
// Example data
const data = {
user: { name: "John Doe", email: "[email protected]", isAdmin: true, isSuperAdmin: false },
users: [
{
name: "Alice",
email: "[email protected]",
isAdmin: true,
orders: [
{ name: "Laptop", date: "2023-01-01" },
{ name: "Phone", date: "2023-02-01" }
]
},
{
name: "Bob",
email: "[email protected]",
isAdmin: false,
orders: [{ name: "Tablet", date: "2003-03-01" }]
}
]
};
// Render the template with the data
renderTemplate(htmlTemplate, data, true).then((renderedHtml) => {
console.log(renderedHtml);
});License
This project is licensed under the ISC License.