@ecomiq/storefront 2.1.3 → 3.0.0

package/dist/vite-public-assets-DW2fgtVb.js

@@ -0,0 +1,209 @@
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { extname, join, relative, resolve, sep } from "node:path";
+import { parse } from "@babel/parser";
+import { traverseFast } from "@babel/types";
+import { createHash } from "node:crypto";
+import sharp from "sharp";
+// src/vite-public-assets.ts
+const MODULE = "virtual:ecomiq-public-assets";
+const WIDTHS = [
+	360,
+	720,
+	1080
+];
+const MEDIA = /* @__PURE__ */ new Set([
+	".avif",
+	".gif",
+	".ico",
+	".jpeg",
+	".jpg",
+	".png",
+	".svg",
+	".webp",
+	".woff",
+	".woff2"
+]);
+const RASTER = /* @__PURE__ */ new Set([
+	".jpeg",
+	".jpg",
+	".png",
+	".webp"
+]);
+function digest(files) {
+	const hash = createHash("sha256");
+	for (const file of [...files].sort((left, right) => left.name.localeCompare(right.name))) {
+		hash.update(`${file.name}\0${file.bytes.length}\0`);
+		hash.update(file.bytes);
+	}
+	return hash.digest("hex");
+}
+async function imageFiles(bytes, extension) {
+	if (!RASTER.has(extension)) return [{
+		name: `original${extension}`,
+		bytes
+	}];
+	const metadata = await sharp(bytes, { limitInputPixels: 4e7 }).metadata();
+	if ((metadata.pages ?? 1) > 1 || !metadata.width || !metadata.height) return [{
+		name: `original${extension}`,
+		bytes
+	}];
+	const rotated = (metadata.orientation ?? 1) >= 5;
+	const width = rotated ? metadata.height : metadata.width;
+	const height = rotated ? metadata.width : metadata.height;
+	const widths = WIDTHS.filter((value) => value < width);
+	if (widths.length === 0) return [{
+		name: `original${extension}`,
+		bytes
+	}];
+	const files = [];
+	const retained = [];
+	for (const value of widths) {
+		const variant = await sharp(bytes, { limitInputPixels: 4e7 }).rotate().resize({
+			width: value,
+			withoutEnlargement: true
+		}).webp({ quality: 82 }).toBuffer();
+		if (variant.length >= bytes.length) continue;
+		retained.push(value);
+		files.push({
+			name: `w${value}.webp`,
+			bytes: variant
+		});
+	}
+	if (retained.length === 0) return [{
+		name: `original${extension}`,
+		bytes
+	}];
+	return [{
+		name: `image-${width}x${height}-w${retained.join("_")}${extension}`,
+		bytes
+	}, ...files];
+}
+const COMPONENTS = String.raw`import { createElement } from "react";
+function image(src) {
+  if (typeof src !== "string") return null;
+  const match = /^(\/assets\/media\/[a-f0-9]{64}\/)image-(\d+)x(\d+)-w(\d+(?:_\d+)*)\.(?:jpe?g|png|webp)$/.exec(src);
+  if (!match) return null;
+  return {
+    width: Number(match[2]), height: Number(match[3]),
+    srcSet: [...match[4].split("_").map(width => match[1] + "w" + width + ".webp " + width + "w"), src + " " + match[2] + "w"].join(", ")
+  };
+}
+export function AssetImage(props) {
+  const asset = image(props.src);
+  if (!asset) return createElement("img", props);
+  return createElement("img", { ...props, width: props.width ?? asset.width, height: props.height ?? asset.height,
+    srcSet: props.srcSet ?? asset.srcSet, sizes: props.sizes ?? "100vw" });
+}
+export function AssetSource(props) {
+  if (props.type && props.type !== "image/webp") return createElement("source", props);
+  const asset = image(props.srcSet);
+  return createElement("source", asset ? { ...props, srcSet: asset.srcSet, sizes: props.sizes ?? "100vw" } : props);
+}`;
+/** Fingerprints local media and generates its responsive sources during a production build. */
+function publicAssets() {
+	let app = "";
+	let directory = "";
+	let prepared;
+	const urls = /* @__PURE__ */ new Map();
+	const assets = /* @__PURE__ */ new Map();
+	async function prepare(watch) {
+		if (!existsSync(directory)) return;
+		const visit = async (folder) => {
+			for (const entry of readdirSync(folder, { withFileTypes: true }).sort((a, b) => a.name.localeCompare(b.name))) {
+				const path = join(folder, entry.name);
+				if (entry.isDirectory()) await visit(path);
+				if (!entry.isFile() || !MEDIA.has(extname(entry.name).toLowerCase())) continue;
+				watch(path);
+				const bytes = readFileSync(path);
+				let files;
+				try {
+					files = await imageFiles(bytes, extname(entry.name).toLowerCase());
+				} catch {
+					files = [{
+						name: `original${extname(entry.name).toLowerCase()}`,
+						bytes
+					}];
+				}
+				const prefix = `assets/media/${digest(files)}/`;
+				for (const file of files) assets.set(`${prefix}${file.name}`, file.bytes);
+				urls.set(`/${relative(directory, path).split(sep).join("/")}`, `/${prefix}${files[0].name}`);
+			}
+		};
+		await visit(directory);
+	}
+	return {
+		name: "ecomiq:public-assets",
+		apply: "build",
+		enforce: "pre",
+		configResolved(config) {
+			app = resolve(config.root, "app");
+			directory = config.publicDir === false ? "" : config.publicDir;
+		},
+		async buildStart() {
+			prepared ??= prepare((path) => this.addWatchFile(path));
+			await prepared;
+		},
+		resolveId(id) {
+			if (id === MODULE) return `\0${MODULE}`;
+		},
+		load(id) {
+			if (id === `\0${MODULE}`) return COMPONENTS;
+		},
+		async transform(code, id) {
+			const path = id.split("?")[0] ?? id;
+			if (!path.startsWith(`${app}${sep}`)) return void 0;
+			await prepared;
+			if (path.endsWith(".css")) {
+				const next = code.replace(/url\(\s*(["']?)(\/[^)'"\s]+)\1\s*\)/g, (original, _quote, url) => urls.has(url) ? `url(${JSON.stringify(urls.get(url))})` : original);
+				return next === code ? void 0 : {
+					code: next,
+					map: null
+				};
+			}
+			if (!/\.tsx?$/.test(path)) return void 0;
+			const ast = parse(code, {
+				sourceType: "module",
+				plugins: ["typescript", "jsx"]
+			});
+			const imports = new Set(ast.program.body.filter((node) => node.type === "ImportDeclaration").map((node) => node.source.start));
+			const edits = [];
+			const components = /* @__PURE__ */ new Set();
+			traverseFast(ast, (node) => {
+				if (node.type === "StringLiteral" && !imports.has(node.start)) {
+					const url = urls.get(node.value);
+					if (url) edits.push({
+						start: node.start,
+						end: node.end,
+						text: JSON.stringify(url)
+					});
+				}
+				if (node.type !== "JSXOpeningElement" && node.type !== "JSXClosingElement") return;
+				if (node.name.type !== "JSXIdentifier" || !["img", "source"].includes(node.name.name)) return;
+				const component = node.name.name === "img" ? "AssetImage" : "AssetSource";
+				components.add(component);
+				edits.push({
+					start: node.name.start,
+					end: node.name.end,
+					text: `__ecomiq${component}`
+				});
+			});
+			if (edits.length === 0) return void 0;
+			let next = code;
+			for (const edit of edits.sort((a, b) => b.start - a.start)) next = `${next.slice(0, edit.start)}${edit.text}${next.slice(edit.end)}`;
+			if (components.size > 0) next += `\nimport { ${[...components].map((name) => `${name} as __ecomiq${name}`).join(", ")} } from ${JSON.stringify(MODULE)};\n`;
+			return {
+				code: next,
+				map: null
+			};
+		},
+		generateBundle() {
+			if (this.environment?.name !== "client") return;
+			for (const [fileName, source] of assets) this.emitFile({
+				type: "asset",
+				fileName,
+				source
+			});
+		}
+	};
+}
+export { publicAssets };

package/dist/vite-public-assets.d.ts

@@ -0,0 +1,29 @@
+/** Fingerprints local media and generates its responsive sources during a production build. */
+export declare function publicAssets(): {
+  name: string;
+  apply: "build";
+  enforce: "pre";
+  configResolved(config: {
+    root: string;
+    publicDir: string | false;
+  }): void;
+  buildStart(this: {
+    addWatchFile(path: string): void;
+  }): Promise<void>;
+  resolveId(id: string): "\0virtual:ecomiq-public-assets" | undefined;
+  load(id: string): string | undefined;
+  transform(code: string, id: string): Promise<{
+    code: string;
+    map: null;
+  } | undefined>;
+  generateBundle(this: {
+    environment?: {
+      name: string;
+    };
+    emitFile(asset: {
+      type: "asset";
+      fileName: string;
+      source: Uint8Array;
+    }): string;
+  }): void;
+};