Update package and snapshot files for @imagekit/react

- Updated version in package-lock.json and package.json from 5.0.0-beta.1 to 5.0.0-beta.2.
- Enhanced Image component to support deviceBreakpoints and imageBreakpoints props.
- Updated test cases in basic.tsx to include new Image component usage examples.
- Updated CSR and SSR test snapshots to reflect changes in image URLs and attributes.
- Modified test-app package.json to include e2e update script for Playwright.

Author: manu4543

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/react",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "description": "React SDK for ImageKit.io which implements client-side upload and URL generation for use inside a react application.",
   "scripts": {
     "build:js": "rollup -c",

package.json

@@ -1,9 +1,9 @@
-import { getResponsiveImageAttributes } from "@imagekit/javascript";
+import { getResponsiveImageAttributes, type GetImageAttributesOptions } from "@imagekit/javascript";
 import React, { useContext } from "react";
 import type { SrcProps } from "../interface";
 import { ImageKitContext } from "../provider/ImageKit";
 
-export type IKImageProps = Omit<JSX.IntrinsicElements["img"], "src" | "srcSet" | "width"> & SrcProps & {
+export type IKImageProps = Omit<JSX.IntrinsicElements["img"], "src" | "srcSet" | "width"> & SrcProps & Pick<GetImageAttributesOptions, "deviceBreakpoints" | "imageBreakpoints"> & {
   /**
    * Set to `false` to disable automatic responsive `srcSet` generation.
    * Defaults to `true`.
@@ -19,6 +19,8 @@ export type IKImageProps = Omit<JSX.IntrinsicElements["img"], "src" | "srcSet" |
    *   widths is produced to cover all possible viewport sizes.
    */
   width?: number | `${number}`;
+
+
 }
 
 function getInt(x: unknown): number {
@@ -61,7 +63,7 @@ export const Image = (props: IKImageProps) => {
 
   // It's important to extract the ImageKit‑specific props so we can spread the
   // remaining props directly onto the `<img>` element.
-  const { transformation = [], src = "", loading = "lazy", queryParameters, urlEndpoint, transformationPosition, sizes, responsive = true, ...nonIKParams } = {
+  const { transformation = [], src = "", loading = "lazy", queryParameters, urlEndpoint, transformationPosition, sizes, responsive = true, deviceBreakpoints, imageBreakpoints, ...nonIKParams } = {
     ...contextValues, // Default values from context
     ...props // Override with props
   };
@@ -83,7 +85,9 @@ export const Image = (props: IKImageProps) => {
     sizes,
     queryParameters,
     urlEndpoint,
-    transformationPosition
+    transformationPosition,
+    deviceBreakpoints,
+    imageBreakpoints,
   })
 
   if (!responsive) {

src/components/Image.tsx

@@ -114,13 +114,27 @@ export const Basic = () => {
                 />
 
                 <Image
-                    src="https://ik.imagekit/demo/default-image.jpg"
+                    src="https://ik.imagekit.io/demo/default-image.jpg"
                     alt="path not respected with absolute url"
                     transformationPosition="path"
                     height={300}
                     width={300}
                 />
 
+                {/* No width */}
+                <Image
+                    src="/default-image.jpg"
+                    alt="No width"
+                />
+
+                {/* Custom deviceBreakpoints */}
+                <Image
+                    src="https://ik.imagekit.io/demo/default-image.jpg"
+                    alt="Custom deviceBreakpoints"
+                    deviceBreakpoints={[200, 400, 800]}
+                    imageBreakpoints={[100]}
+                />
+
                 {/* Responsive off */}
                 <Image
                     src="/default-image.jpg"

test-app/app/components/basic.tsx

@@ -1 +1 @@
-<div class="container"><div><h1>Image</h1><img alt="Image without ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with width not number, should produce larger srcset" width="300px" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="With transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with queryParameters" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img alt="Responsive image with sizes" height="300" width="300" loading="lazy" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" loading="lazy" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Image with urlEndpoint override" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with className" class="custom-class" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with lazy loading eager" height="300" width="300" loading="eager" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with path transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img alt="Image with path transformation + custom transformations" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img alt="path not respected with absolute url" height="300" width="300" loading="lazy" srcset="https://ik.imagekit/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with responsive off" height="300" width="300" loading="lazy" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed:w-3840,c-at_max"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with path transformation" height="300" width="300" src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4"></video></div></div>
+<div class="container"><div><h1>Image</h1><img alt="Image without ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with ImageKit provider" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with width not number, should produce larger srcset" width="300px" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="With transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with queryParameters" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img alt="Responsive image with sizes" height="300" width="300" loading="lazy" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" loading="lazy" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Image with urlEndpoint override" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img alt="Image with className" class="custom-class" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with lazy loading eager" height="300" width="300" loading="eager" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="Image with path transformation" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img alt="Image with path transformation + custom transformations" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img alt="path not respected with absolute url" height="300" width="300" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img alt="No width" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img alt="Custom deviceBreakpoints" loading="lazy" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-200,c-at_max 200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-400,c-at_max 400w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max 800w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-800,c-at_max"><img alt="Image with responsive off" height="300" width="300" loading="lazy" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed:w-3840,c-at_max"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with path transformation" height="300" width="300" src="https://ik.imagekit.io/demo/tr:h-100,w-100/sample-video.mp4"></video></div></div>