@graphcommerce/image 3.1.4 → 3.1.7

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 3.1.7
+
+### Patch Changes
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+- Updated dependencies [[`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb)]:
+  - @graphcommerce/framer-utils@3.1.4
+
+## 3.1.6
+
+### Patch Changes
+
+- Updated dependencies [[`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/framer-utils@3.1.3
+
+## 3.1.5
+
+### Patch Changes
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
+
+- Updated dependencies [[`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4)]:
+  - @graphcommerce/framer-utils@3.1.2
+
 ## 3.1.4
 
 ### Patch Changes

package/components/Image.tsx

@@ -27,11 +27,13 @@ import {
 
 if (typeof window === 'undefined') {
   // eslint-disable-next-line no-underscore-dangle
-  global.__NEXT_IMAGE_IMPORTED = true
+  ;(global as any).__NEXT_IMAGE_IMPORTED = true
 }
 
 export type { ImageLoaderProps, ImageLoader }
 
+type ImageConfig = ImageConfigComplete & { allSizes: number[] }
+
 const DEFAULT_SIZES: SizesRecord = { 0: '100vw', 1200: '50vw' }
 
 const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const
@@ -84,7 +86,7 @@ export function srcToString(src: StaticImport | string) {
 // allSizes.sort((a, b) => a - b)
 
 function getWidths(
-  config: ImageLoaderProps['config'],
+  config: ImageConfig,
   width: number | undefined,
   layout: LayoutValue,
   sizes = '',
@@ -138,7 +140,7 @@ type GenImgAttrsData = {
   quality?: number
   sizes: string
   scale: number
-  config: ImageLoaderProps['config']
+  config: ImageConfig
 }
 
 function generateSrcSet(props: GenImgAttrsData): string {
@@ -148,7 +150,7 @@ function generateSrcSet(props: GenImgAttrsData): string {
   return widths
     .map(
       (w, i) =>
-        `${loader({ src, quality, width: w, config })} ${
+        `${loader({ src, quality, width: w })} ${
           kind === 'w' ? Math.round(w * scale) : i + 1
         }${kind}`,
     )
@@ -266,7 +268,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
     const combinedRef = useForkRef(ref, forwardedRef)
 
     const configContext = useContext(ImageConfigContext)
-    const config: ImageLoaderProps['config'] = useMemo(() => {
+    const config: ImageConfig = useMemo(() => {
       const c = configEnv || configContext || imageConfigDefault
       const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
       const deviceSizes = c.deviceSizes.sort((a, b) => a - b)
@@ -528,27 +530,24 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
                   rel='preload'
                   as='image'
                   media='(-webkit-min-device-pixel-ratio: 2.5)'
-                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
-                  imagesrcset={srcSet3x}
-                  imagesizes={sizes}
+                  imageSrcSet={srcSet3x}
+                  imageSizes={sizes}
                 />
                 <link
                   key={`img-${srcSet2x}${sizes}`}
                   rel='preload'
                   as='image'
                   media='(-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49)'
-                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
-                  imagesrcset={srcSet2x}
-                  imagesizes={sizes}
+                  imageSrcSet={srcSet2x}
+                  imageSizes={sizes}
                 />
                 <link
                   key={`img-${srcSet1x}${sizes}`}
                   rel='preload'
                   as='image'
                   media='(-webkit-max-device-pixel-ratio: 1.49)'
-                  // @ts-expect-error imagesrcset/imagesizes is not yet in the link element type.
-                  imagesrcset={srcSet1x}
-                  imagesizes={sizes}
+                  imageSrcSet={srcSet1x}
+                  imageSizes={sizes}
                 />
               </>
             )}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/image",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.4",
+  "version": "3.1.7",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,19 +15,19 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.1"
+    "@graphcommerce/framer-utils": "3.1.4"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.4",
-    "@graphcommerce/prettier-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.20.1",
-    "type-fest": "2.12.1"
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
   },
   "peerDependencies": {
     "@mui/material": "5.5.3",
-    "next": "12.1.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next": "^12.1.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package/types.d.ts

@@ -1,5 +0,0 @@
-declare namespace NodeJS {
-  interface Global {
-    __NEXT_IMAGE_IMPORTED?: boolean
-  }
-}