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

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:

Stats	v2.0.1	v3.0.0-beta.1
23% smaller	35.2 MB	27.1 MB
6.6% fewer third-party dependencies	210	196
21.7% faster npm install	6.572s*	5.146s*

(*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) {}

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

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

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

4. For-free performance improvement to built-in slugify, inputPathToUrl universal filters (via memoization) #840
5. 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"
  },
};

6. 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",
  });
};

7. 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>

8. 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
};

9. 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>

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

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

11. page.rawInput unlocks access to raw template content #1206
12. addPreprocessor configuration API to modify raw content before rendering works for file ignores and drafts #188
13. addDateParsing configuration API to add your own custom date parsing logic #867
14. eleventyDataSchema data option to validate data cascade values #879
15. Reserved Eleventy properties in data cascade are now frozen #1173
16. Support for asynchronous plugins and async-friendly addPlugin configuration API #2675
17. useLayouts option for Custom Template Languages allows opt-out of Eleventy Layouts #2830
18. renderTransforms Universal Filter will run project transforms on an arbitrary block of content (useful for RSS and other feeds) #3294
19. --incremental=filename.md on the command line #3324
20. 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.