@nonphoto/sanity-image 2.0.1 → 3.0.0

package/dist/index.d.ts

@@ -1,58 +1,63 @@
-import { SanityImageObject, SanityImageDimensions, SanityImageCrop, SanityImageHotspot, SanityReference, SanityAsset, SanityClientLike, SanityProjectDetails, SanityModernClientLike, SanityImageSource } from '@sanity/image-url/lib/types/types.js';
-
-interface SanityImageObjectLike extends Pick<SanityImageObject, "asset"> {
-    [key: string]: any;
-}
-interface SanityImageMetadata {
-    lqip?: string;
-    dimensions?: SanityImageDimensions;
-    [key: string]: any;
-}
-interface Size {
-    width: number;
-    height: number;
-}
-declare const defaultWidths: number[];
-declare const defaultWidth = 1280;
-declare const defaultQuality = 90;
-declare const fitComparators: {
-    cover: (...values: number[]) => number;
-    contain: (...values: number[]) => number;
+type ImageFormat = "jpg" | "pjpg" | "png" | "webp";
+type FitMode = "clip" | "crop" | "fill" | "fillmax" | "max" | "scale" | "min";
+type CropMode = "top" | "bottom" | "left" | "right" | "center" | "focalpoint" | "entropy";
+type AutoMode = "format";
+type Orientation = 0 | 90 | 180 | 270;
+type Dpr = 1 | 2 | 3;
+type SanityImageParams = {
+    auto?: AutoMode;
+    background?: string;
+    blur?: number;
+    crop?: CropMode;
+    download?: boolean | string;
+    dpr?: Dpr;
+    fit?: FitMode;
+    flipHorizontal?: boolean;
+    flipVertical?: boolean;
+    focalPoint?: {
+        x: number;
+        y: number;
+    };
+    format?: ImageFormat;
+    frame?: number;
+    height?: number;
+    invert?: boolean;
+    maxHeight?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    minWidth?: number;
+    orientation?: Orientation;
+    pad?: number;
+    quality?: number;
+    rect?: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    saturation?: number;
+    sharpen?: number;
+    width?: number;
 };
-declare function fit(containee: Size, container: Size, mode: keyof typeof fitComparators): {
+declare function sanityImageParamsToSearchParamEntries({ 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, }: SanityImageParams): string[][];
+
+interface SanityImageAssetStub {
+    id: string;
     width: number;
     height: number;
-};
-declare function isCrop(x: unknown): x is SanityImageCrop;
-declare function isHotspot(x: unknown): x is SanityImageHotspot;
-declare function isImageObjectLike(x: unknown): x is SanityImageObjectLike;
-declare function isImageObject(x: unknown): x is SanityImageObject;
-declare function isReference(x: unknown): x is SanityReference;
-declare function isAsset(x: unknown): x is SanityAsset;
-declare function isDimensions(x: unknown): x is SanityImageDimensions;
-declare function isSize(x: unknown): x is Size;
-declare function isMetadata(x: unknown): x is SanityImageMetadata;
-interface ImageSrcOptions {
-    client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    source: SanityImageSource;
-    width: number;
-    quality?: number;
-    aspectRatio?: number;
+    format: string;
+    vanityName?: string;
 }
-declare function imageSrc({ client, source, width, quality, aspectRatio, }: ImageSrcOptions): string;
-interface ImageSrcsetOptions {
-    client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    source: SanityImageSource;
-    widths?: number[];
-    quality?: number;
-    aspectRatio?: number;
+declare function parseSanityImageAssetId(assetId: string): SanityImageAssetStub | undefined;
+declare function sanityImageAssetStub(source: unknown): SanityImageAssetStub | undefined;
+declare function sanityImageAssetId(source: unknown): string | undefined;
+
+declare const defaultSrcsetWidths: number[];
+interface SanityClientLike {
+    projectId: string;
+    dataset: string;
 }
-declare function imageSrcset({ client, source, widths, quality, aspectRatio, }: ImageSrcsetOptions): string;
-declare function imageAlt(source: SanityImageSource): string | undefined;
-declare function croppedSize(intrinsicSize: Size, crop: SanityImageCrop): Size;
-declare function aspectRatio(size: Size): number;
-declare function imageMetadata(source: SanityImageSource): SanityImageMetadata | undefined;
-declare function imageCroppedSize(source: SanityImageSource): Size | undefined;
-declare function imageAspectRatio(source: SanityImageSource): number | undefined;
+declare function sanityImageUrl(client: SanityClientLike, image: SanityImageAssetStub, params?: SanityImageParams): string;
+declare function sanityImageSrcset(client: SanityClientLike, image: SanityImageAssetStub, params?: Omit<SanityImageParams, "width">, widths?: number[]): string;
 
-export { type ImageSrcOptions, type ImageSrcsetOptions, type SanityImageMetadata, type SanityImageObjectLike, type Size, aspectRatio, croppedSize, defaultQuality, defaultWidth, defaultWidths, fit, fitComparators, imageAlt, imageAspectRatio, imageCroppedSize, imageMetadata, imageSrc, imageSrcset, isAsset, isCrop, isDimensions, isHotspot, isImageObject, isImageObjectLike, isMetadata, isReference, isSize };
+export { type AutoMode, type CropMode, type Dpr, type FitMode, type ImageFormat, type Orientation, type SanityClientLike, type SanityImageAssetStub, type SanityImageParams, defaultSrcsetWidths, parseSanityImageAssetId, sanityImageAssetId, sanityImageAssetStub, sanityImageParamsToSearchParamEntries, sanityImageSrcset, sanityImageUrl };

package/dist/index.js

@@ -1,6 +1,83 @@
-// src/index.ts
-import imageUrlBuilder from "@sanity/image-url";
-var defaultWidths = [
+// src/params.ts
+function sanityImageParamsToSearchParamEntries({
+  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
+}) {
+  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
+    )
+  ]);
+}
+
+// src/stub.ts
+function parseSanityImageAssetId(assetId) {
+  const matches = assetId.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, id, width, height, format] = matches;
+    return { id, width: Number(width), height: Number(height), format };
+  }
+}
+function sanityImageAssetStub(source) {
+  const id = sanityImageAssetId(source);
+  return id ? parseSanityImageAssetId(id) : void 0;
+}
+function sanityImageAssetId(source) {
+  return typeof source === "string" ? source : typeof source === "object" && source != null ? "_ref" in source && typeof source._ref === "string" ? source._ref : "_id" in source && typeof source._id === "string" ? source._id : "asset" in source ? sanityImageAssetId(source.asset) : void 0 : void 0;
+}
+
+// src/url.ts
+var defaultSrcsetWidths = [
   6016,
   // 6K
   5120,
@@ -32,116 +109,43 @@ var defaultWidths = [
   360,
   240
 ];
-var defaultWidth = 1280;
-var defaultQuality = 90;
-var fitComparators = {
-  cover: Math.max,
-  contain: Math.min
-};
-function fit(containee, container, mode) {
-  const sx = container.width / containee.width;
-  const sy = container.height / containee.height;
-  const s = fitComparators[mode](sx, sy);
-  return {
-    width: containee.width * s,
-    height: containee.height * s
-  };
-}
-function isCrop(x) {
-  return x != null && typeof x == "object" && "top" in x && typeof x.top === "number" && "right" in x && typeof x.right === "number" && "bottom" in x && typeof x.bottom === "number" && "left" in x && typeof x.left === "number" && ("_type" in x ? typeof x._type === "undefined" || typeof x._type === "string" : true);
-}
-function isHotspot(x) {
-  return x != null && typeof x == "object" && "width" in x && typeof x.width === "number" && "height" in x && typeof x.height === "number" && "x" in x && typeof x.x === "number" && "y" in x && typeof x.y === "number" && ("_type" in x ? typeof x._type === "undefined" || typeof x._type === "string" : true);
-}
-function isImageObjectLike(x) {
-  return x != null && typeof x === "object" && "asset" in x && (isAsset(x.asset) || isReference(x.asset));
-}
-function isImageObject(x) {
-  return isImageObjectLike(x) && ("crop" in x ? typeof x.crop === "undefined" || isCrop(x.crop) : true) && ("hotspot" in x ? typeof x.hotspot === "undefined" || isHotspot(x.hotspot) : true);
-}
-function isReference(x) {
-  return x != null && typeof x === "object" && "_ref" in x && typeof x._ref === "string";
-}
-function isAsset(x) {
-  return x != null && typeof x === "object" && "_type" in x && x._type === "sanity.asset";
-}
-function isDimensions(x) {
-  return x != null && typeof x === "object" && "aspectRatio" in x && typeof x.aspectRatio === "number" && "width" in x && typeof x.width === "number" && "height" in x && typeof x.height === "number";
-}
-function isSize(x) {
-  return x != null && typeof x === "object" && "width" in x && typeof x.width === "number" && "height" in x && typeof x.height === "number";
-}
-function isMetadata(x) {
-  return x != null && typeof x === "object" && "lqip" in x && typeof x.lqip === "string" && "dimensions" in x && isDimensions(x.dimensions);
-}
-function imageSrc({
-  client,
-  source,
-  width,
-  quality = defaultQuality,
-  aspectRatio: aspectRatio2
-}) {
-  const builder = imageUrlBuilder(client).image(source).quality(quality).auto("format").width(width);
-  return (aspectRatio2 ? builder.height(width * aspectRatio2) : builder).url();
-}
-function imageSrcset({
-  client,
-  source,
-  widths = defaultWidths,
-  quality = defaultQuality,
-  aspectRatio: aspectRatio2
-}) {
-  const builder = imageUrlBuilder(client).image(source).quality(quality).auto("format");
-  return widths.sort((a, b) => a - b).map((width) => {
-    const url = (aspectRatio2 ? builder.height(width * aspectRatio2) : builder).width(width).url();
+function sanityImageUrl(client, image, params) {
+  const url = new URL(
+    [
+      `https://cdn.sanity.io/images`,
+      client.projectId,
+      client.dataset,
+      `${image.id}-${image.width}x${image.height}.${image.format}`,
+      image.vanityName
+    ].filter(Boolean).join("/")
+  );
+  if (params) {
+    url.search = new URLSearchParams(
+      sanityImageParamsToSearchParamEntries(params)
+    ).toString();
+  }
+  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
+    });
     return `${url} ${width}w`;
   }).join(",");
 }
-function imageAlt(source) {
-  return isImageObjectLike(source) && "alt" in source && typeof source.alt === "string" ? source.alt : void 0;
-}
-function croppedSize(intrinsicSize, crop) {
-  return {
-    width: intrinsicSize.width - crop.left - crop.right,
-    height: intrinsicSize.height - crop.top - crop.bottom
-  };
-}
-function aspectRatio(size) {
-  return size.height / size.width;
-}
-function imageMetadata(source) {
-  const asset = isImageObjectLike(source) ? source.asset : source;
-  return isAsset(asset) && isMetadata(asset.metadata) ? asset.metadata : void 0;
-}
-function imageCroppedSize(source) {
-  const metadata = imageMetadata(source);
-  return metadata?.dimensions ? isImageObject(source) && source.crop != null ? croppedSize(metadata.dimensions, source.crop) : metadata.dimensions : void 0;
-}
-function imageAspectRatio(source) {
-  const size = imageCroppedSize(source);
-  return size ? aspectRatio(size) : void 0;
-}
 export {
-  aspectRatio,
-  croppedSize,
-  defaultQuality,
-  defaultWidth,
-  defaultWidths,
-  fit,
-  fitComparators,
-  imageAlt,
-  imageAspectRatio,
-  imageCroppedSize,
-  imageMetadata,
-  imageSrc,
-  imageSrcset,
-  isAsset,
-  isCrop,
-  isDimensions,
-  isHotspot,
-  isImageObject,
-  isImageObjectLike,
-  isMetadata,
-  isReference,
-  isSize
+  defaultSrcsetWidths,
+  parseSanityImageAssetId,
+  sanityImageAssetId,
+  sanityImageAssetStub,
+  sanityImageParamsToSearchParamEntries,
+  sanityImageSrcset,
+  sanityImageUrl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "author": "Jonas Luebbers <jonas@jonasluebbers.com> (https://www.jonasluebbers.com)",
   "license": "MIT",
   "type": "module",
@@ -28,9 +28,6 @@
     "build": "tsup ./src/index.ts --dts --format esm --clean",
     "release": "semantic-release"
   },
-  "dependencies": {
-    "@sanity/image-url": "^1.1.0"
-  },
   "devDependencies": {
     "semantic-release": "24.2.7",
     "tsup": "8.5.0",

package/src/index.ts

@@ -1,278 +1,3 @@
-import imageUrlBuilder from "@sanity/image-url";
-import type {
-  SanityAsset,
-  SanityClientLike,
-  SanityImageCrop,
-  SanityImageDimensions,
-  SanityImageHotspot,
-  SanityImageObject,
-  SanityImageSource,
-  SanityModernClientLike,
-  SanityProjectDetails,
-  SanityReference,
-} from "@sanity/image-url/lib/types/types.js";
-
-export interface SanityImageObjectLike
-  extends Pick<SanityImageObject, "asset"> {
-  [key: string]: any;
-}
-
-export interface SanityImageMetadata {
-  lqip?: string;
-  dimensions?: SanityImageDimensions;
-  [key: string]: any;
-}
-
-export interface Size {
-  width: number;
-  height: number;
-}
-
-export const defaultWidths = [
-  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 defaultWidth = 1280;
-
-export const defaultQuality = 90;
-
-export const fitComparators = {
-  cover: Math.max,
-  contain: Math.min,
-};
-
-// TODO: impement comparators for every FitMode
-export function fit(
-  containee: Size,
-  container: Size,
-  mode: keyof typeof fitComparators
-) {
-  const sx = container.width / containee.width;
-  const sy = container.height / containee.height;
-  const s = fitComparators[mode](sx, sy);
-  return {
-    width: containee.width * s,
-    height: containee.height * s,
-  };
-}
-
-export function isCrop(x: unknown): x is SanityImageCrop {
-  return (
-    x != null &&
-    typeof x == "object" &&
-    "top" in x &&
-    typeof x.top === "number" &&
-    "right" in x &&
-    typeof x.right === "number" &&
-    "bottom" in x &&
-    typeof x.bottom === "number" &&
-    "left" in x &&
-    typeof x.left === "number" &&
-    ("_type" in x
-      ? typeof x._type === "undefined" || typeof x._type === "string"
-      : true)
-  );
-}
-
-export function isHotspot(x: unknown): x is SanityImageHotspot {
-  return (
-    x != null &&
-    typeof x == "object" &&
-    "width" in x &&
-    typeof x.width === "number" &&
-    "height" in x &&
-    typeof x.height === "number" &&
-    "x" in x &&
-    typeof x.x === "number" &&
-    "y" in x &&
-    typeof x.y === "number" &&
-    ("_type" in x
-      ? typeof x._type === "undefined" || typeof x._type === "string"
-      : true)
-  );
-}
-
-export function isImageObjectLike(x: unknown): x is SanityImageObjectLike {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "asset" in x &&
-    (isAsset(x.asset) || isReference(x.asset))
-  );
-}
-
-export function isImageObject(x: unknown): x is SanityImageObject {
-  return (
-    isImageObjectLike(x) &&
-    ("crop" in x ? typeof x.crop === "undefined" || isCrop(x.crop) : true) &&
-    ("hotspot" in x
-      ? typeof x.hotspot === "undefined" || isHotspot(x.hotspot)
-      : true)
-  );
-}
-
-export function isReference(x: unknown): x is SanityReference {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "_ref" in x &&
-    typeof x._ref === "string"
-  );
-}
-
-export function isAsset(x: unknown): x is SanityAsset {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "_type" in x &&
-    x._type === "sanity.asset"
-  );
-}
-
-export function isDimensions(x: unknown): x is SanityImageDimensions {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "aspectRatio" in x &&
-    typeof x.aspectRatio === "number" &&
-    "width" in x &&
-    typeof x.width === "number" &&
-    "height" in x &&
-    typeof x.height === "number"
-  );
-}
-
-export function isSize(x: unknown): x is Size {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "width" in x &&
-    typeof x.width === "number" &&
-    "height" in x &&
-    typeof x.height === "number"
-  );
-}
-
-export function isMetadata(x: unknown): x is SanityImageMetadata {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "lqip" in x &&
-    typeof x.lqip === "string" &&
-    "dimensions" in x &&
-    isDimensions(x.dimensions)
-  );
-}
-
-export interface ImageSrcOptions {
-  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-  source: SanityImageSource;
-  width: number;
-  quality?: number;
-  aspectRatio?: number;
-}
-
-export function imageSrc({
-  client,
-  source,
-  width,
-  quality = defaultQuality,
-  aspectRatio,
-}: ImageSrcOptions): string {
-  const builder = imageUrlBuilder(client)
-    .image(source)
-    .quality(quality)
-    .auto("format")
-    .width(width);
-  return (aspectRatio ? builder.height(width * aspectRatio) : builder).url();
-}
-
-export interface ImageSrcsetOptions {
-  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-  source: SanityImageSource;
-  widths?: number[];
-  quality?: number;
-  aspectRatio?: number;
-}
-
-export function imageSrcset({
-  client,
-  source,
-  widths = defaultWidths,
-  quality = defaultQuality,
-  aspectRatio,
-}: ImageSrcsetOptions): string {
-  const builder = imageUrlBuilder(client)
-    .image(source)
-    .quality(quality)
-    .auto("format");
-  return widths
-    .sort((a, b) => a - b)
-    .map((width) => {
-      const url = (aspectRatio ? builder.height(width * aspectRatio) : builder)
-        .width(width)
-        .url();
-      return `${url} ${width}w`;
-    })
-    .join(",");
-}
-
-export function imageAlt(source: SanityImageSource): string | undefined {
-  return isImageObjectLike(source) &&
-    "alt" in source &&
-    typeof source.alt === "string"
-    ? source.alt
-    : undefined;
-}
-
-export function croppedSize(intrinsicSize: Size, crop: SanityImageCrop): Size {
-  return {
-    width: intrinsicSize.width - crop.left - crop.right,
-    height: intrinsicSize.height - crop.top - crop.bottom,
-  };
-}
-
-export function aspectRatio(size: Size): number {
-  return size.height / size.width;
-}
-
-export function imageMetadata(
-  source: SanityImageSource
-): SanityImageMetadata | undefined {
-  const asset = isImageObjectLike(source) ? source.asset : source;
-  return isAsset(asset) && isMetadata(asset.metadata)
-    ? asset.metadata
-    : undefined;
-}
-
-export function imageCroppedSize(source: SanityImageSource): Size | undefined {
-  const metadata = imageMetadata(source);
-  return metadata?.dimensions
-    ? isImageObject(source) && source.crop != null
-      ? croppedSize(metadata.dimensions, source.crop)
-      : metadata.dimensions
-    : undefined;
-}
-
-export function imageAspectRatio(
-  source: SanityImageSource
-): number | undefined {
-  const size = imageCroppedSize(source);
-  return size ? aspectRatio(size) : undefined;
-}
+export * from "./params";
+export * from "./stub";
+export * from "./url";

package/src/params.ts

@@ -0,0 +1,118 @@
+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 SanityImageParams = {
+  auto?: AutoMode;
+  background?: string;
+  blur?: number;
+  crop?: CropMode;
+  download?: boolean | string;
+  dpr?: Dpr;
+  fit?: FitMode;
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  focalPoint?: { x: number; y: number };
+  format?: ImageFormat;
+  frame?: number;
+  height?: number;
+  invert?: boolean;
+  maxHeight?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  minWidth?: number;
+  orientation?: Orientation;
+  pad?: number;
+  quality?: number;
+  rect?: { left: number; top: number; width: number; height: number };
+  saturation?: number;
+  sharpen?: number;
+  width?: number;
+};
+
+export function sanityImageParamsToSearchParamEntries({
+  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,
+}: SanityImageParams): 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?.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(",")
+      : undefined,
+    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 as string)
+      ),
+    ]);
+}

package/src/stub.ts

@@ -0,0 +1,38 @@
+export interface SanityImageAssetStub {
+  id: string;
+  width: number;
+  height: number;
+  format: string;
+  vanityName?: string;
+}
+
+export function parseSanityImageAssetId(
+  assetId: string
+): SanityImageAssetStub | undefined {
+  const matches = assetId.match(/^image-(\w+)-(\d+)x(\d+)-(\w+)$/);
+  if (matches) {
+    const [, id, width, height, format] = matches;
+    return { id, width: Number(width), height: Number(height), format };
+  }
+}
+
+export function sanityImageAssetStub(
+  source: unknown
+): SanityImageAssetStub | undefined {
+  const id = sanityImageAssetId(source);
+  return id ? parseSanityImageAssetId(id) : undefined;
+}
+
+export function sanityImageAssetId(source: unknown): string | undefined {
+  return typeof source === "string"
+    ? source
+    : typeof source === "object" && source != null
+    ? "_ref" in source && typeof source._ref === "string"
+      ? source._ref
+      : "_id" in source && typeof source._id === "string"
+      ? source._id
+      : "asset" in source
+      ? sanityImageAssetId(source.asset)
+      : undefined
+    : undefined;
+}

package/src/url.ts

@@ -0,0 +1,76 @@
+import {
+  SanityImageParams,
+  sanityImageParamsToSearchParamEntries,
+} from "./params";
+import { SanityImageAssetStub } from "./stub";
+
+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 interface SanityClientLike {
+  projectId: string;
+  dataset: string;
+}
+
+export function sanityImageUrl(
+  client: SanityClientLike,
+  image: SanityImageAssetStub,
+  params?: SanityImageParams
+): string {
+  const url = new URL(
+    [
+      `https://cdn.sanity.io/images`,
+      client.projectId,
+      client.dataset,
+      `${image.id}-${image.width}x${image.height}.${image.format}`,
+      image.vanityName,
+    ]
+      .filter(Boolean)
+      .join("/")
+  );
+  if (params) {
+    url.search = new URLSearchParams(
+      sanityImageParamsToSearchParamEntries(params)
+    ).toString();
+  }
+  return url.href;
+}
+
+export function sanityImageSrcset(
+  client: SanityClientLike,
+  image: SanityImageAssetStub,
+  params?: Omit<SanityImageParams, "width">,
+  widths: number[] = defaultSrcsetWidths
+): string {
+  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,
+      });
+      return `${url} ${width}w`;
+    })
+    .join(",");
+}