eleventy-plugin-vento 2.2.0 → 2.4.0

package/.github/renovate.json

@@ -1,3 +1,13 @@
 {
-	"extends": ["github>noelforte/renovate-config", "group:allNonMajor"]
+	"extends": ["github>noelforte/renovate-config"],
+	"packageRules": [
+		{
+			"matchDepTypes": ["dependencies"],
+			"semanticCommitType": "upstream",
+			"semanticCommitScope": null
+		},
+		{
+			"matchDepTypes": ["devDependencies"]
+		}
+	]
 }

package/.github/workflows/ci.yml

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

package/.github/workflows/release.yml

@@ -1,15 +1,14 @@
-# Run releases every monday and wednesday
-# at 12:33 UTC (or manually)
-
 name: Release
 
 on:
-  schedule:
-    - cron: '33 12 * * 1,3'
-  workflow_dispatch:
+  workflow_run:
+    types: [completed]
+    workflows: [CI]
+    branches: [main, alpha, beta, next]
 
 jobs:
   release:
+    if: github.event.workflow_run.conclusion == 'success'
     runs-on: ubuntu-latest
     permissions:
       contents: write # to be able to publish a GitHub release
@@ -24,9 +23,6 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup
 
-      - name: Check project for errors
-        run: pnpm test
-
       - name: Verify provenance attestations and registry signatures
         run: npm audit signatures
 

package/.node-version

@@ -1 +1 @@
-20.14.0
+20.15.1

package/.vscode/tests.code-snippets

@@ -0,0 +1,16 @@
+{
+	"New test suite": {
+		"scope": "javascript",
+		"prefix": "VentoPluginTest",
+		"body": [
+			"import { expect, test } from 'vitest';",
+			"import { runBuild } from '#test-instance';\n",
+			"const results = await runBuild(import.meta.dirname, {",
+			"\t${1:eleventy(configApi) {\\}},",
+			"\t${2:vento: {\\}},",
+			"});"
+		],
+		"description": "Create a new test suite for eleventy-plugin-vento",
+		"isFileTemplate": true
+	}
+}

package/VentoPlugin.js

@@ -14,6 +14,7 @@
  */
 
 import VentoJs from 'ventojs';
+import { ssr } from '#lib/ssr.js';
 
 // Expose autotrim plugin defaults
 import {
@@ -69,6 +70,9 @@ export function VentoPlugin(eleventyConfig, options = {}) {
 	// Load user-defined plugins into vento
 	for (const plugin of options.plugins) env.use(plugin);
 
+	// Load ssr plugin
+	env.use(ssr);
+
 	// Add autotrim plugin if enabled
 	if (options.trimTags === true) env.use(autoTrim());
 	else if (options.trimTags) env.use(autoTrim({ tags: options.trimTags }));

package/jsconfig.json

@@ -2,6 +2,10 @@
 	"compilerOptions": {
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
-		"baseUrl": "."
+		"baseUrl": ".",
+		"paths": {
+			"#lib/*": ["./lib/*"],
+			"#test-instance": ["./tests/get-instance.js"]
+		}
 	}
 }

package/lib/ssr.js

@@ -0,0 +1,23 @@
+/**
+ * @typedef {import('ventojs/src/tokenizer.js').Token} Token
+ * @typedef {import('ventojs/src/environment.js').Environment} Environment
+ */
+
+/** @param {Environment} env */
+export function ssr(env) {
+	env.tags.push(ssrTag);
+}
+
+/**
+ * @param {string} code
+ * @param {Environment} env
+ * @param {string} output
+ * @param {Token[]} tokens
+ */
+function ssrTag(env, code, output, _tokens) {
+	if (!code.startsWith('!')) return;
+
+	const compiled = `{{${code.replace(/!(>?)\s+/, '$1 ')} }}`;
+
+	return `${output} += "${compiled}";`;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "eleventy-plugin-vento",
-	"version": "2.2.0",
+	"version": "2.4.0",
 	"description": "Adds support for the Vento templating language to Eleventy.",
 	"type": "module",
-	"packageManager": "pnpm@9.3.0",
+	"packageManager": "pnpm@9.5.0",
 	"engines": {
 		"node": ">=16"
 	},
@@ -12,6 +12,10 @@
 		"lint": "eslint **/*.js --config ./eslint.config.js"
 	},
 	"main": "./VentoPlugin.js",
+	"imports": {
+		"#lib/*": "./lib/*",
+		"#test-instance": "./tests/get-instance.js"
+	},
 	"exports": {
 		".": "./VentoPlugin.js"
 	},
@@ -32,15 +36,15 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"ventojs": "0.12.7"
+		"ventojs": "0.12.8"
 	},
 	"devDependencies": {
-		"@11ty/eleventy": "3.0.0-alpha.10",
-		"conventional-changelog-conventionalcommits": "^8.0.0",
-		"eslint": "9.4.0",
-		"eslint-config-flat-gitignore": "0.1.5",
+		"@11ty/eleventy": "3.0.0-alpha.14",
+		"conventional-changelog-conventionalcommits": "8.0.0",
+		"eslint": "9.6.0",
+		"eslint-config-flat-gitignore": "0.1.7",
 		"eslint-config-prettier": "9.1.0",
-		"globals": "15.4.0",
+		"globals": "15.8.0",
 		"semantic-release": "24.0.0",
 		"vitest": "1.6.0"
 	},

package/readme.md

@@ -1,7 +1,13 @@
 # eleventy-plugin-vento 🌬️🎈🐀
 
+<a href="https://github.com/noelforte/eleventy-plugin-vento/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/noelforte/eleventy-plugin-vento/ci.yml?branch=main&style=flat-square&logo=github&logoColor=fff&label=Tests&labelColor=333" alt="Github Actions Status"></a>
+<a href="https://npmjs.com/package/eleventy-plugin-vento"><img src="https://img.shields.io/npm/v/eleventy-plugin-vento?style=flat-square&logo=npm&logoColor=fff&labelColor=333" alt="eleventy-plugin-vento on npm"></a>
+<a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/semantic--release-Conventional_Commits-fa6673?style=flat-square&logo=semanticrelease&logoColor=fff&labelColor=333" alt="semantic-release"></a>
+
 An [Eleventy](https://11ty.dev/) plugin that adds support for [Vento](https://vento.js.org/) templates.
 
+## Contents
+
 [Installing](#installing)<br>
 [Usage](#usage)<br>
 [Plugin Options](#plugin-options)<br>
@@ -9,6 +15,7 @@ An [Eleventy](https://11ty.dev/) plugin that adds support for [Vento](https://ve
 [Vento Plugins](#vento-plugins)<br>
 [Auto-Trimming Tags](#auto-trimming-tags)<br>
 [JavaScript Helpers](#javascript-helpers)<br>
+[Hybrid Rendering](#hybrid-rendering)<br>
 
 ## Installing
 
@@ -159,7 +166,7 @@ Alternatively, if you'd rather keep functions namespaced in your page data, pass
 addPlugin(VentoPlugin, { addHelpers: 'functions' });
 ```
 
-```hbs
+```nunjucks
 <!-- With the above, this: -->
 <p>This is something {{ italicize('really') }} important.</p>
 <p>{{ possumPosse() }}</p>
@@ -176,3 +183,63 @@ eleventyConfig.addPlugin(VentoPlugin, {
   addHelpers: false,
 });
 ```
+
+## Hybrid Rendering
+
+Exclusive to this plugin is the ability to skip processing a vento tag entirely and instead preserve the tag in the markup. This could be useful if you're doing some hybrid rendering and would like to defer certain tags from being processed until load time, so they can be rendered on the server.
+
+To skip over a tag, add a `!` directly after the opening tag.
+
+```nunjucks
+<!-- This: -->
+{{! doSomeServerSideStuff() }}
+
+<!-- Renders as: -->
+{{ doSomeServerSideStuff() }}
+```
+
+Works with JS expressions too:
+
+```nunjucks
+{{!> 2 + 2 }}
+
+<!-- Renders as: -->
+{{> 2 + 2 }}
+```
+
+The Vento language offers similar functionality via the [`echo` tag](https://vento.js.org/syntax/print/#echo) which works great for blocks, but can be verbose for 1-off tags.
+
+Consider the following:
+
+```nunjucks
+{{ echo }}
+  <!-- Will be preserved in output -->
+  {{ if someCondition }}
+    <p>{{ getServerData }}</p>
+{{ /echo }}
+
+    <!-- Can't render this without exiting and re-entering echo -->
+    <p>Page built on: {{ localBuildTime }}</p>
+
+{{ echo }}
+  {{ /if }}
+{{ /echo }}
+```
+
+Rather than having to do multiple `{{ /echo }} ... {{ echo }}` statements, the previous can be rewritten as such:
+
+```nunjucks
+<!-- This: -->
+{{! if someCondition }}
+  <p>{{! getServerData }}</p>
+
+  <p>Page built on: {{ localBuildTime }}</p>
+{{! /if }}
+
+<!-- Renders as: -->
+{{ if someCondition }}
+  <p>{{ getServerData }}</p>
+
+  <p>Page built on: 04-08-2024</p>
+{{ /if }}
+```

package/release.config.js

@@ -2,8 +2,9 @@ const presetConfig = {
 	types: [
 		{ type: 'feat', section: 'New Features' },
 		{ type: 'fix', section: 'Bug Fixes' },
-		{ type: 'refactor', section: 'Refactorings' },
-		{ type: 'docs', section: 'Documentation' },
+		{ type: 'refactor', section: 'Refactors' },
+		{ type: 'upstream', section: 'Dependency Updates' },
+		{ type: 'docs', hidden: true },
 		{ type: 'chore', hidden: true },
 		{ type: 'perf', hidden: true },
 		{ type: 'style', hidden: true },
@@ -11,10 +12,16 @@ const presetConfig = {
 	],
 };
 
+const releaseRules = [
+	{ breaking: true, release: 'major' },
+	{ type: 'upstream', release: 'minor' },
+];
+
 /** @type {import('semantic-release').Options} */
 export default {
 	preset: 'conventionalcommits',
 	presetConfig,
+	releaseRules,
 	plugins: [
 		['@semantic-release/commit-analyzer'],
 		'@semantic-release/release-notes-generator',

package/tests/autotrim/autotrim.test.js

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

package/tests/basic/basic.test.js

@@ -1,11 +1,9 @@
 import { expect, test } from 'vitest';
-import { runBuild } from '../get-instance.js';
+import { runBuild } from '#test-instance';
 
 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'
-	);
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/template-basic.html');
 });

package/tests/filters/filters.test.js

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { runBuild } from '../get-instance.js';
+import { runBuild } from '#test-instance';
 
 const results = await runBuild(import.meta.dirname, {
 	eleventy(configApi) {
@@ -9,10 +9,7 @@ const results = await runBuild(import.meta.dirname, {
 			(content) => content.toUpperCase()
 		);
 
-		configApi.addFilter(
-			'wrapWith',
-			(content, tag) => `<${tag}>${content}</${tag}>`
-		);
+		configApi.addFilter('wrapWith', (content, tag) => `<${tag}>${content}</${tag}>`);
 
 		configApi.addFilter('pageUrlCompare', function (url) {
 			return url === this.page.url;
@@ -22,16 +19,12 @@ const results = await runBuild(import.meta.dirname, {
 
 test('transforms string with built-in method', async () => {
 	const page = results.find(({ url }) => url === '/basic/');
-	await expect(page.content).toMatchFileSnapshot(
-		'./__snapshots__/filters-basic.html'
-	);
+	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'
-	);
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/filters-arguments.html');
 });
 
 test('verify page context in scoped data', async () => {

package/tests/includes/includes.test.js

@@ -1,20 +1,14 @@
 import { expect, test } from 'vitest';
-import { runBuild } from '../get-instance.js';
-
-console.log(import.meta.dirname);
+import { runBuild } from '#test-instance';
 
 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'
-	);
+	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'
-	);
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/includes-data.html');
 });

package/tests/layouts/layouts.test.js

@@ -1,18 +1,14 @@
 import { expect, test } from 'vitest';
-import { runBuild } from '../get-instance.js';
+import { runBuild } from '#test-instance';
 
 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'
-	);
+	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'
-	);
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/example-layout-2.html');
 });

package/tests/permalinks/permalinks.test.js

@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest';
-import { runBuild } from '../get-instance.js';
+import { runBuild } from '#test-instance';
 
 const results = await runBuild(import.meta.dirname);
 

package/tests/shortcodes/shortcodes.test.js

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

package/tests/ssr/__snapshots__/ssr-data.html

@@ -0,0 +1 @@
+<p>{{ dynamicValue }}</p>

package/tests/ssr/__snapshots__/ssr-echo.html

@@ -0,0 +1,7 @@
+{{ echo }}
+
+{{ dataValue }}
+
+<p>Some more {{ dataValue }}</p>
+
+{{ /echo }}

package/tests/ssr/__snapshots__/ssr-exec.html

@@ -0,0 +1 @@
+{{> console.log('hello world!') }}

package/tests/ssr/__snapshots__/ssr-for.html

@@ -0,0 +1,3 @@
+{{ for value of [1,2,3] }}
+	{{ value }}
+{{ /for }}

package/tests/ssr/__snapshots__/ssr-if.html

@@ -0,0 +1,5 @@
+{{ if true }}
+
+<p>Some content</p>
+
+{{ /if }}

package/tests/ssr/data.vto

@@ -0,0 +1 @@
+<p>{{! dynamicValue }}</p>

package/tests/ssr/echo.vto

@@ -0,0 +1,7 @@
+{{! echo }}
+
+{{! dataValue }}
+
+<p>Some more {{! dataValue }}</p>
+
+{{! /echo }}

package/tests/ssr/exec.vto

@@ -0,0 +1 @@
+{{!> console.log('hello world!') }}

package/tests/ssr/for.vto

@@ -0,0 +1,3 @@
+{{! for value of [1,2,3] }}
+	{{! value }}
+{{! /for }}

package/tests/ssr/if.vto

@@ -0,0 +1,5 @@
+{{! if true }}
+
+<p>Some content</p>
+
+{{! /if }}

package/tests/ssr/ssr.test.js

@@ -0,0 +1,29 @@
+import { expect, test } from 'vitest';
+import { runBuild } from '#test-instance';
+
+const results = await runBuild(import.meta.dirname);
+
+test('render if', async () => {
+	const page = results.find(({ url }) => url === '/if/');
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/ssr-if.html');
+});
+
+test('render data', async () => {
+	const page = results.find(({ url }) => url === '/data/');
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/ssr-data.html');
+});
+
+test('render for', async () => {
+	const page = results.find(({ url }) => url === '/for/');
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/ssr-for.html');
+});
+
+test('render echo', async () => {
+	const page = results.find(({ url }) => url === '/echo/');
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/ssr-echo.html');
+});
+
+test('render exec', async () => {
+	const page = results.find(({ url }) => url === '/exec/');
+	await expect(page.content).toMatchFileSnapshot('./__snapshots__/ssr-exec.html');
+});