eleventy-image.webc

<!---
	Supported attribute list:
	* src (required)
	* width
	* formats
	* url-path
	* output-dir

	<img
	webc:is="eleventy-image"
	src="./src/img/possum-geri.png"
	alt="The possum is Eleventy’s mascot"
	width="222, 350"
	class="some-custom-class"
	sizes="(min-width: 43.75em) 100px, 15vw">

	Alternative attribute formats:
	:width="[222, 350]"
	formats="avif,webp,jpeg"
	:formats="['avif', 'webp', 'jpeg']"
--->
<script webc:type="js">
const path = require("path");

// TODO expose this for re-use in a provided shortcode.
async function imagePlugin(attributes, globalPluginOptions) {
	if(!attributes.src) {
		throw new Error("Missing `src` attribute on <eleventy-image>");
	}

	// TODO allow remote optimization automatically on full urls

	let imagePackage;
	let defaultGlobalAttributes;

	if(globalPluginOptions) {
		defaultGlobalAttributes = globalPluginOptions.defaultAttributes;
		delete globalPluginOptions.defaultAttributes;

		imagePackage = globalPluginOptions.packages?.image;
		delete globalPluginOptions.packages;
	}

	if(!imagePackage) {
		imagePackage = require("@11ty/eleventy-img");
	}

	let instanceOptions = {};

	// Note that multiple widths require a `sizes`

	if(attributes.width) {
		if(typeof attributes.width === "string") {
			instanceOptions.widths = attributes.width.split(",").map(entry => parseInt(entry, 10));
			delete attributes.width;
		} else if(Array.isArray(attributes.width)) {
			instanceOptions.widths = attributes.width;
			delete attributes.width;
		}
	}

	if(attributes.formats) {
		if(typeof attributes.formats === "string") {
			instanceOptions.formats = attributes.formats.split(",").map(entry => entry.trim());
			delete attributes.formats;
		} else if(Array.isArray(attributes.formats)) {
			instanceOptions.formats = attributes.formats;
			delete attributes.formats;
		}
	}

	// These defaults are set only if addPlugin was **not** called:
	if(!globalPluginOptions) {
		// Using eleventy.directories global data (Eleventy 2.0.2+)
		if(eleventy.directories) {
			instanceOptions.urlPath = "/img/";

			// write to output folder by default
			instanceOptions.outputDir = path.join(eleventy.directories.output, instanceOptions.urlPath);
		}
	}

	// Overrides via attributes (hopefully you don’t need these)
	if(attributes.urlPath) {
		instanceOptions.urlPath = attributes.urlPath;
		delete attributes.urlPath;

		if(eleventy.directories && !attributes.outputDir) {
			// use output folder if available (Eleventy v2.0.2+)
			instanceOptions.outputDir = path.join(eleventy.directories.output, instanceOptions.urlPath);
		}
	}

	if(attributes.outputDir) {
		instanceOptions.outputDir = attributes.outputDir;
		delete attributes.outputDir;
	}

	let options = Object.assign({}, globalPluginOptions, instanceOptions);

	// see Util.addConfig
	if(globalPluginOptions.eleventyConfig) {
		Object.defineProperty(options, "eleventyConfig", {
			value: globalPluginOptions.eleventyConfig,
			enumerable: false,
		});
	}

	let metadata = await imagePackage(src, options);

	let imageAttributes = Object.assign({}, defaultGlobalAttributes, attributes);

	// You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
	return imagePackage.generateHTML(metadata, imageAttributes);
};

(async () => {
	let globalPluginOptions;
	// fetch global options from from addPlugin call
	if(typeof __private_eleventyImageConfigurationOptions === "function") {
		globalPluginOptions = __private_eleventyImageConfigurationOptions();
	}

	if(!("filterPublicAttributes" in webc)) {
		throw new Error("The <eleventy-image> WebC component requires WebC v0.10.1+");
	}

	let attributes = webc.filterPublicAttributes(webc.attributes);
	return imagePlugin(attributes, globalPluginOptions);
})();
</script>