eleventy-plugin-vento 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # eleventy-plugin-vento
 
+## 3.0.2
+
+### Patch Changes
+
+- e46ce6e: Integrate eleventy and vento caching.
+
+  There have been a few issues around managing Vento's cache that have yielded uninteded results when compiling templates (ie #10, #34). This update integrates Vento's cache with Eleventy's custom extension API.
+
+  This means that whether running Eleventy in `--serve` mode or compiling dynamic permalinks, stale cache data actually gets removed so Vento can compile the template from source again.
+
+  Raise any issues if caching behavior continues to be an issue!
+
+## 3.0.1
+
+### Patch Changes
+
+- 9f5a90f: Various Refactors - These changes shouldn't have any observable effect on your templates or usage.
+
+  - Replaced `class` based approach for a closure implementation instead. Since there was only 1 Vento `env` object ever instanced in this plugin, steering away from using `class` removes some complexity and overhead.
+
+  - `DATA_KEYS` (used internally) moved into utils file alongside other utilities (like compatibility checks) and renamed to `CONTEXT_DATA_KEYS`.
+
+  - Moved internal Vento/11ty data from env.\_11ty => env.utils.\_11ty. Previous versions mutated the Vento `env` object by adding an `_11ty` key with everything that needed accessing from within a template compile (shortcodes, filters, etc.). This was moved this back to `env.utils._11ty` since it's probably a more appropriate place to store these functions.
+
 ## 3.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-plugin-vento",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Adds support for the Vento templating language to Eleventy.",
   "type": "module",
   "engines": {
@@ -35,15 +35,15 @@
     "ventojs": "1.12.10"
   },
   "devDependencies": {
-    "@11ty/eleventy": "3.0.0-beta.1",
-    "@changesets/cli": "2.27.8",
-    "eslint": "9.11.0",
+    "@11ty/eleventy": "3.0.0",
+    "@changesets/cli": "2.27.9",
+    "eslint": "9.12.0",
     "eslint-config-flat-gitignore": "0.3.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-unicorn": "55.0.0",
-    "globals": "15.9.0",
-    "vitest": "2.1.1",
-    "zx": "8.1.8"
+    "eslint-plugin-unicorn": "56.0.0",
+    "globals": "15.11.0",
+    "vitest": "2.1.2",
+    "zx": "8.1.9"
   },
   "prettier": {
     "bracketSameLine": true,
@@ -56,7 +56,7 @@
     "lint": "eslint '**/*.js'",
     "ci:version": "changeset version && pnpm install --no-frozen-lockfile",
     "ci:publish": "changeset publish",
-    "ci:generate-changesets": "node ./scripts/generate-changesets.mjs",
+    "ci:generate-changesets": "node ./scripts/generate-changesets.js",
     "format": "pnpm dlx prettier --config ./package.json --write ."
   }
 }

package/src/engine.js

@@ -1,11 +1,14 @@
 /**
- * @file Class to facilitate ventojs processing
+ * @file Function that handles creating the Vento environment. Exposes
+ * a simple API for Eleventy to interface with.
  *
  * @typedef {{eleventy?: Record<string, unknown>, page?: Record<string, unknown>}} EleventyContext
  * @typedef {Context & Record<string, unknown>} EleventyData
  * @typedef {(...args: unknown[]) => unknown} EleventyFunction
  * @typedef {import('ventojs/src/environment.js').Environment} VentoEnvironment
- * @typedef {VentoEnvironment & { _11ty: { ctx: Context, tags: Record<string, EleventyFunction> }}} EleventyVentoEnvironment
+ * @typedef {VentoEnvironment & {
+ *   utils: { _11ty: { ctx: Context, tags: Record<string, EleventyFunction> } }
+ * }} EleventyVentoEnvironment
  */
 
 // External library
@@ -13,73 +16,67 @@ import ventojs from 'ventojs';
 
 // Internal modules
 import { createVentoTag } from './modules/create-vento-tag.js';
+import { CONTEXT_DATA_KEYS } from './modules/utils.js';
 
-// TODO: Update this if it becomes possible to import `augmentKeys` from Eleventy.
-const DATA_KEYS = ['page', 'eleventy'];
+/** @param {import('ventojs').Options} options */
+export function createVentoEngine(options) {
+	/** @type {EleventyVentoEnvironment} */
+	const env = ventojs(options);
+	env.utils._11ty = { ctx: {}, functions: {} };
 
-export class VentoEngine {
-	#env;
+	return {
+		/** @param {string} path */
+		getCachedSource(path) {
+			return env.cache.get(path)?.source;
+		},
 
-	/** @param {import('ventojs/src/environment.js').Options} options */
-	constructor(options) {
-		/** Initialize vento @type {EleventyVentoEnvironment} */
-		this.#env = ventojs(options);
-		this.#env._11ty = { ctx: {}, functions: {} };
-	}
+		/** @param {string} path */
+		emptyCache(path) {
+			return path ? env.cache.delete(path) : env.cache.clear();
+		},
 
-	/** @param {string?} key */
-	emptyCache(key) {
-		return key ? this.#env.cache.delete(key) : this.#env.cache.clear();
-	}
+		/** @param {import('ventojs/src/environment.js').Plugin[]} plugins */
+		loadPlugins(plugins) {
+			for (const plugin of plugins) {
+				env.use(plugin);
+			}
+		},
 
-	/** @param {import('ventojs/src/environment.js').Plugin[]} plugins */
-	loadPlugins(plugins) {
-		for (const plugin of plugins) {
-			this.#env.use(plugin);
-		}
-	}
+		/** @param {PageData} newContext  */
+		loadContext(newContext) {
+			// Loop through allowed keys and load those into the context
+			for (const K of CONTEXT_DATA_KEYS) {
+				env.utils._11ty.ctx[K] = newContext[K];
+			}
+		},
 
-	/** @param {PageData} newContext  */
-	loadContext(newContext) {
-		// Loop through allowed keys and load those into the context
-		for (const key of DATA_KEYS) {
-			this.#env._11ty.ctx[key] = newContext[key];
-		}
-	}
+		/** @param {Record<string, EleventyFunction>} filters */
+		loadFilters(filters) {
+			for (const [name, fn] of Object.entries(filters)) {
+				env.filters[name] = (...args) => fn.apply(env.utils._11ty.ctx, args);
+			}
+		},
 
-	/** @param {Record<string, EleventyFunction>} filters */
-	loadFilters(filters) {
-		for (const [name, fn] of Object.entries(filters)) {
-			this.#env.filters[name] = (...args) => fn.apply(this.#env._11ty.ctx, args);
-		}
-	}
+		/**
+		 * @param {Record<string, EleventyFunction>} shortcodes
+		 * @param {boolean} paired
+		 */
+		loadShortcodes(shortcodes, paired = false) {
+			for (const [name, fn] of Object.entries(shortcodes)) {
+				env.utils._11ty.functions[name] = fn;
+				env.tags.push(createVentoTag(name, paired));
+			}
+		},
 
-	/**
-	 * @param {Record<string, EleventyFunction>} shortcodes
-	 * @param {boolean} paired
-	 */
-	loadShortcodes(shortcodes, paired = false) {
-		for (const [name, fn] of Object.entries(shortcodes)) {
-			this.#env._11ty.functions[name] = fn;
-			this.#env.tags.push(createVentoTag(name, paired));
-		}
-	}
+		/** @param {{data: PageData, source: string, path: string}} input */
+		async process(input) {
+			// Reload context
+			this.loadContext(input.data);
 
-	/**
-	 * @param {PageData} data
-	 * @param {string} content
-	 * @param {string} path
-	 */
-	async process(data, content, path) {
-		// Reload context
-		this.loadContext(data);
+			// Process the templates
+			const result = await env.runString(input.source, input.data, input.path);
 
-		// Process the templates
-		const result = await this.#env.runString(content, data, path);
-
-		// Clear the cache for this path if the input doesn't match
-		if (data.page?.rawInput !== content) this.#env.cache.clear(path);
-
-		return result.content;
-	}
+			return result.content;
+		},
+	};
 }

package/src/index.js

@@ -24,7 +24,7 @@
 import autotrimPlugin, { defaultTags as autotrimDefaultTags } from 'ventojs/plugins/auto_trim.js';
 
 // Local modules
-import { VentoEngine } from './engine.js';
+import { createVentoEngine } from './engine.js';
 import { ignoreTagPlugin } from './modules/ignore-tag.js';
 import { runCompatibilityCheck } from './modules/utils.js';
 
@@ -87,23 +87,20 @@ export function VentoPlugin(eleventyConfig, userOptions) {
 	}
 
 	// Create the vento engine instance
-	const vento = new VentoEngine(options.ventoOptions);
-
-	// Ensure cache is empty
-	vento.emptyCache();
+	const engine = createVentoEngine(options.ventoOptions);
 
 	// Load plugins
-	vento.loadPlugins(options.plugins);
+	engine.loadPlugins(options.plugins);
 
 	// Add filters, single and paired shortcodes if enabled
 	if (options.filters) {
-		vento.loadFilters(filters);
+		engine.loadFilters(filters);
 	}
 	if (options.shortcodes) {
-		vento.loadShortcodes(shortcodes, false);
+		engine.loadShortcodes(shortcodes, false);
 	}
 	if (options.pairedShortcodes) {
-		vento.loadShortcodes(pairedShortcodes, true);
+		engine.loadShortcodes(pairedShortcodes, true);
 	}
 
 	// Add vto as a template format
@@ -116,14 +113,25 @@ export function VentoPlugin(eleventyConfig, userOptions) {
 
 		// Main compile function
 		async compile(inputContent, inputPath) {
-			return async (data) => vento.process(data, inputContent, inputPath);
+			return async (data) => await engine.process({ data, source: inputContent, path: inputPath });
 		},
 
 		// Custom permalink compilation
 		compileOptions: {
+			cache: true,
+			getCacheKey(inputContent, inputPath) {
+				if (engine.getCachedSource(inputPath) !== inputContent) {
+					engine.emptyCache(inputPath);
+				}
+
+				return engine.getCachedSource(inputPath);
+			},
 			permalink(linkContents) {
-				if (typeof linkContents !== 'string') return linkContents;
-				return async (data) => vento.process(data, linkContents);
+				if (typeof linkContents !== 'string') {
+					return linkContents;
+				}
+
+				return async (data) => engine.process({ data, source: linkContents });
 			},
 		},
 	});

package/src/modules/create-vento-tag.js

@@ -11,8 +11,8 @@ export function createVentoTag(name, paired) {
 		if (!code.startsWith(name)) return;
 
 		// Declare helper object path strings
-		const fn = `__env._11ty.functions.${name}`;
-		const ctx = '__env._11ty.ctx';
+		const fn = `__env.utils._11ty.functions.${name}`;
+		const ctx = '__env.utils._11ty.ctx';
 		let args = [code.replace(name, '').trim()];
 
 		const varname = output.startsWith('__shortcode_content')

package/src/modules/utils.js

@@ -1,11 +1,14 @@
-// Declare required APIs
-const REQUIRED_API_METHODS = [
+// Project-wide constants
+export const REQUIRED_API_METHODS = [
 	['getShortcodes', 'v3.0.0-alpha.15'],
 	['getPairedShortcodes', 'v3.0.0-alpha.15'],
 	['getFilters', 'v3.0.0-alpha.15'],
 	['addExtension', 'v1.0.0'],
 ];
 
+export const CONTEXT_DATA_KEYS = ['page', 'eleventy'];
+
+// Project-wide helper functions
 export function logError(message) {
 	console.error(`[eleventy-plugin-vento] ${message}`);
 }