@ubean/image 0.2.1 → 0.3.0

package/dist/components.d.ts

@@ -82,11 +82,11 @@ declare const NuxtImg: import("vue").DefineComponent<import("vue").ExtractPropTy
   noModule: BooleanConstructor;
   sizesList: PropType<number[]>;
 }>> & Readonly<{}>, {
-  noModule: boolean;
   alt: string;
   loading: "lazy" | "eager";
   placeholder: string | number | boolean;
   preload: boolean;
+  noModule: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const NuxtPicture: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   src: {

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { a as ImageModifiers, c as ImageProvider, d as ResolvedImage, i as ImageFormat, l as ImageSize, n as ImageCTX, o as ImageOptions, r as ImageFit, s as ImagePosition, t as CreateImageOptions, u as ImageSrcsetItem } from "./types-DosomQo8.js";
 import { NuxtImg, NuxtPicture } from "./components.js";
 import ubeanImagePlugin, { UbeanImageOptions } from "./vite.js";
+import { ServeIpxOptions, ServeIpxResult, createIpxHonoHandler, parseIpxModifiers, resolveLocalImage, serveIpxRequest } from "./ipx.js";
 import { C as resolveAlias, D as staticProvider, E as srcSetToString, O as validateDomain, S as isRemoteUrl, _ as getPlaceholder, a as useImage, b as ipxProvider, c as cloudinaryProvider, d as createImageContext, f as createImageHash, g as detectFormat, h as defaultScreens, i as resolveImage, l as createDensitySrcSet, m as createStaticUrl, n as defineImagePreset, o as buildImgAttributes, p as createSrcSet, r as getImageContext, s as builtinProviders, t as configureImageRuntime, u as createIPXUrl, x as isDataUrl, y as imgixProvider } from "./runtime-B5AxhRTR.js";
 //#region src/index.d.ts
 declare const UbeanImg: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -177,4 +178,4 @@ declare const _default: {
   install(app: any, options?: any): void;
 };
 //#endregion
-export { type CreateImageOptions, type ImageCTX, type ImageFit, type ImageFormat, type ImageModifiers, type ImageOptions, type ImagePosition, type ImageProvider, type ImageSize, type ImageSrcsetItem, NuxtImg, NuxtPicture, type ResolvedImage, type UbeanImageOptions, UbeanImg, UbeanPicture, buildImgAttributes, builtinProviders, cloudinaryProvider, configureImageRuntime, createDensitySrcSet, createIPXUrl, createImageContext, createImageHash, createSrcSet, createStaticUrl, _default as default, defaultScreens, defineImagePreset, detectFormat, getImageContext, getPlaceholder, imgixProvider, ipxProvider, isDataUrl, isRemoteUrl, resolveAlias, resolveImage, srcSetToString, staticProvider, ubeanImagePlugin, useImage, validateDomain };
+export { type CreateImageOptions, type ImageCTX, type ImageFit, type ImageFormat, type ImageModifiers, type ImageOptions, type ImagePosition, type ImageProvider, type ImageSize, type ImageSrcsetItem, NuxtImg, NuxtPicture, type ResolvedImage, type ServeIpxOptions, type ServeIpxResult, type UbeanImageOptions, UbeanImg, UbeanPicture, buildImgAttributes, builtinProviders, cloudinaryProvider, configureImageRuntime, createDensitySrcSet, createIPXUrl, createImageContext, createImageHash, createIpxHonoHandler, createSrcSet, createStaticUrl, _default as default, defaultScreens, defineImagePreset, detectFormat, getImageContext, getPlaceholder, imgixProvider, ipxProvider, isDataUrl, isRemoteUrl, parseIpxModifiers, resolveAlias, resolveImage, resolveLocalImage, serveIpxRequest, srcSetToString, staticProvider, ubeanImagePlugin, useImage, validateDomain };

package/dist/index.js

@@ -1,5 +1,6 @@
 import { C as resolveAlias, D as staticProvider, E as srcSetToString, O as validateDomain, S as isRemoteUrl, _ as getPlaceholder, a as useImage, b as ipxProvider, c as cloudinaryProvider, d as createImageContext, f as createImageHash, g as detectFormat, h as defaultScreens, i as resolveImage, l as createDensitySrcSet, m as createStaticUrl, n as defineImagePreset, o as buildImgAttributes, p as createSrcSet, r as getImageContext, s as builtinProviders, t as configureImageRuntime, u as createIPXUrl, x as isDataUrl, y as imgixProvider } from "./runtime-Cf5VBwx5.js";
 import { NuxtImg, NuxtPicture } from "./components.js";
+import { createIpxHonoHandler, parseIpxModifiers, resolveLocalImage, serveIpxRequest } from "./ipx.js";
 import ubeanImagePlugin from "./vite.js";
 //#region src/index.ts
 const UbeanImg = NuxtImg;
@@ -12,4 +13,4 @@ var src_default = { install(app, options) {
 	app.component("NuxtPicture", NuxtPicture);
 } };
 //#endregion
-export { NuxtImg, NuxtPicture, UbeanImg, UbeanPicture, buildImgAttributes, builtinProviders, cloudinaryProvider, configureImageRuntime, createDensitySrcSet, createIPXUrl, createImageContext, createImageHash, createSrcSet, createStaticUrl, src_default as default, defaultScreens, defineImagePreset, detectFormat, getImageContext, getPlaceholder, imgixProvider, ipxProvider, isDataUrl, isRemoteUrl, resolveAlias, resolveImage, srcSetToString, staticProvider, ubeanImagePlugin, useImage, validateDomain };
+export { NuxtImg, NuxtPicture, UbeanImg, UbeanPicture, buildImgAttributes, builtinProviders, cloudinaryProvider, configureImageRuntime, createDensitySrcSet, createIPXUrl, createImageContext, createImageHash, createIpxHonoHandler, createSrcSet, createStaticUrl, src_default as default, defaultScreens, defineImagePreset, detectFormat, getImageContext, getPlaceholder, imgixProvider, ipxProvider, isDataUrl, isRemoteUrl, parseIpxModifiers, resolveAlias, resolveImage, resolveLocalImage, serveIpxRequest, srcSetToString, staticProvider, ubeanImagePlugin, useImage, validateDomain };

package/dist/ipx.d.ts

@@ -0,0 +1,28 @@
+//#region src/ipx.d.ts
+interface ServeIpxOptions {
+  rootDir: string;
+  staticDir?: string;
+  isDev?: boolean;
+}
+interface ServeIpxResult {
+  status: number;
+  headers: Record<string, string>;
+  body?: Buffer | Uint8Array | string;
+  redirect?: string;
+}
+declare function parseIpxModifiers(str: string): Record<string, unknown>;
+declare function resolveLocalImage(root: string, staticDir: string, src: string): string | undefined;
+declare function ipxContentType(src: string, format?: string): string;
+/**
+ * Serve `/_ipx/<modifiers>/<src>` the same way in Vite dev and production Hono.
+ * `pathname` is the part after `/_ipx` (e.g. `/_/photo.jpg` or `/w_800/photo.jpg`).
+ */
+declare function serveIpxRequest(pathname: string, options: ServeIpxOptions): Promise<ServeIpxResult>;
+declare function createIpxHonoHandler(options: ServeIpxOptions): (c: {
+  req: {
+    path: string;
+  };
+  redirect: (location: string, status?: 301 | 302) => Response;
+}) => Promise<Response>;
+//#endregion
+export { ServeIpxOptions, ServeIpxResult, createIpxHonoHandler, ipxContentType, parseIpxModifiers, resolveLocalImage, serveIpxRequest };

package/dist/ipx.js

@@ -0,0 +1,190 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+//#region src/ipx.ts
+function parseIpxModifiers(str) {
+	const mods = {};
+	const parts = str.split(",");
+	for (const part of parts) {
+		if (part === "_") continue;
+		if (part === "fh") {
+			mods.flip = mods.flip === "v" ? "hv" : "h";
+			continue;
+		}
+		if (part === "fv") {
+			mods.flip = mods.flip === "h" ? "hv" : "v";
+			continue;
+		}
+		if (part === "grayscale") {
+			mods.grayscale = true;
+			continue;
+		}
+		if (part === "negate") {
+			mods.negate = true;
+			continue;
+		}
+		if (part === "trim") {
+			mods.trim = true;
+			continue;
+		}
+		if (part === "enlarge") {
+			mods.enlarge = true;
+			continue;
+		}
+		const [key, ...valueParts] = part.split("_");
+		const value = valueParts.join("_");
+		switch (key) {
+			case "w":
+				mods.width = parseInt(value, 10);
+				break;
+			case "h":
+				mods.height = parseInt(value, 10);
+				break;
+			case "f":
+				mods.fit = value;
+				break;
+			case "p":
+				mods.position = decodeURIComponent(value);
+				break;
+			case "fm":
+				mods.format = value;
+				break;
+			case "q":
+				mods.quality = parseInt(value, 10);
+				break;
+			case "blur":
+				mods.blur = parseFloat(value);
+				break;
+			case "sharpen":
+				mods.sharpen = parseFloat(value);
+				break;
+			case "rot":
+				mods.rotate = parseInt(value, 10);
+				break;
+			case "bg":
+				mods.background = decodeURIComponent(value);
+				break;
+			case "br":
+				mods.brightness = parseFloat(value);
+				break;
+			case "con":
+				mods.contrast = parseFloat(value);
+				break;
+			case "sat": mods.saturation = parseFloat(value);
+		}
+	}
+	return mods;
+}
+function resolveLocalImage(root, staticDir, src) {
+	const relative = src.replace(/^\/+/, "");
+	if (relative.includes("..")) return void 0;
+	return [join(root, staticDir, relative), join(root, relative)].find((path) => existsSync(path));
+}
+function ipxContentType(src, format) {
+	return {
+		webp: "image/webp",
+		avif: "image/avif",
+		jpg: "image/jpeg",
+		jpeg: "image/jpeg",
+		png: "image/png",
+		gif: "image/gif",
+		svg: "image/svg+xml"
+	}[format || src.split(".").pop()?.toLowerCase() || ""] || "image/jpeg";
+}
+async function tryIpxTransform(filePath, modifiers) {
+	if (Object.keys(modifiers).length === 0) return void 0;
+	try {
+		const ipx = await import("ipx");
+		if (typeof ipx.createIPX !== "function") return void 0;
+		const dir = join(filePath, "..");
+		const storage = ipx.ipxFSStorage ? ipx.ipxFSStorage({ dir }) : { dir };
+		const instance = ipx.createIPX({
+			storage,
+			httpStorage: false
+		});
+		const parts = [];
+		if (typeof modifiers.width === "number") parts.push(`s_${modifiers.width}x${typeof modifiers.height === "number" ? modifiers.height : "_"}`);
+		if (typeof modifiers.format === "string") parts.push(`f_${modifiers.format}`);
+		if (typeof modifiers.quality === "number") parts.push(`q_${modifiers.quality}`);
+		const result = await instance(`${parts.join(",") || "_"}/${filePath.split("/").pop()}`);
+		return Buffer.isBuffer(result.data) ? result.data : Buffer.from(result.data);
+	} catch {
+		return;
+	}
+}
+/**
+* Serve `/_ipx/<modifiers>/<src>` the same way in Vite dev and production Hono.
+* `pathname` is the part after `/_ipx` (e.g. `/_/photo.jpg` or `/w_800/photo.jpg`).
+*/
+async function serveIpxRequest(pathname, options) {
+	const cacheControl = options.isDev ? "no-cache" : "public, max-age=31536000, immutable";
+	const parts = decodeURIComponent(pathname).split("/").filter(Boolean);
+	if (parts.length < 2) return {
+		status: 400,
+		headers: { "Content-Type": "text/plain" },
+		body: "Invalid IPX request"
+	};
+	const modifiers = parts[0] === "_" ? {} : parseIpxModifiers(parts[0]);
+	let src = parts.slice(1).join("/");
+	if (src.startsWith("https:/") && !src.startsWith("https://")) src = src.replace(/^https:\//, "https://");
+	else if (src.startsWith("http:/") && !src.startsWith("http://")) src = src.replace(/^http:\//, "http://");
+	const headers = {
+		"Content-Type": ipxContentType(src, typeof modifiers.format === "string" ? modifiers.format : void 0),
+		"Cache-Control": cacheControl
+	};
+	if (src.startsWith("http://") || src.startsWith("https://")) return {
+		status: 302,
+		headers: {
+			...headers,
+			"X-IPX-Mode": "redirect",
+			Location: src
+		},
+		redirect: src
+	};
+	const local = resolveLocalImage(options.rootDir, options.staticDir || "public", src);
+	if (!local) return {
+		status: 404,
+		headers: { "Content-Type": "text/plain" },
+		body: "Image not found"
+	};
+	const transformed = await tryIpxTransform(local, modifiers);
+	if (transformed) return {
+		status: 200,
+		headers: {
+			...headers,
+			"X-IPX-Mode": "transform"
+		},
+		body: transformed
+	};
+	const mode = Object.keys(modifiers).length > 0 ? "passthrough" : "file";
+	const body = readFileSync(local);
+	return {
+		status: 200,
+		headers: {
+			...headers,
+			"X-IPX-Mode": mode,
+			"Content-Length": String(body.length)
+		},
+		body
+	};
+}
+/** Node `Buffer` is `Uint8Array<ArrayBufferLike>`; fetch `BodyInit` requires `ArrayBuffer`. */
+function toBodyInit(body) {
+	if (body == null) return void 0;
+	if (typeof body === "string") return body;
+	const { buffer, byteOffset, byteLength } = body;
+	if (buffer instanceof ArrayBuffer) return new Uint8Array(buffer, byteOffset, byteLength);
+	return Uint8Array.from(body);
+}
+function createIpxHonoHandler(options) {
+	return async (c) => {
+		const path = c.req.path.startsWith("/_ipx") ? c.req.path.slice(5) || "/" : c.req.path;
+		const result = await serveIpxRequest(path.startsWith("/") ? path : `/${path}`, options);
+		if (result.redirect) return c.redirect(result.redirect, 302);
+		return new Response(toBodyInit(result.body), {
+			status: result.status,
+			headers: result.headers
+		});
+	};
+}
+//#endregion
+export { createIpxHonoHandler, ipxContentType, parseIpxModifiers, resolveLocalImage, serveIpxRequest };

package/dist/vite.js

@@ -1,4 +1,5 @@
 import { t as configureImageRuntime } from "./runtime-Cf5VBwx5.js";
+import { serveIpxRequest } from "./ipx.js";
 import { defu } from "defu";
 //#region src/vite.ts
 const defaultOptions = {
@@ -12,11 +13,13 @@ const RESOLVED_VIRTUAL_IMAGE = `\0${VIRTUAL_IMAGE}`;
 function ubeanImagePlugin(userOptions = {}) {
 	const options = defu(userOptions, defaultOptions);
 	let isDev = false;
+	let projectRoot = process.cwd();
 	return {
 		name: "ubean:image",
 		enforce: "pre",
 		configResolved(resolvedConfig) {
 			isDev = resolvedConfig.command === "serve";
+			projectRoot = resolvedConfig.root;
 		},
 		resolveId(id) {
 			if (id === VIRTUAL_IMAGE) return RESOLVED_VIRTUAL_IMAGE;
@@ -45,20 +48,24 @@ export default imageConfig;
 				const ipxHandler = async (req, res, next) => {
 					if (!req.url) return next();
 					const url = new URL(req.url, "http://localhost");
-					const parts = decodeURIComponent(url.pathname).split("/").filter(Boolean);
-					if (parts.length < 2) {
-						res.statusCode = 400;
-						res.end("Invalid IPX request");
-						return;
-					}
-					const modifiers = parts[0] === "_" ? {} : parseModifiers(parts[0]);
-					const src = parts.slice(1).join("/");
 					try {
-						res.setHeader("Content-Type", getContentType(src, modifiers.format));
-						res.setHeader("Cache-Control", isDev ? "no-cache" : "public, max-age=31536000, immutable");
-						res.statusCode = 302;
-						res.setHeader("Location", src.startsWith("http") ? src : `/${src}`);
-						res.end();
+						const result = await serveIpxRequest(url.pathname, {
+							rootDir: projectRoot,
+							staticDir: options.staticDir || "public",
+							isDev
+						});
+						for (const [key, value] of Object.entries(result.headers)) res.setHeader(key, value);
+						if (result.redirect) {
+							res.statusCode = result.status;
+							res.end();
+							return;
+						}
+						res.statusCode = result.status;
+						if (Buffer.isBuffer(result.body) || result.body instanceof Uint8Array) {
+							res.end(result.body);
+							return;
+						}
+						res.end(result.body ?? "");
 					} catch (err) {
 						next(err);
 					}
@@ -85,89 +92,5 @@ export default imageConfig;
 		}
 	};
 }
-function parseModifiers(str) {
-	const mods = {};
-	const parts = str.split(",");
-	for (const part of parts) {
-		if (part === "_") continue;
-		if (part === "fh") {
-			mods.flip = mods.flip === "v" ? "hv" : "h";
-			continue;
-		}
-		if (part === "fv") {
-			mods.flip = mods.flip === "h" ? "hv" : "v";
-			continue;
-		}
-		if (part === "grayscale") {
-			mods.grayscale = true;
-			continue;
-		}
-		if (part === "negate") {
-			mods.negate = true;
-			continue;
-		}
-		if (part === "trim") {
-			mods.trim = true;
-			continue;
-		}
-		if (part === "enlarge") {
-			mods.enlarge = true;
-			continue;
-		}
-		const [key, ...valueParts] = part.split("_");
-		const value = valueParts.join("_");
-		switch (key) {
-			case "w":
-				mods.width = parseInt(value, 10);
-				break;
-			case "h":
-				mods.height = parseInt(value, 10);
-				break;
-			case "f":
-				mods.fit = value;
-				break;
-			case "p":
-				mods.position = decodeURIComponent(value);
-				break;
-			case "fm":
-				mods.format = value;
-				break;
-			case "q":
-				mods.quality = parseInt(value, 10);
-				break;
-			case "blur":
-				mods.blur = parseFloat(value);
-				break;
-			case "sharpen":
-				mods.sharpen = parseFloat(value);
-				break;
-			case "rot":
-				mods.rotate = parseInt(value, 10);
-				break;
-			case "bg":
-				mods.background = decodeURIComponent(value);
-				break;
-			case "br":
-				mods.brightness = parseFloat(value);
-				break;
-			case "con":
-				mods.contrast = parseFloat(value);
-				break;
-			case "sat": mods.saturation = parseFloat(value);
-		}
-	}
-	return mods;
-}
-function getContentType(src, format) {
-	return {
-		webp: "image/webp",
-		avif: "image/avif",
-		jpg: "image/jpeg",
-		jpeg: "image/jpeg",
-		png: "image/png",
-		gif: "image/gif",
-		svg: "image/svg+xml"
-	}[format || src.split(".").pop()?.toLowerCase() || ""] || "image/jpeg";
-}
 //#endregion
 export { ubeanImagePlugin as default, ubeanImagePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubean/image",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Image optimization and transformation for ubean",
   "files": [
     "dist"