@nonphoto/sanity-image 0.0.6 → 0.1.0

package/dist/index.d.ts

@@ -1,14 +1,30 @@
-import { SanityImageSource, SanityClientLike, SanityProjectDetails, SanityModernClientLike } from '@sanity/image-url/lib/types/types.js';
+import { SanityAsset, SanityImageDimensions, SanityImageCrop, SanityImageHotspot, SanityClientLike, SanityProjectDetails, SanityModernClientLike } from '@sanity/image-url/lib/types/types.js';
 
+type SanityAssetWithMetadata = SanityAsset & {
+    metadata?: {
+        lqip?: string;
+        dimensions?: SanityImageDimensions;
+    };
+};
+interface SanityImageObjectWithMetadata {
+    asset: SanityAssetWithMetadata;
+    crop?: SanityImageCrop;
+    hotspot?: SanityImageHotspot;
+}
+type 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, }: {
-    image: SanityImageSource;
+declare function imageProps({ image, client, widths, quality, aspectRatio, }: {
+    image: SanityImageObjectWithMetadata;
     client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
     widths: number[];
     quality?: number;
+    aspectRatio?: number;
 }): {
     src: string;
     srcset: string;
@@ -16,10 +32,10 @@ declare function imageProps({ image, client, widths, quality, }: {
     naturalHeight?: number;
 };
 declare function metaImageUrl({ image, client, width, quality, }: {
-    image: SanityImageSource;
+    image: SanityImageObjectWithMetadata;
     client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
     width: number;
     quality?: number;
 }): string;
 
-export { defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };
+export { type SanityAssetWithMetadata, type SanityImageObjectWithMetadata, type Size, defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };

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
@@ -36,32 +35,49 @@ var defaultWidths = [
 var lowResWidth = 24;
 var defaultMetaImageWidth = 1200;
 var defaultQuality = 90;
-function cropAxis(length, insetStart, insetEnd) {
-  return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
+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(Math.round(width * aspectRatio));
+  } else {
+    return builder.width(width);
+  }
 }
 function imageProps({
   image,
   client,
   widths,
-  quality = defaultQuality
+  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 = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
-  const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
+  const metadata = image.asset.metadata;
+  const cropSize = metadata?.dimensions ? image.crop ? {
+    width: metadata.dimensions.width - image.crop.left - image.crop.right,
+    height: metadata.dimensions.height - image.crop.top - image.crop.bottom
+  } : metadata.dimensions : void 0;
+  const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : void 0;
   return {
-    src: metadata?.lqip ?? builder.width(lowResWidth).url().toString(),
-    srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
-    naturalWidth: cropAxis(
-      metadata?.dimensions?.width,
-      crop?.left,
-      crop?.right
-    ),
-    naturalHeight: cropAxis(
-      metadata?.dimensions?.height,
-      crop?.top,
-      crop?.bottom
-    )
+    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({
@@ -72,5 +88,11 @@ function metaImageUrl({
 }) {
   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,
+  metaImageUrl
+};

package/package.json

@@ -1,54 +1,48 @@
 {
   "name": "@nonphoto/sanity-image",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "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,164 @@
+import imageUrlBuilder from "@sanity/image-url";
+import { ImageUrlBuilder } from "@sanity/image-url/lib/types/builder";
+import type {
+  SanityAsset,
+  SanityClientLike,
+  SanityImageCrop,
+  SanityImageDimensions,
+  SanityImageHotspot,
+  SanityModernClientLike,
+  SanityProjectDetails,
+} from "@sanity/image-url/lib/types/types.js";
+
+export type SanityAssetWithMetadata = SanityAsset & {
+  metadata?: {
+    lqip?: string;
+    dimensions?: SanityImageDimensions;
+  };
+};
+
+export interface SanityImageObjectWithMetadata {
+  asset: SanityAssetWithMetadata;
+  crop?: SanityImageCrop;
+  hotspot?: SanityImageHotspot;
+}
+
+export type 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);
+  }
+}
+
+export function imageProps({
+  image,
+  client,
+  widths,
+  quality = defaultQuality,
+  aspectRatio,
+}: {
+  image: SanityImageObjectWithMetadata;
+  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
+  widths: number[];
+  quality?: number;
+  aspectRatio?: number;
+}): {
+  src: string;
+  srcset: string;
+  naturalWidth?: number;
+  naturalHeight?: number;
+} {
+  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 = metadata?.dimensions
+    ? image.crop
+      ? {
+          width: metadata.dimensions.width - image.crop.left - image.crop.right,
+          height:
+            metadata.dimensions.height - image.crop.top - image.crop.bottom,
+        }
+      : metadata.dimensions
+    : undefined;
+
+  const naturalSize = cropSize
+    ? aspectRatio
+      ? fit({ width: 1, height: aspectRatio }, cropSize, "contain")
+      : cropSize
+    : undefined;
+
+  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,
+  };
+}
+
+export function metaImageUrl({
+  image,
+  client,
+  width = defaultMetaImageWidth,
+  quality = defaultQuality,
+}: {
+  image: SanityImageObjectWithMetadata;
+  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
+  width: number;
+  quality?: number;
+}) {
+  return imageUrlBuilder(client)
+    .image(image)
+    .quality(quality)
+    .auto("format")
+    .width(width)
+    .url();
+}

package/dist/dev.cjs

@@ -1,83 +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;
-function cropAxis(length, insetStart, insetEnd) {
-  return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
-}
-function imageProps({
-  image,
-  client,
-  widths,
-  quality = exports.defaultQuality
-}) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
-  const builder = imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format");
-  const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
-  const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
-  return {
-    src: metadata?.lqip ?? builder.width(exports.lowResWidth).url().toString(),
-    srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
-    naturalWidth: cropAxis(
-      metadata?.dimensions?.width,
-      crop?.left,
-      crop?.right
-    ),
-    naturalHeight: cropAxis(
-      metadata?.dimensions?.height,
-      crop?.top,
-      crop?.bottom
-    )
-  };
-}
-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,76 +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;
-function cropAxis(length, insetStart, insetEnd) {
-  return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
-}
-function imageProps({
-  image,
-  client,
-  widths,
-  quality = defaultQuality
-}) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
-  const builder = imageUrlBuilder(client).image(image).quality(quality).auto("format");
-  const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
-  const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
-  return {
-    src: metadata?.lqip ?? builder.width(lowResWidth).url().toString(),
-    srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
-    naturalWidth: cropAxis(
-      metadata?.dimensions?.width,
-      crop?.left,
-      crop?.right
-    ),
-    naturalHeight: cropAxis(
-      metadata?.dimensions?.height,
-      crop?.top,
-      crop?.bottom
-    )
-  };
-}
-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,83 +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;
-function cropAxis(length, insetStart, insetEnd) {
-  return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
-}
-function imageProps({
-  image,
-  client,
-  widths,
-  quality = exports.defaultQuality
-}) {
-  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
-  const builder = imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format");
-  const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
-  const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
-  return {
-    src: metadata?.lqip ?? builder.width(exports.lowResWidth).url().toString(),
-    srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
-    naturalWidth: cropAxis(
-      metadata?.dimensions?.width,
-      crop?.left,
-      crop?.right
-    ),
-    naturalHeight: cropAxis(
-      metadata?.dimensions?.height,
-      crop?.top,
-      crop?.bottom
-    )
-  };
-}
-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;