@nonphoto/sanity-image 3.2.0 → 5.0.0

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./asset";
-export * from "./imageObject";
-export * from "./params";
-export * from "./reference";
-export * from "./stub";
-export * from "./url";
+export * from "./constants";
+export * from "./crop";
+export * from "./hotspot";
+export * from "./image";
+export * from "./rect";
+export * from "./transformations";

package/src/rect.ts

@@ -0,0 +1,28 @@
+import { InferOutput, is, number, object, tuple } from "valibot";
+import { ImageAsset } from "./asset";
+import { Crop } from "./crop";
+
+export const rectSchema = object({
+  pos: tuple([number(), number()]),
+  size: tuple([number(), number()]),
+});
+
+export type Rect = InferOutput<typeof rectSchema>;
+
+export function isRect(input: unknown): input is Rect {
+  return is(rectSchema, input);
+}
+
+export function rectFromCrop(
+  asset: Pick<ImageAsset, "width" | "height">,
+  crop: Crop,
+): Rect {
+  const left = Math.max(crop.left ?? 0, 0);
+  const right = Math.max(crop.right ?? 0, 0);
+  const top = Math.max(crop.top ?? 0, 0);
+  const bottom = Math.max(crop.bottom ?? 0, 0);
+  return {
+    pos: [left * asset.width, top * asset.height],
+    size: [(1 - left - right) * asset.width, (1 - top - bottom) * asset.height],
+  };
+}

package/src/transformations.ts

@@ -0,0 +1,155 @@
+import {
+  boolean,
+  InferOutput,
+  is,
+  literal,
+  number,
+  object,
+  partial,
+  string,
+  tuple,
+  union,
+} from "valibot";
+import { rectSchema } from "./rect";
+
+export const transformationsSchema = partial(
+  object({
+    auto: literal("format"),
+    background: string(),
+    blur: number(),
+    crop: union([
+      literal("top"),
+      literal("bottom"),
+      literal("left"),
+      literal("right"),
+      literal("center"),
+      literal("focalpoint"),
+      literal("entropy"),
+    ]),
+    download: union([string(), boolean()]),
+    dpr: union([literal(1), literal(2), literal(3)]),
+    fit: union([
+      literal("clip"),
+      literal("crop"),
+      literal("fill"),
+      literal("fillmax"),
+      literal("max"),
+      literal("scale"),
+      literal("min"),
+    ]),
+    flipHorizontal: boolean(),
+    flipVertical: boolean(),
+    focalPoint: tuple([number(), number()]),
+    format: union([
+      literal("jpg"),
+      literal("pjpg"),
+      literal("png"),
+      literal("webp"),
+    ]),
+    frame: number(),
+    height: number(),
+    invert: boolean(),
+    maxHeight: number(),
+    maxWidth: number(),
+    minHeight: number(),
+    minWidth: number(),
+    orientation: union([literal(0), literal(90), literal(180), literal(270)]),
+    pad: number(),
+    quality: number(),
+    rect: rectSchema,
+    saturation: number(),
+    sharpen: number(),
+    width: number(),
+  }),
+);
+
+export type Transformations = InferOutput<typeof transformationsSchema>;
+
+export function isTransformations(input: unknown): input is Transformations {
+  return is(transformationsSchema, input);
+}
+
+function entry(
+  key: string,
+  value: string | number | boolean | null | undefined,
+): [string, string] | undefined {
+  return value == null || value === false
+    ? undefined
+    : [key, String(typeof value === "number" ? Math.round(value) : value)];
+}
+
+export function transformationsToURLSearch({
+  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,
+}: Transformations): string {
+  return (
+    "?" +
+    [
+      entry("auto", auto),
+      entry("bg", background),
+      entry("blur", blur),
+      entry("crop", crop),
+      entry("dl", download),
+      entry("dpr", dpr),
+      entry("fit", fit),
+      entry(
+        "flip",
+        flipHorizontal || flipVertical
+          ? [flipHorizontal && "h", flipVertical && "v"]
+              .filter(Boolean)
+              .join("")
+          : undefined,
+      ),
+      entry("fm", format),
+      entry("fp-x", focalPoint?.[0]),
+      entry("fp-y", focalPoint?.[1]),
+      entry("frame", frame),
+      entry("h", height),
+      entry("invert", invert),
+      entry("max-h", maxHeight),
+      entry("max-w", maxWidth),
+      entry("min-h", minHeight),
+      entry("min-w", minWidth),
+      entry("or", orientation),
+      entry("pad", pad),
+      entry("q", quality),
+      entry(
+        "rect",
+        rect
+          ? [rect.pos[0], rect.pos[1], rect.size[0], rect.size[1]]
+              .map(Math.round)
+              .join(",")
+          : undefined,
+      ),
+      entry("sat", saturation),
+      entry("sharp", sharpen),
+      entry("w", width),
+    ]
+      .filter((entry) => entry != null)
+      .map((entry) => entry.join("="))
+      .join("&")
+  );
+}

package/src/imageObject.ts

@@ -1,15 +0,0 @@
-import { isSanityImageAssetLike, SanityImageAssetLike } from "./asset";
-import { isSanityReference, SanityReference } from "./reference";
-
-export interface SanityImageObject {
-  asset: SanityImageAssetLike | SanityReference;
-}
-
-export function isSanityImageObject(x: any): x is SanityImageObject {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "asset" in x &&
-    (isSanityImageAssetLike(x.asset) || isSanityReference(x.asset))
-  );
-}

package/src/params.ts

@@ -1,118 +0,0 @@
-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/reference.ts

@@ -1,12 +0,0 @@
-export interface SanityReference {
-  _ref: string;
-}
-
-export function isSanityReference(x: any): x is SanityReference {
-  return (
-    x != null &&
-    typeof x === "object" &&
-    "_ref" in x &&
-    typeof x._ref === "string"
-  );
-}

package/src/stub.ts

@@ -1,44 +0,0 @@
-import { isSanityImageAssetLike, SanityImageAssetLike } from "./asset";
-import { SanityImageObject } from "./imageObject";
-import { isSanityReference, SanityReference } from "./reference";
-
-export type SanityImageSource =
-  | SanityImageObject
-  | SanityReference
-  | SanityImageAssetLike
-  | string;
-
-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 sanityImageAssetId(source: SanityImageSource): string {
-  return typeof source === "string"
-    ? source
-    : isSanityReference(source)
-    ? source._ref
-    : isSanityImageAssetLike(source)
-    ? source._id
-    : sanityImageAssetId(source.asset);
-}
-
-export function sanityImageAssetStub(
-  source: SanityImageSource
-): SanityImageAssetStub | undefined {
-  const id = sanityImageAssetId(source);
-  return id ? parseSanityImageAssetId(id) : undefined;
-}

package/src/url.ts

@@ -1,76 +0,0 @@
-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(",");
-}