Upgrade WebC plugin for Eleventy core v3.0. Changes to use the bundle…

…d with core Bundle Plugin. Updates tests to use ESM (still CJS on plugin code)

.editorconfig

@@ -13,3 +13,6 @@ insert_final_newline = true
 
 [test/*.js]
 trim_trailing_whitespace = false
+
+[test/*.mjs]
+trim_trailing_whitespace = false

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"editor.trimAutoWhitespace": false,
+	"files.trimTrailingWhitespaceInRegexAndStrings": false
+}

eleventyWebcPlugin.js

@@ -1,35 +1,29 @@
-const eleventyBundlePlugin = require("@11ty/eleventy-plugin-bundle");
 const pkg = require("./package.json");
 const templatePlugin = require("./src/eleventyWebcTemplate.js");
 const transformPlugin = require("./src/eleventyWebcTransform.js");
 
-module.exports = function(eleventyConfig, options = {}) {
-	try {
-		eleventyConfig.versionCheck(pkg["11ty"].compatibility);
-	} catch(e) {
-		console.log( `WARN: Eleventy Plugin (${pkg.name}) Compatibility: ${e.message}` );
-	}
+module.exports = async function(eleventyConfig, options = {}) {
+	eleventyConfig.versionCheck(pkg["11ty"].compatibility);
+
+	// Error for removed filters.
+	eleventyConfig.addFilter("webcGetCss", () => {
+		throw new Error("webcGetCss was removed from @11ty/eleventy-plugin-webc. Use the `getBundle('css')` shortcode instead.")
+	});
+
+	// Error for removed filters.
+	eleventyConfig.addFilter("webcGetJs", () => {
+		throw new Error("webcGetJs was removed from @11ty/eleventy-plugin-webc. Use the `getBundle('js')` shortcode instead.")
+	})
 
-	// Deprecated: this lives in @11ty/eleventy-plugin-bundle now
-	let filters = Object.assign({
-		css: "webcGetCss",
-		js: "webcGetJs",
-	}, options.filters);
 
 	options = Object.assign({
 		components: "_components/**/*.webc", // glob for no-import global components
 		scopedHelpers: ["css", "js", "html"],
 		useTransform: false, // global transform
 		transformData: {}, // extra global data for transforms specifically
+		bundlePluginOptions: {},
 	}, options);
 
-	options.bundlePluginOptions = Object.assign({
-		hoistDuplicateBundlesFor: ["css", "js"]
-	}, options.bundlePluginOptions);
-
-	// Deprecated: this lives in @11ty/eleventy-plugin-bundle now
-	options.filters = filters;
-
 	if(options.components) {
 		let components = options.components;
 		if(!Array.isArray(components)) {
@@ -52,12 +46,15 @@ module.exports = function(eleventyConfig, options = {}) {
 		}
 	}
 
-	// TODO Remove this when @11ty/eleventy-plugin-bundle is moved to core.
-	// If the bundle plugin has not been added, we add it here:
-	let bundlePlugin = eleventyConfig.plugins.find(entry => entry.plugin.eleventyPackage === "@11ty/eleventy-plugin-bundle");
-	if(!bundlePlugin) {
-		eleventyConfig.addPlugin(eleventyBundlePlugin, options.bundlePluginOptions);
-	}
+	// v0.13.0 `options.bundlePluginOptions` because Bundle Plugin@2 for Eleventy v3.0.0
+	// v0.13.0 Upstream `toFileDirectory` default changed from "bundle" to ""
+	let htmlBundleOptions = Object.assign({}, options.bundlePluginOptions, {
+		hoist: false, // don’t hoist
+	});
+
+	eleventyConfig.addBundle("html", htmlBundleOptions);
+	eleventyConfig.addBundle("css", options.bundlePluginOptions);
+	eleventyConfig.addBundle("js", options.bundlePluginOptions);
 
 	templatePlugin(eleventyConfig, options);
 

package.json

@@ -14,7 +14,7 @@
 		"node": ">=14.18"
 	},
 	"11ty": {
-		"compatibility": ">=2.0.0"
+		"compatibility": ">=3.0.0"
 	},
 	"funding": {
 		"type": "opencollective",
@@ -34,20 +34,21 @@
 	"ava": {
 		"failFast": true,
 		"files": [
-			"./test/test*.js"
+			"./test/test*.js",
+			"./test/test*.mjs"
 		],
-		"ignoredByWatcher": [
-			"**/_site/**",
-			".cache"
-		]
+		"watchMode": {
+			"ignoreChanges": [
+				"**/_site/**",
+				".cache"
+			]
+		}
 	},
 	"dependencies": {
-		"@11ty/eleventy-plugin-bundle": "^1.0.4",
-		"@11ty/webc": "^0.11.0"
+		"@11ty/webc": "^0.11"
 	},
 	"devDependencies": {
-		"@11ty/eleventy": "^2.0.0",
-		"ava": "^5.2.0",
-		"node-retrieve-globals": "^2.0.8"
+		"@11ty/eleventy": "^3.0.0",
+		"ava": "^6.2.0"
 	}
 }

src/eleventyWebcTemplate.js

@@ -54,20 +54,6 @@ module.exports = function(eleventyConfig, options = {}) {
     templateConfig = cfg;
   });
 
-	// Deprecated (backwards compat only): this lives in @11ty/eleventy-plugin-bundle now
-	if(options.filters.css) {
-		eleventyConfig.addFilter(options.filters.css, (url, bucket) => {
-			return eleventyConfig.javascriptFunctions.getBundle("css", bucket);
-		});
-	}
-
-	// Deprecated (backwards compat only): this lives in @11ty/eleventy-plugin-bundle now
-	if(options.filters.js) {
-		eleventyConfig.addFilter(options.filters.js, (url, bucket) => {
-			return eleventyConfig.javascriptFunctions.getBundle("js", bucket)
-		});
-	}
-
 	eleventyConfig.addExtension("webc", {
 		outputFileExtension: "html",
 
@@ -81,7 +67,8 @@ module.exports = function(eleventyConfig, options = {}) {
 								...this,
 								...data,
 							}, `Check the permalink for ${inputPath}`, "eleventyWebcPermalink:" + inputPath);
-							return evaluatedString;
+
+							return evaluatedString.returns;
 						} catch(e) {
 							debug("Error evaluating dynamic permalink, returning raw string contents instead: %o\n%O", contents, e);
 							return contents;
@@ -105,17 +92,17 @@ module.exports = function(eleventyConfig, options = {}) {
 			}
 
 			// Support both casings (I prefer getCss, but yeah)
-			page.setHelper("getCss", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket), scopedHelpers.has("getCss"));
-			page.setHelper("getCSS", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket), scopedHelpers.has("getCSS"));
+			page.setHelper("getCss", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket, url), scopedHelpers.has("getCss"));
+			page.setHelper("getCSS", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket, url), scopedHelpers.has("getCSS"));
 
-			page.setHelper("getJs", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket), scopedHelpers.has("getJs"));
-			page.setHelper("getJS", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket), scopedHelpers.has("getJS"));
+			page.setHelper("getJs", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket, url), scopedHelpers.has("getJs"));
+			page.setHelper("getJS", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket, url), scopedHelpers.has("getJS"));
 
 			page.setTransform("11ty", async function(content) {
 				let syntax = this["11ty:type"];
 				if(syntax) {
-					const { EleventyRenderPlugin } = await import("@11ty/eleventy");
-					const CompileString = EleventyRenderPlugin.String;
+					const { RenderPlugin } = await import("@11ty/eleventy");
+					const CompileString = RenderPlugin.String;
 
 					let fn = await CompileString(content, syntax, {
 						templateConfig
@@ -129,6 +116,7 @@ module.exports = function(eleventyConfig, options = {}) {
 			return async (data) => {
 				// Add Eleventy JavaScript Functions as WebC helpers
 				// Note that Universal Filters and Shortcodes populate into javascriptFunctions and will be present here
+
 				for(let helperName in this.config.javascriptFunctions) {
 					let helperFunction = addContextToJavaScriptFunction(data, this.config.javascriptFunctions[helperName]);
 					page.setHelper(helperName, helperFunction, scopedHelpers.has(helperName));

test/custom-js-front-matter/eleventy.config.js

@@ -1,23 +1,7 @@
 const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
-const { RetrieveGlobals } = require("node-retrieve-globals");
 
 module.exports = function (eleventyConfig) {
 	eleventyConfig.addPlugin(EleventyWebcPlugin, {
 		components: false,
 	});
-
-	// via https://github.com/11ty/demo-eleventy-js-front-matter
-	eleventyConfig.setFrontMatterParsingOptions({
-		engines: {
-			"javascript": function(frontMatterCode) {
-				let vm = new RetrieveGlobals(frontMatterCode);
-
-				let data = {}; // want to pass in data available in front matter?
-				return vm.getGlobalContext(data, {
-					reuseGlobal: true,
-					dynamicImport: true,
-				});
-			}
-		}
-	});
 }

test/custom-js-front-matter/page.liquid

@@ -1,4 +1,4 @@
----javascript
+---js
 const frontmatterdata = "HELLO FROM FRONT MATTER";
 ---
 <span>{{ frontmatterdata }}</span>

test/render-plugin/eleventy.config.mjs

@@ -0,0 +1,10 @@
+import WebcPlugin from "../../eleventyWebcPlugin.js";
+import { RenderPlugin } from "@11ty/eleventy";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addPlugin(WebcPlugin, {
+		components: "./test/render-plugin/webc/*.webc"
+	});
+
+	eleventyConfig.addPlugin(RenderPlugin);
+}

test/sample-non-webc-layout/_layouts/layout.liquid

@@ -5,13 +5,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<title></title>
-		<style>{{ page.url | getCss }}</style>
-		<script>{{ page.url | getJs }}</script>
+		<style>{% getBundle "css" %}</style>
+		<script>{% getBundle "js" %}</script>
 	</head>
 	<body>
 		{{ content }}
 
-		<style>{{ page.url | getCss: "defer" }}</style>
-		<script>{{ page.url | getJs: "defer" }}</script>
+		<style>{% getBundle "css", "defer" %}</style>
+		<script>{% getBundle "js", "defer" %}</script>
 	</body>
 </html>

test/sample-non-webc-layout/eleventy.config.js

@@ -2,11 +2,7 @@ const EleventyWebcPlugin = require("../../eleventyWebcPlugin.js");
 
 module.exports = function (eleventyConfig) {
 	eleventyConfig.addPlugin(EleventyWebcPlugin, {
-		components: "./test/sample-non-webc-layout/_includes/*.webc",
-		filters: {
-			css: "getCss",
-			js: "getJs",
-		}
+		components: "./test/sample-non-webc-layout/_includes/*.webc"
 	});
 
 	return {
@@ -15,4 +11,4 @@ module.exports = function (eleventyConfig) {
 			layouts: "_layouts",
 		}
 	}
-}
+}

test/script-and-style-buckets/eleventy.config.mjs

@@ -0,0 +1,19 @@
+import { RenderPlugin } from "@11ty/eleventy";
+import WebcPlugin from "../../eleventyWebcPlugin.js";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addPlugin(RenderPlugin);
+	eleventyConfig.addPlugin(WebcPlugin, {
+		components: "test/script-and-style-buckets/_components/**/*.webc"
+	});
+	// eleventyConfig.addPlugin(eleventyConfig => {
+	// 	console.log( eleventyConfig.javascriptFunctions );
+	// })
+
+	return {
+		dir: {
+			includes: "_includes",
+			layouts: "_layouts",
+		}
+	}
+}

test/test-chdir.js → test/test-chdir.mjs

@@ -1,5 +1,5 @@
-const test = require("ava");
-const Eleventy = require("@11ty/eleventy");
+import test from "ava";
+import Eleventy from "@11ty/eleventy";
 
 function normalize(str) {
   return str.trim().replace(/\r\n/g, "\n");