next-imagetools 0.0.0-stage → 0.0.0

package/dist/loader.cjs

@@ -0,0 +1,441 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_shared = require("./shared-DNQObFGr.cjs");
+let node_fs_promises = require("node:fs/promises");
+let node_path = require("node:path");
+node_path = require_shared.__toESM(node_path, 1);
+let node_url = require("node:url");
+let imagetools_core = require("imagetools-core");
+let picomatch = require("picomatch");
+picomatch = require_shared.__toESM(picomatch, 1);
+let sharp = require("sharp");
+sharp = require_shared.__toESM(sharp, 1);
+// src/directives.ts
+/**
+* Directives imagetools-core v12 reads, plus the ones this package handles itself. Kept by hand
+* because core's own `parametersUsed` is always empty for the built-ins; drop it once core reports
+* usage (JonasKruckenberg/imagetools#966).
+*/
+const KNOWN_DIRECTIVES = /* @__PURE__ */ new Set([
+	"w",
+	"h",
+	"aspect",
+	"allowUpscale",
+	"fit",
+	"position",
+	"kernel",
+	"format",
+	"quality",
+	"lossless",
+	"progressive",
+	"effort",
+	"background",
+	"blur",
+	"brightness",
+	"flatten",
+	"flip",
+	"flop",
+	"grayscale",
+	"hue",
+	"invert",
+	"median",
+	"normalize",
+	"noAutoOrient",
+	"rotate",
+	"saturation",
+	"tint",
+	"as",
+	"basePixels",
+	"top",
+	"right top",
+	"right",
+	"right bottom",
+	"bottom",
+	"left bottom",
+	"left",
+	"left top"
+]);
+/** Type-only markers (see client.d.ts), dropped before processing. */
+const TYPE_MARKERS = ["imagetools", "imagetools-gallery"];
+/** Outputs whose shape a marker picks: one value or an array, depending on the image count. */
+const MARKED_OUTPUTS = /* @__PURE__ */ new Set([
+	"url",
+	"metadata",
+	"meta"
+]);
+/**
+* Checks the type marker that ends a query against what the import gives. The client types pick an
+* import's type by how its query ends, so a wrong marker makes TypeScript wrong about the value —
+* `string` for what is really an array — with nothing else to say so.
+*/
+function checkMarker(query, as, count) {
+	const params = new URLSearchParams(query);
+	const last = [...params.keys()].at(-1);
+	if (last !== "imagetools" && last !== "imagetools-gallery") return void 0;
+	const [output = "url", keys] = (as ?? "url").split(":");
+	if (!MARKED_OUTPUTS.has(output)) return params.has("as") ? `as=${output} is typed without a marker; remove &${last}.` : `as=${output} comes from a preset or the defaults, so no marker can type this import; remove &${last} and declare its type, e.g. declare module '*preset=<name>'.`;
+	if (keys !== void 0) return `as=${output}:${keys} has no marker type, since its keys vary; remove &${last} and declare the import's type, or use as=${output} without keys.`;
+	if (last === "imagetools" && count > 1) return `the query gives ${count} images, an array, but &imagetools types it as a single value. End it with &imagetools-gallery.`;
+	if (last === "imagetools-gallery" && count === 1) return "the query gives one image, a single value, but &imagetools-gallery types it as an array. End it with &imagetools.";
+}
+/** Names people reach for that imagetools-core doesn't read, with what to use instead. */
+const REPLACEMENTS = {
+	width: "w",
+	height: "h",
+	withoutEnlargement: "allowUpscale (images are never enlarged unless it is set)",
+	withoutReduction: "allowUpscale"
+};
+/**
+* Output formats there is an asset rule for. sharp encodes more (`jxl`, `jp2`, …), but an output
+* without a rule would leave its internal import unresolved, so those are rejected up front.
+*/
+const OUTPUT_FORMATS = [
+	"jpg",
+	"jpeg",
+	"png",
+	"webp",
+	"avif",
+	"gif",
+	"tiff",
+	"heif"
+];
+const positiveInteger = (v) => /^\d+$/.test(v) && Number(v) > 0;
+const integer = (v) => /^-?\d+$/.test(v);
+const number = (v) => v.trim() !== "" && Number.isFinite(Number(v));
+const flagOrNumber = (v) => v === "" || v === "true" || number(v);
+/** Value checks for the directives imagetools-core would otherwise silently skip. */
+const VALUE_RULES = {
+	format: [(v) => OUTPUT_FORMATS.includes(v), `one of ${OUTPUT_FORMATS.join(", ")}`],
+	w: [positiveInteger, "a positive integer"],
+	h: [positiveInteger, "a positive integer"],
+	quality: [(v) => integer(v) && Number(v) >= 1 && Number(v) <= 100, "an integer from 1 to 100"],
+	rotate: [integer, "an integer (degrees)"],
+	hue: [integer, "an integer (degrees)"],
+	saturation: [number, "a number"],
+	brightness: [number, "a number"],
+	blur: [flagOrNumber, "a number, or no value"],
+	median: [flagOrNumber, "a number, or no value"],
+	effort: [(v) => integer(v) || v === "min" || v === "max", "an integer, \"min\" or \"max\""],
+	aspect: [(v) => number(v) || /^\d+(\.\d+)?:\d+(\.\d+)?$/.test(v), "a number or a ratio like 16:9"]
+};
+/**
+* Checks resolved directives. `consumed` are keys the config file's `defaultDirectives` function
+* read: custom keys like `?hero` are legitimate when that function acts on them.
+*/
+function checkDirectives(directives, outputFormats, consumed = /* @__PURE__ */ new Set()) {
+	const errors = [];
+	const warnings = [];
+	for (const [key, value] of directives) {
+		if (KNOWN_DIRECTIVES.has(key) || key in outputFormats || consumed.has(key)) {
+			const rule = VALUE_RULES[key];
+			if (!rule) continue;
+			const bad = value.split(";").filter((v) => !rule[0](v));
+			if (bad.length) errors.push(`${key}=${bad.join(";")} is not valid: ${key} takes ${rule[1]}.`);
+			continue;
+		}
+		const near = closest(key, [...KNOWN_DIRECTIVES, ...Object.keys(REPLACEMENTS)]);
+		const instead = REPLACEMENTS[key] ?? (near && (REPLACEMENTS[near] ?? near));
+		warnings.push(`Unknown directive "${key}" has no effect.${instead ? ` Did you mean ${instead}?` : ""}`);
+	}
+	const as = directives.get("as")?.split(":")[0];
+	if (as !== void 0 && !(as in outputFormats)) {
+		const names = Object.keys(outputFormats);
+		const suggestion = closest(as, names);
+		errors.push(`Unknown output format as=${as}.${suggestion ? ` Did you mean as=${suggestion}?` : ""} Available: ${names.join(", ")}.`);
+	}
+	return {
+		errors,
+		warnings
+	};
+}
+/**
+* Drops empty values left by stray separators, so `format=webp;` means `format=webp` rather than a
+* second image with no format (and an array instead of a single value).
+*/
+function dropEmptyValues(directives) {
+	for (const [key, value] of Array.from(directives.entries())) {
+		if (!value.includes(";")) continue;
+		directives.set(key, value.split(";").filter(Boolean).join(";"));
+	}
+}
+/** The candidate closest to `input` by edit distance, if any is close enough to be a typo. */
+function closest(input, candidates) {
+	let best;
+	let bestDistance = Infinity;
+	for (const candidate of candidates) {
+		const d = distance(input.toLowerCase(), candidate.toLowerCase());
+		if (d < bestDistance) [best, bestDistance] = [candidate, d];
+	}
+	return bestDistance <= Math.max(1, Math.floor(input.length / 3)) ? best : void 0;
+}
+/** Edit distance counting a swap of adjacent letters as one edit (`widht` → `width` is 1). */
+function distance(a, b) {
+	const d = Array.from({ length: a.length + 1 }, (_row, i) => Array.from({ length: b.length + 1 }, (_cell, j) => i === 0 ? j : j === 0 ? i : 0));
+	for (let i = 1; i <= a.length; i++) for (let j = 1; j <= b.length; j++) {
+		const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+		let best = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
+		if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) best = Math.min(best, d[i - 2][j - 2] + 1);
+		d[i][j] = best;
+	}
+	return d[a.length][b.length];
+}
+// src/placeholder.ts
+const BLUR_SIZE = 8;
+const BLUR_QUALITY = 70;
+/** A tiny WebP data URL, `BLUR_SIZE` pixels on its longer side; next/image blurs it with CSS. */
+async function blurOf(image, width, height) {
+	const [w, h] = width >= height ? [BLUR_SIZE, Math.max(Math.round(height / width * BLUR_SIZE), 1)] : [Math.max(Math.round(width / height * BLUR_SIZE), 1), BLUR_SIZE];
+	return {
+		dataURL: `data:image/webp;base64,${(await image.clone().resize(w, h, { fit: "fill" }).webp({ quality: BLUR_QUALITY }).toBuffer()).toString("base64")}`,
+		width: w,
+		height: h
+	};
+}
+/** The image's dominant color as `#rrggbb`. */
+async function colorOf(image) {
+	const { dominant } = await image.clone().stats();
+	return `#${[
+		dominant.r,
+		dominant.g,
+		dominant.b
+	].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+/** The variant a single-value result describes: the widest, as imagetools-core's `img` picks. */
+const largest = (images) => images.reduce((a, b) => b.info.width > a.info.width ? b : a);
+/**
+* `as=next`: the shape of a Next.js static image import (`StaticImageData`), so the result goes
+* straight into `<Image src={…} placeholder="blur" />`.
+*/
+const nextFormat = () => async (images) => {
+	const image = largest(images);
+	const { width, height } = image.info;
+	const blur = await blurOf(image.image, width, height);
+	return {
+		src: image.src,
+		width,
+		height,
+		blurDataURL: blur.dataURL,
+		blurWidth: blur.width,
+		blurHeight: blur.height
+	};
+};
+/** Parses the `placeholder` directive: bare or `blur` for a blurred image, `color` for a color. */
+function placeholderKind(value) {
+	if (value === "" || value === "blur") return "blur";
+	if (value === "color") return "color";
+	throw new Error(`placeholder=${value} is not valid: placeholder takes no value, "blur" or "color".`);
+}
+async function placeholderOf(kind, image) {
+	return kind === "color" ? colorOf(image.image) : (await blurOf(image.image, image.info.width, image.info.height)).dataURL;
+}
+// src/loader.ts
+const PLACEHOLDER = (i) => `__NIT_${i}__`;
+const MIME_TYPES = {
+	jpg: "image/jpeg",
+	svg: "image/svg+xml"
+};
+const clamp = (s, n) => s.split(";").map((d) => Number.parseInt(d) <= n ? d : String(n)).join(";");
+const SINGLE_VALUE_FORMATS = /* @__PURE__ */ new Set([
+	"srcset",
+	"img",
+	"picture",
+	"next"
+]);
+const matchers = /* @__PURE__ */ new Map();
+const matcherFor = (globs) => {
+	const key = JSON.stringify(globs);
+	let match = matchers.get(key);
+	if (!match) matchers.set(key, match = (0, picomatch.default)(globs, { dot: true }));
+	return match;
+};
+/**
+* Whether include/exclude let imagetools handle a file. Globs are matched against the path relative
+* to the Next.js app (the loader's root context), not Turbopack's root, which in a monorepo is the
+* workspace root — so `src/assets/**` means the same thing in either layout.
+*/
+function isHandled(relativePath, { include, exclude }) {
+	const file = relativePath.split(node_path.default.sep).join("/");
+	if (include?.length && !matcherFor(include)(file)) return false;
+	if (exclude?.length && matcherFor(exclude)(file)) return false;
+	return true;
+}
+/**
+* The directives an import ends up with, lowest precedence first: the `defaultDirectives` option,
+* then the config file's `defaultDirectives` function, then the named preset, then the import's own
+* query. Type-only markers (see client.d.ts) are dropped so a marked import shares cache entries
+* and output files with the same import unmarked.
+*/
+function resolveDirectives(query, options, configDefaults) {
+	for (const marker of TYPE_MARKERS) query.delete(marker);
+	const presetName = query.get("preset");
+	query.delete("preset");
+	let preset;
+	if (presetName !== null) {
+		const definition = options.presets?.[presetName];
+		if (definition === void 0) {
+			const known = Object.keys(options.presets ?? {});
+			throw new Error(`Unknown imagetools preset "${presetName}". ` + (known.length ? `Defined presets: ${known.join(", ")}.` : "No presets are defined."));
+		}
+		preset = require_shared.toParams(definition);
+	}
+	const directives = new URLSearchParams();
+	for (const layer of [
+		require_shared.toParams(options.defaultDirectives),
+		configDefaults,
+		preset,
+		query
+	]) for (const [key, value] of layer ?? []) directives.set(key, value);
+	return directives;
+}
+/** Records the keys looked up through get/getAll/has. */
+function trackReads(params, keys) {
+	for (const method of [
+		"get",
+		"getAll",
+		"has"
+	]) {
+		const original = params[method].bind(params);
+		Object.defineProperty(params, method, { value: (key, value) => {
+			keys.add(key);
+			return original(key, value);
+		} });
+	}
+}
+function uniqueByConfig(images) {
+	const seen = /* @__PURE__ */ new Set();
+	return images.filter((image) => {
+		const key = JSON.stringify(image.config);
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+function imagetoolsLoader() {
+	return require_shared.withContext(this, () => load.call(this));
+}
+async function load() {
+	const options = this.getOptions?.() ?? {};
+	const pathname = this.resourcePath;
+	if (!isHandled(node_path.default.relative(this.rootContext ?? process.cwd(), pathname), options)) return `export { default } from ${JSON.stringify(`./${node_path.default.basename(pathname)}`)};\n`;
+	const cacheDir = await require_shared.prepareCache(this, options);
+	const { config: userConfig, factories, hash: configHash } = await require_shared.loadConfig(this, options);
+	const builtins = {
+		...imagetools_core.builtinOutputFormats,
+		next: nextFormat
+	};
+	const outputFormats = userConfig.extendOutputFormats?.(builtins) ?? builtins;
+	let configDefaults;
+	const consumed = /* @__PURE__ */ new Set();
+	if (userConfig.defaultDirectives) {
+		const url = (0, node_url.pathToFileURL)(pathname);
+		url.search = this.resourceQuery;
+		trackReads(url.searchParams, consumed);
+		let metadata;
+		configDefaults = await userConfig.defaultDirectives(url, () => metadata ??= (0, sharp.default)(pathname).metadata());
+	}
+	const directives = resolveDirectives(new URLSearchParams(this.resourceQuery), options, configDefaults);
+	const inline = directives.has("inline");
+	directives.delete("inline");
+	const placeholderValue = directives.get("placeholder");
+	directives.delete("placeholder");
+	const placeholder = placeholderValue === null ? void 0 : placeholderKind(placeholderValue);
+	dropEmptyValues(directives);
+	const problems = checkDirectives(directives, outputFormats, consumed);
+	for (const message of problems.warnings) require_shared.warn(this, message);
+	if (problems.errors.length) throw new Error(problems.errors.join(" "));
+	const source = await (0, node_fs_promises.readFile)(pathname);
+	const sourceHash = require_shared.hash([source]);
+	const meta = await (0, sharp.default)(source).metadata();
+	const upright = directives.has("noAutoOrient") ? meta : meta.autoOrient;
+	if (directives.get("allowUpscale") !== "true" && (directives.has("w") || directives.has("h"))) for (const [key, intrinsic] of [["w", upright.width], ["h", upright.height]]) {
+		const before = directives.get(key);
+		if (!before) continue;
+		const after = clamp(before, intrinsic);
+		directives.set(key, after);
+		if (new Set(after.split(";")).size < new Set(before.split(";")).size) require_shared.warn(this, `${key}=${before} goes beyond the source's ${intrinsic}px, so some variants come out identical. Remove the extra values, or add allowUpscale=true to scale up.`);
+	}
+	const entries = (0, imagetools_core.extractEntries)(directives);
+	const frames = require_shared.isAnimated(meta) ? meta.pages ?? 1 : 1;
+	if (frames > 1) {
+		const stills = (directives.get("format") ?? meta.format ?? "").split(";").filter((format) => format && !require_shared.ANIMATED_FORMATS.has(format));
+		if (stills.length) require_shared.warn(this, `the source has ${frames} frames, but ${stills.join(", ")} can't be animated, so only the first frame is kept. Use format=webp or format=gif to keep the animation.`);
+	}
+	const configs = userConfig.resolveConfigs?.(entries, outputFormats) ?? (0, imagetools_core.resolveConfigs)(entries, outputFormats);
+	const markerProblem = checkMarker(this.resourceQuery, directives.get("as"), configs.length);
+	if (markerProblem) throw new Error(markerProblem);
+	const logger = {
+		info: console.log,
+		warn: (m) => require_shared.warn(this, m),
+		error: (m) => {
+			throw new Error(m);
+		}
+	};
+	const assetQueries = [];
+	const outputs = await Promise.all(configs.map(async (config, i) => {
+		const r = await require_shared.processImage({
+			source,
+			factories,
+			configHash,
+			sourceHash,
+			config,
+			searchParams: directives,
+			cacheDir,
+			logger,
+			removeMetadata: options.removeMetadata !== false
+		});
+		const ext = r.transforms.format === "jpeg" ? "jpg" : r.transforms.format;
+		let src;
+		if (inline) src = `data:${MIME_TYPES[ext ?? ""] ?? `image/${ext}`};base64,${r.data.toString("base64")}`;
+		else {
+			assetQueries[i] = `?nit=${sourceHash.slice(0, 12)}&nit_ext=${ext}&${new URLSearchParams(config)}`;
+			src = PLACEHOLDER(i);
+		}
+		return {
+			src,
+			image: (0, sharp.default)(r.data),
+			config,
+			info: {
+				width: r.meta.width,
+				height: r.meta.height,
+				autoOriented: {
+					width: r.meta.width,
+					height: r.meta.height
+				}
+			},
+			transforms: r.transforms,
+			sharpMetadata: r.meta
+		};
+	}));
+	const [as, args] = directives.get("as")?.split(":") ?? [];
+	const outputFormat = as && outputFormats[as] || null;
+	const format = outputFormat ? outputFormat(args ? args.split(";") : void 0) : (0, imagetools_core.urlFormat)();
+	const formatted = as && SINGLE_VALUE_FORMATS.has(as) ? uniqueByConfig(outputs) : outputs;
+	const result = await format(formatted);
+	if (placeholder) {
+		if (!result || typeof result !== "object" || Array.isArray(result)) throw new Error("placeholder needs a single object result: use as=img, as=picture, as=metadata or as=next, with one image per format.");
+		result.placeholder = await placeholderOf(placeholder, largest(formatted));
+	}
+	const json = JSON.stringify(result).replaceAll(/__NIT_(\d+)__/g, "\" + __nit_url(__nit_$1) + \"");
+	const self = `./${node_path.default.basename(pathname)}`;
+	return `${assetQueries.map((q, i) => q === void 0 ? "" : `import __nit_${i} from ${JSON.stringify(self + q)};`).filter(Boolean).join("\n")}
+const __nit_url = (m) => encodeURI(m && typeof m === 'object' ? m.src : m);
+const __nit_value = ${json};
+export default __nit_value;
+${(options.namedExports === false ? [] : namedExportKeys(result)).map((key) => `export const ${key} = __nit_value[${JSON.stringify(key)}];`).join("\n")}
+`;
+}
+const RESERVED = new Set("await break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import in instanceof interface let new null package private protected public return static super switch this throw true try typeof var void while with yield".split(" "));
+/**
+* Keys of an object result (`as=metadata`, `as=img`, `as=picture`) to also export by name, so
+* `import { width, src } from './a.jpg?as=metadata'` works as it does in vite-imagetools. Arrays
+* and strings have no keys to export.
+*/
+function namedExportKeys(result) {
+	if (!result || typeof result !== "object" || Array.isArray(result)) return [];
+	return Object.keys(result).filter((k) => /^[A-Za-z_$][\w$]*$/.test(k) && !RESERVED.has(k));
+}
+const raw = true;
+exports.default = imagetoolsLoader;
+exports.raw = raw;