@11ty/eleventy-plugin-webc 0.10.1 → 0.11.1-alpha.1

package/eleventyWebcPlugin.js

@@ -18,6 +18,7 @@ module.exports = function(eleventyConfig, options = {}) {
 
 	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
 	}, options);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.10.1",
+	"version": "0.11.1-alpha.1",
 	"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.19"
+		"compatibility": ">=2.0.0"
 	},
 	"funding": {
 		"type": "opencollective",
@@ -42,12 +42,12 @@
 		]
 	},
 	"dependencies": {
-		"@11ty/eleventy": "^2.0.0",
 		"@11ty/eleventy-plugin-bundle": "^1.0.4",
-		"@11ty/webc": "^0.10.0"
+		"@11ty/webc": "^0.11.0"
 	},
 	"devDependencies": {
+		"@11ty/eleventy": "^2.0.0",
 		"ava": "^5.2.0",
-		"node-retrieve-globals": "^2.0.6"
+		"node-retrieve-globals": "^2.0.8"
 	}
 }

package/src/eleventyWebcTemplate.js

@@ -17,6 +17,19 @@ function relativePath(inputPath, newGlob) {
 	return templateRelativePath;
 }
 
+function addContextToJavaScriptFunction(data, fn) {
+	let CONTEXT_KEYS = ["eleventy", "page"];
+	return function (...args) {
+		for (let key of CONTEXT_KEYS) {
+			if (data && data[key]) {
+				this[key] = data[key];
+			}
+		}
+
+		return fn.call(this, ...args);
+	};
+}
+
 module.exports = function(eleventyConfig, options = {}) {
 	// TODO remove this when WebC is moved out of plugin-land into core.
 	eleventyConfig.addTemplateFormats("webc");
@@ -25,6 +38,7 @@ module.exports = function(eleventyConfig, options = {}) {
 	let globalComponentManager;
 	let componentsMap = false; // cache the glob search
 	let moduleScript;
+	let scopedHelpers = new Set(options.scopedHelpers);
 
 	eleventyConfig.on("eleventy.before", async () => {
 		// For ESM in CJS
@@ -93,18 +107,12 @@ module.exports = function(eleventyConfig, options = {}) {
 				page.defineComponents(componentsMap);
 			}
 
-			// 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) => this.config.javascriptFunctions.getBundle("css", bucket));
-			page.setHelper("getCSS", (url, bucket) => this.config.javascriptFunctions.getBundle("css", bucket));
+			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("getJs", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket));
-			page.setHelper("getJS", (url, bucket) => this.config.javascriptFunctions.getBundle("js", bucket));
+			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.setTransform("11ty", async function(content) {
 				let syntax = this["11ty:type"];
@@ -119,6 +127,13 @@ module.exports = function(eleventyConfig, options = {}) {
 
 			// Render function
 			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));
+				}
+
 				let setupObject = {
 					data,
 				};

package/src/eleventyWebcTransform.js

@@ -5,6 +5,8 @@ module.exports = function(eleventyConfig, options = {}) {
 		componentsMap = false;
 	});
 
+	let scopedHelpers = new Set(options.scopedHelpers);
+
 	eleventyConfig.addTransform("@11ty/eleventy-plugin-webc", async function(content) {
 		// Skip non-.html output
 		// Skip .webc input
@@ -19,7 +21,11 @@ module.exports = function(eleventyConfig, options = {}) {
 			let page = new WebC();
 
 			if(componentsMap === false && options.components) {
-				componentsMap = WebC.getComponentsMap(options.components); // "./_includes/webc/*.webc"
+				componentsMap = WebC.getComponentsMap(options.components); // "./_components/**/*.webc"
+			}
+
+			for(let helperName in eleventyConfig.javascriptFunctions) {
+				page.setHelper(helperName, eleventyConfig.javascriptFunctions[helperName], scopedHelpers.has(helperName));
 			}
 
 			page.setBundlerMode(false);