https://github.com/hedyhli/vento-plugin-trim-self
Automatically remove a trailing newline and indent around each template tag for Vento, based on context.
https://github.com/hedyhli/vento-plugin-trim-self
deno plugin vento
Last synced: 2 months ago
JSON representation
Automatically remove a trailing newline and indent around each template tag for Vento, based on context.
- Host: GitHub
- URL: https://github.com/hedyhli/vento-plugin-trim-self
- Owner: hedyhli
- License: mit
- Created: 2024-05-15T11:07:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-18T14:35:18.000Z (about 2 years ago)
- Last Synced: 2025-04-05T08:14:57.159Z (about 1 year ago)
- Topics: deno, plugin, vento
- Language: TypeScript
- Homepage: https://deno.land/x/vento_plugin_trim_self
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Trim Self
[](https://github.com/hedyhli/vento-plugin-trim-self/actions/workflows/deno.yml)
Remove trailing newline and leading indent on tags that do not replace
itself with content, **only if the tag appears on its own line**.
Similar to [autoTrim](https://vento.js.org/plugins/auto-trim/), but does not
trim aggressively. In effect, it makes tags such as `[/]function`, `[/]if`, and
other tags that do not get replaced with content (such as `echo`), appear as
though they were not there.
This plugin exists to enable auto-trimming work as expected when vento is used
for file formats where whitespace is significant, such as markdown, unlike HTML.
## How it works
For such tags that are on a **line of its own**, ie:
- Has optional leading indents preceded directly by a newline, AND
- Either EOF or a newline after it.
Then, only these kind of whitespace are removed:
- Spaces and tabs, preceded by a single newline on its left -- ie, indent --
replaced by a newline, in other words, dedented.
- One trailing newline on this kind of tags, this single `\n` OR `\r\n` is
removed;
**No other kind of whitespace around such tags are removed**, unlike autoTrim.
Table of contents:
* [Example](#example)
* [Why trim-self when we already have auto-trim?](#why-trim-self-when-we-already-have-auto-trim)
* [Setup](#setup)
* [Vento example](#vento-example)
* [Lume example](#lume-example)
* [Usage](#usage)
* [TODO](#todo)
## Example
Template:
```
Text before.
{{ set name = "world" }}
Hello, {{ name }}!
```
Without trim-self:
```
Text before
__
Hello, world!
```
Trailing spaces represented as `_`.
After trim-self:
```
Text before.
Hello, {{ name }}!
```
Here's the step-by-step transformation for the `{{ set ... }}` tag:
-
```
Text before.
{{ set name = "world" }}
Hello, {{ name }}!
```
-
```
Text before.
{{ set name = "world" }} Hello, {{ name }}!
```
-
```
Text before.
{{ set name = "world" }} Hello, {{ name }}!
```
-
After vento's processing:
```
Text before.
Hello, {{ name }}!
```
```
Text before.
Hello, world!
```
Check out the [tests](./trimSelf.test.ts) for self-documenting examples.
## Why trim-self when we already have auto-trim?
Auto-trim does a great job at doing what it's supposed to do, but both auto-trim
and the built in trimming functionality (similar to Go templates), remove
whitespace too aggressively.
For instance, consider this template:
```
Inline{{ if true }} test{{ /if }}
- {{ if true }}List item.{{ else }}Other list item.{{ /if }}
Some text after.
```
With autoTrim, it would be transformed into:
```
Inline test-List item.Some text after.
```
Trim-self does what you expect out of a plugin that will simply "make template
tags produce code such that it was as though they weren't there."
```
Inline test
- List item.
Some text after.
```
Furthermore, `autoTrim` will remove trailing spaces followed by a newline, while
this may desirable **in general**, `trimSelf` does not do this because this
functionality should be delegated to editors and tooling.
## Setup
### Vento example
```ts
import trimSelf from "https://deno.land/x/vento_plugin_trim_self/mod.ts"
env.use(trimSelf());
```
### Lume example
```js
// _config.ts / _config.js
import lume from "lume/mod.ts";
import vento from "lume/plugins/vento.ts";
import trimSelf from "https://deno.land/x/vento_plugin_trim_self/mod.ts";
const site = lume();
site.use(vento({
plugins: [trimSelf()],
options: {},
}))
export default site;
```
## Usage
Trim-self does its job automatically.
## TODO
Filters are not yet supported:
```vento
{{ for item in list |> myFilter }}
{{ /for }}
```
Support filters, by binding them to the left most (but closest) tag. Or at least
add docs on how to workaround this, i.e., in Lume, use `site.data("myFilter", fn)`
rather than `site.filter("myFilter", fn)` and use it as `myFilter(list)` instead.