@11ty/eleventy-plugin-webc 0.12.0-beta.6 → 0.12.0-beta.8

package/README.md

@@ -34,3 +34,107 @@ This documentation has [moved to 11ty.dev](https://www.11ty.dev/docs/languages/w
 * Bundler mode: Easily roll up the CSS and JS in-use by WebC components on a page for page-specific bundles. Dirt-simple critical CSS/JS to only load the code you need.
 * For more complex templating needs, render any existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside of WebC.
 * Works great with [is-land](https://www.11ty.dev/docs/plugins/partial-hydration/) for web component hydration.
+
+## Installation
+
+```sh
+npm install @11ty/eleventy-plugin-webc
+```
+
+* `0.12.x` requires Eleventy `3.0.0` or newer and Node.js 22.18 or newer
+
+## Usage
+
+### Add to Configuration File
+
+Usually `eleventy.config.js`:
+
+```js
+import eleventyWebc from "@11ty/eleventy-plugin-webc";
+
+export default function(eleventyConfig) {
+  eleventyConfig.addPlugin(eleventyWebc);
+}
+```
+
+#### Output component CSS and JS
+
+In a WebC layout:
+
+```html
+<head>
+  <style @raw="getBundle('css')" webc:keep></style>
+  <script type="module" @raw="getBundle('js')" webc:keep></script>
+</head>
+```
+
+In a Nunjucks or Liquid layout:
+
+```html
+<head>
+  <style>{% getBundle "css" %}</style>
+  <script type="module">{% getBundle "js" %}</script>
+</head>
+```
+
+#### Customize with Options
+
+```js
+import eleventyWebc from "@11ty/eleventy-plugin-webc";
+
+export default function(eleventyConfig) {
+  eleventyConfig.addPlugin(eleventyWebc, {
+    // Glob (or array of globs) of no-import global components, `npm:` prefix for packages
+    components: "_components/**/*.webc",
+
+    // Helpers only available under `webc.helpers` (e.g. `webc.helpers.css()`) instead of top-level
+    scopedHelpers: ["css", "js", "html"],
+
+    // Process WebC in all non-WebC `.html` output
+    useTransform: false,
+
+    // Extra global data for `useTransform`
+    transformData: {},
+
+    // Passed to the Bundle plugin, see https://www.11ty.dev/docs/plugins/bundle/
+    bundlePluginOptions: {
+      hoistDuplicateBundlesFor: ["css", "js"],
+    },
+
+    // Customize the WebC instance before each render (may be async)
+    before(webc) {},
+  });
+}
+```
+
+### Example
+
+`_components/my-greeting.webc`:
+
+```html
+<p>Hello, <span @text="name"></span>!</p>
+
+<style webc:scoped>
+  :host { color: rebeccapurple; }
+</style>
+```
+
+`index.webc`:
+
+```html
+---
+layout: base.webc
+title: Possums
+---
+<h1 @text="title"></h1>
+<my-greeting name="Possum"></my-greeting>
+```
+
+To use components for only one page, add `webc.components` to its front matter (relative to the template, or the project root with `~/`):
+
+```yaml
+---
+webc:
+  components: ./_page-components/*.webc
+---
+```

package/eleventyWebcPlugin.js

@@ -1,8 +1,11 @@
-const pkg = require("./package.json");
-const templatePlugin = require("./src/eleventyWebcTemplate.js");
-const transformPlugin = require("./src/eleventyWebcTransform.js");
+import fs from "node:fs";
 
-module.exports = function(eleventyConfig, options = {}) {
+import templatePlugin from "./src/eleventyWebcTemplate.js";
+import transformPlugin from "./src/eleventyWebcTransform.js";
+
+const pkg = JSON.parse(fs.readFileSync(new URL("./package.json", import.meta.url), "utf8"));
+
+export default function(eleventyConfig, options = {}) {
 	eleventyConfig.versionCheck(pkg["11ty"].compatibility);
 
 	// Error for removed filters.

package/package.json

@@ -1,21 +1,22 @@
 {
 	"name": "@11ty/eleventy-plugin-webc",
-	"version": "0.12.0-beta.6",
+	"version": "0.12.0-beta.8",
 	"description": "WebC support for Eleventy adds for Single File Web Components",
 	"main": "eleventyWebcPlugin.js",
-	"scripts": {
-		"test": "npx ava --no-worker-threads"
+	"exports": {
+		".": "./eleventyWebcPlugin.js"
 	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"license": "MIT",
+	"type": "module",
 	"engines": {
-		"node": ">= 18"
+		"node": ">=22.18"
 	},
-	"11ty": {
-		"compatibility": ">=3.0.0"
+	"publishConfig": {
+		"access": "public"
 	},
+	"files": [
+		"eleventyWebcPlugin.js",
+		"src/"
+	],
 	"funding": {
 		"type": "opencollective",
 		"url": "https://opencollective.com/11ty"
@@ -26,33 +27,27 @@
 		"web-components",
 		"custom-elements"
 	],
-	"author": "Zach Leatherman <zachleatherman@gmail.com> (https://zachleat.com/)",
+	"author": {
+		"name": "Zach Leatherman",
+		"url": "https://zachleat.com/"
+	},
+	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"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": [
-			"./test/test*.js",
-			"./test/test*.mjs"
-		],
-		"watchMode": {
-			"ignoreChanges": [
-				"**/_site/**",
-				".cache"
-			]
-		}
+		"url": "git+https://github.com/11ty/plugin-template-languages.git",
+		"directory": "webc"
 	},
-	"dependencies": {
-		"@11ty/eleventy-plugin-bundle": "^3.0.7",
-		"@11ty/webc": "^0.12.0-beta.1",
-		"import-module-string": "^2.0.3"
+	"bugs": "https://github.com/11ty/plugin-template-languages/issues",
+	"homepage": "https://www.11ty.dev/docs/languages/webc/",
+	"scripts": {
+		"test": "echo \"Error: run tests from root directory\" && exit 1"
 	},
-	"devDependencies": {
-		"@11ty/eleventy": "^3.1.2",
-		"ava": "^6.4.1"
+	"11ty": {
+		"compatibility": ">=3.0.0"
+	},
+	"dependencies": {
+		"@11ty/webc": "^0.12.0-beta.5",
+		"obug": "^3.0.0",
+		"import-module-string": "^3.0.0"
 	}
 }

package/src/dynamicScript.js

@@ -1,9 +1,10 @@
+import { parseCode, walkCode, importFromString } from "import-module-string";
+
 // 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));
@@ -45,6 +46,4 @@ async function evaluateInlineCode(codeString, options = {}) {
 	return evaluated;
 }
 
-module.exports =  {
-	evaluateInlineCode
-};
+export { evaluateInlineCode };

package/src/eleventyWebcTemplate.js

@@ -1,7 +1,10 @@
-const path = require("node:path");
-const debug = require("debug")("Eleventy:WebC");
+import path from "node:path";
+import { createDebug } from "obug";
+import { WebC, ComponentManager } from "@11ty/webc";
 
-const { evaluateInlineCode } = require("./dynamicScript.js");
+import { evaluateInlineCode } from "./dynamicScript.js";
+
+const debug = createDebug("Eleventy:WebC");
 
 function relativePath(inputPath, newGlob) {
 	// project root
@@ -19,29 +22,26 @@ function relativePath(inputPath, newGlob) {
 function addContextToJavaScriptFunction(data, fn) {
 	let CONTEXT_KEYS = ["eleventy", "page"];
 	return function (...args) {
+		let context = Object.create(this ?? null);
 		for (let key of CONTEXT_KEYS) {
 			if (data && data[key]) {
-				this[key] = data[key];
+				context[key] = data[key];
 			}
 		}
 
-		return fn.call(this, ...args);
+		return fn.call(context, ...args);
 	};
 }
 
-module.exports = function(eleventyConfig, options = {}) {
+export default function(eleventyConfig, options = {}) {
 	// TODO remove this when WebC is moved out of plugin-land into core.
 	eleventyConfig.addTemplateFormats("webc");
 
-	let _WebC;
 	let globalComponentManager;
 	let componentsMap = false; // cache the glob search
 	let scopedHelpers = new Set(options.scopedHelpers);
 
-	eleventyConfig.on("eleventy.before", async () => {
-		// Temporary workaround for ESM in CJS
-		let { WebC, ComponentManager } = await import("@11ty/webc");
-		_WebC = WebC;
+	eleventyConfig.on("eleventy.before", () => {
 		globalComponentManager = new ComponentManager();
 
 		if(options.components) {
@@ -50,9 +50,9 @@ module.exports = function(eleventyConfig, options = {}) {
 	});
 
 	let templateConfig;
-  eleventyConfig.on("eleventy.config", (cfg) => {
-    templateConfig = cfg;
-  });
+	eleventyConfig.on("eleventy.config", (cfg) => {
+		templateConfig = cfg;
+	});
 
 	eleventyConfig.addExtension("webc", {
 		outputFileExtension: "html",
@@ -83,7 +83,7 @@ module.exports = function(eleventyConfig, options = {}) {
 		},
 
 		compile: async function(inputContent, inputPath) {
-			let page = new _WebC();
+			let page = new WebC();
 
 			page.setGlobalComponentManager(globalComponentManager);
 			page.setBundlerMode(true);
@@ -129,7 +129,7 @@ module.exports = function(eleventyConfig, options = {}) {
 				};
 
 				if(data.webc?.components) {
-					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") {

package/src/eleventyWebcTransform.js

@@ -1,4 +1,6 @@
-module.exports = function(eleventyConfig, options = {}) {
+import { WebC } from "@11ty/webc";
+
+export default function(eleventyConfig, options = {}) {
 	let componentsMap = false; // cache the glob search
 
 	eleventyConfig.on("eleventy.before", () => {
@@ -17,7 +19,6 @@ module.exports = function(eleventyConfig, options = {}) {
 		// TODO prevent double processing with the Render plugin with WebC
 		// https://www.11ty.dev/docs/plugins/render/
 		try {
-			const { WebC } = await import("@11ty/webc");
 			let page = new WebC();
 
 			if(componentsMap === false && options.components) {
@@ -41,7 +42,5 @@ module.exports = function(eleventyConfig, options = {}) {
 			console.error( `[11ty/eleventy-plugin-webc] Error transforming ${this.inputPath}`, e );
 			throw e;
 		}
-
-		return content;
 	});
 }