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

[zachleat]

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 (Modify Eleventy to work with ECMAScript Modules (ESM) by default #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.

// 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 Allow configuration to return a promise (async-friendly) #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) Can Eleventy cache filters or template includes? (memoize) #840
5. Named config export improves consistency for plugins Add support for config named export From Configuration File #3246 and set*Directory configuration API methods 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!) Configuration API method to create a content template (aka Virtual Templates) #1612

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

7. IdAttribute plugin adds id attributes to headings (supports all template-languages) New IdAttributePlugin will add id attributes to your headings #3363

import { IdAttributePlugin } from "@11ty/eleventy";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(IdAttributePlugin);
};

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 Adds js front matter type for arbitrary JavaScript front matter. #2819

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

11. page.rawInput unlocks access to raw template content Access to raw file content (before any processing) #1206
12. addPreprocessor configuration API to modify raw content before rendering works for file ignores and drafts addPreprocessor Configuration API method to Ignore Files and simplify "Draft" templates #188
13. addDateParsing configuration API to add your own custom date parsing logic Configuration Hook/callback for custom date parsing #867
14. eleventyDataSchema data option to validate data cascade values Use eleventyDataSchema in Data Cascade to validate data #879
15. Reserved Eleventy properties in data cascade are now frozen Error messaging when you attempt to set reserved Eleventy Data names #1173
16. Support for asynchronous plugins and async-friendly addPlugin configuration API Enable plugins to be async #2675
17. useLayouts option for Custom Template Languages allows opt-out of Eleventy Layouts useLayouts option for Custom template syntax allows opt-out of Eleventy Layouts for a template type #2830
18. renderTransforms Universal Filter will run project transforms on an arbitrary block of content (useful for RSS and other feeds) renderTransforms Filter to run Transforms on arbitrary content (useful for RSS feeds) #3294
19. --incremental=filename.md on the command line --incremental=filename.md for incremental build without --watch or --serve #3324
20. renderContent Universal Filter now included with Render Plugin renderContent Universal Filter in 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 Throw if --config is specified but the file is not found #3373
• The htmlOutputSuffix feature was removed Remove htmlOutputSuffix Common Pitfall when input and output directories match. #3327
• Aliased custom templates must be declared in active formats Breaking: Aliased template syntax must be explicitly listed in template formats #3302
• --formats= and --formats="" on command line means no formats (previously aliased to *) Cleanup for --formats, templateFormats config, and setTemplateFormats addTemplateFormats configuration API methods #3255
• Custom Template Language compileOptions.permalink option changed from true to "raw" compileOptions.permalink default changed from true to "raw" for Custom Template Syntaxes #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 😱😈 Use tabs. #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.

---

This discussion was created from the release Eleventy v3.0.0-beta.1: ESM like a Phoenix (the mythical bird, not Arizona).