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

package/eleventyWebcPlugin.js

@@ -27,6 +27,9 @@ module.exports = function(eleventyConfig, options = {}) {
 
 		// Opt-out of Eleventy to process components
 		// Note that Eleventy’s default ignores already have _includes/**
+
+		// This will cause component files outside of _includes to not be watched: https://github.com/11ty/eleventy-plugin-webc/issues/29
+		// Fixed in @11ty/eleventy@2.0.0-canary.18: https://github.com/11ty/eleventy/issues/893
 		eleventyConfig.ignores.add(options.components);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "WebC support for Eleventy adds for Single File Web Components",
 	"main": "eleventyWebcPlugin.js",
 	"scripts": {
@@ -38,8 +38,8 @@
 		]
 	},
 	"dependencies": {
-		"@11ty/eleventy": "^2.0.0-canary.17",
-		"@11ty/webc": "^0.7.1"
+		"@11ty/eleventy": "^2.0.0-canary.18",
+		"@11ty/webc": "^0.8.0"
 	},
 	"devDependencies": {
 		"ava": "^5.0.1"

package/src/bundleAssets.js

@@ -0,0 +1,50 @@
+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/eleventyWebcTemplate.js

@@ -5,6 +5,7 @@ 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
@@ -44,18 +45,21 @@ module.exports = function(eleventyConfig, options = {}) {
 		}
 	});
 
-	function getCss(pageUrl, bucket = "default") {
-		return cssManager.getForPage(pageUrl, bucket);
-	}
-
-	function getJs(pageUrl, bucket = "default") {
-		return jsManager.getForPage(pageUrl, bucket);
-	}
-
+	// Expose bundled CSS code to other template languages
 	if(options.filters.css) {
+		function getCss(pageUrl, bucket = "default") {
+			return cssManager.getForPage(pageUrl, bucket);
+		}
+
 		eleventyConfig.addFilter(options.filters.css, (url, bucket) => getCss(url, bucket));
 	}
+
+	// Expose bundled JS code to other template languages
 	if(options.filters.js) {
+		function getJs(pageUrl, bucket = "default") {
+			return jsManager.getForPage(pageUrl, bucket);
+		}
+
 		eleventyConfig.addFilter(options.filters.js, (url, bucket) => getJs(url, bucket));
 	}
 
@@ -68,7 +72,7 @@ module.exports = function(eleventyConfig, options = {}) {
 
 		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)) {
+			if(incremental.isFileUsingLayout(this.inputPath, incrementalFilePath)) {
 				return true;
 			}
 
@@ -113,11 +117,11 @@ module.exports = function(eleventyConfig, options = {}) {
 			}
 
 			// Support both casings (I prefer getCss, but yeah)
-			page.setHelper("getCss", (url, bucket) => getCss(url, bucket));
-			page.setHelper("getCSS", (url, bucket) => getCss(url, bucket));
+			page.setHelper("getCss", (url, bucket) => BundleAssetsToContent.getAssetKey("css", bucket));
+			page.setHelper("getCSS", (url, bucket) => BundleAssetsToContent.getAssetKey("css", bucket));
 
-			page.setHelper("getJs", (url, bucket) => getJs(url, bucket));
-			page.setHelper("getJS", (url, bucket) => getJs(url, bucket));
+			page.setHelper("getJs", (url, bucket) => BundleAssetsToContent.getAssetKey("js", bucket));
+			page.setHelper("getJS", (url, bucket) => BundleAssetsToContent.getAssetKey("js", bucket));
 
 			page.setTransform("11ty", async function(content) {
 				let syntax = this["11ty:type"];
@@ -131,7 +135,9 @@ module.exports = function(eleventyConfig, options = {}) {
 			});
 
 			return async (data) => {
-				let setupObject = { data };
+				let setupObject = {
+					data,
+				};
 				if(data.webc?.components) {
 					let WebC = incremental.webc;
 					setupObject.components = WebC.getComponentsMap(relativePath(data.page.inputPath, data.webc.components));
@@ -163,7 +169,14 @@ module.exports = function(eleventyConfig, options = {}) {
 					}
 				}
 
-				return html;
+				// 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);
 			};
 		}
 	});

package/src/incremental.js

@@ -12,7 +12,7 @@ class WebCIncremental {
 		this.layouts = layouts;
 	}
 
-	isTemplateUsingLayout(templateFilePath, layoutFilePath) {
+	isFileUsingLayout(templateFilePath, layoutFilePath) {
 		if(this.layouts && this.layouts[layoutFilePath] && this.layouts[layoutFilePath].includes(templateFilePath)) {
 			return true;
 		}
@@ -23,13 +23,7 @@ class WebCIncremental {
 		let WebC = this.webc;
 		let page = new WebC();
 
-		// Explicitly disable bundler mode for layouts
-		if(this.layouts && this.layouts[inputPath]) {
-			page.setBundlerMode(false);
-		} else {
-			page.setBundlerMode(true);
-		}
-
+		page.setBundlerMode(true);
 		page.setContent(inputContent, inputPath);
 
 		this.pages[inputPath] = page;