Vento Template Engine

Vento is a minimal, ergonomic template engine inspired by Nunjucks, Liquid, Mustache, and EJS. It is designed to be fast, dependency-free, and compatible with various JavaScript runtimes including Deno, Node, Bun, and browsers.

Key characteristics include:

• Ergonomic Syntax: Uses {{ and }} for all tags and outputs.
• JavaScript Integration: You can write real JavaScript anywhere within templates (e.g., {{ await user.getName() }}).
• Async Support: Built-in support for asynchronous operations without requiring special tags.
• Pipeline Operators: Uses the |> operator for filters, inspired by the F# pipeline operator proposal.
• Plugin-based Architecture: Most features and tags are implemented as plugins, allowing for a flexible and extensible system.

Vento functions allow you to define reusable chunks of content within a template. You define a function using the {{ function name }} tag and close it with {{ /function }}. You can call the function using standard JavaScript-like syntax {{ name() }}.

Functions support arguments with default values, similar to JavaScript. Additionally, functions have access to the scoped variables of the template where they are defined, even if those variables are not explicitly passed as arguments.

{{ function hello(name = "world") }}
  Hello, {{ name }}!
{{ /function }}

{{ hello() }}
{{ hello("Vento") }}

Vento implements a parent-to-child data inheritance system. When a template uses include or layout to nest another template, the nested (child) template automatically inherits access to all variables available in the parent template's scope.

Key Rules:

• One-way flow: Data flows from parent to child. A variable declared in a child template is not accessible by its parent.
• Deep propagation: Inheritance is recursive. If a child template includes a grandchild template, the grandchild also has access to the original parent's variables.

{{-- Parent template --}}
{{ set salute = "Hello world" }}
{{ include "child.vto" }}

{{-- child.vto --}}
{{ include "nested-child.vto" }}

{{-- nested-child.vto --}}
{{ salute }}

Vento automatically casts non-iterable types to iterables to prevent runtime errors:

• Numbers: An integer is converted into an array containing a sequence from 1 up to that number (e.g., 10 becomes [1, 2, ..., 10]).
• Strings: A string is converted into an array of its individual characters.
• null and undefined: These values are converted into an empty array [], ensuring the loop simply does nothing instead of crashing.

{{/* Numbers to array */}}
{{ for count of 10 }}
  {{ count }}
{{ /for }}

{{/* Strings to character array */}}
{{ for letter of "abcd" }}
  {{ letter }}
{{ /for }}

{{/* null/undefined to empty array */}}
{{ for item of undefined }}
  {{ item }}
{{ /for }}

Pipes allow you to chain functions to transform values using the |> operator. This syntax is inspired by the F# pipeline operator. Pipes can be used for printing variables, saving variables, or transforming data before iterating over collections.

When a pipe is used, Vento attempts to execute functions in the following order of priority:

1. Filters: Custom configuration functions.
2. Global functions: Functions available in the standard JavaScript namespace.
3. Prototype functions: Methods available on the variable's prototype (as a fallback).

If a filter or function requires additional arguments, they are passed within parentheses following the function name.

{{ value |> transform }}