11ty/eleventy v3.0.0-beta.1

Eleventy v3.0.0-beta.1: ESM like a Phoenix (the mythical bird, not Arizona)

on GitHub

We did it. It’s happening. After 18 alpha pre-releases and over a year of work, our very first beta release of Eleventy 3.0 is now available. We’re still working on shipping documentation for some of these features but you can try it out now on your project using:

npm install @11ty/eleventy@beta

If you’re upgrading, use the Upgrade Help plugin for automated project checks and help!

A few numbers on the best version of Eleventy yet:

(*fastest time of 3 runs bypassing cache)

🙌🏻🚨 We still need your help! 🚨🙌🏻

11ty is now operating independently, with full time development and maintenance funded by our Open Collective supporters. We need your help to keep going! We have a goal of $6000 USD recurring monthly budget. Read more about this fundraising push and head directly to our Open Collective to start your recurring contribution!

Every recurring contribution helps!

Flagship 3.0 features

1. Eleventy is now written in ESM with full support for ESM in your projects (#836): 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. You can read more about what ECMAScript Modules (ESM) means for Eleventy projects on the 11ty Blog.

// ESM
export default function(eleventyConfig) {}

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

1. Supporting more package managers and runtimes: Deno, pnpm, yarn (more to come!)
2. Asynchronous configuration #614

// 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
2. Named config export improves consistency for plugins #3246 and set*Directory configuration API methods #1503

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

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

<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 (via eleventy-plugin-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)

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

1. Use arbitrary JavaScript with the js Front Matter #2819

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

1. page.rawInput unlocks access to raw template content #1206
2. addPreprocessor configuration API to modify raw content before rendering works for file ignores and drafts #188
3. addDateParsing configuration API to add your own custom date parsing logic #867
4. eleventyDataSchema data option to validate data cascade values #879
5. Reserved Eleventy properties in data cascade are now frozen #1173
6. Support for asynchronous plugins and async-friendly addPlugin configuration API #2675
7. useLayouts option for Custom Template Languages allows opt-out of Eleventy Layouts #2830
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
10. renderContent Universal Filter now included with Render Plugin #3370

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 plugins moved from core to official plugins
• 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 isn’t just ESM, it’s using tabs instead of spaces too 😱😈 #3098

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

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 chipped in with their hard-earned money 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, and @Ryuno-Ki.