chore(deps): update dependency @sanity/image-url to ^2.0.0

rdunk · rdunk · commit 66e91c35325b · 2025-11-27T19:49:04.000Z
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
@@ -30,7 +30,7 @@
     "@sanity/color-input": "^5.0.0",
     "@sanity/google-maps-input": "^4.2.0",
     "@sanity/icons": "^3.7.4",
-    "@sanity/image-url": "^1.2.0",
+    "@sanity/image-url": "^2.0.0",
     "@sanity/logos": "^2.2.2",
     "@sanity/migrate": "workspace:*",
     "@sanity/preview-url-secret": "^3.0.0",
diff --git a/dev/test-studio/preview/loader.tsx b/dev/test-studio/preview/loader.tsx
@@ -1,5 +1,5 @@
 import {createClient} from '@sanity/client'
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder, type ImageUrlBuilder} from '@sanity/image-url'
 import {createQueryStore} from '@sanity/react-loader'
 
 const client = createClient({
@@ -11,4 +11,4 @@ const client = createClient({
 })
 
 export const {useQuery, useLiveMode} = createQueryStore({client})
-export const imageBuilder: ReturnType<typeof imageUrlBuilder> = imageUrlBuilder(client)
+export const imageBuilder: ImageUrlBuilder = createImageUrlBuilder(client)
diff --git a/dev/test-studio/schema/debug/components/AuthorReferenceInput.tsx b/dev/test-studio/schema/debug/components/AuthorReferenceInput.tsx
@@ -1,4 +1,4 @@
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {type Reference, type ReferenceSchemaType} from '@sanity/types'
 import {Button, Spinner} from '@sanity/ui'
 import {
@@ -30,7 +30,7 @@ export const AuthorReferenceInput = forwardRef(function AuthorReferenceInput(
   const {readOnly} = inputProps
   const client = useClient({apiVersion: '2022-09-09'})
   const current = value && value._ref
-  const imageBuilder = imageUrlBuilder(client)
+  const imageBuilder = createImageUrlBuilder(client)
 
   const inputRef = useRef<HTMLButtonElement | null>(null)
 
diff --git a/packages/sanity/package.json b/packages/sanity/package.json
@@ -153,7 +153,7 @@
     "@sanity/export": "^4.0.1",
     "@sanity/icons": "^3.7.4",
     "@sanity/id-utils": "^1.0.0",
-    "@sanity/image-url": "^1.2.0",
+    "@sanity/image-url": "^2.0.0",
     "@sanity/import": "^3.38.3",
     "@sanity/insert-menu": "^2.1.0",
     "@sanity/logos": "^2.2.2",
diff --git a/packages/sanity/src/core/components/image/Image.tsx b/packages/sanity/src/core/components/image/Image.tsx
@@ -1,4 +1,4 @@
-import createImageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {type ImageUrlFitMode} from '@sanity/types'
 import {type ForwardedRef, forwardRef, type HTMLAttributes, useMemo} from 'react'
 
diff --git a/packages/sanity/src/core/field/types/image/diff/ImagePreview.tsx b/packages/sanity/src/core/field/types/image/diff/ImagePreview.tsx
@@ -1,7 +1,7 @@
 import {getImageDimensions, isDefaultCrop, isDefaultHotspot} from '@sanity/asset-utils'
 import {hues} from '@sanity/color'
 import {ImageIcon} from '@sanity/icons'
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {Box, Card, Flex, Text} from '@sanity/ui'
 import {type SyntheticEvent, useMemo, useState} from 'react'
 import {styled} from 'styled-components'
@@ -103,7 +103,7 @@ export function ImagePreview(props: ImagePreviewProps): React.JSX.Element {
   const [imageError, setImageError] = useState<SyntheticEvent<HTMLImageElement, Event>>()
   const {value: asset} = useDocumentValues<MinimalAsset>(id, ASSET_FIELDS)
   const dimensions = getImageDimensions(id)
-  const imageBuilder = useMemo(() => imageUrlBuilder(client), [client])
+  const imageBuilder = useMemo(() => createImageUrlBuilder(client), [client])
 
   // undefined = still loading, null = its gone
   const assetIsDeleted = asset === null
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
@@ -1,6 +1,6 @@
 import {isImageSource} from '@sanity/asset-utils'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {type CrossDatasetType, type PreviewValue} from '@sanity/types'
 import {Badge, Box, Flex, Inline, Text} from '@sanity/ui'
 import {isValidElement as reactIsValidElement, useMemo} from 'react'
@@ -61,7 +61,7 @@ export function CrossDatasetReferencePreview(props: {
           previewMedia
         ) : (
           <img
-            src={imageUrlBuilder({dataset, projectId})
+            src={createImageUrlBuilder({dataset, projectId})
               .image(previewMedia as FIXME)
               .withOptions(dimensions)
               .url()}
diff --git a/packages/sanity/src/core/form/inputs/GlobalDocumentReferenceInput/GlobalDocumentReferencePreview.tsx b/packages/sanity/src/core/form/inputs/GlobalDocumentReferenceInput/GlobalDocumentReferencePreview.tsx
@@ -1,6 +1,6 @@
 import {isImageSource} from '@sanity/asset-utils'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {type GlobalDocumentReferenceType, type PreviewValue} from '@sanity/types'
 import {Badge, Box, Flex, Inline, Text} from '@sanity/ui'
 import {isValidElement as reactIsValidElement, useMemo} from 'react'
@@ -65,7 +65,7 @@ export function GlobalDocumentReferencePreview(props: {
           previewMedia
         ) : (
           <img
-            src={imageUrlBuilder(projectDataset)
+            src={createImageUrlBuilder(projectDataset)
               .image(previewMedia as FIXME)
               .withOptions(dimensions)
               .url()}
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputAsset.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputAsset.tsx
@@ -1,3 +1,4 @@
+import {type ImageUrlBuilder} from '@sanity/image-url'
 import {type AssetSource, type UploadState} from '@sanity/types'
 import {Box, type CardTone} from '@sanity/ui'
 import {type FocusEvent, memo, useCallback, useMemo, useState} from 'react'
@@ -9,7 +10,6 @@ import {type InputProps} from '../../../types'
 import {FileTarget} from '../common/styles'
 import {UploadDestinationPicker} from '../common/UploadDestinationPicker'
 import {UploadWarning} from '../common/UploadWarning'
-import {type ImageUrlBuilder} from '../types'
 import {type BaseImageInputProps, type BaseImageInputValue, type FileInfo} from './types'
 import {usePreviewImageSource} from './usePreviewImageSource'
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputPreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputPreview.tsx
@@ -1,9 +1,9 @@
+import {type ImageUrlBuilder} from '@sanity/image-url'
 import {type ImageSchemaType} from '@sanity/types'
 import {memo, useMemo} from 'react'
 
 import {useTranslation} from '../../../../i18n'
 import {type UploaderResolver} from '../../../studio/uploads/types'
-import {type ImageUrlBuilder} from '../types'
 import {ImagePreview} from './ImagePreview'
 import {type BaseImageInputValue, type FileInfo} from './types'
 import {usePreviewImageSource} from './usePreviewImageSource'
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/types.ts b/packages/sanity/src/core/form/inputs/files/ImageInput/types.ts
@@ -1,4 +1,5 @@
 import {type SanityClient} from '@sanity/client'
+import {type ImageUrlBuilder} from '@sanity/image-url'
 import {
   type AssetSource,
   type Image as BaseImage,
@@ -10,7 +11,6 @@ import {type Observable} from 'rxjs'
 
 import {type UploaderResolver} from '../../../studio/uploads/types'
 import {type ObjectInputProps} from '../../../types'
-import {type ImageUrlBuilder} from '../types'
 
 /**
  * @hidden
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/usePreviewImageSource.ts b/packages/sanity/src/core/form/inputs/files/ImageInput/usePreviewImageSource.ts
@@ -1,8 +1,8 @@
 import {getImageDimensions, isImageSource, type SanityImageDimensions} from '@sanity/asset-utils'
+import {type ImageUrlBuilder} from '@sanity/image-url'
 import {type CSSProperties, useMemo} from 'react'
 import {useDevicePixelRatio} from 'use-device-pixel-ratio'
 
-import {type ImageUrlBuilder} from '../types'
 import {type BaseImageInputValue} from './types'
 
 export function usePreviewImageSource<Value extends BaseImageInputValue | undefined>({
diff --git a/packages/sanity/src/core/form/inputs/files/types.ts b/packages/sanity/src/core/form/inputs/files/types.ts
@@ -1,7 +1,4 @@
-import type imageUrlBuilder from '@sanity/image-url'
-
 /**
  * @hidden
  * @beta */
-// todo: see if we can get the ImageUrlBuilder type directly from @sanity/image-url instead of having to use this ReturnType workaround
-export type ImageUrlBuilder = ReturnType<typeof imageUrlBuilder>
+export {type ImageUrlBuilder} from '@sanity/image-url'
diff --git a/packages/sanity/src/core/form/studio/inputs/StudioImageInput.tsx b/packages/sanity/src/core/form/studio/inputs/StudioImageInput.tsx
@@ -1,4 +1,4 @@
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {useCallback, useMemo} from 'react'
 
 import {useClient} from '../../../hooks'
@@ -35,7 +35,7 @@ export function StudioImageInput(props: ImageInputProps) {
 
   const assetSources = sourcesFromSchema || imageConfig.assetSources
 
-  const builder = useMemo(() => imageUrlBuilder(client), [client])
+  const builder = useMemo(() => createImageUrlBuilder(client), [client])
 
   const observeAsset = useCallback(
     (id: string) => observeImageAsset(documentPreviewStore, id),
diff --git a/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx b/packages/sanity/src/core/preview/components/SanityDefaultPreview.tsx
@@ -1,7 +1,6 @@
 import {isImageSource} from '@sanity/asset-utils'
 import {DocumentIcon} from '@sanity/icons'
-import imageUrlBuilder from '@sanity/image-url'
-import {type SanityImageSource} from '@sanity/image-url/lib/types/types'
+import {createImageUrlBuilder, type SanityImageSource} from '@sanity/image-url'
 import {type ImageUrlFitMode} from '@sanity/types'
 import {
   type ComponentType,
@@ -42,7 +41,7 @@ export const SanityDefaultPreview = memo(function SanityDefaultPreview(
   const {icon: Icon, layout, media: mediaProp, imageUrl, title, tooltip, ...restProps} = props
 
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
-  const imageBuilder = useMemo(() => imageUrlBuilder(client), [client])
+  const imageBuilder = useMemo(() => createImageUrlBuilder(client), [client])
 
   // NOTE: This function exists because the previews provides options
   // for the rendering of the media (dimensions)
diff --git a/packages/sanity/src/core/tasks/components/form/tasksFormBuilder/TasksNotificationTarget.tsx b/packages/sanity/src/core/tasks/components/form/tasksFormBuilder/TasksNotificationTarget.tsx
@@ -1,5 +1,5 @@
 import {isImageSource} from '@sanity/asset-utils'
-import imageUrlBuilder from '@sanity/image-url'
+import {createImageUrlBuilder} from '@sanity/image-url'
 import {useCallback, useEffect, useMemo} from 'react'
 import deepEquals from 'react-fast-compare'
 import {useRouterState} from 'sanity/router'
@@ -39,7 +39,7 @@ function TasksNotificationTargetInner(props: ObjectFieldProps<TaskDocument>) {
   const {target, _id, context, _rev} = useFormValue([]) as TaskDocument
   const {title: workspaceTitle, basePath, name: workspaceName} = useWorkspace()
   const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
-  const imageBuilder = useMemo(() => imageUrlBuilder(client), [client])
+  const imageBuilder = useMemo(() => createImageUrlBuilder(client), [client])
   const documentId = target?.document?._ref ?? ''
   const documentType = target?.documentType ?? ''
 
diff --git a/packages/sanity/test/form/renderImageInput.tsx b/packages/sanity/test/form/renderImageInput.tsx
@@ -1,3 +1,4 @@
+import {type ImageUrlBuilder} from '@sanity/image-url'
 import {
   type AssetSource,
   type FieldDefinition,
@@ -6,7 +7,7 @@ import {
 } from '@sanity/types'
 import {EMPTY} from 'rxjs'
 
-import {type ImageUrlBuilder, type ObjectInputProps} from '../../src/core'
+import {type ObjectInputProps} from '../../src/core'
 import {type BaseImageInputProps} from '../../src/core/form/inputs/files/ImageInput'
 import {type TestRenderInputContext} from './renderInput'
 import {renderObjectInput} from './renderObjectInput'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import createImageUrlBuilder from '@sanity/image-url'`
	`1`	`+import {createImageUrlBuilder} from '@sanity/image-url'`
`2`	`2`	`import {type ImageUrlFitMode} from '@sanity/types'`
`3`	`3`	`import {type ForwardedRef, forwardRef, type HTMLAttributes, useMemo} from 'react'`
`4`	`4`