Skip to content

Commit 13f9122

Browse files
committed
docs: add v1 to v2 migration guide
1 parent 826e441 commit 13f9122

File tree

2 files changed

+62
-0
lines changed

2 files changed

+62
-0
lines changed

MIGRATE-v1-to-v2.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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 src={urlFor(image).width(400).height(300).url()} />
56+
)
57+
}
58+
```

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,10 @@ const builder = createImageUrlBuilder({
193193
})
194194
```
195195

196+
## Migration Guides
197+
198+
If you're upgrading from v1 to v2, please see the [Migration Guide](./MIGRATE-v1-to-v2.md) for instructions on breaking changes and how to update your code.
199+
196200
## How to publish
197201

198202
1. On your development PR (or after), you can run a command `pnpm changeset add`

0 commit comments

Comments
 (0)