@nonphoto/sanity-image 0.0.6 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/dev.cjs +34 -17
  2. package/dist/dev.js +34 -17
  3. package/dist/index.cjs +34 -17
  4. package/dist/index.d.ts +21 -5
  5. package/dist/index.js +34 -17
  6. package/package.json +1 -1
package/dist/dev.cjs CHANGED
@@ -42,32 +42,49 @@ exports.defaultWidths = [
42
42
  exports.lowResWidth = 24;
43
43
  exports.defaultMetaImageWidth = 1200;
44
44
  exports.defaultQuality = 90;
45
- function cropAxis(length, insetStart, insetEnd) {
46
- return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
45
+ var fitComparators = {
46
+ cover: Math.max,
47
+ contain: Math.min,
48
+ mean: (a, b) => (a + b) / 2
49
+ };
50
+ function fit(containee, container, mode) {
51
+ const sx = container.width / containee.width;
52
+ const sy = container.height / containee.height;
53
+ const s = fitComparators[mode](sx, sy);
54
+ return {
55
+ width: containee.width * s,
56
+ height: containee.height * s
57
+ };
58
+ }
59
+ function buildAspectRatio(builder, width, aspectRatio) {
60
+ if (aspectRatio) {
61
+ return builder.width(width).height(width * aspectRatio);
62
+ } else {
63
+ return builder.width(width);
64
+ }
47
65
  }
48
66
  function imageProps({
49
67
  image,
50
68
  client,
51
69
  widths,
52
- quality = exports.defaultQuality
70
+ quality = exports.defaultQuality,
71
+ aspectRatio
53
72
  }) {
54
73
  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
55
74
  const builder = imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format");
56
- const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
57
- const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
75
+ const metadata = image.asset.metadata;
76
+ const cropSize = image.crop && metadata?.dimensions ? {
77
+ width: metadata.dimensions.width - image.crop.left - image.crop.right,
78
+ height: metadata.dimensions.height - image.crop.top - image.crop.bottom
79
+ } : void 0;
80
+ const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
58
81
  return {
59
- src: metadata?.lqip ?? builder.width(exports.lowResWidth).url().toString(),
60
- srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
61
- naturalWidth: cropAxis(
62
- metadata?.dimensions?.width,
63
- crop?.left,
64
- crop?.right
65
- ),
66
- naturalHeight: cropAxis(
67
- metadata?.dimensions?.height,
68
- crop?.top,
69
- crop?.bottom
70
- )
82
+ src: metadata?.lqip ?? buildAspectRatio(builder, exports.lowResWidth, aspectRatio).url(),
83
+ srcset: sortedWidths.map(
84
+ (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
85
+ ).join(","),
86
+ naturalWidth: naturalSize?.width,
87
+ naturalHeight: naturalSize?.height
71
88
  };
72
89
  }
73
90
  function metaImageUrl({
package/dist/dev.js CHANGED
@@ -36,32 +36,49 @@ var defaultWidths = [
36
36
  var lowResWidth = 24;
37
37
  var defaultMetaImageWidth = 1200;
38
38
  var defaultQuality = 90;
39
- function cropAxis(length, insetStart, insetEnd) {
40
- return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
39
+ var fitComparators = {
40
+ cover: Math.max,
41
+ contain: Math.min,
42
+ mean: (a, b) => (a + b) / 2
43
+ };
44
+ function fit(containee, container, mode) {
45
+ const sx = container.width / containee.width;
46
+ const sy = container.height / containee.height;
47
+ const s = fitComparators[mode](sx, sy);
48
+ return {
49
+ width: containee.width * s,
50
+ height: containee.height * s
51
+ };
52
+ }
53
+ function buildAspectRatio(builder, width, aspectRatio) {
54
+ if (aspectRatio) {
55
+ return builder.width(width).height(width * aspectRatio);
56
+ } else {
57
+ return builder.width(width);
58
+ }
41
59
  }
42
60
  function imageProps({
43
61
  image,
44
62
  client,
45
63
  widths,
46
- quality = defaultQuality
64
+ quality = defaultQuality,
65
+ aspectRatio
47
66
  }) {
48
67
  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
49
68
  const builder = imageUrlBuilder(client).image(image).quality(quality).auto("format");
50
- const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
51
- const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
69
+ const metadata = image.asset.metadata;
70
+ const cropSize = image.crop && metadata?.dimensions ? {
71
+ width: metadata.dimensions.width - image.crop.left - image.crop.right,
72
+ height: metadata.dimensions.height - image.crop.top - image.crop.bottom
73
+ } : void 0;
74
+ const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
52
75
  return {
53
- src: metadata?.lqip ?? builder.width(lowResWidth).url().toString(),
54
- srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
55
- naturalWidth: cropAxis(
56
- metadata?.dimensions?.width,
57
- crop?.left,
58
- crop?.right
59
- ),
60
- naturalHeight: cropAxis(
61
- metadata?.dimensions?.height,
62
- crop?.top,
63
- crop?.bottom
64
- )
76
+ src: metadata?.lqip ?? buildAspectRatio(builder, lowResWidth, aspectRatio).url(),
77
+ srcset: sortedWidths.map(
78
+ (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
79
+ ).join(","),
80
+ naturalWidth: naturalSize?.width,
81
+ naturalHeight: naturalSize?.height
65
82
  };
66
83
  }
67
84
  function metaImageUrl({
package/dist/index.cjs CHANGED
@@ -42,32 +42,49 @@ exports.defaultWidths = [
42
42
  exports.lowResWidth = 24;
43
43
  exports.defaultMetaImageWidth = 1200;
44
44
  exports.defaultQuality = 90;
45
- function cropAxis(length, insetStart, insetEnd) {
46
- return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
45
+ var fitComparators = {
46
+ cover: Math.max,
47
+ contain: Math.min,
48
+ mean: (a, b) => (a + b) / 2
49
+ };
50
+ function fit(containee, container, mode) {
51
+ const sx = container.width / containee.width;
52
+ const sy = container.height / containee.height;
53
+ const s = fitComparators[mode](sx, sy);
54
+ return {
55
+ width: containee.width * s,
56
+ height: containee.height * s
57
+ };
58
+ }
59
+ function buildAspectRatio(builder, width, aspectRatio) {
60
+ if (aspectRatio) {
61
+ return builder.width(width).height(width * aspectRatio);
62
+ } else {
63
+ return builder.width(width);
64
+ }
47
65
  }
48
66
  function imageProps({
49
67
  image,
50
68
  client,
51
69
  widths,
52
- quality = exports.defaultQuality
70
+ quality = exports.defaultQuality,
71
+ aspectRatio
53
72
  }) {
54
73
  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
55
74
  const builder = imageUrlBuilder__default.default(client).image(image).quality(quality).auto("format");
56
- const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
57
- const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
75
+ const metadata = image.asset.metadata;
76
+ const cropSize = image.crop && metadata?.dimensions ? {
77
+ width: metadata.dimensions.width - image.crop.left - image.crop.right,
78
+ height: metadata.dimensions.height - image.crop.top - image.crop.bottom
79
+ } : void 0;
80
+ const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
58
81
  return {
59
- src: metadata?.lqip ?? builder.width(exports.lowResWidth).url().toString(),
60
- srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
61
- naturalWidth: cropAxis(
62
- metadata?.dimensions?.width,
63
- crop?.left,
64
- crop?.right
65
- ),
66
- naturalHeight: cropAxis(
67
- metadata?.dimensions?.height,
68
- crop?.top,
69
- crop?.bottom
70
- )
82
+ src: metadata?.lqip ?? buildAspectRatio(builder, exports.lowResWidth, aspectRatio).url(),
83
+ srcset: sortedWidths.map(
84
+ (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
85
+ ).join(","),
86
+ naturalWidth: naturalSize?.width,
87
+ naturalHeight: naturalSize?.height
71
88
  };
72
89
  }
73
90
  function metaImageUrl({
package/dist/index.d.ts CHANGED
@@ -1,14 +1,30 @@
1
- import { SanityImageSource, SanityClientLike, SanityProjectDetails, SanityModernClientLike } from '@sanity/image-url/lib/types/types.js';
1
+ import { SanityAsset, SanityImageDimensions, SanityImageCrop, SanityImageHotspot, SanityClientLike, SanityProjectDetails, SanityModernClientLike } from '@sanity/image-url/lib/types/types.js';
2
2
 
3
+ type SanityAssetWithMetadata = SanityAsset & {
4
+ metadata?: {
5
+ lqip?: string;
6
+ dimensions?: SanityImageDimensions;
7
+ };
8
+ };
9
+ interface SanityImageObjectWithMetadata {
10
+ asset: SanityAssetWithMetadata;
11
+ crop?: SanityImageCrop;
12
+ hotspot?: SanityImageHotspot;
13
+ }
14
+ type Size = {
15
+ width: number;
16
+ height: number;
17
+ };
3
18
  declare const defaultWidths: number[];
4
19
  declare const lowResWidth = 24;
5
20
  declare const defaultMetaImageWidth = 1200;
6
21
  declare const defaultQuality = 90;
7
- declare function imageProps({ image, client, widths, quality, }: {
8
- image: SanityImageSource;
22
+ declare function imageProps({ image, client, widths, quality, aspectRatio, }: {
23
+ image: SanityImageObjectWithMetadata;
9
24
  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
10
25
  widths: number[];
11
26
  quality?: number;
27
+ aspectRatio?: number;
12
28
  }): {
13
29
  src: string;
14
30
  srcset: string;
@@ -16,10 +32,10 @@ declare function imageProps({ image, client, widths, quality, }: {
16
32
  naturalHeight?: number;
17
33
  };
18
34
  declare function metaImageUrl({ image, client, width, quality, }: {
19
- image: SanityImageSource;
35
+ image: SanityImageObjectWithMetadata;
20
36
  client: SanityClientLike | SanityProjectDetails | SanityModernClientLike;
21
37
  width: number;
22
38
  quality?: number;
23
39
  }): string;
24
40
 
25
- export { defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };
41
+ export { SanityAssetWithMetadata, SanityImageObjectWithMetadata, Size, defaultMetaImageWidth, defaultQuality, defaultWidths, imageProps, lowResWidth, metaImageUrl };
package/dist/index.js CHANGED
@@ -36,32 +36,49 @@ var defaultWidths = [
36
36
  var lowResWidth = 24;
37
37
  var defaultMetaImageWidth = 1200;
38
38
  var defaultQuality = 90;
39
- function cropAxis(length, insetStart, insetEnd) {
40
- return length ? length * (1 - (insetStart ?? 0) - (insetEnd ?? 0)) : void 0;
39
+ var fitComparators = {
40
+ cover: Math.max,
41
+ contain: Math.min,
42
+ mean: (a, b) => (a + b) / 2
43
+ };
44
+ function fit(containee, container, mode) {
45
+ const sx = container.width / containee.width;
46
+ const sy = container.height / containee.height;
47
+ const s = fitComparators[mode](sx, sy);
48
+ return {
49
+ width: containee.width * s,
50
+ height: containee.height * s
51
+ };
52
+ }
53
+ function buildAspectRatio(builder, width, aspectRatio) {
54
+ if (aspectRatio) {
55
+ return builder.width(width).height(width * aspectRatio);
56
+ } else {
57
+ return builder.width(width);
58
+ }
41
59
  }
42
60
  function imageProps({
43
61
  image,
44
62
  client,
45
63
  widths,
46
- quality = defaultQuality
64
+ quality = defaultQuality,
65
+ aspectRatio
47
66
  }) {
48
67
  const sortedWidths = Array.from(widths).sort((a, b) => a - b);
49
68
  const builder = imageUrlBuilder(client).image(image).quality(quality).auto("format");
50
- const metadata = typeof image === "object" && "asset" in image ? image.asset.metadata : void 0;
51
- const crop = typeof image === "object" && "crop" in image ? image.crop : void 0;
69
+ const metadata = image.asset.metadata;
70
+ const cropSize = image.crop && metadata?.dimensions ? {
71
+ width: metadata.dimensions.width - image.crop.left - image.crop.right,
72
+ height: metadata.dimensions.height - image.crop.top - image.crop.bottom
73
+ } : void 0;
74
+ const naturalSize = cropSize ? aspectRatio ? fit({ width: 1, height: aspectRatio }, cropSize, "contain") : cropSize : metadata?.dimensions;
52
75
  return {
53
- src: metadata?.lqip ?? builder.width(lowResWidth).url().toString(),
54
- srcset: sortedWidths.map((width) => `${builder.width(width).url()} ${width}w`).join(","),
55
- naturalWidth: cropAxis(
56
- metadata?.dimensions?.width,
57
- crop?.left,
58
- crop?.right
59
- ),
60
- naturalHeight: cropAxis(
61
- metadata?.dimensions?.height,
62
- crop?.top,
63
- crop?.bottom
64
- )
76
+ src: metadata?.lqip ?? buildAspectRatio(builder, lowResWidth, aspectRatio).url(),
77
+ srcset: sortedWidths.map(
78
+ (width) => `${buildAspectRatio(builder, width, aspectRatio).url()} ${width}w`
79
+ ).join(","),
80
+ naturalWidth: naturalSize?.width,
81
+ naturalHeight: naturalSize?.height
65
82
  };
66
83
  }
67
84
  function metaImageUrl({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nonphoto/sanity-image",
3
- "version": "0.0.6",
3
+ "version": "0.1.1",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"