@11ty/eleventy-plugin-webc 0.12.0-beta.3 → 0.12.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.12.0-beta.3",
+	"version": "0.12.0-beta.5",
 	"description": "WebC support for Eleventy adds for Single File Web Components",
 	"main": "eleventyWebcPlugin.js",
 	"scripts": {
@@ -32,6 +32,7 @@
 		"url": "git://github.com/11ty/eleventy-plugin-webc.git"
 	},
 	"bugs": "https://github.com/11ty/eleventy-plugin-webc/issues",
+  "homepage": "https://github.com/11ty/eleventy-plugin-webc",
 	"ava": {
 		"failFast": true,
 		"files": [
@@ -46,10 +47,12 @@
 		}
 	},
 	"dependencies": {
-		"@11ty/webc": "^0.11"
+		"@11ty/eleventy-plugin-bundle": "^3.0.7",
+		"@11ty/webc": "0.12.0-beta.1",
+		"import-module-string": "^2.0.3"
 	},
 	"devDependencies": {
-		"@11ty/eleventy": "^3.0.0",
-		"ava": "^6.2.0"
+		"@11ty/eleventy": "^3.1.2",
+		"ava": "^6.4.1"
 	}
 }

package/src/dynamicScript.js

@@ -0,0 +1,50 @@
+// TODO move this upstream into import-module-string
+// Code cribbed from WebC’s attributeSerializer.js
+async function evaluateInlineCode(codeString, options = {}) {
+	let { filePath, context, data } = Object.assign({ data: {} }, options);
+
+	let { parseCode, walkCode, importFromString } = await import("import-module-string");
+	let varsInUse = [];
+	try {
+		let {used} = walkCode(parseCode(codeString));
+		varsInUse = used;
+	} catch(e) {
+		let errorString = `Error parsing inline code: \`${codeString}\``;
+
+		// Issue #45: very defensive error message here. We only throw this error when an error is thrown during compilation.
+		if(e.message.startsWith("Unexpected token ") && codeString.match(/\bclass\b/) && !codeString.match(/\bclass\b\s*\{/)) {
+			throw new Error(`${errorString ? `${errorString} ` : ""}\`class\` is a reserved word in JavaScript. Change \`class\` to \`this.class\` instead!`);
+		}
+
+		throw new Error(`${errorString}\nOriginal error message: ${e.message}`);
+	}
+
+	let argString = "";
+	if(!Array.isArray(varsInUse)) {
+		varsInUse = Array.from(varsInUse)
+	}
+	if(varsInUse.length > 0) {
+		argString = `{ ${varsInUse.join(", ")} }`;
+	}
+
+	let code = `export default function(${argString}) { return ${codeString} };`;
+
+	let evaluated = await importFromString(code, {
+		filePath,
+		implicitExports: false,
+	}).then(mod => {
+		let fn = mod.default;
+		if(context) {
+			return fn.call(context, data);
+		}
+		return fn(data);
+	}).catch(e => {
+		throw new Error(`Error evaluating inline code: \`${codeString}\``, { cause: e });
+	});
+
+	return evaluated;
+}
+
+module.exports =  {
+	evaluateInlineCode
+};

package/src/eleventyWebcTemplate.js

@@ -1,6 +1,8 @@
-const path = require("path");
+const path = require("node:path");
 const debug = require("debug")("Eleventy:WebC");
 
+const { evaluateInlineCode } = require("./dynamicScript.js");
+
 function relativePath(inputPath, newGlob) {
 	// project root
 	if(newGlob.startsWith("~/")) {
@@ -34,13 +36,11 @@ module.exports = function(eleventyConfig, options = {}) {
 	let _WebC;
 	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
-		let { WebC, ModuleScript, ComponentManager } = await import("@11ty/webc");
-		moduleScript = ModuleScript;
+		// Temporary workaround for ESM in CJS
+		let { WebC, ComponentManager } = await import("@11ty/webc");
 		_WebC = WebC;
 		globalComponentManager = new ComponentManager();
 
@@ -61,18 +61,20 @@ module.exports = function(eleventyConfig, options = {}) {
 			permalink: function(contents, inputPath) {
 				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}`, "eleventyWebcPermalink:" + inputPath);
-
-							return evaluatedString.returns;
-						} catch(e) {
+						let combinedContextData = {
+							...this,
+							...data,
+						};
+
+						// Hard to know if this is JavaScript code or just a raw string value.
+						return evaluateInlineCode(contents, {
+							filePath: inputPath,
+							context: combinedContextData,
+							data: combinedContextData,
+						}).catch(e => {
 							debug("Error evaluating dynamic permalink, returning raw string contents instead: %o\n%O", contents, e);
 							return contents;
-						}
+						});
 					}
 				}