Skip to content

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

Pre-release
Pre-release
Compare
Choose a tag to compare
@zachleat zachleat released this 31 Jul 20:24
· 141 commits to main since this release

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) {}
  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:
  • 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.