eleventy-plugin-vento 2.0.0 → 2.1.0

package/.github/workflows/ci.yml

@@ -2,12 +2,12 @@ name: CI
 
 on:
   push:
-    branches: [renovate/**]
+    branches: [main, dev, alpha, beta, next, renovate/**]
   workflow_dispatch:
   workflow_call:
 
 jobs:
-  ci:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

package/.github/workflows/release.yml

@@ -1,28 +1,24 @@
+# Run releases every monday and wednesday
+# at 12:33 UTC (or manually)
+
 name: Release
 
 on:
-  push:
-    branches:
-      - main
-      - alpha
-      - beta
-      - next
-      - next-major
-      - v[0-9]+.[0-9]+.[0-9]+
-      - v[0-9]+.[0-9]+.[0-9]+-[a-z]+.[0-9]+
+  schedule:
+    - cron: '33 12 * * 1,3'
+  workflow_dispatch:
 
 jobs:
   test:
     uses: ./.github/workflows/ci.yml
-
   release:
     runs-on: ubuntu-latest
+    needs: test
     permissions:
       contents: write # to be able to publish a GitHub release
       id-token: write # to enable use of OIDC for npm provenance
       issues: write # to be able to comment on released issues
       pull-requests: write # to be able to comment on released pull requests
-    needs: test
     steps:
       - uses: actions/checkout@v4
         with:

package/.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-	"cSpell.words": ["Vento"]
+	"cSpell.words": ["Vento"],
+	"deno.enable": false
 }

package/VentoPlugin.js

@@ -13,7 +13,6 @@
  * that will be merged with default options.
  */
 
-import path from 'node:path';
 import VentoJs from 'ventojs';
 
 // Expose autotrim plugin defaults
@@ -35,14 +34,15 @@ export function VentoPlugin(eleventyConfig, options = {}) {
 	}
 
 	// Pull some bits from eleventyConfig and merge user-options with defaults
-	const { dir, javascriptFunctions, liquidFilters, nunjucksFilters, nunjucksAsyncFilters } =
+	const { directories, javascriptFunctions, liquidFilters, nunjucksFilters, nunjucksAsyncFilters } =
 		eleventyConfig;
+
 	options = {
 		addHelpers: true,
 		trimTags: false,
 		plugins: [],
 		ventoOptions: {
-			includes: path.join(dir.input, dir.includes),
+			includes: directories.includes,
 			autoescape: false,
 		},
 		...options,
@@ -64,15 +64,14 @@ export function VentoPlugin(eleventyConfig, options = {}) {
 	}
 
 	// Load filters into vento
-	for (const filter in filters) {
-		env.filters[filter] = filters[filter];
-	}
+	for (const filter in filters) env.filters[filter] = filters[filter];
 
 	// 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 }));
+	if (options.trimTags === true) env.use(autoTrim());
+	else if (options.trimTags) env.use(autoTrim({ tags: options.trimTags }));
 
 	// Add vto as a template format and create a custom template for it
 	eleventyConfig.addTemplateFormats('vto');
@@ -86,14 +85,20 @@ export function VentoPlugin(eleventyConfig, options = {}) {
 					// Extract a possible namespace from the addHelpers option
 					const namespace = options.addHelpers;
 
+					// Extract page and eleventy values from data
+					const { page, eleventy } = data;
+
 					// Rebind functions to page data so this.page, this.eleventy, etc works as intended
 					for (const helper in helperFunctions) {
-						helperFunctions[helper] = helperFunctions[helper].bind(data);
+						helperFunctions[helper] = helperFunctions[helper].bind({
+							page,
+							eleventy,
+						});
 					}
 
 					// Rebind filters the same way
-					for (const filter in env.filters) {
-						env.filters[filter] = env.filters[filter].bind(data);
+					for (const filter in filters) {
+						env.filters[filter] = filters[filter].bind({ page, eleventy });
 					}
 
 					// Merge helpers into page data

package/package.json

@@ -1,15 +1,15 @@
 {
 	"name": "eleventy-plugin-vento",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "Adds support for the Vento templating language to Eleventy.",
 	"type": "module",
-	"packageManager": "pnpm@9.1.4",
+	"packageManager": "pnpm@9.2.0",
 	"engines": {
 		"node": ">=16"
 	},
 	"scripts": {
-		"test": "rm -rf test/output; cd test/input; eleventy",
-		"test-serve": "rm -rf test/output; cd test/input; eleventy --serve"
+		"test": "vitest",
+		"lint": "eslint **/*.js --config ./eslint.config.js"
 	},
 	"main": "./VentoPlugin.js",
 	"exports": {
@@ -41,7 +41,8 @@
 		"eslint-config-flat-gitignore": "0.1.5",
 		"eslint-config-prettier": "9.1.0",
 		"globals": "15.3.0",
-		"semantic-release": "24.0.0"
+		"semantic-release": "24.0.0",
+		"vitest": "1.6.0"
 	},
 	"prettier": {
 		"bracketSameLine": true,

package/test/autotrim/__snapshots__/autotrim-all.html

@@ -0,0 +1,53 @@
+<!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>
+	<main>
+		<section>
+			<h1>1</h1>
+			<p>This is section 1</p>
+		</section>
+		<section>
+			<h1>2</h1>
+			<p>This is section 2</p>
+		</section>
+		<section>
+			<h1>3</h1>
+			<p>This is section 3</p>
+		</section>
+		<section>
+			<h1>4</h1>
+			<p>This is section 4</p>
+		</section>
+			Section 5 is next!!
+		<section>
+			<h1>5</h1>
+			<p>This is section 5</p>
+		</section>
+		<section>
+			<h1>6</h1>
+			<p>This is section 6</p>
+		</section>
+		<section>
+			<h1>7</h1>
+			<p>This is section 7</p>
+		</section>
+		<section>
+			<h1>8</h1>
+			<p>This is section 8</p>
+		</section>
+		<section>
+			<h1>9</h1>
+			<p>This is section 9</p>
+		</section>
+		<section>
+			<h1>10</h1>
+			<p>This is section 10</p>
+		</section>
+	</main>
+</body>
+</html>

package/test/autotrim/__snapshots__/autotrim-single.html

@@ -0,0 +1,75 @@
+<!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>
+	<main>
+	
+		
+		<section>
+			<h1>1</h1>
+			<p>This is section 1</p>
+		</section>
+	
+		
+		<section>
+			<h1>2</h1>
+			<p>This is section 2</p>
+		</section>
+	
+		
+		<section>
+			<h1>3</h1>
+			<p>This is section 3</p>
+		</section>
+	
+		
+		<section>
+			<h1>4</h1>
+			<p>This is section 4</p>
+		</section>
+	
+		
+			Section 5 is next!!
+		
+		<section>
+			<h1>5</h1>
+			<p>This is section 5</p>
+		</section>
+	
+		
+		<section>
+			<h1>6</h1>
+			<p>This is section 6</p>
+		</section>
+	
+		
+		<section>
+			<h1>7</h1>
+			<p>This is section 7</p>
+		</section>
+	
+		
+		<section>
+			<h1>8</h1>
+			<p>This is section 8</p>
+		</section>
+	
+		
+		<section>
+			<h1>9</h1>
+			<p>This is section 9</p>
+		</section>
+	
+		
+		<section>
+			<h1>10</h1>
+			<p>This is section 10</p>
+		</section>
+	
+	</main>
+</body>
+</html>

package/test/autotrim/autotrim.test.js

@@ -0,0 +1,19 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+const [trimSingle, trimAll] = await Promise.all([
+	runBuild(import.meta.dirname, { vento: { trimTags: ['set'] } }),
+	runBuild(import.meta.dirname, { vento: { trimTags: true } }),
+]);
+
+test('should trim a single tag', async () => {
+	const page = trimSingle[0];
+	await expect(page.content).toMatchFileSnapshot(
+		'./build/autotrim-single.html'
+	);
+});
+
+test('should trim all tags', async () => {
+	const page = trimAll[0];
+	await expect(page.content).toMatchFileSnapshot('./build/autotrim-all.html');
+});

package/test/autotrim/build/autotrim-all.html

@@ -0,0 +1,53 @@
+<!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>
+	<main>
+		<section>
+			<h1>1</h1>
+			<p>This is section 1</p>
+		</section>
+		<section>
+			<h1>2</h1>
+			<p>This is section 2</p>
+		</section>
+		<section>
+			<h1>3</h1>
+			<p>This is section 3</p>
+		</section>
+		<section>
+			<h1>4</h1>
+			<p>This is section 4</p>
+		</section>
+			Section 5 is next!!
+		<section>
+			<h1>5</h1>
+			<p>This is section 5</p>
+		</section>
+		<section>
+			<h1>6</h1>
+			<p>This is section 6</p>
+		</section>
+		<section>
+			<h1>7</h1>
+			<p>This is section 7</p>
+		</section>
+		<section>
+			<h1>8</h1>
+			<p>This is section 8</p>
+		</section>
+		<section>
+			<h1>9</h1>
+			<p>This is section 9</p>
+		</section>
+		<section>
+			<h1>10</h1>
+			<p>This is section 10</p>
+		</section>
+	</main>
+</body>
+</html>

package/test/autotrim/build/autotrim-single.html

@@ -0,0 +1,75 @@
+<!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>
+	<main>
+	
+		
+		<section>
+			<h1>1</h1>
+			<p>This is section 1</p>
+		</section>
+	
+		
+		<section>
+			<h1>2</h1>
+			<p>This is section 2</p>
+		</section>
+	
+		
+		<section>
+			<h1>3</h1>
+			<p>This is section 3</p>
+		</section>
+	
+		
+		<section>
+			<h1>4</h1>
+			<p>This is section 4</p>
+		</section>
+	
+		
+			Section 5 is next!!
+		
+		<section>
+			<h1>5</h1>
+			<p>This is section 5</p>
+		</section>
+	
+		
+		<section>
+			<h1>6</h1>
+			<p>This is section 6</p>
+		</section>
+	
+		
+		<section>
+			<h1>7</h1>
+			<p>This is section 7</p>
+		</section>
+	
+		
+		<section>
+			<h1>8</h1>
+			<p>This is section 8</p>
+		</section>
+	
+		
+		<section>
+			<h1>9</h1>
+			<p>This is section 9</p>
+		</section>
+	
+		
+		<section>
+			<h1>10</h1>
+			<p>This is section 10</p>
+		</section>
+	
+	</main>
+</body>
+</html>

package/test/{input/trimming.vto → autotrim/index.vto}

@@ -6,12 +6,16 @@
 	<title>Document</title>
 </head>
 <body>
-	{{ set numbers = [1,2,3,4,5,6,7,8,9,10] }}
+	{{ set numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }}
 	<main>
 	{{ for num of numbers }}
+		{{ set current = `section ${num}` }}
+		{{ if num === 5 }}
+			Section 5 is next!!
+		{{ /if }}
 		<section>
 			<h1>{{ num }}</h1>
-			<p>This is section {{ num }}</p>
+			<p>This is {{ current }}</p>
 		</section>
 	{{ /for }}
 	</main>

package/test/basic/__snapshots__/template-basic.html

@@ -0,0 +1,4 @@
+
+<h1>Basic Page</h1>
+
+This is a standalone page.

package/test/basic/basic.test.js

@@ -0,0 +1,11 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+const results = await runBuild(import.meta.dirname);
+
+test('renders a basic template', async () => {
+	const page = results[0];
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/template-basic.html'
+	);
+});

package/test/{input/simple.vto → basic/index.vto}

@@ -1,5 +1,5 @@
 ---
-title: Simple Page
+title: Basic Page
 ---
 
 <h1>{{ title }}</h1>

package/test/filters/__snapshots__/filters-arguments.html

@@ -0,0 +1 @@
+This is a <strong>really cool</strong> filter.

package/test/filters/__snapshots__/filters-basic.html

@@ -0,0 +1,2 @@
+
+Page title is 'A BASIC PAGE'

package/test/filters/basic.vto

@@ -0,0 +1,5 @@
+---
+title: A basic page
+---
+
+Page title is '{{ title |> uppercase }}'

package/test/filters/filters.test.js

@@ -0,0 +1,40 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+const results = await runBuild(import.meta.dirname, {
+	eleventy(configApi) {
+		configApi.addFilter(
+			'uppercase',
+			/** @param {string} content */
+			(content) => content.toUpperCase()
+		);
+
+		configApi.addFilter(
+			'wrapWith',
+			(content, tag) => `<${tag}>${content}</${tag}>`
+		);
+
+		configApi.addFilter('pageUrlCompare', function (url) {
+			return url === this.page.url;
+		});
+	},
+});
+
+test('transforms string with built-in method', async () => {
+	const page = results.find(({ url }) => url === '/basic/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/filters-basic.html'
+	);
+});
+
+test('transforms string with passed arguments', async () => {
+	const page = results.find(({ url }) => url === '/with-arguments/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/filters-arguments.html'
+	);
+});
+
+test('verify page context in scoped data', async () => {
+	const page = results.find(({ url }) => url === '/with-this/');
+	expect(page.content).toBe('true\n');
+});

package/test/filters/with-arguments.vto

@@ -0,0 +1 @@
+This is a {{ 'really cool' |> wrapWith('strong') }} filter.

package/test/filters/with-this.vto

@@ -0,0 +1 @@
+{{ page.url |> pageUrlCompare }}

package/test/get-instance.js

@@ -0,0 +1,35 @@
+import { VentoPlugin } from 'eleventy-plugin-vento';
+import Eleventy from '@11ty/eleventy';
+
+/**
+ * @typedef {object} ExtensionsOptions
+ * @property {import('eleventy-plugin-vento').VentoPluginOptions} vento
+ * @property {import('@11ty/eleventy/src/UserConfig.js')} eleventy
+ *
+ * @typedef {{ url: string, inputPath: string, outputPath: string, rawInput: string, content: string }} PageObject
+ * @typedef {PageObject[]} EleventyOutput
+ */
+
+/**
+ * @param {string} fromInput
+ * @param {ExtensionsOptions} [extensions={}]
+ */
+export async function runBuild(fromInput, extensions = {}) {
+	const instance = new Eleventy(fromInput, '_site', {
+		quiet: true,
+
+		/** @param {import('@11ty/eleventy/src/UserConfig.js').default} eleventyConfig */
+		config(eleventyConfig) {
+			eleventyConfig.addPlugin(VentoPlugin, extensions.vento || {});
+
+			eleventyConfig.ignores.add('**/__snapshots__/**');
+
+			if (extensions.eleventy) extensions.eleventy.call(this, eleventyConfig);
+		},
+	});
+
+	/** @type {Promise<EleventyOutput>} */
+	const results = await instance.toJSON();
+
+	return results;
+}

package/test/includes/__snapshots__/includes-basic.html

@@ -0,0 +1,8 @@
+
+<h1>Page with includes</h1>
+
+<section class="include">
+	<p>This content is included.</p>
+	<p>Passed data for `extra` key: ''</p>
+</section>
+

package/test/includes/__snapshots__/includes-data.html

@@ -0,0 +1,8 @@
+
+<h1>Page with includes (data passing)</h1>
+
+<section class="include">
+	<p>This content is included.</p>
+	<p>Passed data for `extra` key: 'super fancy data'</p>
+</section>
+

package/test/{input → includes}/_includes/partial.vto

@@ -1,3 +1,4 @@
 <section class="include">
 	<p>This content is included.</p>
+	<p>Passed data for `extra` key: '{{ extra }}'</p>
 </section>

package/test/includes/includes.test.js

@@ -0,0 +1,20 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+console.log(import.meta.dirname);
+
+const results = await runBuild(import.meta.dirname);
+
+test('include a page', async () => {
+	const page = results.find(({ url }) => url === '/basic/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/includes-basic.html'
+	);
+});
+
+test('include a page with data passing', async () => {
+	const page = results.find(({ url }) => url === '/with-data/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/includes-data.html'
+	);
+});

package/test/includes/with-data.vto

@@ -0,0 +1,7 @@
+---
+title: Page with includes (data passing)
+---
+
+<h1>{{ title }}</h1>
+
+{{ include 'partial.vto' { extra: 'super fancy data' } }}

package/test/layouts/__snapshots__/example-layout-1.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Page with layout</title>
+	</head>
+	<body>
+		<header>
+			<h1>Page title: Page with layout</h1>
+		</header>
+		<main>
+			<section>This is an alternative layout.</section>
+			<section>
+<p>This is a page that uses the first layout.</p>
+
+<p>This is another paragraph.</p>
+<p>This is another paragraph.</p>
+<p>This is another paragraph.</p>
+
+</section>
+		</main>
+		<footer>
+			<p>I am a footer, outside the layout</p>
+		</footer>
+	</body>
+</html>

package/test/layouts/__snapshots__/example-layout-2.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Page with layout</title>
+	</head>
+	<body>
+		<header>
+			<h1>Page title: Page with layout</h1>
+		</header>
+		<main>
+<p>This is a page that uses the second layout.</p>
+
+<p>This is another paragraph.</p>
+<p>This is another paragraph.</p>
+<p>This is another paragraph.</p>
+
+</main>
+		<footer>
+			<p>I am a footer, outside the layout</p>
+		</footer>
+	</body>
+</html>

package/test/layouts/layouts.test.js

@@ -0,0 +1,18 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+const results = await runBuild(import.meta.dirname);
+
+test('render page with example layout 1', async () => {
+	const page = results.find(({ url }) => url === '/page1/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/example-layout-1.html'
+	);
+});
+
+test('render page with example layout 2', async () => {
+	const page = results.find(({ url }) => url === '/page2/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/example-layout-2.html'
+	);
+});

package/test/{input/with-layout.vto → layouts/page1.vto}

@@ -1,9 +1,9 @@
 ---
 title: Page with layout
-layout: page-layout.vto
+layout: layout1.vto
 ---
 
-<p>This is a page that uses a layout.</p>
+<p>This is a page that uses the first layout.</p>
 
 <p>This is another paragraph.</p>
 <p>This is another paragraph.</p>

package/test/layouts/page2.vto

@@ -0,0 +1,11 @@
+---
+title: Page with layout
+layout: layout2.vto
+---
+
+<p>This is a page that uses the second layout.</p>
+
+<p>This is another paragraph.</p>
+<p>This is another paragraph.</p>
+<p>This is another paragraph.</p>
+

package/test/permalinks/__snapshots__/permalink-nested.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+	<head><title>Nested Page</title></head>
+	<body>
+		<header>
+			<h1>Page title: Nested Page</h1>
+			</header>
+		<main>
+This content lives at `/page/at/nested/permalink/`
+</main>
+		<footer>
+			<p>Page footer</p>
+		</footer>
+	</body>
+</html>

package/test/permalinks/__snapshots__/permalink-root.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+	<head><title>Root page</title></head>
+	<body>
+		<header>
+			<h1>Page title: Root page</h1>
+			</header>
+		<main>
+This should render on the homepage.
+</main>
+		<footer>
+			<p>Page footer</p>
+		</footer>
+	</body>
+</html>

package/test/permalinks/_includes/layout.vto

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+	<head><title>{{ title }}</title></head>
+	<body>
+		<header>
+			<h1>Page title: {{ title }}</h1>
+			</header>
+		<main>{{ content }}</main>
+		<footer>
+			<p>Page footer</p>
+		</footer>
+	</body>
+</html>

package/test/permalinks/at-nested.vto

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

package/test/{input/root.vto → permalinks/at-root.vto}

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

package/test/{input/directory-data/dir-data.vto → permalinks/dynamic/dynamic-permalink.vto}

@@ -1,6 +1,6 @@
 ---
 title: Directory data test page
-layout: page-layout.vto
+layout: layout.vto
 ---
 
 This page has directory data set with dynamic permalinks

package/test/permalinks/permalinks.test.js

@@ -0,0 +1,31 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+const results = await runBuild(import.meta.dirname);
+
+test('render a page at a nested permalink', async () => {
+	const page = results.find(({ url }) => url === '/page/at/nested/permalink/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/permalink-nested.html'
+	);
+});
+
+test('render a page at root url', async () => {
+	const page = results.find(({ url }) => url === '/');
+	expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/permalink-root.html'
+	);
+});
+
+test('render a page at a dynamic permalink', async () => {
+	const page = results.find(
+		({ url }) => url === '/directory-data-test-page.html'
+	);
+
+	expect(page).toBeDefined();
+});
+
+test('skips rendering a file', () => {
+	const writtenTemplates = results.filter(({ url }) => Boolean(url));
+	expect(writtenTemplates.length).toBe(3);
+});

package/test/{input → permalinks}/skip.vto

@@ -1,6 +1,6 @@
 ---
 title: Skipped
-layout: page-layout.vto
+layout: layout.vto
 permalink: false
 ---
 

package/test/shortcodes/__snapshots__/shortcode-with-arguments.html

@@ -0,0 +1,2 @@
+Release the possums!!!
+Release 5 MILLION possums!!!

package/test/shortcodes/basic.vto

@@ -0,0 +1 @@
+{{ helloWorld() }}

package/test/shortcodes/shortcodes.test.js

@@ -0,0 +1,24 @@
+import { test } from 'vitest';
+import { runBuild } from '../get-instance.js';
+
+const results = await runBuild(import.meta.dirname, {
+	eleventy(configApi) {
+		configApi.addShortcode('helloWorld', () => 'Hello world!');
+		configApi.addShortcode(
+			'possumPosse',
+			(number = 'the') => `Release ${number} possums!!!`
+		);
+	},
+});
+
+test.concurrent('shortcode without argument', ({ expect }) => {
+	const page = results.find(({ url }) => url === '/basic/');
+	expect(page.content).toBe('Hello world!\n');
+});
+
+test.concurrent('shortcode with arguments', async ({ expect }) => {
+	const page = results.find(({ url }) => url === '/with-arguments/');
+	await expect(page.content).toMatchFileSnapshot(
+		'./__snapshots__/shortcode-with-arguments.html'
+	);
+});

package/test/shortcodes/with-arguments.vto

@@ -0,0 +1,2 @@
+{{ possumPosse() }}
+{{ possumPosse('5 MILLION') }}

package/test/input/eleventy.config.js

@@ -1,23 +0,0 @@
-import { VentoPlugin, ventoDefaultTrimTags } from 'eleventy-plugin-vento';
-
-export const config = {
-	dir: {
-		input: '.',
-		output: '../output',
-	},
-};
-
-/** @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, {
-		trimTags: [...ventoDefaultTrimTags, 'for'],
-	});
-
-	eleventyConfig.addShortcode('possumPosse', (number = 'the') => `Release ${number} possums!!!`);
-}

package/test/input/filters-additional.vto

@@ -1,9 +0,0 @@
----
-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/filters.vto

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

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/whitespace-control.vto

@@ -1,5 +0,0 @@
-{{ set name = "Bob" }}
-{{ if true }}
-  Hello, {{ name }}!
-  {{ set variable = 10 }}
-{{ /if }}

package/test/input/with-shortcodes.vto

@@ -1,6 +0,0 @@
----
-title: Page with shortcodes
-layout: page-layout.vto
----
-
-{{ possumPosse(32) }}