revise caching, take 3

.changeset/flat-dryers-visit.md

@@ -0,0 +1,7 @@
+---
+'eleventy-plugin-vento': minor
+---
+
+Further refine caching between Eleventy and Vento: commit ec02a765 deferred **all** caching to Vento and turned off Eleventy's cache (released in 3.1.0). This release allows Vento to cache only the templates that Eleventy can't cache (permalinks, includes, etc.), and Eleventy caches everything else.
+
+A performance oversight has also been resolved by this change. Now, template functions are pre-compiled and saved by Eleventy, only running the template on render without having to go through a re-compile or get a template from the cache.

src/engine.js

@@ -72,37 +72,55 @@ export function createVentoEngine(options) {
 		}
 	}
 
-	return {
-		cache: env.cache,
-		/** @param {{ source: string, data: PageData, file?: string }} input */
-		async process(input) {
-			// Reload context
-			this.loadContext(input.data);
-			DEBUG.setup('Reloaded Eleventy/Vento context. New value: %o', env.utils._11ty.ctx);
-
-			// Retrieve the template from the cache
-			let template = env.cache.get(input.file);
-
-			if (template?.source === input.source) {
-				DEBUG.cache('Cache HIT for `%s`, used precompiled template', input.file);
-			} else {
-				template = env.compile(input.source, input.file);
-
-				if (input.file) {
-					DEBUG.cache('Cache MISS for `%s`, compiled new template', input.file);
-					env.cache.set(input.file, template);
-				}
+	/**
+	 * @param {string} source
+	 * @param {string} file
+	 * @param {boolean} [useVentoCache=true]
+	 */
+	function getTemplateFunction(source, file, useVentoCache = true) {
+		// Attempt to retrieve template function from cache
+		let template = env.cache.get(file);
+
+		if (template?.source === source) {
+			DEBUG.cache('Cache HIT for `%s`, used precompiled template', file);
+		} else {
+			template = env.compile(source, file);
+
+			DEBUG.cache(
+				`Cache MISS for \`%s\`, compiled new template:\nUse Vento cache: %o\n\n${template}`,
+				file,
+				useVentoCache
+			);
+			if (useVentoCache) {
+				env.cache.set(file, template);
 			}
+		}
+
+		return template;
+	}
 
-			// Run the template
-			DEBUG.template(template.code);
-			const { content } = await template(input.data);
+	/**
+	 * @param {import('ventojs/src/environment.js').Template} template
+	 * @param {EleventyData} data
+	 * @param {string} from
+	 */
+	async function render(template, data, from) {
+		// Load new context
+		setContext(data);
+
+		// Render template
+		DEBUG.render('Rendering `%s`', from);
+		const { content } = await template(data);
+		return content;
+	}
 
-			return content;
-		},
+	return {
+		cache: env.cache,
 		loadPlugins,
 		loadFilters,
 		loadShortcodes,
 		loadPairedShortcodes,
+		getTemplateFunction,
+		render,
 	};
 }

src/index.js

@@ -29,7 +29,7 @@ import autotrimPlugin, { defaultTags as autotrimDefaultTags } from 'ventojs/plug
 // Local modules
 import { createVentoEngine } from './engine.js';
 import { ignoreTagPlugin } from './modules/ignore-tag.js';
-import { DEBUG, PERMALINK_PREFIX, runCompatibilityCheck } from './modules/utils.js';
+import { DEBUG, runCompatibilityCheck } from './modules/utils.js';
 
 /**
  * @param {import('@11ty/eleventy').UserConfig} eleventyConfig
@@ -142,24 +142,33 @@ export function VentoPlugin(eleventyConfig, userOptions) {
 		outputFileExtension: 'html',
 		read: true,
 
-		// Main compile function
-		async compile(source, file) {
-			file = path.normalize(file);
-			return async (data) => await engine.process({ source, data, file });
+		compile(inputContent, inputPath) {
+			// Normalize input path
+			inputPath = path.normalize(inputPath);
+
+			// Retrieve the template function
+			const template = engine.getTemplateFunction(inputContent, inputPath, false);
+
+			// Return a render function
+			return async (data) => await engine.render(template, data, inputPath);
 		},
 
 		compileOptions: {
-			// Defer all caching to Vento
-			cache: false,
 			// Custom permalink compilation
-			permalink(source, file) {
+			permalink(permalinkContent, inputPath) {
 				// Short circuit if input isn't a string and doesn't look like a vento template
-				if (typeof source === 'string' && /\{\{\s+.+\s+\}\}/.test(source)) {
-					file = PERMALINK_PREFIX + path.normalize(file);
-					return async (data) => engine.process({ source, data, file });
+				if (typeof permalinkContent === 'string' && /\{\{\s+.+\s+\}\}/.test(permalinkContent)) {
+					// Normalize input path
+					inputPath = 'Permalink::' + path.normalize(inputPath);
+
+					// Retrieve the template function
+					const template = engine.getTemplateFunction(permalinkContent, inputPath);
+
+					// Return a render function
+					return async (data) => await engine.render(template, data, inputPath);
 				}
 
-				return source;
+				return permalinkContent;
 			},
 		},
 	});

src/modules/utils.js

@@ -17,8 +17,6 @@ export const REQUIRED_API_METHODS = [
 
 export const CONTEXT_DATA_KEYS = ['page', 'eleventy'];
 
-export const PERMALINK_PREFIX = 'EleventyVentoPermalink:';
-
 // Helper functions
 export function runCompatibilityCheck(config) {
 	DEBUG.setup('Run compatibility check');