eleventy-plugin-vento 2.3.0 → 2.5.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,12 +1,9 @@
 name: CI
 
-on:
-  push:
-    branches-ignore: [main, alpha, beta, next]
-  workflow_call:
+on: push
 
 jobs:
-  test:
+  default:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

package/.github/workflows/release.yml

@@ -1,17 +1,15 @@
 name: Release
 
 on:
-  push:
+  workflow_run:
+    types: [completed]
+    workflows: [CI]
     branches: [main, alpha, beta, next]
-  workflow_dispatch:
 
 jobs:
-  test:
-    uses: ./.github/workflows/ci.yml
-
   release:
+    if: github.event.workflow_run.conclusion == 'success'
     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
@@ -32,4 +30,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: pnpm exec semantic-release --dryrun
+        run: pnpm exec semantic-release

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/jsconfig.json

@@ -4,7 +4,8 @@
 		"moduleResolution": "NodeNext",
 		"baseUrl": ".",
 		"paths": {
-			"#lib/*": ["./lib/*"]
+			"#lib/*": ["./lib/*"],
+			"#test-instance": ["./tests/get-instance.js"]
 		}
 	}
 }

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "eleventy-plugin-vento",
-	"version": "2.3.0",
+	"version": "2.5.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"
 	},
@@ -13,7 +13,8 @@
 	},
 	"main": "./VentoPlugin.js",
 	"imports": {
-		"#lib/*": "./lib/*"
+		"#lib/*": "./lib/*",
+		"#test-instance": "./tests/get-instance.js"
 	},
 	"exports": {
 		".": "./VentoPlugin.js"
@@ -35,15 +36,15 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"ventojs": "0.12.7"
+		"ventojs": "0.12.9"
 	},
 	"devDependencies": {
-		"@11ty/eleventy": "3.0.0-alpha.11",
-		"conventional-changelog-conventionalcommits": "^8.0.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",
-		"eslint": "9.4.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,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/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,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) {

package/tests/ssr/ssr.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);