@nonphoto/sanity-image 1.0.0 → 2.0.0

package/dist/index.d.ts

@@ -1,29 +1,58 @@
-import { SanityImageDimensions, SanityClientLike, SanityProjectDetails, SanityModernClientLike, SanityImageSource } from '@sanity/image-url/lib/types/types.js';
+import { SanityImageObject, SanityImageDimensions, SanityImageCrop, SanityImageHotspot, SanityReference, SanityAsset, SanityClientLike, SanityProjectDetails, SanityModernClientLike, SanityImageSource } from '@sanity/image-url/lib/types/types.js';
 
-interface Metadata {
+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 lowResWidth = 24;
-declare const defaultMetaImageWidth = 1200;
+declare const defaultWidth = 1280;
 declare const defaultQuality = 90;
-declare function imageProps({ client, image, metadata, widths, quality, aspectRatio, }: {
+declare const fitComparators: {
+    cover: (...values: number[]) => number;
+    contain: (...values: number[]) => number;
+};
+declare function fit(containee: Size, container: Size, mode: keyof typeof fitComparators): {
+    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;
+}
+declare function imageSrc({ client, source, width, quality, aspectRatio, }: ImageSrcOptions): string;
+interface ImageSrcsetOptions {
     client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    image: SanityImageSource;
-    metadata?: Metadata;
+    source: SanityImageSource;
     widths?: number[];
     quality?: number;
     aspectRatio?: number;
-}): {
-    src: string;
-    srcset?: string;
-    naturalWidth?: number;
-    naturalHeight?: number;
-};
+}
+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;
 
-export { type Metadata, type Size, defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth };
+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 };

package/dist/index.js

@@ -32,13 +32,11 @@ var defaultWidths = [
   360,
   240
 ];
-var lowResWidth = 24;
-var defaultMetaImageWidth = 1200;
+var defaultWidth = 1280;
 var defaultQuality = 90;
 var fitComparators = {
   cover: Math.max,
-  contain: Math.min,
-  mean: (a, b) => (a + b) / 2
+  contain: Math.min
 };
 function fit(containee, container, mode) {
   const sx = container.width / containee.width;
@@ -49,45 +47,101 @@ function fit(containee, container, mode) {
     height: containee.height * s
   };
 }
-function buildAspectRatio(builder, width, aspectRatio) {
-  if (aspectRatio) {
-    return builder.width(width).height(Math.round(width * aspectRatio));
-  } else {
-    return builder.width(width);
-  }
-}
 function isCrop(x) {
-  return x && 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";
+  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) || isReference(x));
+}
+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 imageProps({
+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,
-  image,
-  metadata,
-  widths,
+  source,
+  width,
   quality = defaultQuality,
-  aspectRatio
+  aspectRatio: aspectRatio2
 }) {
-  const builder = imageUrlBuilder(client).image(image).quality(quality).auto("format");
-  const crop = typeof image == "object" && "crop" in image && isCrop(image.crop) ? image.crop : void 0;
-  const cropSize = metadata?.dimensions ? crop ? {
-    width: metadata.dimensions.width - crop.left - crop.right,
-    height: metadata.dimensions.height - crop.top - crop.bottom
-  } : metadata.dimensions : void 0;
-  const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : void 0;
-  const url = buildAspectRatio(builder, lowResWidth, aspectRatio).url();
+  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();
+    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 {
-    src: widths ? url : metadata?.lqip ?? url,
-    srcset: widths ? Array.from(widths).sort((a, b) => a - b).map(
-      (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
-    ).join(",") : void 0,
-    naturalWidth: naturalSize?.width,
-    naturalHeight: naturalSize?.height
+    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 {
-  defaultMetaImageWidth,
+  aspectRatio,
+  croppedSize,
   defaultQuality,
+  defaultWidth,
   defaultWidths,
-  imageProps,
-  lowResWidth
+  fit,
+  fitComparators,
+  imageAlt,
+  imageAspectRatio,
+  imageCroppedSize,
+  imageMetadata,
+  imageSrc,
+  imageSrcset,
+  isAsset,
+  isCrop,
+  isDimensions,
+  isHotspot,
+  isImageObject,
+  isImageObjectLike,
+  isMetadata,
+  isReference,
+  isSize
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {
@@ -34,15 +34,15 @@
   "author": "Jonas Luebbers <jonas@jonasluebbers.com> (https://www.jonasluebbers.com)",
   "license": "MIT",
   "devDependencies": {
-    "semantic-release": "24.2.3",
-    "tsup": "8.4.0",
-    "typescript": "5.8.2"
+    "semantic-release": "24.2.7",
+    "tsup": "8.5.0",
+    "typescript": "5.9.2"
   },
   "engines": {
     "node": ">=20",
     "pnpm": ">=9"
   },
   "dependencies": {
-    "@sanity/image-url": "1.0.2"
+    "@sanity/image-url": "^1.1.0"
   }
 }

package/src/index.ts

@@ -1,17 +1,26 @@
 import imageUrlBuilder from "@sanity/image-url";
-import { ImageUrlBuilder } from "@sanity/image-url/lib/types/builder";
 import type {
+  SanityAsset,
   SanityClientLike,
   SanityImageCrop,
   SanityImageDimensions,
+  SanityImageHotspot,
+  SanityImageObject,
   SanityImageSource,
   SanityModernClientLike,
   SanityProjectDetails,
+  SanityReference,
 } from "@sanity/image-url/lib/types/types.js";
 
-export interface Metadata {
+export interface SanityImageObjectLike
+  extends Pick<SanityImageObject, "asset"> {
+  [key: string]: any;
+}
+
+export interface SanityImageMetadata {
   lqip?: string;
   dimensions?: SanityImageDimensions;
+  [key: string]: any;
 }
 
 export interface Size {
@@ -39,19 +48,17 @@ export const defaultWidths = [
   240,
 ];
 
-export const lowResWidth = 24;
-
-export const defaultMetaImageWidth = 1200;
+export const defaultWidth = 1280;
 
 export const defaultQuality = 90;
 
-const fitComparators = {
+export const fitComparators = {
   cover: Math.max,
   contain: Math.min,
-  mean: (a: number, b: number) => (a + b) / 2,
 };
 
-function fit(
+// TODO: impement comparators for every FitMode
+export function fit(
   containee: Size,
   container: Size,
   mode: keyof typeof fitComparators
@@ -65,21 +72,9 @@ function fit(
   };
 }
 
-function buildAspectRatio(
-  builder: ImageUrlBuilder,
-  width: number,
-  aspectRatio?: number
-) {
-  if (aspectRatio) {
-    return builder.width(width).height(Math.round(width * aspectRatio));
-  } else {
-    return builder.width(width);
-  }
-}
-
-function isCrop(x: any): x is SanityImageCrop {
+export function isCrop(x: unknown): x is SanityImageCrop {
   return (
-    x &&
+    x != null &&
     typeof x == "object" &&
     "top" in x &&
     typeof x.top === "number" &&
@@ -88,65 +83,196 @@ function isCrop(x: any): x is SanityImageCrop {
     "bottom" in x &&
     typeof x.bottom === "number" &&
     "left" in x &&
-    typeof x.left === "number"
+    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) || isReference(x))
+  );
+}
+
+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 imageProps({
+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,
-  image,
-  metadata,
-  widths,
+  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;
-  image: SanityImageSource;
-  metadata?: Metadata;
+  source: SanityImageSource;
   widths?: number[];
   quality?: number;
   aspectRatio?: number;
-}): {
-  src: string;
-  srcset?: string;
-  naturalWidth?: number;
-  naturalHeight?: number;
-} {
+}
+
+export function imageSrcset({
+  client,
+  source,
+  widths = defaultWidths,
+  quality = defaultQuality,
+  aspectRatio,
+}: ImageSrcsetOptions): string {
   const builder = imageUrlBuilder(client)
-    .image(image)
+    .image(source)
     .quality(quality)
     .auto("format");
-  const crop =
-    typeof image == "object" && "crop" in image && isCrop(image.crop)
-      ? image.crop
-      : undefined;
-  const cropSize = metadata?.dimensions
-    ? crop
-      ? {
-          width: metadata.dimensions.width - crop.left - crop.right,
-          height: metadata.dimensions.height - crop.top - crop.bottom,
-        }
-      : metadata.dimensions
-    : undefined;
+  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(",");
+}
 
-  const naturalSize = cropSize
-    ? aspectRatio
-      ? fit({ width: 1, height: aspectRatio }, cropSize, "contain")
-      : cropSize
+export function imageAlt(source: SanityImageSource): string | undefined {
+  return isImageObjectLike(source) &&
+    "alt" in source &&
+    typeof source.alt === "string"
+    ? source.alt
     : undefined;
-  const url = buildAspectRatio(builder, lowResWidth, aspectRatio).url();
+}
+
+export function croppedSize(intrinsicSize: Size, crop: SanityImageCrop): Size {
   return {
-    src: widths ? url : metadata?.lqip ?? url,
-    srcset: widths
-      ? Array.from(widths)
-          .sort((a, b) => a - b)
-          .map(
-            (width) =>
-              `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
-          )
-          .join(",")
-      : undefined,
-    naturalWidth: naturalSize?.width,
-    naturalHeight: naturalSize?.height,
+    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;
+}