eleventy-plugin-edgejs 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 David Neal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,291 @@
+# eleventy-plugin-edgejs
+
+An [Eleventy](https://www.11ty.dev/) plugin that adds support for [Edge.js](https://edgejs.dev/) templates. Edge.js is a modern, async-first templating engine from the AdonisJS team.
+
+Requires Eleventy v3.0.0+ and Node.js 22+.
+
+## Installation
+
+```sh
+npm install eleventy-plugin-edgejs
+```
+
+## Usage
+
+Register the plugin in your Eleventy config file:
+
+```js
+import edgeJsPlugin from "eleventy-plugin-edgejs";
+
+export default function ( eleventyConfig ) {
+  eleventyConfig.addPlugin( edgeJsPlugin );
+}
+```
+
+Create `.edge` files in your project and they'll be processed by Edge.js automatically.
+
+### Plugin Options
+
+```js
+eleventyConfig.addPlugin( edgeJsPlugin, {
+  // Enable template caching (default: false)
+  cache: false,
+
+  // Provide your own Edge.js instance
+  eleventyLibraryOverride: undefined,
+
+  // Register global variables available in all templates
+  globals: {
+    siteName: "My Site"
+  }
+} );
+```
+
+### Filters and Shortcodes
+
+Eleventy universal filters and shortcodes are automatically bridged into Edge.js templates as global functions. Edge.js does not use a pipe syntax for filters — instead, call them as functions:
+
+```js
+// eleventy.config.js
+eleventyConfig.addFilter( "upcase", ( str ) => str.toUpperCase() );
+eleventyConfig.addShortcode( "year", () => `${ new Date().getFullYear() }` );
+```
+
+```edge
+{{-- In your .edge template --}}
+<p>{{ upcase( name ) }}</p>
+<p>&copy; {{ year() }}</p>
+```
+
+Paired shortcodes also work as globals. The content is passed as the first argument.
+
+## Edge.js Template Syntax
+
+### Variable Interpolation
+
+Use double curly braces for escaped output and triple curly braces for raw (unescaped) output:
+
+```edge
+{{ title }}
+{{{ rawHtml }}}
+```
+
+### Conditionals
+
+```edge
+@if( user.isAdmin )
+  <p>Welcome, admin!</p>
+@elseif( user.isMember )
+  <p>Welcome, member!</p>
+@else
+  <p>Welcome, guest!</p>
+@end
+
+@unless( isLoggedIn )
+  <p>Please log in.</p>
+@end
+```
+
+Ternary expressions work inline:
+
+```edge
+<p>{{ isActive ? "Active" : "Inactive" }}</p>
+```
+
+### Loops
+
+```edge
+@each( item in items )
+  <li>{{ item }}</li>
+@end
+
+{{-- With index --}}
+@each( ( item, index ) in items )
+  <li>{{ index }}: {{ item }}</li>
+@end
+
+{{-- Loop over object entries --}}
+@each( ( value, key ) in object )
+  <dt>{{ key }}</dt>
+  <dd>{{ value }}</dd>
+@end
+
+{{-- Empty fallback --}}
+@each( item in items )
+  <li>{{ item }}</li>
+@else
+  <li>No items found.</li>
+@end
+```
+
+### Variables
+
+Declare or reassign variables within a template:
+
+```edge
+@let( greeting = "Hello" )
+<p>{{ greeting }}, World!</p>
+
+@assign( greeting = "Hi" )
+<p>{{ greeting }}, World!</p>
+```
+
+### Includes
+
+Include partial templates from your `_includes` directory. Edge.js `@` tags must be on their own line:
+
+```edge
+<header>
+@include( 'nav' )
+</header>
+
+{{-- Conditional include (renders only when condition is truthy) --}}
+@includeIf( showSidebar, 'sidebar' )
+```
+
+### Components and Slots
+
+Components live in `_includes/components/`. They provide a powerful alternative to template inheritance.
+
+A component file (`_includes/components/card.edge`):
+
+```edge
+<div class="card">
+  <div class="card-body">{{{ await $slots.main() }}}</div>
+</div>
+```
+
+Using the component:
+
+```edge
+@component( 'components/card' )
+  <p>This goes into the main slot.</p>
+@end
+```
+
+#### Named Slots
+
+A component with multiple slots (`_includes/components/modal.edge`):
+
+```edge
+<div class="modal">
+  <header>{{{ await $slots.header() }}}</header>
+  <main>{{{ await $slots.main() }}}</main>
+  @if( $slots.footer )
+  <footer>{{{ await $slots.footer() }}}</footer>
+  @end
+</div>
+```
+
+Using named slots:
+
+```edge
+@component( 'components/modal' )
+  @slot( 'header' )
+    <h2>Modal Title</h2>
+  @end
+
+  @slot( 'main' )
+    <p>Modal content goes here.</p>
+  @end
+
+  @slot( 'footer' )
+    <button>Close</button>
+  @end
+@end
+```
+
+#### Component Props
+
+Pass data to components as attributes:
+
+```edge
+{{-- _includes/components/button.edge --}}
+<button class="{{ type }}">{{ text }}</button>
+```
+
+```edge
+@component( 'components/button', { type: 'primary', text: 'Click me' } )
+@end
+
+{{-- Self-closing form --}}
+@!component( 'components/button', { type: 'danger', text: 'Delete' } )
+```
+
+### Comments
+
+Edge.js comments are stripped from the output:
+
+```edge
+{{-- This comment will not appear in the HTML --}}
+```
+
+### Escaping Edge Syntax
+
+Prefix `@` to output curly braces literally:
+
+```edge
+@{{ this will not be interpreted }}
+```
+
+### Built-in Helpers
+
+Edge.js includes several built-in helpers:
+
+```edge
+{{-- CSS class builder --}}
+<div class="{{ html.classNames( { active: isActive, hidden: !isVisible } ) }}"></div>
+
+{{-- Truncate text --}}
+<p>{{ truncate( longText, 20 ) }}</p>
+
+{{-- Convert newlines to <br> tags --}}
+{{{ nl2br( multiLineText ) }}}
+```
+
+### Newline Suppression
+
+Use `~` to remove trailing newlines from tag output:
+
+```edge
+@if( show )~
+  content
+@end
+```
+
+## Layouts
+
+Use Eleventy's built-in layout system with `.edge` files. Set the layout in front matter:
+
+```edge
+---
+layout: layout.edge
+title: My Page
+---
+<h1>{{ title }}</h1>
+<p>Page content here.</p>
+```
+
+In your layout file (`_includes/layout.edge`):
+
+```edge
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{ title }}</title>
+</head>
+<body>
+@include( 'nav' )
+  <main>{{{ content }}}</main>
+</body>
+</html>
+```
+
+## Further Reading
+
+- [Edge.js documentation](https://edgejs.dev/)
+- [Eleventy custom template languages](https://www.11ty.dev/docs/languages/custom/)
+
+## License
+
+[MIT](./LICENSE)

package/edgeJsPlugin.js

@@ -0,0 +1,67 @@
+import { Edge } from "edge.js";
+
+export default function edgeJsPlugin( eleventyConfig, options = {} ) {
+	eleventyConfig.versionCheck( ">=3.0.0" );
+
+	options = Object.assign(
+		{
+			cache: false,
+			eleventyLibraryOverride: undefined,
+			globals: {}
+		},
+		options || {}
+	);
+
+	eleventyConfig.addTemplateFormats( "edge" );
+
+	// Create Edge instance eagerly so it's available for permalink compilation
+	let edge = options.eleventyLibraryOverride || Edge.create( { cache: options.cache } );
+
+	// Bridge Eleventy filters as Edge globals
+	for ( let [ name, callback ] of Object.entries( eleventyConfig.getFilters() ) ) {
+		edge.global( name, callback );
+	}
+
+	// Bridge Eleventy shortcodes as Edge globals
+	for ( let [ name, callback ] of Object.entries( eleventyConfig.getShortcodes() ) ) {
+		edge.global( name, callback );
+	}
+
+	// Bridge Eleventy paired shortcodes as Edge globals
+	// Content is passed as the first argument, matching the Handlebars plugin pattern
+	for ( let [ name, callback ] of Object.entries( eleventyConfig.getPairedShortcodes() ) ) {
+		edge.global( name, callback );
+	}
+
+	// Register user-provided globals
+	for ( let [ name, value ] of Object.entries( options.globals ) ) {
+		edge.global( name, value );
+	}
+
+	eleventyConfig.addExtension( "edge", {
+		init: async function () {
+			// Mount _includes directory for @include/@component support
+			let includesDir = this.config.directories?.includes;
+			if ( includesDir ) {
+				edge.mount( new URL( includesDir, `file://${ process.cwd() }/` ) );
+			}
+		},
+
+		compile: ( str ) => {
+			return async ( data ) => {
+				return edge.renderRaw( str, data );
+			};
+		},
+
+		compileOptions: {
+			permalink: ( contents ) => {
+				if ( typeof contents === "string" ) {
+					return async ( data ) => {
+						return edge.renderRaw( contents, data );
+					};
+				}
+				return contents;
+			}
+		}
+	} );
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "eleventy-plugin-edgejs",
+	"version": "1.0.0",
+	"description": "Eleventy plugin for Edge.js templating",
+	"type": "module",
+	"main": "edgeJsPlugin.js",
+	"exports": {
+		".": "./edgeJsPlugin.js"
+	},
+	"files": [
+		"edgeJsPlugin.js"
+	],
+	"scripts": {
+		"build:example": "npx @11ty/eleventy --input=example/src --config=example/eleventy.config.js",
+		"lint": "eslint . --fix",
+		"start:example": "npx @11ty/eleventy --input=example/src --config=example/eleventy.config.js --serve",
+		"test": "node --test"
+	},
+	"keywords": [
+		"eleventy",
+		"eleventy-plugin",
+		"edge",
+		"edgejs",
+		"template-engine"
+	],
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"author": "David Neal <david@reverentgeek.com> (https://reverentgeek.com)",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/reverentgeek/eleventy-plugin-edgejs"
+	},
+	"bugs": {
+		"url": "https://github.com/reverentgeek/eleventy-plugin-edgejs/issues"
+	},
+	"homepage": "https://github.com/reverentgeek/eleventy-plugin-edgejs#readme",
+	"license": "MIT",
+	"dependencies": {
+		"edge.js": "^6.2.0"
+	},
+	"peerDependencies": {
+		"@11ty/eleventy": "^3.0.0"
+	},
+	"devDependencies": {
+		"@11ty/eleventy": "^3.0.0",
+		"eslint": "^10.0.2",
+		"eslint-config-reverentgeek": "^7.0.3"
+	}
+}