Skip to content
/ tsdot Public

⚡️ The fastest + concise javascript template engine for Node.js and browsers. Forked from doT.

License

Notifications You must be signed in to change notification settings

Blankeos/tsdot

Repository files navigation

dot.js

tsdot

tsdot is a template engine for JavaScript. It is similar to Mustache, EJS, Handlebars, and many others. This is a fork of the original doT.js template engine.

Features

  • 🔥 Super fast and super small
  • ⚡️ Compile-time valuation
  • ❇️ Custom delimiters, partials, conditionals, array iterators, encoding, white-space control, and much more.

The only new changes after the fork are:

  • 🚀 First-class typescript support (more modern wow!)
  • 💪 Works in the Browser, Node.js Bun, and Deno.
  • 🤓 Better Docs :D (no, really)
  • 🥳 More fun! (wow emojies)

Installation

JS/TS Projects

npm install tsdot

Browser-only

<head>
  <script src="https://cdn.jsdelivr.net/npm/tsdot@latest/dist/index.global.js"></script>
</head>

Basic Usage

JS/TS Projects

import tsdot from "tsdot";

const template = `
  <div class="container">
    <h1>Hello, {{ name }}!</h1>
  </div>
`;

// 1. Compile the template
const compiledTemplate = tsdot.compile(template);

// 2. Render the template with data
const result = compiledTemplate({ name: "World" });

// <div class="container">
//   <h1>Hello, World!</h1>
// </div>

Browser-only

<body>
  <script>
    const template = `
        <div class="container">
          <h1>Hello, {{ name }}!</h1>
        </div>
      `;

    const compiledTemplate = tsdot.compile(template);

    // 2. Render the template with data
    const result = compiledTemplate({ name: "World" });
  </script>
</body>

Reference

Warning

Work in progress, feel free to contribute a PR for examples/code snippets.

Templating Language

I think each of these need examples.

{{  }} - evaluation
{{=  }} - interpolation
{{! }} - interpolation with encoding
{{# }} - compile-time evaluation/includes and partials
{{## #}} - compile-time defines
{{? }} - conditionals
{{~ }} - array iteration

TypeScript API

// Compiles a template.
// - `tmpl`: The template string.
// - `c`: The template settings.
// - `def`: The template default values. (I think)
Dot.template<T>(tmpl: string, c?: TemplateSettings | null, def?: Record<string, any>): RenderFunction<T>

// Function returned by Dot.template(). Use this to render the template.
RenderFunction<T = Record<string, any>> = (data: T): string // Function returned by Dot.template(). Use this to render the template.

// For express apparently.
Dot.compile(tmpl: string, def?: Record<string, any>): RenderFunction

Credits

  • doT.js - Original by by Laura Doktorova. However, it's been super outdated and I couldn't install it properly without TypeScript complaining hard. Hence, motivated this fork with better tools like tsup nowadays.
  • Handlebars - OG templating with great devx.
  • Mustache - Logic-less templates.