eleventy-plugin-vento 1.1.3 → 2.0.0-beta.1

package/VentoPlugin.js

@@ -2,20 +2,27 @@
  * @file Adds support for the Vento templating language to Eleventy.
  *
  * @typedef VentoPluginOptions
- * @prop {Object<string,(...any) => any} [filters={}] An object containing methods that
- * will be loaded as filters into Vento.
  * @prop {Function[]} [plugins=[]] An array of plugins to load into vento.
- * @prop {import('ventojs').Options} [ventoOptions] Vento engine configuration object
- * that will be merged with default options.
  * @prop {string|boolean} [addHelpers=true]
  * Whether [Javascript Functions](https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions)
  * should be merged into data provided to templates. If a string, functions will be namespaced under
  * a property with this name.
+ * @prop {boolean|string[]} [trimTags=false] Whether to automatically trim tags from output. Uses Vento's
+ * [autoTrim](https://vento.js.org/plugins/auto-trim/) plugin under the hood.
+ * @prop {import('ventojs').Options} [ventoOptions] Vento engine configuration object
+ * that will be merged with default options.
  */
 
 import path from 'node:path';
 import VentoJs from 'ventojs';
 
+// Expose autotrim plugin defaults
+import {
+	default as autoTrim,
+	defaultTags as ventoDefaultTrimTags,
+} from 'ventojs/plugins/auto_trim.js';
+export { ventoDefaultTrimTags };
+
 /**
  * @param {import('@11ty/eleventy/src/UserConfig.js').default} eleventyConfig
  * @param {VentoPluginOptions} options
@@ -28,10 +35,11 @@ export function VentoPlugin(eleventyConfig, options = {}) {
 	}
 
 	// Pull some bits from eleventyConfig and merge user-options with defaults
-	const { dir, javascriptFunctions } = eleventyConfig;
+	const { dir, javascriptFunctions, liquidFilters, nunjucksFilters, nunjucksAsyncFilters } =
+		eleventyConfig;
 	options = {
 		addHelpers: true,
-		filters: {},
+		trimTags: false,
 		plugins: [],
 		ventoOptions: {
 			includes: path.join(dir.input, dir.includes),
@@ -43,37 +51,54 @@ export function VentoPlugin(eleventyConfig, options = {}) {
 	// Init vento
 	const env = VentoJs(options.ventoOptions);
 
-	// Load user-defined filters into vento
-	for (const filter in options.filters) env.filters[filter] = options.filters[filter];
+	// Create empty sets to hold user defined functions
+	const filters = {};
+	const helperFunctions = {};
+
+	for (const fn in javascriptFunctions) {
+		if (liquidFilters[fn] && (nunjucksFilters[fn] || nunjucksAsyncFilters[fn])) {
+			filters[fn] = javascriptFunctions[fn];
+		} else {
+			helperFunctions[fn] = javascriptFunctions[fn];
+		}
+	}
 
 	// Load user-defined plugins into vento
 	for (const plugin of options.plugins) env.use(plugin);
 
+	// Add autotrim plugin if enabled
+	if (options.trimTags) env.use(autoTrim({ tags: options.trimTags || ventoDefaultTrimTags }));
+
+	eleventyConfig.on('eleventy.before', () => {
+		env.cache.clear();
+	});
+
 	// Add vto as a template format and create a custom template for it
 	eleventyConfig.addTemplateFormats('vto');
 	eleventyConfig.addExtension('vto', {
 		outputFileExtension: 'html',
-
 		async compile(inputContent, inputPath) {
-			env.cache.clear();
 			return async (data) => {
 				if (options.addHelpers) {
 					// Extract a possible namespace from the addHelpers option
 					const namespace = options.addHelpers;
 
 					// Rebind functions to page data so this.page, this.eleventy, etc works as intended
-					const helpers = Object.assign(
-						...Object.entries(javascriptFunctions).map(([name, fn]) => ({ [name]: fn.bind(data) }))
-					);
+					for (const helper in helperFunctions) {
+						helperFunctions[helper] = helperFunctions[helper].bind(data);
+					}
+
+					// Rebind filters the same way
+					for (const filter in filters) {
+						env.filters[filter] = filters[filter].bind(data);
+					}
 
 					// Merge helpers into page data
-					if (typeof namespace === 'string') data = { ...data, [namespace]: helpers };
-					else data = { ...data, ...helpers };
+					if (typeof namespace === 'string') data = { ...data, [namespace]: helperFunctions };
+					else data = { ...data, ...helperFunctions };
 				}
 
-				const result = await env.runString(inputContent, data, inputPath);
-
-				return result.content;
+				return await env.runString(inputContent, data, inputPath).then((result) => result.content);
 			};
 		},
 	});

package/jsconfig.json

@@ -1,6 +1,7 @@
 {
 	"compilerOptions": {
 		"module": "NodeNext",
-		"moduleResolution": "NodeNext"
+		"moduleResolution": "NodeNext",
+		"baseUrl": "."
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "eleventy-plugin-vento",
-	"version": "1.1.3",
+	"version": "2.0.0-beta.1",
 	"description": "Adds support for the Vento templating language to Eleventy.",
 	"type": "module",
 	"packageManager": "pnpm@9.1.4",
@@ -12,6 +12,9 @@
 		"test-serve": "rm -rf test/output; cd test/input; eleventy --serve"
 	},
 	"main": "./VentoPlugin.js",
+	"exports": {
+		".": "./VentoPlugin.js"
+	},
 	"repository": "git@github.com:noelforte/eleventy-plugin-vento.git",
 	"bugs": {
 		"url": "https://github.com/noelforte/eleventy-plugin-vento/issues"

package/readme.md

@@ -7,6 +7,7 @@ An [Eleventy](https://11ty.dev/) plugin that adds support for [Vento](https://ve
 [Plugin Options](#plugin-options)<br>
 [Vento Filters](#vento-filters)<br>
 [Vento Plugins](#vento-plugins)<br>
+[Auto-Trimming Tags](#auto-trimming-tags)<br>
 [JavaScript Helpers](#javascript-helpers)<br>
 
 ## Installing
@@ -39,17 +40,17 @@ This plugin ships with default options out of the box, but you can [pass an opti
 import { VentoPlugin } from 'eleventy-plugin-vento';
 
 export default function (eleventyConfig) {
-
   eleventyConfig.addPlugin(VentoPlugin, {
-    // A set of filters to load into Vento
-    filters: {},
-
     // An array of Vento plugins to load
     plugins: [],
 
     // Define whether Javascript Functions should be added
     // to page data. See below for usage notes on this.
-    addHelpers: true
+    addHelpers: true,
+
+    // Define tags that should be trimmed, or set to true
+    // to trim the default tags
+    trimTags: [],
 
     // A Vento configuration object
     ventoOptions: {
@@ -57,62 +58,74 @@ export default function (eleventyConfig) {
       autoescape: false,
     },
   });
-
 }
 ```
 
 View the [full list of options](https://vento.js.org/configuration/#options/) to pass as a Vento Configuration object (as `ventoOptions`).
 
-## Vento Filters
+## Filters
 
-Set the `filters` property to an object with methods, these will be loaded as filters into Vento when Eleventy is run. Note that this feature exists **separately** from the concept of filters in Eleventy ([which are optionally accessible as data in Vento templates]()).
+Filters that are added using Eleventy's `.addFilter()` or `.addAsyncFilter()` methods will be automatically loaded into Vento. Since Vento filters and Eleventy filters follow the same syntax for filters (content as first argument), the implementation is 1:1.
+
+[More information about Vento filters](https://vento.js.org/configuration/#filters)
+
+[More information about Eleventy filters](https://www.11ty.dev/docs/filters/)
+
+## Vento Plugins
 
-Here's an example of defining an `italicize` filter like the example in the Vento documentation:
+If you'd like to extend the Vento library with any plugins, include them in an array passed to the `plugins` option.
 
 ```js
+import { VentoPlugin } from 'eleventy-plugin-vento';
+
+function myCustomPlugin() {
+  // ...plugin code...
+}
+
 export default function (eleventyConfig) {
   eleventyConfig.addPlugin(VentoPlugin, {
-    filters: {
-      italicize(text) {
-        return `<em>${text}</em>`;
-      },
-    },
+    plugins: [myCustomPlugin()],
   });
 }
 ```
 
-And now we can use our filter in a template:
+## Auto-Trimming Tags
 
-```hbs
-<p>The title of my page is: "{{ title |> italicize }}"</p>
+One exception to Vento plugins is the `autoTrim` plugin which is bundled with Vento, and by extension, this plugin. This plugin provides a convenient way to control whitespace in the output by collapsing spaces left behind when Vento's tags are removed.
+
+To trim the default tags, set the `trimTags` plugin option to `true`.
+
+```js
+eleventyConfig.addPlugin(VentoPlugin, {
+  trimTags: true,
+});
 ```
 
-See https://vento.js.org/configuration/#filters for more information about filters and how they work.
+The default set of tags that are trimmed are defined by Vento and are listed in the [usage notes](https://vento.js.org/plugins/auto-trim/#usage) for the auto trim plugin. To set your own tags, set `trimTags` to an array instead.
 
-## Vento Plugins
+```js
+eleventyConfig.addPlugin(VentoPlugin, {
+  trimTags: ['set', 'if', 'for'],
+});
+```
 
-If you'd like to extend the Vento library with any plugins, include them in an array passed to the `plugins` option. Here's an example loading the [auto trim](https://vento.js.org/plugins/auto-trim/) plugin:
+If instead, you'd like to extend instead of replace the default tag list, `eleventy-plugin-vento` reexports the `defaultTags` array used by as `ventoDefaultTrimTags`, which can be used like so:
 
 ```js
-import { VentoPlugin } from 'eleventy-plugin-vento';
-import autoTrim, { defaultTags } from 'ventojs/plugins/autotrim_plugin.js';
+import { VentoPlugin, ventoDefaultTrimTags } from 'eleventy-plugin-vento';
 
-export default function (eleventyConfig) {
-  eleventyConfig.addPlugin(VentoPlugin, {
-    plugins: [
-      autoTrim({
-        tags: ['tag', ...defaultTags],
-      }),
-    ],
-  });
-}
+eleventyConfig.addPlugin(VentoPlugin, {
+  trimTags: [...ventoDefaultTrimTags, 'tag'],
+});
 ```
 
+For more information on the auto-trim plugin, consult the [plugin documentation](https://vento.js.org/plugins/auto-trim/).
+
 ## JavaScript Helpers
 
 Vento can [run arbitrary JavaScript](https://vento.js.org/syntax/javascript/) in templates through its `{{> ...}}` operator, which evaluates at the time the template is run. However, you may want to use Eleventy Shortcodes and Filters in your templates as well.
 
-By setting `addHelpers` in the plugin options (defaults to `true`), all JavaScript functions (which includes any Universal Filters and Shortcodes) are exposed as functions in page data. This feature functions very similarly to WebC's ["helper functions"](https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions) feature.
+By setting `addHelpers` in the plugin options (defaults to `true`), all JavaScript functions (which includes any Universal Shortcodes) are exposed as functions in page data. This feature functions very similarly to WebC's ["helper functions"](https://www.11ty.dev/docs/languages/javascript/#javascript-template-functions) feature.
 
 As an example:
 
@@ -155,3 +168,11 @@ addPlugin(VentoPlugin, { addHelpers: 'functions' });
 <p>This is something {{ functions.italicize('really') }} important.</p>
 <p>{{ functions.possumPosse() }}</p>
 ```
+
+Finally, if you'd like to disable populating helper functions at all, set `addHelpers` to false:
+
+```js
+eleventyConfig.addPlugin(VentoPlugin, {
+  addHelpers: false,
+});
+```

package/test/input/eleventy.config.js

@@ -1,5 +1,4 @@
-import { VentoPlugin } from '../../VentoPlugin.js';
-import autoTrim from 'ventojs/plugins/auto_trim.js';
+import { VentoPlugin, ventoDefaultTrimTags } from 'eleventy-plugin-vento';
 
 export const config = {
 	dir: {
@@ -10,13 +9,14 @@ export const config = {
 
 /** @param {import('@11ty/eleventy/src/UserConfig.js').default} eleventyConfig */
 export default async function (eleventyConfig) {
+	eleventyConfig.addFilter('italicize', (content) => `<em>${content}</em>`);
+
+	eleventyConfig.addFilter('appendURL', function (content) {
+		return `${content} ${this.page.url}`;
+	});
+
 	eleventyConfig.addPlugin(VentoPlugin, {
-		filters: {
-			italicize(content) {
-				return `<em>${content}</em>`;
-			},
-		},
-		plugins: [autoTrim()],
+		trimTags: [...ventoDefaultTrimTags, 'for'],
 	});
 
 	eleventyConfig.addShortcode('possumPosse', () => 'Release the possums!!!');

package/test/input/filters-additional.vto

@@ -0,0 +1,9 @@
+---
+title: Page with filters
+---
+
+<h1>{{ title }}</h1>
+
+This is a page with a filter. {{ 'Page URL:' |> appendURL }}
+
+Built with {{ eleventy.generator |> italicize }}

package/test/input/trimming.vto

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<body>
+	{{ set numbers = [1,2,3,4,5,6,7,8,9,10] }}
+	<main>
+	{{ for num of numbers }}
+		<section>
+			<h1>{{ num }}</h1>
+			<p>This is section {{ num }}</p>
+		</section>
+	{{ /for }}
+	</main>
+</body>
+</html>

package/test/input/permalinks.vto

@@ -1,7 +0,0 @@
----
-permalink: /test/page/permalink/
-title: Test page
-layout: page-layout.vto
----
-
-This content lives at `/test/page/permalink/`

package/test/input/root.vto

@@ -1,6 +0,0 @@
----
-permalink: /
-layout: page-layout.vto
----
-
-This should render on the homepage.