Eleventy 3 & ESM

.eleventy.js

@@ -1,16 +1,18 @@
-const fs = require('fs');
-const Nunjucks = require('nunjucks');
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
-const {
+import fs from 'fs';
+import Nunjucks from 'nunjucks';
+import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
+import {
   imageShortcode,
   classNamesFunction,
   formatDate,
   splitLines,
-} = require('./extensions.js');
-const Image = require('@11ty/eleventy-img');
-const rss = require('@11ty/eleventy-plugin-rss');
+} from './extensions.js';
+import Image from '@11ty/eleventy-img';
+import rss from '@11ty/eleventy-plugin-rss';
 
-module.exports = function (eleventyConfig) {
+import minify from './lib/transforms/minify.js';
+
+export default function (eleventyConfig) {
   eleventyConfig.setServerOptions({
     watch: ['dist/**/*'],
     port: 3000,
@@ -31,7 +33,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addFilter('splitLines', splitLines);
 
   // Minify HTML output
-  eleventyConfig.addTransform('minify', require('./lib/transforms/minify.js'));
+  eleventyConfig.addTransform('minify', minify);
 
   // Copy static assets to dist
   eleventyConfig.addPassthroughCopy('./src/favicon.ico');
@@ -79,4 +81,4 @@ module.exports = function (eleventyConfig) {
     markdownTemplateEngine: 'njk',
     passthroughFileCopy: true,
   };
-};
+}

.nvmrc

@@ -1 +1 @@
-16
+20

extensions.js

@@ -1,14 +1,14 @@
-const path = require('path');
-const Image = require('@11ty/eleventy-img');
-const classNames = require('classnames');
-const { DateTime } = require('luxon');
+import path from 'path';
+import Image from '@11ty/eleventy-img';
+import classNames from 'classnames';
+import { DateTime } from 'luxon';
 
 /**
  * Generate multiple sizes of an image and return the corresponding HTML
  * as a <picture> element.
  */
-function imageShortcode(src, attrs) {
-  src = path.resolve(__dirname, 'src/assets/images/', src);
+export function imageShortcode(src, attrs) {
+  src = path.resolve(import.meta.dirname, 'src/assets/images/', src);
   let options = {
     widths: [400, 600, 800, 1000, 1200],
     formats: ['webp', 'jpg'],
@@ -43,14 +43,14 @@ function imageShortcode(src, attrs) {
  * Generate a space-separated string from a string/array/object of class names
  * while omitting nil values.
  */
-function classNamesFunction(...cls) {
+export function classNamesFunction(...cls) {
   return classNames(cls);
 }
 
 /**
  * Format a date object using Luxon.
  */
-function formatDate(dateObj) {
+export function formatDate(dateObj) {
   return DateTime.fromJSDate(dateObj)
     .setZone('Europe/Zurich')
     .toLocaleString(DateTime.DATE_FULL);
@@ -59,7 +59,7 @@ function formatDate(dateObj) {
 /**
  * Split a string into lines of a maximum length.
  */
-function splitLines(input) {
+export function splitLines(input) {
   const parts = input.split(' ');
   const lines = parts.reduce(function (prev, current) {
     if (!prev.length) {
@@ -79,10 +79,3 @@ function splitLines(input) {
 
   return lines;
 }
-
-module.exports = {
-  imageShortcode,
-  classNamesFunction,
-  formatDate,
-  splitLines,
-};

lib/transforms/minify.js

@@ -1,6 +1,6 @@
-const htmlmin = require('html-minifier');
+import htmlmin from 'html-minifier';
 
-module.exports = function (content, outputPath) {
+export default function (content, outputPath) {
   if (outputPath.endsWith('.html')) {
     let minified = htmlmin.minify(content, {
       useShortDoctype: true,