### Install Dependencies

Source: https://github.com/lukeed/tempura/blob/master/examples/worker/readme.md

Installs the necessary project dependencies.

```sh
$ npm install
```

--------------------------------

### Install Tempura

Source: https://github.com/lukeed/tempura/blob/master/readme.md

Install the tempura package using npm. This is the first step to using the template engine in your project.

```bash
$ npm install --save tempura
```

--------------------------------

### Tempura Template Example (example.hbs)

Source: https://github.com/lukeed/tempura/blob/master/readme.md

This is an example of a Tempura template file using Handlebars-like syntax. It demonstrates conditional rendering, variable assignment, and iteration.

```hbs
{{! expected props to receive }}
{{#expect title, items }}

{{! inline variables }}
{{#var count = items.length }}
{{#var suffix = count === 1 ? 'task' : 'tasks' }}

{{#if count == 0}}
  <p>You're done! 🎉</p>
{{#else}}
  <p>You have {{{ count }}} {{{ suffix }}} remaining!</p>

  {{#if count == 1}}
    <small>Almost there!</small>
  {{#elif count > 10}}
    <small>... you must be <em>fried</em> 😔</small>
  {{#else}}
    <small>You've got this 💪🏼</small>
  {{/if}}

  <ul>
    {{#each items as todo}}
      <li>{{ todo.text }}</li>
    {{/each}}
  </ul>
{{/if}}
```

--------------------------------

### Tempura Template Syntax Example

Source: https://context7.com/lukeed/tempura/llms.txt

Demonstrates basic Tempura template syntax for variable expectation, inline computation, conditional rendering, iteration, and output escaping. Use for standard template logic.

```handlebars
{{! Declare all required props }}
{{#expect user, todos, showDone}}

{{! Inline computed variable }}
{{#var total = todos.length}}
{{#var done = todos.filter(t => t.done).length}}
{{#var pending = total - done}}

<h2>{{ user.name }}'s Tasks</h2>
<p>{{{ pending }}} of {{{ total }}} remaining</p>

{{! Conditional rendering }}
{{#if total === 0}}
  <p>No tasks yet — enjoy your day!</p>
{{#elif pending === 0}}
  <p>All done! 🎉</p>
{{#else}}
  <ul>
    {{#each todos as todo, idx}}
      {{#if !todo.done || showDone}}
        <li data-index="{{{ idx }}}">
          {{! Escaped output — safe against XSS }}
          <span>{{ todo.title }}</span>
          {{#if todo.done}}<em>(done)</em>{{/if}}
        </li>
      {{/if}}
    {{/each}}
  </ul>
{{/if}}

{{! Raw output — not HTML-escaped }}
<footer>{{{ user.signatureHtml }}}</footer>

{{! 
  Multi-line template comments are removed from output entirely.
  HTML comments like <!-- --> are preserved.
!}}
```

--------------------------------

### Basic Expression and Variable Usage

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

Use double curly braces {{ }} to print values. This example shows printing a 'name' variable and accessing a property 'length' of an 'items' array.

```handlebars
{{#expect name}}
<p>Hello, {{ name }}!</p>
```

```handlebars
<p>Items left: {{ items.length }}</p>
```

--------------------------------

### Iterate Over Arrays with #each (Value Only)

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

Use the `#each` helper to loop over an array. This example demonstrates how to access only the value of each item in the array.

```handlebars
{{#expect items}}

{{! only use the value }}
{{#each items as item}}
  <div class="task">
    <strong class="title">{{ item.title }}</strong>
    <span class="text">{{ item.text }}</span>
  </div>
{{/each}}
```

--------------------------------

### Async Compile with Custom Async Block

Source: https://context7.com/lukeed/tempura/llms.txt

Demonstrates compiling a template with an asynchronous custom block using the `async: true` option. The custom block simulates an asynchronous data fetch.

```javascript
import { compile } from 'tempura';

const asyncRender = compile(`
  {{#expect symbol}}
  {{#ticker symbol=symbol }}
`, {
  async: true,
  blocks: {
    async ticker(args) {
      // Simulate async data fetch
      const price = await Promise.resolve('182.34');
      return `<span>${args.symbol}: $${price}</span>`;
    }
  }
});

const result = await asyncRender({ symbol: 'AAPL' });
console.log(result); //=> "<span>AAPL: $182.34</span>"
```

--------------------------------

### Library Load Time Comparison

Source: https://github.com/lukeed/tempura/blob/master/bench/readme.md

Measures the time taken to require each templating library. Lower values indicate faster initialization.

```text
pug:         127.647ms
ejs:           1.444ms
handlebars:   23.627ms
yeahjs:        0.979ms
dot:           1.363ms
art-template:  8.847ms
tempura:       0.593ms
```

--------------------------------

### Template Compile Time Comparison

Source: https://github.com/lukeed/tempura/blob/master/bench/readme.md

Shows the average time in milliseconds to parse a template and generate its function equivalent. Results are an average of 5 runs.

```text
Benchmark (Compile)
  ~> pug                7.20474ms
  ~> handlebars         0.02952ms
  ~> ejs                0.28859ms
  ~> yeahjs             0.12206ms
  ~> dot                0.27055ms
  ~> art-template       0.76982ms
  ~> tempura            0.19813ms
```

--------------------------------

### Run Rollup Build

Source: https://github.com/lukeed/tempura/blob/master/examples/worker/readme.md

Executes the Rollup build process to bundle the project. The configuration is managed in `rollup.config.js`.

```sh
$ npm run rollup
```

--------------------------------

### Run esbuild Build

Source: https://github.com/lukeed/tempura/blob/master/examples/worker/readme.md

Executes the esbuild build process. This can be run using the npm script or directly with Node.js. The programmatic approach is required to attach esbuild plugins.

```sh
$ npm run esbuild
```

```sh
$ node esbuild.js
```

--------------------------------

### Define Global Props with options.props

Source: https://context7.com/lukeed/tempura/llms.txt

Explains how to use `options.props` to declare shared/global variables programmatically, serving as a programmatic alternative to `#expect`. Use for context like `user`, `config`, or `locale` available in all templates.

```javascript
import { compile } from 'tempura';

// Without options.props, every template needs: {{#expect user, locale}}
// With options.props, these are globally available:
const globalOptions = {
  props: ['user', 'locale'],
};

const headerRender = compile(`
  <header>Hello, {{ user.name }} ({{ locale }})</header>
`, globalOptions);

const footerRender = compile(`
  <footer>© {{ user.org }} — {{ locale }}</footer>
`, globalOptions);

const ctx = { user: { name: 'Alice', org: 'ACME' }, locale: 'en-US' };
console.log(headerRender(ctx)); //=> "<header>Hello, Alice (en-US)</header>"
console.log(footerRender(ctx)); //=> "<footer>© ACME — en-US</footer>"

// Per-template #expect still works alongside props (deduped automatically)
const pageRender = compile(`
  {{#expect title}}
  <title>{{ title }} | {{ user.org }}</title>
`, globalOptions);

console.log(pageRender({ ...ctx, title: 'Dashboard' }));
//=> "<title>Dashboard | ACME</title>"

```

--------------------------------

### Write Transformed Template to File

Source: https://context7.com/lukeed/tempura/llms.txt

Shows how to write the transformed JavaScript function string to a file, enabling it to be imported directly as a render function during the build process.

```javascript
import { transform } from 'tempura';
import { writeFile } from 'fs/promises';

const template = `
  {{#expect user}}
  <p>Hello, {{ user.name }}! You have {{{ user.msgCount }}} messages.</p>
`;

const esm = transform(template);

// Write to disk for bundling (e.g., as part of a build step)
await writeFile('template.js', esm, 'utf8');
// The output file can now be imported directly as a render function:
// import render from './template.js';
// render({ user: { name: 'Alice', msgCount: 5 } });
```

--------------------------------

### tempura.compile(input, options?)

Source: https://github.com/lukeed/tempura/blob/master/docs/api.md

Converts a template string into an executable function that renders the template.

```APIDOC
## tempura.compile(input, options)

### Description
Compiles a template string into a renderable function. The returned function can generate a string or a Promise of a string.

### Parameters
#### Path Parameters
- **input** (string) - Required - The template string to compile.
- **options** (object) - Optional - Configuration options for compilation.
  - **options.escape** (function) - Optional - The function to use for escaping `{{{ raw }}}` values. Defaults to `tempura.esc`.

### Returns
- `Compiler` - A function that takes data and returns the rendered template string or a Promise of a string.
```

--------------------------------

### tempura.compile(input, options?)

Source: https://context7.com/lukeed/tempura/llms.txt

Converts a template string into a reusable render function. This is the primary API for server-side rendering and runtime use.

```APIDOC
## tempura.compile(input, options?)

### Description
Parses the template and returns a `Compiler` function. When invoked with the appropriate data object, the function returns a `string` (or `Promise<string>` if `options.async` is true).

### Method
`compile(input: string, options?: object)`

### Parameters
#### Input
- `input` (string) - The template string to compile.
- `options` (object, optional) - Configuration options for compilation.
  - `async` (boolean) - If true, the render function will return a `Promise<string>` to support async blocks.
  - `escape` (function) - A custom function for HTML escaping.
  - `blocks` (object) - An object mapping custom block names to their implementations (can be sync or async).

### Request Example
```javascript
import { compile } from 'tempura';

const render = compile(`
  {{#expect name, items}}
  <h1>{{ name }}</h1>
  {{#if items.length === 0}}
    <p>Nothing here.</p>
  {{#else}}
    <ul>
      {{#each items as item}}
        <li>{{ item.text }}</li>
      {{/each}}
    </ul>
  {{/if}}
`);

console.log(render({
  name: 'My List',
  items: [
    { text: 'Buy groceries' },
    { text: 'Walk the dog' },
  ]
}));
// => "<h1>My List</h1><ul><li>Buy groceries</li><li>Walk the dog</li></ul>"
```

### Response
- Returns a render function.
```

--------------------------------

### Define Custom Directives with options.blocks

Source: https://github.com/lukeed/tempura/blob/master/docs/api.md

Configure custom directives like `foo` and `hello123` for use in templates. Ensure all used directives are defined to avoid parsing errors. The `hello123` directive is defined as asynchronous.

```javascript
/**
 * @type {tempura.Options}
 */
let options = {
  async: true,
  blocks: {
    foo(args) {
      return `<span>foo got ~${args.value}~</span>`;
    },
    async hello123(args) {
      return `<h1>hello123 got ~${args.name}~</h1>`;
    }
  }
};

let template = `
  {{#foo value=123 }}
  {{#hello123 name="world" }}
`;

// NOTE: Works with `transform` too
await tempura.compile(template, options)();
//=> "<span>foo got ~123~</span><h1>hello123 got ~world~</h1>"
```

--------------------------------

### Compile Template to Render Function (Basic Usage)

Source: https://context7.com/lukeed/tempura/llms.txt

Use `compile()` to convert a template string into a reusable render function for runtime use. Ensure all expected variables are provided when invoking the render function.

```javascript
import { compile } from 'tempura';

// Basic usage
const render = compile(`
  {{#expect name, items}}
  {{#var count = items.length}}
  <h1>{{ name }}</h1>
  {{#if count === 0}}
    <p>Nothing here.</p>
  {{#else}}
    <ul>
      {{#each items as item}}
        <li>{{ item.text }}</li>
      {{/each}}
    </ul>
  {{/if}}
`);

console.log(typeof render); //=> "function"

const output = render({
  name: 'My List',
  items: [
    { text: 'Buy groceries' },
    { text: 'Walk the dog' },
  ]
});
console.log(output);
// => "<h1>My List</h1><ul><li>Buy groceries</li><li>Walk the dog</li></ul>"

// Empty case
console.log(render({ name: 'Empty', items: [] }));
// => "<h1>Empty</h1><p>Nothing here.</p>"
```

--------------------------------

### Render Tempura Template (render.js)

Source: https://github.com/lukeed/tempura/blob/master/readme.md

This JavaScript code demonstrates how to read a Tempura template file and render it with provided data. It uses the `compile` function for runtime rendering.

```js
import { readFile } from 'fs/promises';
import { transform, compile } from 'tempura';

const template = await readFile('example.hbs', 'utf8');

// Transform the template into a function
// NOTE: Produces a string; ideal for build/bundlers
// ---

let toESM = transform(template);
console.log(typeof toESM); //=> "string"
console.log(toESM);
//=> `import{esc as $$1}from"tempura";export default function($$3,$$2){...}`

let toCJS = transform(template, { format: 'cjs' });
console.log(typeof toCJS); //=> "string"
console.log(toCJS);
//=> `var $$1=require("tempura").esc;module.exports=function($$3,$$2){...}`


// Convert the template into a live function
// NOTE: Produces a `Function`; ideal for runtime/servers
// ---

let render = compile(template);
console.log(typeof render); //=> "function"
render({
  title: 'Reminders',
  items: [
    { id: 1, text: 'Feed the doggo' },
    { id: 2, text: 'Buy groceries' },
    { id: 3, text: 'Exercise, ok' },
  ]
});
//=> "<p>You have 3 tasks remaining!</p>\n"
//=> + "<small>You've got this 💪🏼</small>\n\n"
//=> + "<ul>\n"
//=> + "  <li>Feed the doggo</li>\n"
//=> + "  <li>Buy groceries</li>\n"
//=> + "  <li>Exercise, ok</li>\n"
//=> + "</ul>"
```

--------------------------------

### Render Time - Raw Values Benchmark

Source: https://github.com/lukeed/tempura/blob/master/bench/readme.md

Measures how quickly generated functions render an output string without escaping template values. Higher ops/sec indicates better performance.

```text
Validation (Render)
  ✔ pug
  ✔ handlebars
  ✔ ejs
  ✔ yeahjs
  ✔ dot
  ✔ art-template
  ✔ tempura

Benchmark (Render)
  pug                x 34,847 ops/sec ±2.79% (93 runs sampled)
  handlebars         x  6,700 ops/sec ±1.41% (92 runs sampled)
  ejs                x    802 ops/sec ±0.54% (94 runs sampled)
  yeahjs             x 31,508 ops/sec ±0.30% (97 runs sampled)
  dot                x 40,704 ops/sec ±3.08% (93 runs sampled)
  art-template       x 39,839 ops/sec ±0.86% (90 runs sampled)
  tempura            x 44,656 ops/sec ±0.42% (92 runs sampled)
```

--------------------------------

### Tempura Benchmark Results

Source: https://github.com/lukeed/tempura/blob/master/readme.md

These are benchmark results comparing Tempura's rendering performance against other template engines, both with raw and escaped values. For full details, refer to the `/bench` directory.

```text
Benchmark: Render w/ raw values (no escape)
  pug                x 34,847 ops/sec ±2.79% (93 runs sampled)
  handlebars         x  6,700 ops/sec ±1.41% (92 runs sampled)
  ejs                x    802 ops/sec ±0.54% (94 runs sampled)
  dot                x 40,704 ops/sec ±3.08% (93 runs sampled)
  art-template       x 39,839 ops/sec ±0.86% (90 runs sampled)
  tempura            x 44,656 ops/sec ±0.42% (92 runs sampled)

Benchmark: Render w/ escaped values
  pug                x 2,800 ops/sec ±0.31% (95 runs sampled)
  handlebars         x   733 ops/sec ±0.34% (94 runs sampled)
  ejs                x   376 ops/sec ±0.17% (91 runs sampled)
  dot                x   707 ops/sec ±0.15% (96 runs sampled)
  art-template       x 2,707 ops/sec ±0.12% (96 runs sampled)
  tempura            x 2,922 ops/sec ±0.31% (96 runs sampled)
```

--------------------------------

### esbuild Bundler Plugin for Tempura

Source: https://context7.com/lukeed/tempura/llms.txt

Shows how to integrate Tempura templates into an esbuild build process. The plugin transforms `.hbs` files into importable JavaScript modules at build time, eliminating runtime parsing overhead. All `tempura.transform()` options are supported.

```javascript
import { build } from 'esbuild';
import tempura from 'tempura/esbuild';

await build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    tempura({
      // All tempura.transform() options are supported
      format: 'esm',
      // Optionally pre-declare global props
      props: ['user', 'config'],
    })
  ]
});

// After bundling, .hbs files are importable as render functions:
// src/greeting.hbs:
//   {{#expect name}}
//   <p>Hello, {{ name }}!</p>

import greet from './greeting.hbs';
console.log(greet({ name: 'World' })); //=> "<p>Hello, World!</p>"
```

--------------------------------

### Define Custom Blocks in Tempura

Source: https://context7.com/lukeed/tempura/llms.txt

Shows how to define and use custom blocks for extending template functionality, including synchronous, asynchronous, and recursive block definitions. Use when needing reusable, stateless helper functions within templates.

```javascript
import { compile } from 'tempura';
import { readFileSync } from 'fs';

// Template cache for the `include` block
const Cache = {};

const blocks = {
  // Sync block: renders an HTML <script> tag
  script({ src, type, defer }) {
    let tag = `<script src="${src}"`;
    if (type) tag += ` type="${type}"`;
    if (defer) tag += ' defer';
    return tag + '><\/script>';
  },

  // Block that invokes another block
  card(args, blocks) {
    return `<div class="card">${blocks.script({ src: args.js })}<p>${args.body}</p></div>`;
  },

  // File-include block using compile() as a block
  include(args) {
    const { src, ...data } = args;
    if (!Cache[src]) {
      Cache[src] = compile(readFileSync(src, 'utf8'), { blocks });
    }
    return Cache[src](data);
  }
};

const render = compile(`
  {{#expect page}}
  <html>
    <body>
      {{#card body=page.intro js="app.js" }}
      {{#script src="analytics.js" defer=true }}
    </body>
  </html>
`, { blocks });

console.log(render({ page: { intro: 'Welcome!' } }));
// => <html><body>
//      <div class="card"><script src="app.js"></script><p>Welcome!</p></div>
//      <script src="analytics.js" defer></script>
//    </body></html>

// Recursive block example
const recBlocks = {
  loop(args, blocks) {
    const v = args.value;
    return String(v) + (v > 0 ? ` ~> ${blocks.loop({ value: v - 1 }, blocks)}` : '');
  }
};
const recRender = compile('{{#loop value=4 }}', { blocks: recBlocks });
console.log(recRender()); //=> "4 ~> 3 ~> 2 ~> 1 ~> 0"

```

--------------------------------

### Invoking Blocks from Other Blocks (Direct Reference)

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Shows how a custom block ('foo') can directly invoke another custom block ('bar') by accessing the 'blocks' parameter passed to it. Ensure you pass arguments in the expected format.

```javascript
let options = {
  blocks: {
    // NOTE: `blocks` parameter === `options.blocks` object
    foo(args, blocks) {
      let output = '<foo>';
      if (args.other) {
        // Call the `bar` method directly
        output += blocks.bar({ name: args.other });
      }
      return output + '</foo>';
    },
    // NOTE: `blocks` parameter === `options.blocks` object
    bar(args, blocks) {
      return `<bar>${args.name}</bar>`;
    }
  }
};

let render = tempura.compile('{{#foo other=123}} – {{#bar name="Alice"}}', options);
render(); //=> "<foo><bar>123</bar></foo> – <bar>Alice</bar>"

```

--------------------------------

### Define an Async Custom 'nasdaq' Block

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Define an asynchronous custom block 'nasdaq' to fetch stock data. Remember to enable `options.async` when compiling templates that use async blocks. This block takes a 'symbol' argument and returns a `<dt>` and `<dl>` tag with the stock price.

```javascript
import { send } from 'httpie';

let options = {
  blocks: {
    async nasdaq(args) {
      let { symbol } = args;
      let output = `<dt>${symbol}</dt>`;

      // DEMO: Send a GET request to some Stock Ticker API
      let res = await send('GET', `https://.../symbols/${symbol}`);
      output += `<dl>${res.data.price}</dl>`;

      return output;
    }
  }
});

```

--------------------------------

### Implement Conditional Logic with #if, #elif, #else

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

Control the flow of your template using `#if`, `#elif` (else if), and `#else` helpers. Parentheses around conditions are optional. All `#if` blocks must be closed with an `/if` block.

```handlebars
{{#expect age, isActive}}

{{#if isActive}}
  <p>Good for you!</p>
{{/if}}
```

```handlebars
{{#if isActive}}
  <p>Good for you!</p>
{{#else}}
  <p>How about 1 hour a week?</p>
{{/if}}
```

```handlebars
{{#var senior = age >= 70}}

{{#if senior && isActive}}
  <p>Wow, that's amazing!</p>
{{#elif isActive}}
  <p>Good for you!</p>
{{#elif senior}}
  <p>How about water aerobics?</p>
{{#else}}
  <p>How about kick boxing?</p>
{{/if}}
```

--------------------------------

### Rollup Bundler Plugin for Tempura

Source: https://context7.com/lukeed/tempura/llms.txt

Illustrates the integration of Tempura templates with Rollup. Similar to the esbuild plugin, this transforms `.hbs` files into JavaScript modules during the build, optimizing performance by removing runtime parsing.

```javascript
import tempura from 'tempura/rollup';

export default {
  input: 'src/index.js',
  output: { dir: 'dist', format: 'esm' },
  plugins: [
    tempura({
      format: 'esm',
      props: ['user'],
    })
  ]
};
```

--------------------------------

### Compile Template to Render Function

Source: https://github.com/lukeed/tempura/blob/master/docs/api.md

Use `tempura.compile` to convert a template string into a function that can render the template with provided data. The returned function can output a string or a Promise of a string.

```js
let render = tempura.compile(`
  {{#expect age}}
  {{#if age < 100}}
    You're not 100+ yet
  {{#else}}
    What's the secret?
  {{/if}}
`);

console.log(typeof render);
//=> "function"

render({ age: 31 });
//=> "You're not 100+ yet"

render({ age: 102 });
//=> "What's the secret?"
```

--------------------------------

### Custom Escape Function with Compile

Source: https://context7.com/lukeed/tempura/llms.txt

Demonstrates how to provide a custom escape function to `compile()` for specific output formats like XML. The custom function replaces characters like `'` and `>`.

```javascript
import { compile } from 'tempura';

function xmlEsc(value) {
  return String(value ?? '').replace(/'/g, '&apos;').replace(/>/g, '&gt;');
}

const render = compile(`{{#expect val}}<node>{{ val }}</node>`, {
  escape: xmlEsc
});
console.log(render({ val: "it's > fine" }));
//=> "<node>it&apos;s &gt; fine</node>"
```

--------------------------------

### Iterate Over Arrays with #each (Value and Index)

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

Use the `#each` helper to loop over an array, accessing both the value and the index of each item. All `#each` blocks must be terminated by an `/each` block.

```handlebars
{{#expect items}}

{{! use the value & index }}
{{#each items as item,index }}
  <div class="task" data-index="{{{ index }}}">
    <strong class="title">{{ item.title }}</strong>
    <span class="text">{{ item.text }}</span>
  </div>
{{/each}}
```

--------------------------------

### Tempura Compile Options: Loose Mode

Source: https://context7.com/lukeed/tempura/llms.txt

Demonstrates the difference between strict and loose modes in Tempura compilation. Loose mode allows referencing variables without explicit `{{#expect}}` declarations, useful for migrating existing Handlebars templates or rapid prototyping.

```javascript
import { compile } from 'tempura';

// Strict mode (default) — ReferenceError without #expect
try {
  compile('<p>{{ name }}</p>')({ name: 'Alice' }); // throws
} catch (e) {
  console.error(e.message); // ReferenceError: name is not defined
}

// Loose mode — no #expect needed
const render = compile(
  `<p>{{ name }}</p>
  <p>{{ age }}</p>
  {{#if role}}
    <span>{{ role }}</span>
  {{/if}}
`, { loose: true });

console.log(render({ name: 'Alice', age: 30, role: 'Admin' }));
//=> "<p>Alice</p><p>30</p><span>Admin</span>"

console.log(render({ name: 'Bob', age: 25 }));
//=> "<p>Bob</p><p>25</p>"
// No error even though `role` is undefined
```

--------------------------------

### Render Time - Escaped Values Benchmark

Source: https://github.com/lukeed/tempura/blob/master/bench/readme.md

Measures how quickly generated functions render an output string with all template values escaped. Higher ops/sec indicates better performance.

```text
Benchmark (Render)
  pug                x 2,800 ops/sec ±0.31% (95 runs sampled)
  handlebars         x   733 ops/sec ±0.34% (94 runs sampled)
  ejs                x   376 ops/sec ±0.17% (91 runs sampled)
  yeahjs             x   873 ops/sec ±0.30% (95 runs sampled)
  dot                x   707 ops/sec ±0.15% (96 runs sampled)
  art-template       x 2,707 ops/sec ±0.12% (96 runs sampled)
  tempura            x 2,922 ops/sec ±0.31% (96 runs sampled)
```

--------------------------------

### tempura.transform(input, options?)

Source: https://github.com/lukeed/tempura/blob/master/docs/api.md

Transforms a template string into a string representation of its equivalent JavaScript function.

```APIDOC
## tempura.transform(input, options)

### Description
Transforms a template string into a string-representation of the equivalent JavaScript function. This is useful for build-time transformations.

### Parameters
#### Path Parameters
- **input** (string) - Required - The template string to transform.
- **options** (object) - Optional - Configuration options for transformation.
  - **options.format** (string) - Optional - The module format for the output. Can be `"esm"` (default) or `"cjs"`.

### Returns
- `string` - A string representing the JavaScript function equivalent of the template.
```

--------------------------------

### Define a Custom 'script' Block

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Define a custom block named 'script' that generates a `<script>` HTML tag. It accepts 'src', 'type', and 'defer' arguments.

```javascript
let options = {
  blocks: {
    script(args) {
      let { src, defer, type } = args;

      let output = `<script src="${src}"`;
      if (type) output += ` type="${type}"`;
      if (defer) output += ' defer';
      output += '></script>';

      return output;
    }
  }
});

```

--------------------------------

### Invoking Blocks from Other Blocks (Helper Function)

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

An alternative method to invoke blocks from other blocks is by using a shared helper function. This approach is valid but requires managing separate helper functions.

```javascript
function helper(value) {
  return `<bar>${value}</bar>`;
}

let blocks = {
  foo(args) {
    let output = '<foo>';
    if (args.other) output += helper(args.other);
    return output + '</foo>';
  },
  bar(args) {
    return helper(args.name);
  }
};

let render = tempura.compile('{{#foo other=123}} – {{#bar name="Alice"}}', { blocks });
render(); //=> "<foo><bar>123</bar></foo> – <bar>Alice</bar>"

```

--------------------------------

### Complex Argument Passing in Custom Blocks

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Demonstrates passing complex arguments like arrays and objects to custom blocks. Note that inline array and object definitions can become verbose.

```handlebars
{{#expect list}}

{{#var count = list.length}}

{{#if count > 0}}
  {{#table
    items=list total=count
    max=25 sticky=true }}
{{/if}}

```

--------------------------------

### Declaring Expected Variables with #expect

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

The #expect helper declares variables the template expects to receive, preventing runtime ReferenceErrors. Multiple variables can be declared in one block, and multiple #expect blocks can be used.

```handlebars
{{#expect name}}
{{#expect foo, bar}}
{{#expect
    hello,
    title, todos }}
```

--------------------------------

### Define a Custom 'person' Block with Arguments

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Define a custom block 'person' that accepts 'name' and 'age' arguments and returns a formatted string. Tempura parses block arguments into an object before calling the block function.

```javascript
let render = tempura.compile('...', {
  blocks: {
    person(args) {
      let { name, age } = args;
      return `${name} is ${age} years old.`;
    }
  }
});

```

--------------------------------

### Transform Template to JavaScript Function String (ESM)

Source: https://context7.com/lukeed/tempura/llms.txt

Use `transform()` to compile a template into a JavaScript function string, suitable for bundler integration. The default output format is ESM.

```javascript
import { transform } from 'tempura';

const template = `
  {{#expect user}}
  <p>Hello, {{ user.name }}! You have {{{ user.msgCount }}} messages.</p>
`;

// ESM output (default)
const esm = transform(template);
console.log(typeof esm); //=> "string"
console.log(esm);
// => 'import{esc as $$1}from"tempura";export default function($$3,$$2){var{user}=$$3,...}'
```

--------------------------------

### Compiler Blocks Composition

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Compose `tempura.compile` functions within custom block definitions. This allows for reusable and composable template components.

```javascript
// Declare `blocks` variable upfront, for reference.
// This is needed so that `foo` and can see `bar` block exists.
let blocks = {
  bar: tempura.compile(
    '{{#expect name}}
    <bar>{{ name }}</bar>
  '),
};

blocks.foo = tempura.compile(
  '{{#expect other}}
  <foo>
    {{#if other}}
      {{#bar name=other }}
    {{/if}}
  </foo>
', { blocks });

let render = tempura.compile('{{#foo other=123}} – {{#bar name="Alice"}}', { blocks });
render(); //=> "<foo><bar>123</bar></foo> – <bar>Alice</bar>"
```

--------------------------------

### Comments in Templates

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

Use {{! }} for template comments that are removed during rendering. Standard HTML comments <!-- --> are preserved in the output.

```handlebars
<!-- HTML comments are kept in output -->
{{! template comments are removed }}
{{! 
  template comments
  can also be multi-line
  ...and are still removed
!}}
<p>hello world</p>
```

--------------------------------

### Define and Use Template Variables with #var

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

Use `#var` to define new variables within a template. These variables can evaluate any JavaScript and reference other template variables, following standard JavaScript scoping rules. Only one variable can be defined per `#var` block.

```handlebars
{{#expect todos}}
{{#var numTotal = todos.length}}
{{#var numDone = todos.filter(x => x.done).length}}
{{#var numActive = numTotal = numDone}}

<p>You have {{{ numActive }}} item(s) remaining</p>
<p>You have {{{ numTotal }}} item(s) in total</p>
```

--------------------------------

### Transform Template to JavaScript Function String (CJS)

Source: https://context7.com/lukeed/tempura/llms.txt

Compiles a template into a JavaScript function string using the CommonJS (CJS) format. This is useful for environments that do not support ESM.

```javascript
import { transform } from 'tempura';

const template = `
  {{#expect user}}
  <p>Hello, {{ user.name }}! You have {{{ user.msgCount }}} messages.</p>
`;

// CJS output
const cjs = transform(template, { format: 'cjs' });
console.log(cjs);
// => 'var $$1=require("tempura").esc;module.exports=function($$3,$$2){var{user}=$$3,...}'
```

--------------------------------

### Transform Template to JavaScript String

Source: https://github.com/lukeed/tempura/blob/master/docs/api.md

Use `tempura.transform` to convert a template string into a string representation of a JavaScript function. This is useful for build-time transformations and code replacement, and it defaults to generating ESM format.

```js
let template = `
  {{#expect age}}
  {{#if age < 100}}
    You're not 100+ yet
  {{#else}}
    What's the secret?
  {{/if}}
`;

// produces ESM format by default
let esm = tempura.transform(template);
console.log(typeof esm); //=> "string"
console.log(esm);
//=> 'import{esc as $$1}from"tempura";export default function($$3,$$2){var{age}=$$3,x=``;x+=``;if(age < 100){x+=`You\\'re not 100+ yet"`;}else{x+=`What\'s the secret?`;}return x}'
```

--------------------------------

### HTML Escaping vs. Raw Output

Source: https://github.com/lukeed/tempura/blob/master/docs/syntax.md

By default, expressions are HTML-escaped. Use triple curly braces {{{ }}} to output raw, unescaped values. This is useful for preventing unintended HTML rendering.

```handlebars
{{! input }}
escaped: {{ 'a & b " c < d' }}
raw: {{{ 'a & b " c < d' }}}
```

--------------------------------

### Recursive Compiler Block Definition

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Define a recursive block using `tempura.compile` by pre-defining the `options.blocks` object. This allows the block definition to reference itself during compilation.

```javascript
let blocks = {
  // PLACEHOLDER
  loop: null,
};

// Define `loop`, with `blocks` reference
blocks.loop = tempura.compile(
  '{{#expect value }}

  {{ value }}
  {{#if value-- }}
    ~> {{#loop value=value }}
  {{/if}}
', { blocks });

let render = tempura.compile('{{#loop value=3 }}', { blocks });
render(); //=> "3 ~> 2 ~> 1 ~> 0"
```

--------------------------------

### tempura.esc(value)

Source: https://github.com/lukeed/tempura/blob/master/docs/api.md

Escapes special HTML characters in a given value. Coerces non-string values to strings.

```APIDOC
## tempura.esc(value)

### Description
Returns the HTML-escaped string.

### Parameters
#### Path Parameters
- **value** (string or unknown) - Required - The value to be HTML-escaped. Special characters `"`, `&`, and `<` are escaped. Non-string values are coerced to strings.

### Returns
- `string` - The escaped string.
```

--------------------------------

### HTML Escape Utility Function

Source: https://context7.com/lukeed/tempura/llms.txt

The `esc()` utility function safely escapes HTML special characters (`"`, `&`, `<`). It also handles coercion of non-string values.

```javascript
import { esc } from 'tempura';

console.log(esc('Hello <World> & "everyone"'));
//=> 'Hello &lt;World&gt; &amp; &quot;everyone&quot;'

console.log(esc(null));        //=> ""
console.log(esc(undefined));   //=> ""
console.log(esc(42));          //=> "42"
console.log(esc([1, 2, 3]));   //=> "1,2,3"
console.log(esc({ a: 1 }));    //=> "[object Object]"
```

--------------------------------

### Recursive Block Definition

Source: https://github.com/lukeed/tempura/blob/master/docs/blocks.md

Define a block that calls itself recursively. Ensure an exit condition to prevent infinite loops.

```javascript
let blocks = {
  loop(args, blocks) {
    let value = args.value;
    let output = String(value);
    if (value--) {
      output += " ~> " + blocks.loop({ value }, blocks);
    }
    return output;
  }
}

let render = tempura.compile('{{#loop value=3 }}', { blocks });
render(); //=> "3 ~> 2 ~> 1 ~> 0"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.