11ty/eleventy v3.0.0

Eleventy v3.0.0: Possums ❤️ ESM

on GitHub

We did it. After 22 pre-releases and over a year of work, Eleventy 3.0.0 is now available. You can try it out now on your project using:

npm install @11ty/eleventy@latest

If you’re upgrading from a previous version of Eleventy, use the Upgrade Help plugin for automated checks and help with your upgrade!

Why should you use Eleventy? Eleventy is a flexible and production-ready site generator known for its zero-client JavaScript footprint, speedy sites, speedy builds, and full control over the output.

A few numbers on the best version of Eleventy yet:

*fastest time of 3 runs (bypassing local cache)

Flagship 3.0 features

1. Eleventy is now written in ESM with full support for ESM in your projects: configuration, data files, 11ty.js templates, etc. For many projects this won’t be a breaking change and we’ll continue to support CommonJS too. Every example on the docs now includes both a CommonJS and ESM version. Docs: https://v3.11ty.dev/docs/cjs-esm/

// ESM
export default function(eleventyConfig) {}

// We’ll keep supporting CommonJS:
module.exports = function(eleventyConfig) {}

1. Supporting more package managers and runtimes: pnpm, yarn, Deno. More examples on the docs! https://v3.11ty.dev/docs/
2. Asynchronous configuration #614 Docs: https://v3.11ty.dev/docs/config/

// ESM
export default async function(eleventyConfig) {}

// CommonJS
module.exports = async function(eleventyConfig) {}

1. For-free performance improvement to built-in slugify, inputPathToUrl universal filters (via memoization) #840 Docs: https://v3.11ty.dev/docs/memoize/
2. Named config export improves consistency for plugins #3246 and set*Directory configuration API methods #1503 Docs: https://v3.11ty.dev/docs/config-shapes/#optional-export-config-object and https://v3.11ty.dev/docs/config/#configuration-options

export default function(eleventyConfig) {
  eleventyConfig.setInputDirectory(".");
  eleventyConfig.setOutputDirectory("_site");
};

export const config = {
  dir: {
    input: ".",
    output: "_site"
  },
};

1. Virtual Templates, configuration API to add content (great for plugins, used by the new RSS plugin!) #1612 Docs: https://v3.11ty.dev/docs/virtual-templates/

export default function(eleventyConfig) {
  eleventyConfig.addTemplate("robots.njk", "User-agent: *\nAllow: /", {
    permalink: "/robots.txt",
  });
};

1. IdAttribute plugin adds id attributes to headings for on-page anchor links (supports all template-languages) #3363 Docs: https://v3.11ty.dev/docs/plugins/id-attribute/

<h1>Welcome to my web site</h1> becomes <h1 id="welcome-to-my-web-site">Welcome to my web site</h1>

1. Plain-text Bundler included: https://v3.11ty.dev/docs/plugins/bundle/

export default function(eleventyConfig) {
  eleventyConfig.addBundle("css"); // Adds {% css %} paired shortcode to create per-page CSS bundles
};

1. InputPath to URL plugin lets you link directly to an input file path (and we’ll output the right URL) Docs: https://www.11ty.dev/docs/plugins/inputpath-to-url/

<a href="my-template.md">Home</a> becomes <a href="/my-template/">Home</a>

1. Use arbitrary JavaScript with the js Front Matter #2819 Docs: https://v3.11ty.dev/docs/data-frontmatter/#javascript-front-matter

---js
const hello = "hi";
---
{{ hello }}

1. page.rawInput unlocks access to raw template content #1206 https://v3.11ty.dev/docs/data-eleventy-supplied/#page-variable
2. addPreprocessor configuration API to modify raw content before rendering works for file ignores and drafts #188 Docs: https://v3.11ty.dev/docs/config-preprocessors/
3. addDateParsing configuration API to add your own custom date parsing logic #867 Docs: https://v3.11ty.dev/docs/dates/#configuration-api-for-custom-date-parsing
4. eleventyDataSchema data option to validate data cascade values #879 Docs: https://v3.11ty.dev/docs/data-validate/
5. Reserved Eleventy properties in data cascade are now frozen #1173 Docs: https://v3.11ty.dev/docs/data-eleventy-supplied/#frozen-data
6. Support for asynchronous plugins and async-friendly addPlugin configuration API #2675 Docs: https://v3.11ty.dev/docs/plugins/#plugins-are-configuration
7. useLayouts option for Custom Template Languages allows opt-out of Eleventy Layouts #2830 Docs: https://v3.11ty.dev/docs/languages/custom/#uselayouts
8. renderTransforms Universal Filter will run project transforms on an arbitrary block of content (useful for RSS and other feeds) #3294
9. --incremental=filename.md on the command line #3324 Docs: https://v3.11ty.dev/docs/usage/#incremental-for-partial-incremental-builds
10. renderContent Universal Filter now included with Render Plugin #3370 Docs: https://v3.11ty.dev/docs/plugins/render/#rendercontent-filter
11. Dev Server updates including onRequest API for handling requests dynamically during development (used with the new Image Transform plugin)

Breaking Changes and Upgrade Path

Rather than navigating this list manually, use the Upgrade Help plugin for automated project checks and upgrade help!

• Requires Node 18 or newer.
• Removes Serverless and Edge plugins.
• Use of bundled Eleventy plugins from CommonJS requires changing require("@11ty/eleventy") to await import("@11ty/eleventy") for ESM reasons. We provide helpful error messaging for this.
• pug, ejs, haml, mustache, and handlebars template languages moved from core to official plugins:
  • handlebars: https://v3.11ty.dev/docs/languages/handlebars/
  • mustache: https://v3.11ty.dev/docs/languages/mustache/
  • ejs: https://v3.11ty.dev/docs/languages/ejs/
  • haml: https://v3.11ty.dev/docs/languages/haml/
  • pug: https://v3.11ty.dev/docs/languages/pug/
• Throw errors if --config= command line file is missing #3373
• The htmlOutputSuffix feature was removed #3327
• Aliased custom templates must be declared in active formats #3302
• --formats= and --formats="" on command line means no formats (previously aliased to *) #3255
• Custom Template Language compileOptions.permalink option changed from true to "raw" #2780
• Major semver updates of dependencies:
  • js-yaml v3 to v4 Changelog
    • Better error messaging when using tabs in YAML
    • Numbers are now parsed according to YAML 1.2 spec (from 1.1)
  • @sindresorhus/slugify v2 to v3 Changelog: Node 12+, Pure ESM
  • bcp-47-normalize v1 to v2 Changelog: Pure ESM
  • dependency-graph v0.x to v1 Changelog
  • iso-639-1 v2 to v3 Changelog: Pure ESM
  • markdown-it v13 to v14 Changelog: Pure ESM, removed dist folder
• Full list of breaking changes

Minutiae

• Packages are now published using npm package provenance.
• The code base is using tabs 😱😈 #3098

Full Eleventy v3 Milestone (177 closed): https://github.com/11ty/eleventy/milestone/40?closed=1
Full Changelog: v2.0.1...v3.0.0

Thank You Notes

This release would not have been possible without our community and supporters.

• To everyone that has built something with Eleventy: thank you!
• To everyone that has answered a question about Eleventy: on the Discord, on social media, in GitHub issues or discussion, at your local meetup or coffee shop: thank you!
• To everyone that attended the 11ty Conference earlier this year: thank you!
• To everyone that brought a well-intentioned complaint about something you didn’t like about Eleventy: thank you!
• To everyone that dropped a few nice words of appreciation: thank you!
• To everyone that has supported us and made this release possible: thank you!

Thank you to @bobmonsour, @pdehaan, @Snapstromegon, @cdransf, @5t3ph, @BenDMyers, @siakaramalegos, @shivjm, @dleatherman, @darthmall, @clottman, @nachtfunke, @David-Large, Olivia Nicholson, and @mneumegen for their community contributions!

Thank you for the code contributions from @VividVisions, @mayank99, @Zearin, @chriskirknielsen, @mendhak, @fqueze, @shivjm, @rdela, @w0whitaker, @vrugtehagel, @sachac, @Snapstromegon, @alifeee, @uncenter, @Zwyx, @mayankkamboj47, @aschrab, @jgarber623, @korverdev, @mathertel, @mathieuprog, @epelc, @Ryuno-Ki, @lexoyo, @satgo1546, @KiwiKilian