@11ty/eleventy-plugin-webc 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"description": "WebC support for Eleventy adds for Single File Web Components",
 	"main": "eleventyWebcPlugin.js",
 	"scripts": {
@@ -39,7 +39,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^2.0.0-canary.16",
-		"@11ty/webc": "^0.5.2"
+		"@11ty/webc": "^0.5.4"
 	},
 	"devDependencies": {
 		"ava": "^4.3.3"

package/src/eleventyWebcTemplate.js

@@ -26,11 +26,21 @@ module.exports = function(eleventyConfig, options = {}) {
 	let cssManager = new CodeManager();
 	let jsManager = new CodeManager();
 	let incremental = new WebCIncremental();
+	let componentsMap = false; // cache the glob search
+	let componentsMapKey;
 
-	eleventyConfig.on("eleventy.before", () => {
+	eleventyConfig.on("eleventy.before", async () => {
 		cssManager.reset();
 		jsManager.reset();
-		incremental.setComponents(options.components);
+
+		// For ESM in CJS
+		let { WebC } = await import("@11ty/webc");
+		incremental.setWebC(WebC);
+
+		if(options.components) {
+			componentsMap = WebC.getComponentsMap(options.components);
+			componentsMapKey = JSON.stringify(componentsMap);
+		}
 	});
 
 	function getCss(pageUrl, bucket = "default") {
@@ -55,16 +65,6 @@ module.exports = function(eleventyConfig, options = {}) {
 	eleventyConfig.addExtension("webc", {
 		outputFileExtension: "html",
 
-		init: async function() {
-			// For ESM in CJS
-			let { WebC } = await import("@11ty/webc");
-			incremental.setWebC(WebC);
-
-			if(incremental.needsComponents()) {
-				incremental.setComponents(options.components);
-			}
-		},
-
 		isIncrementalMatch: function (incrementalFilePath) {
 			// Eleventy layouts don’t appear directly in the WebC component graph, so we use the `eleventy.layouts` map here
 			if(incremental.isTemplateUsingLayout(this.inputPath, incrementalFilePath)) {
@@ -73,7 +73,8 @@ module.exports = function(eleventyConfig, options = {}) {
 
 			let {page, setup} = incremental.get(this.inputPath);
 			if(page && setup) {
-				if(page.getComponents(setup).includes(incrementalFilePath)) {
+				let components = page.getComponents(setup);
+				if(components.includes(incrementalFilePath)) {
 					return true;
 				}
 			}
@@ -81,9 +82,21 @@ module.exports = function(eleventyConfig, options = {}) {
 			return false;
 		},
 
+		compileOptions: {
+			cache: true,
+			getCacheKey: function(contents, inputPath) {
+				// if global components change, recompile!
+				return contents + inputPath + componentsMapKey;
+			}
+		},
+
 		compile: async function(inputContent, inputPath) {
 			let page = incremental.add(inputContent, inputPath);
 
+			if(componentsMap) {
+				page.defineComponents(componentsMap);
+			}
+
 			// Add Eleventy JavaScript Functions as WebC helpers (Universal Filters also populate into these)
 			for(let helperName in this.config.javascriptFunctions) {
 				page.setHelper(helperName, this.config.javascriptFunctions[helperName]);
@@ -108,7 +121,8 @@ module.exports = function(eleventyConfig, options = {}) {
 			return async (data) => {
 				let setupObject = { data };
 				if(data.webc?.components) {
-					setupObject.components = incremental.getComponentMap(relativePath(data.page.inputPath, data.webc.components));
+					let WebC = incremental.webc;
+					setupObject.components = WebC.getComponentsMap(relativePath(data.page.inputPath, data.webc.components));
 				}
 
 				let setup = await page.setup(setupObject);

package/src/incremental.js

@@ -2,36 +2,12 @@ class WebCIncremental {
 	constructor() {
 		this.pages = {};
 		this.setups = {};
-		this.globalComponentsMap = false;
-		this.components = {};
 	}
 
 	setWebC(cls) {
 		this.webc = cls;
 	}
 
-	needsComponents() {
-		return this.globalComponentsMap === false;
-	}
-
-	setComponents(glob) {
-		let map = this.getComponentMap(glob);
-		if(map) {
-			this.globalComponentsMap = map;
-		}
-	}
-
-	getComponentMap(glob) {
-		if(!this.webc) {
-			return false;
-		}
-
-		let WebC = this.webc;
-		let components = WebC.getComponentsMap(glob);
-		// console.log( glob, Object.keys(components).length );
-		return components;
-	}
-
 	setLayouts(layouts) {
 		this.layouts = layouts;
 	}
@@ -58,10 +34,6 @@ class WebCIncremental {
 
 		page.setContent(inputContent, inputPath);
 
-		if(this.globalComponentsMap) {
-			page.defineComponents(this.globalComponentsMap);
-		}
-
 		this.pages[inputPath] = page;
 
 		return page;
@@ -69,12 +41,11 @@ class WebCIncremental {
 
 	addSetup(inputPath, setup) {
 		this.setups[inputPath] = setup;
-		this.components[inputPath] = setup.serializer.components;
 	}
 
 	get(inputPath) {
 		let setup = this.setups[inputPath];
-		let components = this.components[inputPath];
+		let components = setup.serializer.components;
 
 		if(setup && components) {
 			setup.serializer.restorePreparsedComponents(components);