sanity-image 1.0.0 → 1.0.1

package/README.md

@@ -126,7 +126,8 @@ How it works at a glance:
   `width` and `height` attributes are set automatically to avoid layout shifts
 - A few image params are applied by default:
   - `auto=format` - Sanity will use AVIF images if they're supported by the
-    browser (https://www.sanity.io/help/avif) (note: if you specify `fm` manually, this won't be set)
+    browser (https://www.sanity.io/help/avif) (note: if you specify `fm`
+    manually, this won't be set)
   - `fit` - if the image aspect ratio isn't changed, this will be set to `max`;
     if the aspect ratio will change it's set to `crop`; you don't really need to
     worry about this though
@@ -195,16 +196,26 @@ start a discussion if you have questions or suggestions, or find me on the
 Sanity Slack!
 
 <details>
-  <summary><strong>⚠️ Minor gotchas with deferred loading</strong></summary>
+  <summary><strong>⚠️ “Help! My full-size image isn’t loading!"</strong></summary>
 
-`SanityImage` is relying on browser-native deferred image loading. This
-generally works fine in browsers that support it, but there are situations where
-the unloaded image is hidden or covered, resulting in the full image never
-loading.
+`SanityImage` is relying on browser-native deferred image loading. This relies
+on the `<img>` element being visible on the page to trigger loading
+automatically. If the image is hidden or covered by another element, it may
+never be loaded.
 
-If this happens, you can override the styles set on the full-size image using
-the `img[data-loading]` selector. This image sits immediately adjacent to the
-spaceball image and has the following default styles _while loading_:
+For example, if you are using `overflow: hidden` on a parent element, the image
+might be positioned in a way that it is not treated as visible by the browser.
+This can also happen if you have `display: none` on the image or a parent
+element, or if the image is positioned off-screen (e.g., in a carousel, or
+waiting for an animation to reveal it).
+
+Inspecting the DOM in your browser’s dev tools and checking the position of the
+`<img>` element with the `data-loading` attribute can help you identify the
+issue usually. Once you can identify the cause of the image being hidden, you
+can adjust the CSS styles on the `img[data-loading]` element to make it visible.
+
+For reference, the full-size image sits immediately adjacent to the preview
+image and has the following default styles _while loading_:
 
 ```css
 position: absolute;
@@ -222,8 +233,8 @@ userselect: none;
 
 ### Choosing the right `mode`
 
-If you are providing only one dimension (`width` or  `height`, but not both), it
-doesn't matter since the behavior will be the same. 
+If you are providing only one dimension (`width` or `height`, but not both), it
+doesn't matter since the behavior will be the same.
 
 - **Contain** mode will treat the dimensions you provide as boundaries, resizing
   the image to fit inside of them. The output image will match the aspect ratio
@@ -248,7 +259,7 @@ example for quick reference:
 
 ```tsx
 import * as React from "react"
-import { SanityImage, type WrapperPRops } from "sanity-image"
+import { SanityImage, type WrapperProps } from "sanity-image"
 
 export const Image = <T extends React.ElementType = "img">(
   props: WrapperProps<T>
@@ -420,5 +431,5 @@ crop {
 
 ## License
 
-Copyright ©2023 Corey Ward. Available under the
+Copyright ©2023-2025 Corey Ward. Available under the
 [MIT License](https://github.com/coreyward/sanity-image/blob/main/LICENSE).

package/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-image",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Corey Ward <corey@hey.com>",
   "license": "MIT",
   "repository": "https://github.com/coreyward/sanity-image",
@@ -22,37 +22,35 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@sanity-image/url-builder": "1.0.0"
+    "@sanity-image/url-builder": "1.0.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.18.0",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.2.0",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^20.0.0",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
+    "@size-limit/preset-small-lib": "^12.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^20.19.0",
     "@types/probe-image-size": "^7.2.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.3.5",
-    "esbuild": "^0.24.2",
-    "eslint": "^9.18.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "globals": "^15.14.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^3.0.0",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "esbuild": "^0.25.12",
+    "eslint": "^9.39.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^15.15.0",
+    "prettier": "^3.8.1",
     "probe-image-size": "^7.2.3",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-test-renderer": "^18.3.0",
-    "rimraf": "^4.4.1",
-    "size-limit": "^8.2.4",
-    "ts-jest": "^29.1.0",
+    "rimraf": "^6.1.3",
+    "size-limit": "^12.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.6.0",
-    "typescript-eslint": "^8.21.0"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.0",
+    "vitest": "^4.0.18"
   },
   "engines": {
     "node": ">=16"
@@ -73,7 +71,7 @@
     "postbuild:sanity-image": "./scripts/postbuild.sh",
     "build:url-builder": "pnpm --filter @sanity-image/url-builder run build",
     "size": "size-limit",
-    "test": "jest",
+    "test": "vitest run",
     "test:generate-measurements": "yarn build && yarn node tests/buildTestCases.js",
     "lint": "eslint src/**/*{.ts,.tsx}"
   }