|
| 1 | +# Migrate `@sanity/image-url`: v1 to v2 |
| 2 | + |
| 3 | +Version 2 of `@sanity/image-url` introduces changes to modernize the package which primarily affects how the package is imported. All builder API methods remain the same, and URLs generated will be identical given the same inputs. |
| 4 | + |
| 5 | +## Breaking changes |
| 6 | + |
| 7 | +### Named exports |
| 8 | + |
| 9 | +The default export has been replaced with a named export: `createImageUrlBuilder`. This makes the API more explicit and follows modern JavaScript conventions. |
| 10 | + |
| 11 | +```diff |
| 12 | +- import imageUrlBuilder from '@sanity/image-url' |
| 13 | ++ import {createImageUrlBuilder} from '@sanity/image-url' |
| 14 | +``` |
| 15 | + |
| 16 | +### Fixed type exports |
| 17 | + |
| 18 | +All TypeScript types are now exported from the main package entry point. Previously, types had to be imported from internal `/lib` directory paths, which was not part of the public API. Importing from these paths will no longer work. |
| 19 | + |
| 20 | +```diff |
| 21 | +- import type {SanityImageSource} from '@sanity/image-url/lib/types/types' |
| 22 | ++ import type {SanityImageSource} from '@sanity/image-url' |
| 23 | +``` |
| 24 | + |
| 25 | +### ESM only |
| 26 | + |
| 27 | +The package now uses ES modules exclusively. CommonJS `require()` syntax is no longer supported and must be replaced with `import` statements. |
| 28 | + |
| 29 | +```diff |
| 30 | +- const urlBuilder = require('@sanity/image-url') |
| 31 | ++ import {createImageUrlBuilder} from '@sanity/image-url' |
| 32 | +``` |
| 33 | + |
| 34 | +### Node.js minimum version |
| 35 | + |
| 36 | +The minimum supported Node.js version has been updated from `10.0.0` to `20.19.0`. |
| 37 | + |
| 38 | +## Example migration |
| 39 | + |
| 40 | +```diff |
| 41 | +import React from 'react' |
| 42 | +import myConfiguredSanityClient from './sanityClient' |
| 43 | +- import imageUrlBuilder from '@sanity/image-url' |
| 44 | ++ import {createImageUrlBuilder} from '@sanity/image-url' |
| 45 | + |
| 46 | +- const builder = imageUrlBuilder(myConfiguredSanityClient) |
| 47 | ++ const builder = createImageUrlBuilder(myConfiguredSanityClient) |
| 48 | + |
| 49 | +function urlFor(source) { |
| 50 | + return builder.image(source) |
| 51 | +} |
| 52 | + |
| 53 | +function MyComponent({image}) { |
| 54 | + return ( |
| 55 | + <img |
| 56 | + src={urlFor(image).width(400).height(300).url()} |
| 57 | + alt="My image" |
| 58 | + /> |
| 59 | + ) |
| 60 | +} |
| 61 | +``` |
0 commit comments