@nonphoto/sanity-image 4.0.0 → 5.0.0

package/dist/index.js

@@ -1,83 +1,126 @@
 // src/asset.ts
-function isAssetLike(input) {
-  return input != null && typeof input === "object" && "_id" in input && typeof input._id === "string";
-}
-function isReference(input) {
-  return input != null && typeof input === "object" && "_ref" in input && typeof input._ref === "string";
-}
-function isImageAsset(input) {
-  return input != null && typeof input === "object" && "assetId" in input && typeof input.assetId === "string" && "width" in input && typeof input.width === "number" && "height" in input && typeof input.height === "number" && "extension" in input && typeof input.extension === "string";
-}
-function hasAssetProp(input) {
-  return input != null && typeof input === "object" && "asset" in input;
-}
-function imageIdFromSource(source) {
-  return typeof source === "string" ? source : isReference(source) ? source._ref : isAssetLike(source) ? source._id : imageIdFromSource(source.asset);
+import {
+  is as is5,
+  nullish,
+  number as number5,
+  object as object5,
+  string as string2,
+  union as union2
+} from "valibot";
+
+// src/crop.ts
+import { is, number, object, optional } from "valibot";
+var cropSchema = object({
+  top: optional(number()),
+  bottom: optional(number()),
+  left: optional(number()),
+  right: optional(number())
+});
+function isCrop(input) {
+  return is(cropSchema, input);
 }
-function imageIdFromUnknown(input) {
-  return typeof input === "string" ? input : isReference(input) ? input._ref : isAssetLike(input) ? input._id : hasAssetProp(input) ? imageIdFromUnknown(input.asset) : void 0;
+
+// src/hotspot.ts
+import { is as is2, number as number2, object as object2, optional as optional2 } from "valibot";
+var hotspotSchema = object2({
+  x: optional2(number2()),
+  y: optional2(number2()),
+  width: optional2(number2()),
+  height: optional2(number2())
+});
+function isHotspot(input) {
+  return is2(hotspotSchema, input);
 }
-function imageAsset(id) {
-  const matches = id.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
-  if (matches) {
-    const [, assetId, width, height, extension] = matches;
-    return {
-      _id: id,
-      assetId,
-      width: Number(width),
-      height: Number(height),
-      extension
-    };
-  }
+
+// src/rect.ts
+import { is as is3, number as number3, object as object3, tuple } from "valibot";
+var rectSchema = object3({
+  pos: tuple([number3(), number3()]),
+  size: tuple([number3(), number3()])
+});
+function isRect(input) {
+  return is3(rectSchema, input);
 }
-function imageAssetFromUnknown(input) {
-  if (isImageAsset(input)) {
-    return input;
-  } else {
-    const id = imageIdFromUnknown(input);
-    return id ? imageAsset(id) : void 0;
-  }
+function rectFromCrop(asset, crop) {
+  const left = Math.max(crop.left ?? 0, 0);
+  const right = Math.max(crop.right ?? 0, 0);
+  const top = Math.max(crop.top ?? 0, 0);
+  const bottom = Math.max(crop.bottom ?? 0, 0);
+  return {
+    pos: [left * asset.width, top * asset.height],
+    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height]
+  };
 }
 
-// src/constants.ts
-var defaultSrcsetWidths = [
-  6016,
-  // 6K
-  5120,
-  // 5K
-  4480,
-  // 4.5K
-  3840,
-  // 4K
-  3200,
-  // QHD+
-  2560,
-  // WQXGA
-  2048,
-  // QXGA
-  1920,
-  // 1080p
-  1668,
-  // iPad
-  1280,
-  // 720p
-  1080,
-  // iPhone 6-8 Plus
-  960,
-  720,
-  // iPhone 6-8
-  640,
-  // 480p
-  480,
-  360,
-  240
-];
-
-// src/options.ts
-function isValidEntry(entry) {
-  return typeof entry[0] === "string" && ["string", "number", "boolean"].includes(typeof entry[1]);
+// src/transformations.ts
+import {
+  boolean,
+  is as is4,
+  literal,
+  number as number4,
+  object as object4,
+  partial,
+  string,
+  tuple as tuple2,
+  union
+} from "valibot";
+var transformationsSchema = partial(
+  object4({
+    auto: literal("format"),
+    background: string(),
+    blur: number4(),
+    crop: union([
+      literal("top"),
+      literal("bottom"),
+      literal("left"),
+      literal("right"),
+      literal("center"),
+      literal("focalpoint"),
+      literal("entropy")
+    ]),
+    download: union([string(), boolean()]),
+    dpr: union([literal(1), literal(2), literal(3)]),
+    fit: union([
+      literal("clip"),
+      literal("crop"),
+      literal("fill"),
+      literal("fillmax"),
+      literal("max"),
+      literal("scale"),
+      literal("min")
+    ]),
+    flipHorizontal: boolean(),
+    flipVertical: boolean(),
+    focalPoint: tuple2([number4(), number4()]),
+    format: union([
+      literal("jpg"),
+      literal("pjpg"),
+      literal("png"),
+      literal("webp")
+    ]),
+    frame: number4(),
+    height: number4(),
+    invert: boolean(),
+    maxHeight: number4(),
+    maxWidth: number4(),
+    minHeight: number4(),
+    minWidth: number4(),
+    orientation: union([literal(0), literal(90), literal(180), literal(270)]),
+    pad: number4(),
+    quality: number4(),
+    rect: rectSchema,
+    saturation: number4(),
+    sharpen: number4(),
+    width: number4()
+  })
+);
+function isTransformations(input) {
+  return is4(transformationsSchema, input);
 }
-function imageOptionsToSearchParamEntries({
+function entry(key, value) {
+  return value == null || value === false ? void 0 : [key, String(typeof value === "number" ? Math.round(value) : value)];
+}
+function transformationsToURLSearch({
   auto,
   background,
   blur,
@@ -104,92 +147,187 @@ function imageOptionsToSearchParamEntries({
   sharpen,
   width
 }) {
-  return Object.entries({
-    auto,
-    bg: background,
-    blur,
-    crop,
-    dl: download,
-    dpr,
-    fit,
-    flip: [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join(""),
-    fm: format,
-    "fp-x": focalPoint?.[0],
-    "fp-y": focalPoint?.[1],
-    frame,
-    h: height,
-    invert,
-    "max-h": maxHeight,
-    "max-w": maxWidth,
-    "min-h": minHeight,
-    "min-w": minWidth,
-    or: orientation,
-    pad,
-    q: quality,
-    rect: rect ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]].map(Math.round).join(",") : void 0,
-    sat: saturation,
-    sharp: sharpen,
-    w: width
-  }).filter(isValidEntry).filter(([, value]) => typeof value === "number" || Boolean(value)).map(([key, value]) => [
-    key,
-    encodeURIComponent(typeof value === "number" ? Math.round(value) : value)
-  ]);
+  return "?" + [
+    entry("auto", auto),
+    entry("bg", background),
+    entry("blur", blur),
+    entry("crop", crop),
+    entry("dl", download),
+    entry("dpr", dpr),
+    entry("fit", fit),
+    entry(
+      "flip",
+      flipHorizontal || flipVertical ? [flipHorizontal && "h", flipVertical && "v"].filter(Boolean).join("") : void 0
+    ),
+    entry("fm", format),
+    entry("fp-x", focalPoint?.[0]),
+    entry("fp-y", focalPoint?.[1]),
+    entry("frame", frame),
+    entry("h", height),
+    entry("invert", invert),
+    entry("max-h", maxHeight),
+    entry("max-w", maxWidth),
+    entry("min-h", minHeight),
+    entry("min-w", minWidth),
+    entry("or", orientation),
+    entry("pad", pad),
+    entry("q", quality),
+    entry(
+      "rect",
+      rect ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]].map(Math.round).join(",") : void 0
+    ),
+    entry("sat", saturation),
+    entry("sharp", sharpen),
+    entry("w", width)
+  ].filter((entry2) => entry2 != null).map((entry2) => entry2.join("=")).join("&");
+}
+
+// src/asset.ts
+var assetLikeSchema = object5({
+  _id: string2()
+});
+var referenceLikeSchema = object5({
+  _ref: string2()
+});
+var imageObjectSchema = object5({
+  asset: nullish(union2([assetLikeSchema, referenceLikeSchema, string2()])),
+  crop: nullish(cropSchema),
+  hotspot: nullish(hotspotSchema)
+});
+var imageAssetSchema = object5({
+  _id: string2(),
+  assetId: string2(),
+  width: number5(),
+  height: number5(),
+  extension: string2(),
+  vanityName: nullish(string2()),
+  transformations: nullish(transformationsSchema)
+});
+function isAssetLike(input) {
+  return is5(assetLikeSchema, input);
+}
+function isReferenceLike(input) {
+  return is5(referenceLikeSchema, input);
+}
+function isImageObject(input) {
+  return is5(imageObjectSchema, input);
+}
+function isImageAsset(input) {
+  return is5(imageAssetSchema, input);
 }
+function assetIdFromSource(source) {
+  return typeof source === "string" ? source : isAssetLike(source) ? source._id : isReferenceLike(source) ? source._ref : isImageObject(source) && source.asset ? assetIdFromSource(source.asset) : void 0;
+}
+function parseAssetId(id) {
+  const matches = id.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, assetId, width, height, extension] = matches;
+    return {
+      _id: id,
+      assetId,
+      width: Number(width),
+      height: Number(height),
+      extension
+    };
+  }
+}
+function imageAssetFromSource(source) {
+  if (typeof source === "object" && "assetId" in source) {
+    return source;
+  } else {
+    const id = assetIdFromSource(source);
+    const asset = id ? parseAssetId(id) : void 0;
+    return asset ? imageAssetWithTransformations(asset, {
+      rect: typeof source === "object" && "crop" in source && source.crop ? rectFromCrop(asset, source.crop) : void 0
+    }) : void 0;
+  }
+}
+function imageAssetWithTransformations(asset, transformations) {
+  return {
+    ...asset,
+    transformations: { ...asset.transformations, ...transformations }
+  };
+}
+
+// src/constants.ts
+var srcsetWidths = {
+  default: [2560, 1920, 1280, 960, 640, 480, 360, 240],
+  expanded: [
+    3840,
+    3200,
+    2560,
+    2048,
+    1920,
+    1668,
+    1280,
+    1080,
+    960,
+    720,
+    640,
+    480,
+    360,
+    240
+  ]
+};
 
 // src/image.ts
-function imageUrl(client, asset, options) {
+function imageUrl(client, asset) {
   const url = new URL(
     [
-      `https://cdn.sanity.io/images`,
+      "https://cdn.sanity.io/images",
       client.projectId,
       client.dataset,
       `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
-      options?.vanityName
+      asset.vanityName
     ].filter(Boolean).join("/")
   );
-  if (options) {
-    url.search = new URLSearchParams(
-      imageOptionsToSearchParamEntries(options)
-    ).toString();
+  if (asset.transformations) {
+    url.search = transformationsToURLSearch(asset.transformations);
   }
   return url.href;
 }
-function imageSrcset(client, asset, params, widths = defaultSrcsetWidths) {
-  return [
-    ...widths.sort((a, b) => a - b).filter((width) => width < asset.width),
-    asset.width
-  ].map((width) => {
-    const url = imageUrl(client, asset, {
-      ...params?.(width),
-      width
-    });
+function imageSrcset(client, asset, widths = srcsetWidths.default) {
+  return widths.sort((a, b) => a - b).filter((width) => width < asset.width).map(Math.round).map((width) => {
+    const url = imageUrl(
+      client,
+      imageAssetWithTransformations(asset, {
+        width
+      })
+    );
     return `${url} ${width}w`;
   }).join(",");
 }
-
-// src/rect.ts
-function rectFromCrop(asset, crop) {
-  const left = crop.left ?? 0;
-  const right = crop.right ?? 0;
-  const top = crop.top ?? 0;
-  const bottom = crop.bottom ?? 0;
-  return {
-    pos: [left * asset.width, right * asset.width],
-    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height]
-  };
+function imageAspectRatio(asset) {
+  const size = asset.transformations && ["crop", "fill", "fillmax", "scale", "min"].includes(
+    asset.transformations.fit ?? ""
+  ) && asset.transformations.width != null && asset.transformations.height != null ? [asset.transformations.width, asset.transformations.height] : asset.transformations?.rect ? asset.transformations.rect.size : [asset.width, asset.height];
+  return size[0] / size[1];
 }
 export {
-  defaultSrcsetWidths,
-  hasAssetProp,
-  imageAsset,
-  imageAssetFromUnknown,
-  imageIdFromSource,
-  imageIdFromUnknown,
-  imageOptionsToSearchParamEntries,
+  assetIdFromSource,
+  assetLikeSchema,
+  cropSchema,
+  hotspotSchema,
+  imageAspectRatio,
+  imageAssetFromSource,
+  imageAssetSchema,
+  imageAssetWithTransformations,
+  imageObjectSchema,
   imageSrcset,
   imageUrl,
   isAssetLike,
+  isCrop,
+  isHotspot,
   isImageAsset,
-  isReference,
-  rectFromCrop
+  isImageObject,
+  isRect,
+  isReferenceLike,
+  isTransformations,
+  parseAssetId,
+  rectFromCrop,
+  rectSchema,
+  referenceLikeSchema,
+  srcsetWidths,
+  transformationsSchema,
+  transformationsToURLSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "author": "Jonas Luebbers <jonas@jonasluebbers.com> (https://www.jonasluebbers.com)",
   "license": "MIT",
   "type": "module",
@@ -36,5 +36,8 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "pnpm@10.12.1"
+  "packageManager": "pnpm@10.12.1",
+  "dependencies": {
+    "valibot": "^1.1.0"
+  }
 }

package/src/asset.ts

@@ -1,90 +1,85 @@
-export interface AssetLike {
-  _id: string;
-}
-
-export interface Reference {
-  _ref: string;
-}
-
-export interface ImageAsset {
-  _id: string;
-  assetId: string;
-  width: number;
-  height: number;
-  extension: string;
-}
+import {
+  InferOutput,
+  is,
+  nullish,
+  number,
+  object,
+  string,
+  union,
+} from "valibot";
+import { cropSchema } from "./crop";
+import { hotspotSchema } from "./hotspot";
+import { rectFromCrop } from "./rect";
+import { Transformations, transformationsSchema } from "./transformations";
 
-export type ImageAssetSource =
-  | {
-      asset: ImageAssetSource;
-    }
+export type ImageSource =
+  | ImageObject
   | ImageAsset
   | AssetLike
-  | Reference
+  | ReferenceLike
   | string;
 
+export type AssetLike = InferOutput<typeof assetLikeSchema>;
+
+export type ReferenceLike = InferOutput<typeof referenceLikeSchema>;
+
+export type ImageObject = InferOutput<typeof imageObjectSchema>;
+
+export type ImageAsset = InferOutput<typeof imageAssetSchema>;
+
+export const assetLikeSchema = object({
+  _id: string(),
+});
+
+export const referenceLikeSchema = object({
+  _ref: string(),
+});
+
+export const imageObjectSchema = object({
+  asset: nullish(union([assetLikeSchema, referenceLikeSchema, string()])),
+  crop: nullish(cropSchema),
+  hotspot: nullish(hotspotSchema),
+});
+
+export const imageAssetSchema = object({
+  _id: string(),
+  assetId: string(),
+  width: number(),
+  height: number(),
+  extension: string(),
+  vanityName: nullish(string()),
+  transformations: nullish(transformationsSchema),
+});
+
 export function isAssetLike(input: unknown): input is AssetLike {
-  return (
-    input != null &&
-    typeof input === "object" &&
-    "_id" in input &&
-    typeof input._id === "string"
-  );
+  return is(assetLikeSchema, input);
 }
 
-export function isReference(input: unknown): input is Reference {
-  return (
-    input != null &&
-    typeof input === "object" &&
-    "_ref" in input &&
-    typeof input._ref === "string"
-  );
+export function isReferenceLike(input: unknown): input is ReferenceLike {
+  return is(referenceLikeSchema, input);
 }
 
-export function isImageAsset(input: unknown): input is ImageAsset {
-  return (
-    input != null &&
-    typeof input === "object" &&
-    "assetId" in input &&
-    typeof input.assetId === "string" &&
-    "width" in input &&
-    typeof input.width === "number" &&
-    "height" in input &&
-    typeof input.height === "number" &&
-    "extension" in input &&
-    typeof input.extension === "string"
-  );
+export function isImageObject(input: unknown): input is ImageObject {
+  return is(imageObjectSchema, input);
 }
 
-export function hasAssetProp(
-  input: unknown,
-): input is { asset: NonNullable<unknown> } {
-  return input != null && typeof input === "object" && "asset" in input;
+export function isImageAsset(input: unknown): input is ImageAsset {
+  return is(imageAssetSchema, input);
 }
 
-export function imageIdFromSource(source: ImageAssetSource): string {
+export function assetIdFromSource(source: ImageSource): string | undefined {
   return typeof source === "string"
     ? source
-    : isReference(source)
-      ? source._ref
-      : isAssetLike(source)
-        ? source._id
-        : imageIdFromSource(source.asset);
-}
-
-export function imageIdFromUnknown(input: unknown): string | undefined {
-  return typeof input === "string"
-    ? input
-    : isReference(input)
-      ? input._ref
-      : isAssetLike(input)
-        ? input._id
-        : hasAssetProp(input)
-          ? imageIdFromUnknown(input.asset)
+    : isAssetLike(source)
+      ? source._id
+      : isReferenceLike(source)
+        ? source._ref
+        : isImageObject(source) && source.asset
+          ? assetIdFromSource(source.asset)
           : undefined;
 }
 
-export function imageAsset(id: string): ImageAsset | undefined {
+export function parseAssetId(id: string): ImageAsset | undefined {
   const matches = id.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
   if (matches) {
     const [, assetId, width, height, extension] = matches;
@@ -98,11 +93,31 @@ export function imageAsset(id: string): ImageAsset | undefined {
   }
 }
 
-export function imageAssetFromUnknown(input: unknown): ImageAsset | undefined {
-  if (isImageAsset(input)) {
-    return input;
+export function imageAssetFromSource(
+  source: ImageSource,
+): ImageAsset | undefined {
+  if (typeof source === "object" && "assetId" in source) {
+    return source;
   } else {
-    const id = imageIdFromUnknown(input);
-    return id ? imageAsset(id) : undefined;
+    const id = assetIdFromSource(source);
+    const asset = id ? parseAssetId(id) : undefined;
+    return asset
+      ? imageAssetWithTransformations(asset, {
+          rect:
+            typeof source === "object" && "crop" in source && source.crop
+              ? rectFromCrop(asset, source.crop)
+              : undefined,
+        })
+      : undefined;
   }
 }
+
+export function imageAssetWithTransformations(
+  asset: ImageAsset,
+  transformations: Transformations,
+): ImageAsset {
+  return {
+    ...asset,
+    transformations: { ...asset.transformations, ...transformations },
+  };
+}