Convert to ESM

README.md

@@ -26,7 +26,7 @@ To create a bundle type, use `eleventyConfig.addBundle` in your Eleventy configu
 
 ```js
 // .eleventy.js
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css");
 };
 ```
@@ -39,7 +39,7 @@ This does two things:
 ### Full options list
 
 ```js
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css", {
 		// (Optional) Folder (relative to output directory) files will write to
 		toFileDirectory: "bundle",
@@ -161,7 +161,7 @@ A `default` bucket is implied:
 
 ```js
 // .eleventy.js
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css");
 };
 ```
@@ -202,7 +202,7 @@ Here an `svg` is bundle is created.
 
 ```js
 // .eleventy.js
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("svg");
 };
 ```
@@ -229,7 +229,7 @@ And now you can use `icon-close` in as many SVG instances as you’d like (witho
 
 ```js
 // .eleventy.js
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("html");
 };
 ```
@@ -296,7 +296,7 @@ You can wire up your own async-friendly callbacks to transform the bundle output
 const postcss = require("postcss");
 const postcssNested = require("postcss-nested");
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css", {
 		transforms: [
 			async function(content) {

eleventy.bundle.js

@@ -1,8 +1,11 @@
+import { createRequire } from "node:module";
+import bundleManagersPlugin from "./src/eleventy.bundleManagers.js";
+import shortcodesPlugin from "./src/eleventy.shortcodes.js";
+import debugUtil from "debug";
+
+const require = createRequire(import.meta.url);
+const debug = debugUtil("Eleventy:Bundle");
 const pkg = require("./package.json");
-const bundleManagersPlugin = require("./eleventy.bundleManagers.js");
-const shortcodesPlugin = require("./eleventy.shortcodes.js");
-const OutOfOrderRender = require("./src/OutOfOrderRender.js");
-const debug = require("debug")("Eleventy:Bundle");
 
 function normalizeOptions(options = {}) {
 	options = Object.assign({
@@ -34,6 +37,7 @@ function eleventyBundlePlugin(eleventyConfig, pluginOptions = {}) {
 	// should this be unique too?
 	shortcodesPlugin(eleventyConfig, pluginOptions);
 
+
 	if(Array.isArray(pluginOptions.bundles)) {
 		debug("Adding bundles via `addPlugin`: %o", pluginOptions.bundles)
 		pluginOptions.bundles.forEach(name => {
@@ -56,6 +60,5 @@ Object.defineProperty(eleventyBundlePlugin, "eleventyPackage", {
 	value: pkg.name
 });
 
-module.exports = eleventyBundlePlugin;
-module.exports.normalizeOptions = normalizeOptions;
-module.exports.OutOfOrderRender = OutOfOrderRender;
+export default eleventyBundlePlugin;
+export { normalizeOptions };

package.json

@@ -3,6 +3,7 @@
 	"version": "2.0.2",
 	"description": "Little bundles of code, little bundles of joy.",
 	"main": "eleventy.bundle.js",
+	"type": "module",
 	"scripts": {
 		"sample": "DEBUG=Eleventy:Bundle npx @11ty/eleventy --config=sample/sample-config.js --input=sample --serve",
 		"test": "npx ava"
@@ -48,7 +49,7 @@
 		]
 	},
 	"devDependencies": {
-		"@11ty/eleventy": "3.0.0-alpha.14",
+		"@11ty/eleventy": "3.0.0-alpha.19",
 		"ava": "^5.3.1",
 		"postcss": "^8.4.31",
 		"postcss-nested": "^6.0.1",

sample/sample-config.js

@@ -1,6 +1,6 @@
-const bundlePlugin = require("../");
+import bundlePlugin from "../eleventy.bundle.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	// This call is what Eleventy will do in the default config in 3.0.0-alpha.10
 	eleventyConfig.addPlugin(bundlePlugin, {
 		bundles: false,

src/BundleFileOutput.js

@@ -1,13 +1,14 @@
-const fs = require("fs");
-const path = require("path");
-const { createHash } = require("crypto");
+import fs from "node:fs";
+import path from "node:path";
+import { createHash } from "node:crypto";
+import debugUtil from "debug";
+
+const debug = debugUtil("Eleventy:Bundle");
 
 const hashCache = {};
 const directoryExistsCache = {};
 const writingCache = new Set();
 
-const debug = require("debug")("Eleventy:Bundle");
-
 class BundleFileOutput {
 	constructor(outputDirectory, bundleDirectory) {
 		this.outputDirectory = outputDirectory;
@@ -72,4 +73,4 @@ class BundleFileOutput {
 	}
 }
 
-module.exports = BundleFileOutput;
+export { BundleFileOutput };

src/CodeManager.js

@@ -1,6 +1,7 @@
-const BundleFileOutput = require("./BundleFileOutput");
-const debug = require("debug")("Eleventy:Bundle");
+import { BundleFileOutput } from "./BundleFileOutput.js";
+import debugUtil from "debug";
 
+const debug = debugUtil("Eleventy:Bundle");
 const DEBUG_LOG_TRUNCATION_SIZE = 200;
 
 class CodeManager {
@@ -205,4 +206,4 @@ class CodeManager {
 	}
 }
 
-module.exports = CodeManager;
+export { CodeManager };

src/OutOfOrderRender.js

@@ -1,4 +1,6 @@
-const debug = require("debug")("Eleventy:Bundle");
+import debugUtil from "debug";
+
+const debug = debugUtil("Eleventy:Bundle");
 
 /* This class defers any `bundleGet` calls to a post-build transform step,
  * to allow `getBundle` to be called before all of the `css` additions have been processed
@@ -148,4 +150,4 @@ class OutOfOrderRender {
 	}
 }
 
-module.exports = OutOfOrderRender;
+export { OutOfOrderRender };

eleventy.bundleManagers.js → src/eleventy.bundleManagers.js

@@ -1,9 +1,12 @@
+import { createRequire } from "node:module";
+import debugUtil from "debug";
+import { CodeManager } from "./CodeManager.js";
 
-const pkg = require("./package.json");
-const CodeManager = require("./src/CodeManager.js");
-const debug = require("debug")("Eleventy:Bundle");
+const require = createRequire(import.meta.url);
+const debug = debugUtil("Eleventy:Bundle");
+const pkg = require("../package.json");
 
-module.exports = function(eleventyConfig, pluginOptions = {}) {
+function eleventyBundleManagers(eleventyConfig, pluginOptions = {}) {
 	if("getBundleManagers" in eleventyConfig || "addBundle" in eleventyConfig) {
 		throw new Error("Duplicate plugin calls for " + pkg.name);
 	}
@@ -67,3 +70,5 @@ module.exports = function(eleventyConfig, pluginOptions = {}) {
 		}
 	});
 };
+
+export default eleventyBundleManagers;

eleventy.shortcodes.js → src/eleventy.shortcodes.js

@@ -1,7 +1,9 @@
-const OutOfOrderRender = require("./src/OutOfOrderRender.js");
-const debug = require("debug")("Eleventy:Bundle");
+import { OutOfOrderRender } from "./OutOfOrderRender.js";
+import debugUtil from "debug";
 
-module.exports = function(eleventyConfig, pluginOptions = {}) {
+const debug = debugUtil("Eleventy:Bundle");
+
+function eleventyBundleShortcodes(eleventyConfig, pluginOptions = {}) {
 	let managers = eleventyConfig.getBundleManagers();
 	let writeToFileSystem = true;
 	let pagesUsingBundles = {};
@@ -77,3 +79,5 @@ module.exports = function(eleventyConfig, pluginOptions = {}) {
 		return render.replaceAll(this.page);
 	});
 };
+
+export default eleventyBundleShortcodes;

test/stubs/export-key-obj/eleventy.config.js

@@ -1,4 +1,4 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css");
 	eleventyConfig.addBundle("js");
 };

test/stubs/export-key-str-rename/eleventy.config.js

@@ -1,4 +1,4 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css", { bundleExportKey: "css" });
 	eleventyConfig.addBundle("js", { bundleExportKey: "js" });
 };

test/stubs/export-key-str/eleventy.config.js

@@ -1,4 +1,4 @@
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addBundle("css");
 	eleventyConfig.addBundle("js");
 };

test/stubs/output-default-multiple-times/eleventy.config.js

@@ -1,6 +1,6 @@
-const bundlePlugin = require("../../../");
+import bundlePlugin from "../../../eleventy.bundle.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(bundlePlugin, {
 		hoistDuplicateBundlesFor: ["css", "js"],
 	});

test/stubs/output-same-bucket-multiple-times/eleventy.config.js

@@ -1,6 +1,6 @@
-const bundlePlugin = require("../../../");
+import bundlePlugin from "../../../eleventy.bundle.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(bundlePlugin, {
 		hoistDuplicateBundlesFor: ["css", "js"],
 	});

test/stubs/serverless-stubs/functions/test1/eleventy.config.js

@@ -1,5 +1,5 @@
-const bundlePlugin = require("../../../../../");
+import bundlePlugin from "../../../../../eleventy.bundle.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(bundlePlugin);
 };

test/stubs/to-file-duplicates/eleventy.config.js

@@ -1,6 +1,6 @@
-const bundlePlugin = require("../../../");
+import bundlePlugin from "../../../eleventy.bundle.js";
 
-module.exports = function(eleventyConfig) {
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(bundlePlugin, {
 		hoistDuplicateBundlesFor: ["css", "js"],
 	});

test/stubs/use-transforms-on-type/eleventy.config.js

@@ -1,8 +1,9 @@
-const bundlePlugin = require("../../../");
-const postcss = require('postcss');
-const postcssNested = require('postcss-nested')
+import bundlePlugin from "../../../eleventy.bundle.js";
+import postcss from 'postcss';
+import postcssNested from 'postcss-nested';
 
-module.exports = function(eleventyConfig) {
+
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(bundlePlugin, {
 		transforms: [async function(content) {
 			return new Promise(resolve => {

test/stubs/use-transforms/eleventy.config.js

@@ -1,8 +1,9 @@
-const bundlePlugin = require("../../../");
-const postcss = require('postcss');
-const postcssNested = require('postcss-nested')
+import bundlePlugin from "../../../eleventy.bundle.js";
+import postcss from 'postcss';
+import postcssNested from 'postcss-nested';
 
-module.exports = function(eleventyConfig) {
+
+export default function(eleventyConfig) {
 	eleventyConfig.addPlugin(bundlePlugin, {
 		transforms: [async function(content) {
 			return new Promise(resolve => {

test/test.mjs → test/test.js

@@ -52,23 +52,6 @@ test("CSS (Markdown)", async t => {
 * { color: orange; }</style>`)
 });
 
-test.skip("CSS (Handlebars)", async t => {
-	let elev = new Eleventy("test/stubs/handlebars/", "_site", { configPath: "eleventy.bundle.js" });
-	let results = await elev.toJSON();
-	t.deepEqual(normalize(results[0].content), `<style>* { color: blue; }
-* { color: red; }
-* { color: orange; }</style>
-
-<style>* { color: blue; }
-* { color: red; }
-* { color: orange; }</style>
-
-
-<style>* { color: blue; }
-* { color: red; }
-* { color: orange; }</style>`)
-});
-
 test("SVG", async t => {
 	let elev = new Eleventy("test/stubs/nunjucks-svg/", "_site", { configPath: "eleventy.bundle.js" });
 	let results = await elev.toJSON();