@11ty/eleventy-plugin-webc 0.8.0 → 0.9.0

package/eleventyWebcPlugin.js

@@ -1,3 +1,4 @@
+const eleventyBundlePlugin = require("@11ty/eleventy-plugin-bundle");
 const pkg = require("./package.json");
 const templatePlugin = require("./src/eleventyWebcTemplate.js");
 const transformPlugin = require("./src/eleventyWebcTransform.js");
@@ -9,6 +10,7 @@ module.exports = function(eleventyConfig, options = {}) {
 		console.log( `WARN: Eleventy Plugin (${pkg.name}) Compatibility: ${e.message}` );
 	}
 
+	// Deprecated: this lives in @11ty/eleventy-plugin-bundle now
 	let filters = Object.assign({
 		css: "webcGetCss",
 		js: "webcGetJs",
@@ -20,6 +22,7 @@ module.exports = function(eleventyConfig, options = {}) {
 		transformData: {}, // extra global data for transforms specifically
 	}, options);
 
+	// Deprecated: this lives in @11ty/eleventy-plugin-bundle now
 	options.filters = filters;
 
 	if(options.components) {
@@ -33,6 +36,13 @@ module.exports = function(eleventyConfig, options = {}) {
 		eleventyConfig.ignores.add(options.components);
 	}
 
+	// 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);
+	}
+
 	templatePlugin(eleventyConfig, options);
 
 	if(options.useTransform) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "WebC support for Eleventy adds for Single File Web Components",
 	"main": "eleventyWebcPlugin.js",
 	"scripts": {
@@ -14,7 +14,7 @@
 		"node": ">=14.18"
 	},
 	"11ty": {
-		"compatibility": ">=2.0.0-canary.17"
+		"compatibility": ">=2.0.0-canary.19"
 	},
 	"funding": {
 		"type": "opencollective",
@@ -34,14 +34,20 @@
 	"ava": {
 		"failFast": true,
 		"files": [
-			"./test/*.js"
+			"./test/test*.js"
+		],
+		"ignoredByWatcher": [
+			"**/_site/**",
+			".cache"
 		]
 	},
 	"dependencies": {
-		"@11ty/eleventy": "^2.0.0-canary.18",
-		"@11ty/webc": "^0.8.0"
+		"@11ty/eleventy": "^2.0.0",
+		"@11ty/eleventy-plugin-bundle": "^1.0.1",
+		"@11ty/webc": "^0.9.0"
 	},
 	"devDependencies": {
-		"ava": "^5.0.1"
+		"ava": "^5.1.0",
+		"node-retrieve-globals": "^2.0.4"
 	}
 }

package/src/eleventyWebcTemplate.js

@@ -1,12 +1,10 @@
 const path = require("path");
+const debug = require("debug")("Eleventy:WebC");
+
 
 const { EleventyRenderPlugin } = require("@11ty/eleventy");
 const CompileString = EleventyRenderPlugin.String;
 
-const CodeManager = require("./codeManager.js");
-const WebCIncremental = require("./incremental.js");
-const BundleAssetsToContent = require("./bundleAssets.js");
-
 function relativePath(inputPath, newGlob) {
 	// project root
 	if(newGlob.startsWith("~/")) {
@@ -21,107 +19,85 @@ function relativePath(inputPath, newGlob) {
 }
 
 module.exports = function(eleventyConfig, options = {}) {
+	// TODO remove this when WebC is moved out of plugin-land into core.
 	eleventyConfig.addTemplateFormats("webc");
 
-	let cssManager = new CodeManager();
-	let jsManager = new CodeManager();
-	let incremental = new WebCIncremental();
+	let _WebC;
 	let componentsMap = false; // cache the glob search
-	let componentsMapKey;
 	let moduleScript;
 
 	eleventyConfig.on("eleventy.before", async () => {
-		cssManager.reset();
-		jsManager.reset();
-
 		// For ESM in CJS
 		let { WebC, ModuleScript } = await import("@11ty/webc");
 		moduleScript = ModuleScript;
-		incremental.setWebC(WebC);
+		_WebC = WebC;
 
 		if(options.components) {
 			componentsMap = WebC.getComponentsMap(options.components);
-			componentsMapKey = JSON.stringify(componentsMap);
 		}
 	});
 
-	// Expose bundled CSS code to other template languages
+	// Deprecated (backwards compat only): this lives in @11ty/eleventy-plugin-bundle now
 	if(options.filters.css) {
-		function getCss(pageUrl, bucket = "default") {
-			return cssManager.getForPage(pageUrl, bucket);
-		}
-
-		eleventyConfig.addFilter(options.filters.css, (url, bucket) => getCss(url, bucket));
+		eleventyConfig.addFilter(options.filters.css, (url, bucket) => {
+			return eleventyConfig.javascriptFunctions.getBundle("css", bucket);
+		});
 	}
 
-	// Expose bundled JS code to other template languages
+	// Deprecated (backwards compat only): this lives in @11ty/eleventy-plugin-bundle now
 	if(options.filters.js) {
-		function getJs(pageUrl, bucket = "default") {
-			return jsManager.getForPage(pageUrl, bucket);
-		}
-
-		eleventyConfig.addFilter(options.filters.js, (url, bucket) => getJs(url, bucket));
+		eleventyConfig.addFilter(options.filters.js, (url, bucket) => {
+			return eleventyConfig.javascriptFunctions.getBundle("js", bucket)
+		});
 	}
 
-	eleventyConfig.on("eleventy.layouts", layouts => {
-		incremental.setLayouts(layouts);
-	});
-
 	eleventyConfig.addExtension("webc", {
 		outputFileExtension: "html",
 
-		isIncrementalMatch: function (incrementalFilePath) {
-			// Eleventy layouts don’t appear directly in the WebC component graph, so we use the `eleventy.layouts` map here
-			if(incremental.isFileUsingLayout(this.inputPath, incrementalFilePath)) {
-				return true;
-			}
-
-			let {page, setup} = incremental.get(this.inputPath);
-
-			if(page && setup) {
-				let components = page.getComponents(setup);
-				if(components.includes(incrementalFilePath)) {
-					return true;
-				}
-			}
-
-			return false;
-		},
-
 		compileOptions: {
-			cache: true,
-			getCacheKey: function(contents, inputPath) {
-				// if global components change, recompile!
-				return contents + inputPath + componentsMapKey;
-			},
 			permalink: function(contents, inputPath) {
-				return (data) => {
-					return moduleScript.evaluateScript("permalink", contents, {
-						...this,
-						...data,
-					});
+				if(contents && typeof contents === "string") {
+					return async (data) => {
+						try {
+							// Hard to know if this is JavaScript code or just a raw string value.
+							let evaluatedString = await moduleScript.evaluateScript(contents, {
+								...this,
+								...data,
+							}, `Check the permalink for ${inputPath}`);
+							return evaluatedString;
+						} catch(e) {
+							debug("Error evaluating dynamic permalink, returning raw string contents instead: %o\n%O", contents, e);
+							return contents;
+						}
+					}
 				}
+
+				return contents;
 			}
 		},
 
 		compile: async function(inputContent, inputPath) {
-			let page = incremental.add(inputContent, inputPath);
+			let page = new _WebC();
+
+			page.setBundlerMode(true);
+			page.setContent(inputContent, inputPath);
 
 			if(componentsMap) {
 				page.defineComponents(componentsMap);
 			}
 
-			// Add Eleventy JavaScript Functions as WebC helpers (Universal Filters also populate into these)
+			// 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) {
 				page.setHelper(helperName, this.config.javascriptFunctions[helperName]);
 			}
 
 			// Support both casings (I prefer getCss, but yeah)
-			page.setHelper("getCss", (url, bucket) => BundleAssetsToContent.getAssetKey("css", bucket));
-			page.setHelper("getCSS", (url, bucket) => BundleAssetsToContent.getAssetKey("css", bucket));
+			page.setHelper("getCss", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket));
+			page.setHelper("getCSS", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket));
 
-			page.setHelper("getJs", (url, bucket) => BundleAssetsToContent.getAssetKey("js", bucket));
-			page.setHelper("getJS", (url, bucket) => BundleAssetsToContent.getAssetKey("js", bucket));
+			page.setHelper("getJs", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket));
+			page.setHelper("getJS", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket));
 
 			page.setTransform("11ty", async function(content) {
 				let syntax = this["11ty:type"];
@@ -138,45 +114,39 @@ module.exports = function(eleventyConfig, options = {}) {
 				let setupObject = {
 					data,
 				};
+
 				if(data.webc?.components) {
-					let WebC = incremental.webc;
-					setupObject.components = WebC.getComponentsMap(relativePath(data.page.inputPath, data.webc.components));
+					setupObject.components = _WebC.getComponentsMap(relativePath(data.page.inputPath, data.webc.components));
 				}
 
 				if(options.before && typeof options.before === "function") {
 					await options.before(page);
 				}
 
-				let setup = await page.setup(setupObject);
-				incremental.addSetup(inputPath, setup);
+				let { html, css, js, buckets, components } = await page.compile(setupObject);
 
-				let { ast, serializer } = setup;
-				let { html, css, js, buckets } = await serializer.compile(ast);
+				// 2.0.0-canary.19+
+				this.addDependencies(inputPath, components);
 
-				cssManager.addToPage(data.page.url, css, "default");
+				// Add CSS to bundle
+				this.config.javascriptFunctions.css(css, "default", data.page.url);
 
 				if(buckets.css) {
 					for(let bucket in buckets.css) {
-						cssManager.addToPage(data.page.url, buckets.css[bucket], bucket);
+						this.config.javascriptFunctions.css(css, buckets.css[bucket], data.page.url);
 					}
 				}
 
-				jsManager.addToPage(data.page.url, js, "default");
+				// Add JS to bundle
+				this.config.javascriptFunctions.js(js, "default", data.page.url);
 
 				if(buckets.js) {
 					for(let bucket in buckets.js) {
-						jsManager.addToPage(data.page.url, buckets.js[bucket], bucket);
+						this.config.javascriptFunctions.js(js, buckets.js[bucket], data.page.url);
 					}
 				}
 
-				// Always do a two pass render for assets to catch any CSS/JS that were compiled *in* the same template.
-				// https://github.com/11ty/eleventy-plugin-webc/issues/33
-				// This unlocks use of bundled asset code anywhere in the WebC component tree (not just Eleventy Layouts)
-				let bundler = new BundleAssetsToContent(html);
-				bundler.setAssetManager("css", cssManager);
-				bundler.setAssetManager("js", jsManager);
-
-				return bundler.replaceAll(data.page.url);
+				return html;
 			};
 		}
 	});

package/src/eleventyWebcTransform.js

@@ -22,6 +22,7 @@ module.exports = function(eleventyConfig, options = {}) {
 				componentsMap = WebC.getComponentsMap(options.components); // "./_includes/webc/*.webc"
 			}
 
+			page.setBundlerMode(false);
 			page.defineComponents(componentsMap);
 			page.setContent(content, this.outputPath);
 

package/src/bundleAssets.js

@@ -1,50 +0,0 @@
-class BundleAssetsToContent {
-	static SPLIT_REGEX = /(\/\*__WebC:[^:]*:[^:]*:WebC__\*\/)/;
-	static SEPARATOR = ":";
-
-	constructor(content) {
-		this.content = content;
-		this.managers = {};
-	}
-
-	static getAssetKey(name, bucket) {
-		return `/*__WebC:${name}:${bucket || "default"}:WebC__*/`
-	}
-
-	setAssetManager(name, assetManager) {
-		this.managers[name] = assetManager;
-	}
-
-	normalizeMatch(match) {
-		if(match.startsWith("/*__WebC:")) {
-			let [prefix, name, bucket, suffix] = match.split(BundleAssetsToContent.SEPARATOR);
-			return { name, bucket };
-		}
-		return match;
-	}
-
-	findAll() {
-		let matches = this.content.split(BundleAssetsToContent.SPLIT_REGEX);
-		let ret = [];
-		for(let match of matches) {
-			ret.push(this.normalizeMatch(match));
-		}
-		return ret;
-	}
-
-	replaceAll(url) {
-		let matches = this.findAll();
-		return matches.map(match => {
-			if(typeof match === "string") {
-				return match;
-			}
-			let {name, bucket} = match;
-			if(!this.managers[name]) {
-				throw new Error(`No asset manager found for ${name}. Known keys: ${Object.keys(this.managers)}`);
-			}
-			return this.managers[name].getForPage(url, bucket);
-		}).join("");
-	}
-}
-
-module.exports = BundleAssetsToContent;

package/src/codeManager.js

@@ -1,33 +0,0 @@
-class Manager {
-	constructor() {
-		this.reset();
-	}
-
-	reset() {
-		this.pages = {};
-	}
-
-	addToPage(pageUrl, code = [], bucket = "default") {
-		if(code.length === 0) {
-			return;
-		}
-
-		if(!this.pages[pageUrl]) {
-			this.pages[pageUrl] = {};
-		}
-		if(!this.pages[pageUrl][bucket]) {
-			this.pages[pageUrl][bucket] = new Set();
-		}
-
-		this.pages[pageUrl][bucket].add(code.join("\n"));
-	}
-
-	getForPage(pageUrl, bucket = "default") {
-		if(this.pages[pageUrl]) {
-			return Array.from(this.pages[pageUrl][bucket] || []).join("\n");
-		}
-		return "";
-	}
-}
-
-module.exports = Manager;

package/src/incremental.js

@@ -1,54 +0,0 @@
-class WebCIncremental {
-	constructor() {
-		this.pages = {};
-		this.setups = {};
-	}
-
-	setWebC(cls) {
-		this.webc = cls;
-	}
-
-	setLayouts(layouts) {
-		this.layouts = layouts;
-	}
-
-	isFileUsingLayout(templateFilePath, layoutFilePath) {
-		if(this.layouts && this.layouts[layoutFilePath] && this.layouts[layoutFilePath].includes(templateFilePath)) {
-			return true;
-		}
-		return false;
-	}
-
-	add(inputContent, inputPath) {
-		let WebC = this.webc;
-		let page = new WebC();
-
-		page.setBundlerMode(true);
-		page.setContent(inputContent, inputPath);
-
-		this.pages[inputPath] = page;
-
-		return page;
-	}
-
-	addSetup(inputPath, setup) {
-		this.setups[inputPath] = setup;
-	}
-
-	get(inputPath) {
-		let setup = this.setups[inputPath];
-		let components = setup.serializer.components;
-
-		if(setup && components) {
-			setup.serializer.restorePreparsedComponents(components);
-		}
-
-		return {
-			page: this.pages[inputPath],
-			setup,
-			components,
-		}
-	}
-}
-
-module.exports = WebCIncremental;