@nonphoto/sanity-image 4.0.0 → 5.0.0

package/src/constants.ts

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

@@ -1,6 +1,14 @@
-export type Crop = {
-  top?: number;
-  bottom?: number;
-  left?: number;
-  right?: number;
-};
+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

@@ -1,36 +1,26 @@
-import { ImageAsset } from "./asset";
-import { defaultSrcsetWidths } from "./constants";
-import { ImageOptions, imageOptionsToSearchParamEntries } from "./options";
+import { ImageAsset, imageAssetWithTransformations } from "./asset";
+import { srcsetWidths } from "./constants";
+import { transformationsToURLSearch } from "./transformations";
 
 export interface SanityClientLike {
   projectId: string;
   dataset: string;
 }
 
-export interface ImageOptionsWithVanityName extends ImageOptions {
-  vanityName?: string;
-}
-
-export function imageUrl(
-  client: SanityClientLike,
-  asset: ImageAsset,
-  options?: ImageOptionsWithVanityName,
-): string | undefined {
+export function imageUrl(client: SanityClientLike, asset: ImageAsset): string {
   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;
 }
@@ -38,19 +28,42 @@ export function imageUrl(
 export function imageSrcset(
   client: SanityClientLike,
   asset: ImageAsset,
-  params?: (width: number) => Omit<ImageOptionsWithVanityName, "width">,
-  widths: number[] = defaultSrcsetWidths,
+  widths: number[] = srcsetWidths.default,
 ): string | undefined {
-  return [
-    ...widths.sort((a, b) => a - b).filter((width) => width < asset.width),
-    asset.width,
-  ]
+  return widths
+    .sort((a, b) => a - b)
+    .filter((width) => width < asset.width)
+    .map(Math.round)
     .map((width) => {
-      const url = imageUrl(client, asset, {
-        ...params?.(width),
-        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];
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./asset";
 export * from "./constants";
 export * from "./crop";
+export * from "./hotspot";
 export * from "./image";
-export * from "./options";
 export * from "./rect";
+export * from "./transformations";

package/src/rect.ts

@@ -1,21 +1,28 @@
+import { InferOutput, is, number, object, tuple } from "valibot";
 import { ImageAsset } from "./asset";
 import { Crop } from "./crop";
 
-export interface RectLike {
-  pos: ArrayLike<number>;
-  size: ArrayLike<number>;
+export const rectSchema = object({
+  pos: tuple([number(), number()]),
+  size: tuple([number(), number()]),
+});
+
+export type Rect = InferOutput<typeof rectSchema>;
+
+export function isRect(input: unknown): input is Rect {
+  return is(rectSchema, input);
 }
 
 export function rectFromCrop(
   asset: Pick<ImageAsset, "width" | "height">,
   crop: Crop,
-): RectLike {
-  const left = crop.left ?? 0;
-  const right = crop.right ?? 0;
-  const top = crop.top ?? 0;
-  const bottom = crop.bottom ?? 0;
+): Rect {
+  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, right * asset.width],
+    pos: [left * asset.width, top * asset.height],
     size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height],
   };
 }

package/src/transformations.ts

@@ -0,0 +1,155 @@
+import {
+  boolean,
+  InferOutput,
+  is,
+  literal,
+  number,
+  object,
+  partial,
+  string,
+  tuple,
+  union,
+} from "valibot";
+import { rectSchema } from "./rect";
+
+export const transformationsSchema = partial(
+  object({
+    auto: literal("format"),
+    background: string(),
+    blur: number(),
+    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: tuple([number(), number()]),
+    format: union([
+      literal("jpg"),
+      literal("pjpg"),
+      literal("png"),
+      literal("webp"),
+    ]),
+    frame: number(),
+    height: number(),
+    invert: boolean(),
+    maxHeight: number(),
+    maxWidth: number(),
+    minHeight: number(),
+    minWidth: number(),
+    orientation: union([literal(0), literal(90), literal(180), literal(270)]),
+    pad: number(),
+    quality: number(),
+    rect: rectSchema,
+    saturation: number(),
+    sharpen: number(),
+    width: number(),
+  }),
+);
+
+export type Transformations = InferOutput<typeof transformationsSchema>;
+
+export function isTransformations(input: unknown): input is Transformations {
+  return is(transformationsSchema, input);
+}
+
+function entry(
+  key: string,
+  value: string | number | boolean | null | undefined,
+): [string, string] | undefined {
+  return value == null || value === false
+    ? undefined
+    : [key, String(typeof value === "number" ? Math.round(value) : value)];
+}
+
+export function transformationsToURLSearch({
+  auto,
+  background,
+  blur,
+  crop,
+  download,
+  dpr,
+  fit,
+  flipHorizontal,
+  flipVertical,
+  focalPoint,
+  format,
+  frame,
+  height,
+  invert,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  orientation,
+  pad,
+  quality,
+  rect,
+  saturation,
+  sharpen,
+  width,
+}: Transformations): string {
+  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("")
+          : undefined,
+      ),
+      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(",")
+          : undefined,
+      ),
+      entry("sat", saturation),
+      entry("sharp", sharpen),
+      entry("w", width),
+    ]
+      .filter((entry) => entry != null)
+      .map((entry) => entry.join("="))
+      .join("&")
+  );
+}

package/src/options.ts

@@ -1,130 +0,0 @@
-import { RectLike } from "./rect";
-
-export type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
-
-export type FitMode =
-  | "clip"
-  | "crop"
-  | "fill"
-  | "fillmax"
-  | "max"
-  | "scale"
-  | "min";
-
-export type CropMode =
-  | "top"
-  | "bottom"
-  | "left"
-  | "right"
-  | "center"
-  | "focalpoint"
-  | "entropy";
-
-export type AutoMode = "format";
-
-export type Orientation = 0 | 90 | 180 | 270;
-
-export type Dpr = 1 | 2 | 3;
-
-export type ImageOptions = {
-  auto?: AutoMode;
-  background?: string;
-  blur?: number;
-  crop?: CropMode;
-  download?: boolean | string;
-  dpr?: Dpr;
-  fit?: FitMode;
-  flipHorizontal?: boolean;
-  flipVertical?: boolean;
-  focalPoint?: ArrayLike<number>;
-  format?: ImageFormat;
-  frame?: number;
-  height?: number;
-  invert?: boolean;
-  maxHeight?: number;
-  maxWidth?: number;
-  minHeight?: number;
-  minWidth?: number;
-  orientation?: Orientation;
-  pad?: number;
-  quality?: number;
-  rect?: RectLike;
-  saturation?: number;
-  sharpen?: number;
-  width?: number;
-};
-
-type ValidEntry = [string, string | number | boolean];
-
-function isValidEntry(entry: [unknown, unknown]): entry is ValidEntry {
-  return (
-    typeof entry[0] === "string" &&
-    ["string", "number", "boolean"].includes(typeof entry[1])
-  );
-}
-
-export function imageOptionsToSearchParamEntries({
-  auto,
-  background,
-  blur,
-  crop,
-  download,
-  dpr,
-  fit,
-  flipHorizontal,
-  flipVertical,
-  focalPoint,
-  format,
-  frame,
-  height,
-  invert,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-  orientation,
-  pad,
-  quality,
-  rect,
-  saturation,
-  sharpen,
-  width,
-}: ImageOptions): string[][] {
-  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(",")
-      : undefined,
-    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),
-    ]);
-}