Template Engine#

import { render } from "@buntok/core/template";

const html = render("Hello {{ name }}!", { name: "World" });
// → "Hello World!"

render("Hello {{ name }}!", { name: "Budi" });
// → "Hello Budi!"

render("{{ user.email }}", { user: { email: "budi@example.com" } });
// → "budi@example.com"

const html = "<b>Bold text</b>";
render("{{{ html }}}", { html });
// → "<b>Bold text</b>" (not escaped)

// Basic if
render("{{#if active}}Active{{/if}}", { active: true });
// → "Active"

// If/else
render("{{#if active}}Yes{{else}}No{{/if}}", { active: false });
// → "No"

// Unless (negative if)
render("{{#unless verified}}Please verify{{/unless}}", { verified: false });
// → "Please verify"

const items = [{ name: "A" }, { name: "B" }, { name: "C" }];

render("{{#each items}}{{name}} {{/each}}", { items });
// → "A B C "

render("{{#each items}}{{@index}}: {{name}}{{/each}}", {
  items: [{ name: "X" }, { name: "Y" }],
});
// → "0: X1: Y"

render("{{#each items}}{{#if @first}}FIRST{{/if}} {{/each}}", {
  items: ["a", "b", "c"],
});
// → "FIRST   "

import { TemplateEngine } from "@buntok/core/template";

const engine = new TemplateEngine();

// Register partials
engine.registerPartial("header", "<h1>{{ title }}</h1>");
engine.registerPartial("footer", "<p>© 2024 Company</p>");

// Use in templates
const html = engine.render(`
  {{> header }}
  <p>Main content</p>
  {{> footer }}
`, { title: "Welcome" });

const engine = new TemplateEngine();

engine.registerHelper("formatDate", (date: unknown) => {
  return new Date(date as string).toLocaleDateString("id-ID");
});

engine.registerHelper("uppercase", (str: unknown) => {
  return String(str).toUpperCase();
});

const html = engine.render(
  "{{ uppercase name }} - {{ formatDate date }}",
  { name: "budi", date: "2024-01-15" }
);
// → "BUDI - 15/1/2024"

render("Hello {{! this is a comment }}World", {});
// → "Hello World"

render("Hello {{ usre.name }}", { user: { name: "Budi" } });
// → Error: Variable 'usre.name' not found in context.
//   Available keys: user
//   Did you mean: 'user.name'?

// Lenient mode - missing variables become empty string
const engine = new TemplateEngine({ strict: false });
engine.render("Hello {{ missing }}", {});
// → "Hello "

const engine = new TemplateEngine();
const compiled = engine.compile("Hello {{ name }}!");

// Reuse without re-parsing
compiled({ name: "A" }); // → "Hello A!"
compiled({ name: "B" }); // → "Hello B!"

import { render, TemplateEngine } from "@buntok/core/template";

const engine = new TemplateEngine();
engine.registerPartial("header", '<div class="header"><h1>{{ company }}</h1></div>');
engine.registerHelper("formatCurrency", (val: unknown) => `Rp ${Number(val).toLocaleString()}`);

const template = `
  {{> header }}
  
  <h1>Invoice #{{ invoice.number }}</h1>
  
  {{#if invoice.paid}}
    <p style="color: green;">✓ Paid</p>
  {{else}}
    <p style="color: red;">Please pay by {{ invoice.dueDate }}</p>
  {{/if}}
  
  {{#each invoice.items}}
    <div>{{ name }} - {{ formatCurrency price }}</div>
  {{/each}}
  
  <p>Total: {{ formatCurrency invoice.total }}</p>
`;

const html = engine.render(template, {
  company: "My Company",
  invoice: {
    number: "INV-001",
    paid: false,
    dueDate: "2024-02-01",
    items: [
      { name: "Product A", price: 150000 },
      { name: "Product B", price: 250000 },
    ],
    total: 400000,
  },
});