@nonphoto/sanity-image 0.1.1 → 1.0.1

package/dist/index.d.ts

@@ -1,41 +1,31 @@
-import { SanityAsset, SanityImageDimensions, SanityImageCrop, SanityImageHotspot, SanityClientLike, SanityProjectDetails, SanityModernClientLike } from '@sanity/image-url/lib/types/types.js';
+import { SanityImageDimensions, SanityClientLike, SanityProjectDetails, SanityModernClientLike, SanityImageSource } from '@sanity/image-url/lib/types/types.js';
 
-type SanityAssetWithMetadata = SanityAsset & {
-    metadata?: {
-        lqip?: string;
-        dimensions?: SanityImageDimensions;
-    };
-};
-interface SanityImageObjectWithMetadata {
-    asset: SanityAssetWithMetadata;
-    crop?: SanityImageCrop;
-    hotspot?: SanityImageHotspot;
+interface Metadata {
+    lqip?: string;
+    dimensions?: SanityImageDimensions;
 }
-type Size = {
+interface Size {
     width: number;
     height: number;
-};
+}
 declare const defaultWidths: number[];
 declare const lowResWidth = 24;
 declare const defaultMetaImageWidth = 1200;
 declare const defaultQuality = 90;
-declare function imageProps({ image, client, widths, quality, aspectRatio, }: {
-    image: SanityImageObjectWithMetadata;
+interface ImagePropsOptions {
     client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    widths: number[];
+    image: SanityImageSource;
+    metadata?: Metadata;
+    widths?: number[];
     quality?: number;
     aspectRatio?: number;
-}): {
+}
+interface ImagePropsReturn {
     src: string;
-    srcset: string;
+    srcset?: string;
     naturalWidth?: number;
     naturalHeight?: number;
-};
-declare function metaImageUrl({ image, client, width, quality, }: {
-    image: SanityImageObjectWithMetadata;
-    client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
-    width: number;
-    quality?: number;
-}): string;
+}
+declare function imageProps({ client, image, metadata, widths, quality, aspectRatio, }: ImagePropsOptions): ImagePropsReturn;
 
-export { SanityAssetWithMetadata, SanityImageObjectWithMetadata, Size, defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };
+export { type ImagePropsOptions, type ImagePropsReturn, type Metadata, type Size, defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth };

package/dist/index.js

@@ -1,6 +1,5 @@
-import imageUrlBuilder from '@sanity/image-url';
-
 // src/index.ts
+import imageUrlBuilder from "@sanity/image-url";
 var defaultWidths = [
   6016,
   // 6K
@@ -52,42 +51,43 @@ function fit(containee, container, mode) {
 }
 function buildAspectRatio(builder, width, aspectRatio) {
   if (aspectRatio) {
-    return builder.width(width).height(width * 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";
+}
 function imageProps({
-  image,
   client,
+  image,
+  metadata,
   widths,
   quality = defaultQuality,
   aspectRatio
 }) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
   const builder = imageUrlBuilder(client).image(image).quality(quality).auto("format");
-  const metadata = image.asset.metadata;
-  const cropSize = image.crop && metadata?.dimensions ? {
-    width: metadata.dimensions.width - image.crop.left - image.crop.right,
-    height: metadata.dimensions.height - image.crop.top - image.crop.bottom
-  } : void 0;
-  const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
+  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();
   return {
-    src: metadata?.lqip ?? buildAspectRatio(builder, lowResWidth, aspectRatio).url(),
-    srcset: sortedWidths.map(
+    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(","),
+    ).join(",") : void 0,
     naturalWidth: naturalSize?.width,
     naturalHeight: naturalSize?.height
   };
 }
-function metaImageUrl({
-  image,
-  client,
-  width = defaultMetaImageWidth,
-  quality = defaultQuality
-}) {
-  return imageUrlBuilder(client).image(image).quality(quality).auto("format").width(width).url();
-}
-
-export { defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };
+export {
+  defaultMetaImageWidth,
+  defaultQuality,
+  defaultWidths,
+  imageProps,
+  lowResWidth
+};

package/package.json

@@ -1,54 +1,48 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "0.1.1",
+  "version": "1.0.1",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "private": false,
   "sideEffects": false,
-  "devDependencies": {
-    "@changesets/cli": "2.26.1",
-    "@types/node": "18.14.6",
-    "prettier": "2.8.7",
-    "tsup": "6.7.0",
-    "tsup-preset-solid": "0.1.8",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vitest": "0.29.8"
-  },
-  "dependencies": {
-    "@sanity/image-url": "1.0.2"
-  },
-  "packageManager": "pnpm@7.29.1",
   "publishConfig": {
     "access": "public"
   },
-  "browser": {},
   "exports": {
-    "development": {
+    ".": {
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/dev.js"
-      },
-      "require": "./dist/dev.cjs"
+        "default": "./dist/index.js"
+      }
     },
-    "import": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "require": "./dist/index.cjs"
+    "./src/*": "./src/*"
   },
-  "typesVersions": {},
-  "main": "./dist/index.cjs",
+  "files": [
+    "./dist/*",
+    "./src/*"
+  ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "dev": "vite serve dev",
-    "build": "tsup",
-    "test": "vitest",
-    "format": "prettier --ignore-path .gitignore -w \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"dev/**/*.{js,ts,json,css,tsx,jsx}\"",
-    "update-deps": "pnpm up -Li",
-    "typecheck": "tsc --noEmit"
+    "prepare": "pnpm build",
+    "build": "tsup ./src/index.ts --dts --format esm --clean",
+    "release": "semantic-release"
+  },
+  "keywords": [
+    "spring",
+    "physics",
+    "animation"
+  ],
+  "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"
+  },
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=9"
+  },
+  "dependencies": {
+    "@sanity/image-url": "1.0.2"
   }
-}
+}

package/src/index.ts

@@ -0,0 +1,156 @@
+import imageUrlBuilder from "@sanity/image-url";
+import { ImageUrlBuilder } from "@sanity/image-url/lib/types/builder";
+import type {
+  SanityClientLike,
+  SanityImageCrop,
+  SanityImageDimensions,
+  SanityImageSource,
+  SanityModernClientLike,
+  SanityProjectDetails,
+} from "@sanity/image-url/lib/types/types.js";
+
+export interface Metadata {
+  lqip?: string;
+  dimensions?: SanityImageDimensions;
+}
+
+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 lowResWidth = 24;
+
+export const defaultMetaImageWidth = 1200;
+
+export const defaultQuality = 90;
+
+const fitComparators = {
+  cover: Math.max,
+  contain: Math.min,
+  mean: (a: number, b: number) => (a + b) / 2,
+};
+
+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,
+  };
+}
+
+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 {
+  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"
+  );
+}
+
+export interface ImagePropsOptions {
+  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
+  image: SanityImageSource;
+  metadata?: Metadata;
+  widths?: number[];
+  quality?: number;
+  aspectRatio?: number;
+}
+
+export interface ImagePropsReturn {
+  src: string;
+  srcset?: string;
+  naturalWidth?: number;
+  naturalHeight?: number;
+}
+
+export function imageProps({
+  client,
+  image,
+  metadata,
+  widths,
+  quality = defaultQuality,
+  aspectRatio,
+}: ImagePropsOptions): ImagePropsReturn {
+  const builder = imageUrlBuilder(client)
+    .image(image)
+    .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;
+
+  const naturalSize = cropSize
+    ? aspectRatio
+      ? fit({ width: 1, height: aspectRatio }, cropSize, "contain")
+      : cropSize
+    : undefined;
+  const url = buildAspectRatio(builder, lowResWidth, aspectRatio).url();
+  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,
+  };
+}

package/dist/dev.cjs

@@ -1,100 +0,0 @@
-'use strict';
-
-var imageUrlBuilder = require('@sanity/image-url');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var imageUrlBuilder__default = /*#__PURE__*/_interopDefault(imageUrlBuilder);
-
-// src/index.ts
-exports.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
-];
-exports.lowResWidth = 24;
-exports.defaultMetaImageWidth = 1200;
-exports.defaultQuality = 90;
-var fitComparators = {
-  cover: Math.max,
-  contain: Math.min,
-  mean: (a, b) => (a + b) / 2
-};
-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 buildAspectRatio(builder, width, aspectRatio) {
-  if (aspectRatio) {
-    return builder.width(width).height(width * aspectRatio);
-  } else {
-    return builder.width(width);
-  }
-}
-function imageProps({
-  image,
-  client,
-  widths,
-  quality = exports.defaultQuality,
-  aspectRatio
-}) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
-  const builder = imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format");
-  const metadata = image.asset.metadata;
-  const cropSize = image.crop && metadata?.dimensions ? {
-    width: metadata.dimensions.width - image.crop.left - image.crop.right,
-    height: metadata.dimensions.height - image.crop.top - image.crop.bottom
-  } : void 0;
-  const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
-  return {
-    src: metadata?.lqip ?? buildAspectRatio(builder, exports.lowResWidth, aspectRatio).url(),
-    srcset: sortedWidths.map(
-      (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
-    ).join(","),
-    naturalWidth: naturalSize?.width,
-    naturalHeight: naturalSize?.height
-  };
-}
-function metaImageUrl({
-  image,
-  client,
-  width = exports.defaultMetaImageWidth,
-  quality = exports.defaultQuality
-}) {
-  return imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format").width(width).url();
-}
-
-exports.imageProps = imageProps;
-exports.metaImageUrl = metaImageUrl;

package/dist/dev.js

@@ -1,93 +0,0 @@
-import imageUrlBuilder from '@sanity/image-url';
-
-// src/index.ts
-var 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
-];
-var lowResWidth = 24;
-var defaultMetaImageWidth = 1200;
-var defaultQuality = 90;
-var fitComparators = {
-  cover: Math.max,
-  contain: Math.min,
-  mean: (a, b) => (a + b) / 2
-};
-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 buildAspectRatio(builder, width, aspectRatio) {
-  if (aspectRatio) {
-    return builder.width(width).height(width * aspectRatio);
-  } else {
-    return builder.width(width);
-  }
-}
-function imageProps({
-  image,
-  client,
-  widths,
-  quality = defaultQuality,
-  aspectRatio
-}) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
-  const builder = imageUrlBuilder(client).image(image).quality(quality).auto("format");
-  const metadata = image.asset.metadata;
-  const cropSize = image.crop && metadata?.dimensions ? {
-    width: metadata.dimensions.width - image.crop.left - image.crop.right,
-    height: metadata.dimensions.height - image.crop.top - image.crop.bottom
-  } : void 0;
-  const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
-  return {
-    src: metadata?.lqip ?? buildAspectRatio(builder, lowResWidth, aspectRatio).url(),
-    srcset: sortedWidths.map(
-      (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
-    ).join(","),
-    naturalWidth: naturalSize?.width,
-    naturalHeight: naturalSize?.height
-  };
-}
-function metaImageUrl({
-  image,
-  client,
-  width = defaultMetaImageWidth,
-  quality = defaultQuality
-}) {
-  return imageUrlBuilder(client).image(image).quality(quality).auto("format").width(width).url();
-}
-
-export { defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };

package/dist/index.cjs

@@ -1,100 +0,0 @@
-'use strict';
-
-var imageUrlBuilder = require('@sanity/image-url');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var imageUrlBuilder__default = /*#__PURE__*/_interopDefault(imageUrlBuilder);
-
-// src/index.ts
-exports.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
-];
-exports.lowResWidth = 24;
-exports.defaultMetaImageWidth = 1200;
-exports.defaultQuality = 90;
-var fitComparators = {
-  cover: Math.max,
-  contain: Math.min,
-  mean: (a, b) => (a + b) / 2
-};
-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 buildAspectRatio(builder, width, aspectRatio) {
-  if (aspectRatio) {
-    return builder.width(width).height(width * aspectRatio);
-  } else {
-    return builder.width(width);
-  }
-}
-function imageProps({
-  image,
-  client,
-  widths,
-  quality = exports.defaultQuality,
-  aspectRatio
-}) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
-  const builder = imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format");
-  const metadata = image.asset.metadata;
-  const cropSize = image.crop && metadata?.dimensions ? {
-    width: metadata.dimensions.width - image.crop.left - image.crop.right,
-    height: metadata.dimensions.height - image.crop.top - image.crop.bottom
-  } : void 0;
-  const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
-  return {
-    src: metadata?.lqip ?? buildAspectRatio(builder, exports.lowResWidth, aspectRatio).url(),
-    srcset: sortedWidths.map(
-      (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
-    ).join(","),
-    naturalWidth: naturalSize?.width,
-    naturalHeight: naturalSize?.height
-  };
-}
-function metaImageUrl({
-  image,
-  client,
-  width = exports.defaultMetaImageWidth,
-  quality = exports.defaultQuality
-}) {
-  return imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format").width(width).url();
-}
-
-exports.imageProps = imageProps;
-exports.metaImageUrl = metaImageUrl;