@nonphoto/sanity-image 3.2.0 → 5.0.0

package/dist/index.js

@@ -1,20 +1,126 @@
 // src/asset.ts
-function isSanityImageAssetLike(x) {
-  return x != null && typeof x === "object" && "_id" in x && typeof x._id === "string";
+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);
 }
 
-// src/reference.ts
-function isSanityReference(x) {
-  return x != null && typeof x === "object" && "_ref" in x && typeof x._ref === "string";
+// 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);
 }
 
-// src/imageObject.ts
-function isSanityImageObject(x) {
-  return x != null && typeof x === "object" && "asset" in x && (isSanityImageAssetLike(x.asset) || isSanityReference(x.asset));
+// 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 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/params.ts
-function sanityImageParamsToSearchParamEntries({
+// 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 entry(key, value) {
+  return value == null || value === false ? void 0 : [key, String(typeof value === "number" ? Math.round(value) : value)];
+}
+function transformationsToURLSearch({
   auto,
   background,
   blur,
@@ -41,129 +147,187 @@ function sanityImageParamsToSearchParamEntries({
   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?.x,
-    "fp-y": focalPoint?.y,
-    frame,
-    h: height,
-    invert,
-    "max-h": maxHeight,
-    "max-w": maxWidth,
-    "min-h": minHeight,
-    "min-w": minWidth,
-    or: orientation,
-    pad,
-    q: quality,
-    rect: rect ? [rect.left, rect.top, rect.width, rect.height].map(Math.round).join(",") : void 0,
-    sat: saturation,
-    sharp: sharpen,
-    w: width
-  }).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/stub.ts
-function parseSanityImageAssetId(assetId) {
-  const matches = assetId.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+// 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 [, id, width, height, format] = matches;
-    return { id, width: Number(width), height: Number(height), format };
+    const [, assetId, width, height, extension] = matches;
+    return {
+      _id: id,
+      assetId,
+      width: Number(width),
+      height: Number(height),
+      extension
+    };
   }
 }
-function sanityImageAssetId(source) {
-  return typeof source === "string" ? source : isSanityReference(source) ? source._ref : isSanityImageAssetLike(source) ? source._id : sanityImageAssetId(source.asset);
+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 sanityImageAssetStub(source) {
-  const id = sanityImageAssetId(source);
-  return id ? parseSanityImageAssetId(id) : void 0;
+function imageAssetWithTransformations(asset, transformations) {
+  return {
+    ...asset,
+    transformations: { ...asset.transformations, ...transformations }
+  };
 }
 
-// src/url.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
-];
-function sanityImageUrl(client, image, params) {
+// 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) {
   const url = new URL(
     [
-      `https://cdn.sanity.io/images`,
+      "https://cdn.sanity.io/images",
       client.projectId,
       client.dataset,
-      `${image.id}-${image.width}x${image.height}.${image.format}`,
-      image.vanityName
+      `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
+      asset.vanityName
     ].filter(Boolean).join("/")
   );
-  if (params) {
-    url.search = new URLSearchParams(
-      sanityImageParamsToSearchParamEntries(params)
-    ).toString();
+  if (asset.transformations) {
+    url.search = transformationsToURLSearch(asset.transformations);
   }
   return url.href;
 }
-function sanityImageSrcset(client, image, params, widths = defaultSrcsetWidths) {
-  const aspectRatio = image.height / image.width;
-  return [
-    ...widths.sort((a, b) => a - b).filter((width) => width < image.width),
-    image.width
-  ].map((width) => {
-    const url = sanityImageUrl(client, image, {
-      ...params,
-      width,
-      height: width * aspectRatio
-    });
+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(",");
 }
+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,
-  isSanityImageAssetLike,
-  isSanityImageObject,
-  isSanityReference,
-  parseSanityImageAssetId,
-  sanityImageAssetId,
-  sanityImageAssetStub,
-  sanityImageParamsToSearchParamEntries,
-  sanityImageSrcset,
-  sanityImageUrl
+  assetIdFromSource,
+  assetLikeSchema,
+  cropSchema,
+  hotspotSchema,
+  imageAspectRatio,
+  imageAssetFromSource,
+  imageAssetSchema,
+  imageAssetWithTransformations,
+  imageObjectSchema,
+  imageSrcset,
+  imageUrl,
+  isAssetLike,
+  isCrop,
+  isHotspot,
+  isImageAsset,
+  isImageObject,
+  isRect,
+  isReferenceLike,
+  isTransformations,
+  parseAssetId,
+  rectFromCrop,
+  rectSchema,
+  referenceLikeSchema,
+  srcsetWidths,
+  transformationsSchema,
+  transformationsToURLSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "3.2.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,12 +1,123 @@
-export interface SanityImageAssetLike {
-  _id: 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 ImageSource =
+  | ImageObject
+  | ImageAsset
+  | AssetLike
+  | 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 is(assetLikeSchema, input);
+}
+
+export function isReferenceLike(input: unknown): input is ReferenceLike {
+  return is(referenceLikeSchema, input);
+}
+
+export function isImageObject(input: unknown): input is ImageObject {
+  return is(imageObjectSchema, input);
+}
+
+export function isImageAsset(input: unknown): input is ImageAsset {
+  return is(imageAssetSchema, input);
+}
+
+export function assetIdFromSource(source: ImageSource): string | undefined {
+  return typeof source === "string"
+    ? source
+    : isAssetLike(source)
+      ? source._id
+      : isReferenceLike(source)
+        ? source._ref
+        : isImageObject(source) && source.asset
+          ? assetIdFromSource(source.asset)
+          : 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;
+    return {
+      _id: id,
+      assetId,
+      width: Number(width),
+      height: Number(height),
+      extension,
+    };
+  }
+}
+
+export function imageAssetFromSource(
+  source: ImageSource,
+): ImageAsset | undefined {
+  if (typeof source === "object" && "assetId" in source) {
+    return source;
+  } else {
+    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 isSanityImageAssetLike(x: any): x is SanityImageAssetLike {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "_id" in x &&
-    typeof x._id === "string"
-  );
+export function imageAssetWithTransformations(
+  asset: ImageAsset,
+  transformations: Transformations,
+): ImageAsset {
+  return {
+    ...asset,
+    transformations: { ...asset.transformations, ...transformations },
+  };
 }

package/src/constants.ts

@@ -0,0 +1,7 @@
+export const 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,
+  ],
+};

package/src/crop.ts

@@ -0,0 +1,14 @@
+import { InferOutput, is, number, object, optional } from "valibot";
+
+export const cropSchema = object({
+  top: optional(number()),
+  bottom: optional(number()),
+  left: optional(number()),
+  right: optional(number()),
+});
+
+export type Crop = InferOutput<typeof cropSchema>;
+
+export function isCrop(input: unknown): input is Crop {
+  return is(cropSchema, input);
+}

package/src/hotspot.ts

@@ -0,0 +1,14 @@
+import { InferOutput, is, number, object, optional } from "valibot";
+
+export const hotspotSchema = object({
+  x: optional(number()),
+  y: optional(number()),
+  width: optional(number()),
+  height: optional(number()),
+});
+
+export type Hotspot = InferOutput<typeof hotspotSchema>;
+
+export function isHotspot(input: unknown): input is Hotspot {
+  return is(hotspotSchema, input);
+}

package/src/image.ts

@@ -0,0 +1,69 @@
+import { ImageAsset, imageAssetWithTransformations } from "./asset";
+import { srcsetWidths } from "./constants";
+import { transformationsToURLSearch } from "./transformations";
+
+export interface SanityClientLike {
+  projectId: string;
+  dataset: string;
+}
+
+export function imageUrl(client: SanityClientLike, asset: ImageAsset): string {
+  const url = new URL(
+    [
+      "https://cdn.sanity.io/images",
+      client.projectId,
+      client.dataset,
+      `${asset.assetId}-${asset.width}x${asset.height}.${asset.extension}`,
+      asset.vanityName,
+    ]
+      .filter(Boolean)
+      .join("/"),
+  );
+  if (asset.transformations) {
+    url.search = transformationsToURLSearch(asset.transformations);
+  }
+  return url.href;
+}
+
+export function imageSrcset(
+  client: SanityClientLike,
+  asset: ImageAsset,
+  widths: number[] = srcsetWidths.default,
+): string | undefined {
+  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(",");
+}
+
+/**
+ * Calculates the aspect ratio of an image, taking its transformations into account.
+ * @param asset - The asset to calculate the aspect ratio of
+ * @returns The aspect ratio of the image
+ * @todo This function currently ignores the `crop` mode settings including focal point
+ * and min/max height/width.
+ */
+export function imageAspectRatio(asset: ImageAsset): number {
+  const size: [number, number] =
+    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];
+}