@graphcommerce/image 2.105.13 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +53 -38
  2. package/components/Image.tsx +15 -8
  3. package/package.json +9 -15
package/CHANGELOG.md CHANGED
@@ -1,68 +1,83 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
3
+ ## 3.0.0
5
4
 
6
- # [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.13...@graphcommerce/image@2.105.0) (2021-10-27)
5
+ ### Major Changes
7
6
 
7
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
8
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
9
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
8
10
 
9
- ### Features
11
+ ### Patch Changes
10
12
 
11
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
13
+ - Updated dependencies
14
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
15
+ - @graphcommerce/framer-utils@3.0.0
12
16
 
17
+ All notable changes to this project will be documented in this file. See
18
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
13
19
 
20
+ # [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.13...@graphcommerce/image@2.105.0) (2021-10-27)
14
21
 
22
+ ### Features
15
23
 
24
+ - **nextjs:** upgraded to nextjs 12
25
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
16
26
 
17
27
  ## [2.104.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.0...@graphcommerce/image@2.104.2) (2021-09-27)
18
28
 
19
-
20
29
  ### Bug Fixes
21
30
 
22
- * versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
23
-
24
-
25
-
26
-
31
+ - versions
32
+ ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
27
33
 
28
34
  ## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.0...@graphcommerce/image@2.104.1) (2021-09-27)
29
35
 
30
36
  **Note:** Version bump only for package @graphcommerce/image
31
37
 
32
-
33
-
34
-
35
-
36
38
  # 2.104.0 (2021-09-27)
37
39
 
38
-
39
40
  ### Bug Fixes
40
41
 
41
- * cart item image sizes ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
42
- * ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
43
- * **image:** add loading attribute to unoptimized image ([13f7709](https://github.com/ho-nl/m2-pwa/commit/13f77096a5b1ed3f60cfa7b61ac7373d1a2b44d4))
44
- * **image:** change sizing of images on grid/productpage ([0e573b6](https://github.com/ho-nl/m2-pwa/commit/0e573b69a2d405126433e7c4747c01b533858b78))
45
- * **image:** component would rerender unnessarily ([bfc041d](https://github.com/ho-nl/m2-pwa/commit/bfc041d39e34faf60581dbdba7a15a32928368b3))
46
- * **image:** do not report when image isn't rendered yet ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
47
- * **image:** fix build ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
48
- * **image:** image decoding async added ([8c5f59f](https://github.com/ho-nl/m2-pwa/commit/8c5f59f54b9e28b60e197b7ddefdd78b71f6665e))
49
- * **image:** image src is visible while loading the image ([735d79e](https://github.com/ho-nl/m2-pwa/commit/735d79e8ccab296dcc5750458fc1760f17fe47c7))
50
- * **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of images ([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
51
- * introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
52
- * make packages private so they dont get published accidently ([f7b693f](https://github.com/ho-nl/m2-pwa/commit/f7b693ff6a4d232d0871f6a68922d14678853a96))
53
-
42
+ - cart item image sizes
43
+ ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
44
+ - ignore md files from triggering version updates
45
+ ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
46
+ - **image:** add loading attribute to unoptimized image
47
+ ([13f7709](https://github.com/ho-nl/m2-pwa/commit/13f77096a5b1ed3f60cfa7b61ac7373d1a2b44d4))
48
+ - **image:** change sizing of images on grid/productpage
49
+ ([0e573b6](https://github.com/ho-nl/m2-pwa/commit/0e573b69a2d405126433e7c4747c01b533858b78))
50
+ - **image:** component would rerender unnessarily
51
+ ([bfc041d](https://github.com/ho-nl/m2-pwa/commit/bfc041d39e34faf60581dbdba7a15a32928368b3))
52
+ - **image:** do not report when image isn't rendered yet
53
+ ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
54
+ - **image:** fix build
55
+ ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
56
+ - **image:** image decoding async added
57
+ ([8c5f59f](https://github.com/ho-nl/m2-pwa/commit/8c5f59f54b9e28b60e197b7ddefdd78b71f6665e))
58
+ - **image:** image src is visible while loading the image
59
+ ([735d79e](https://github.com/ho-nl/m2-pwa/commit/735d79e8ccab296dcc5750458fc1760f17fe47c7))
60
+ - **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of
61
+ images
62
+ ([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
63
+ - introduced SvgImageSimple and solve issue with review chips
64
+ ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
65
+ - make packages private so they dont get published accidently
66
+ ([f7b693f](https://github.com/ho-nl/m2-pwa/commit/f7b693ff6a4d232d0871f6a68922d14678853a96))
54
67
 
55
68
  ### Features
56
69
 
57
- * **image:** allow passing props to the picture component ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
58
- * **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
59
- * **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
60
- * renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
61
- * upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
62
-
63
-
64
-
65
-
70
+ - **image:** allow passing props to the picture component
71
+ ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
72
+ - **image:** introduced completely rewritten Image component
73
+ ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
74
+ - **playwright:** added new playwright package to enable browser testing
75
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
76
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
77
+ [@reachdigital](https://github.com/reachdigital)
78
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
79
+ - upgraded to nextjs 11
80
+ ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
66
81
 
67
82
  # Change Log
68
83
 
package/components/Image.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  /* eslint-disable no-param-reassign */
3
3
  /* eslint-disable @next/next/no-img-element */
4
4
  /* eslint-disable jsx-a11y/alt-text */
5
- import { useForkRef } from '@material-ui/core'
5
+ import { useForkRef, styled, SxProps, Theme } from '@mui/material'
6
6
  import { LoaderValue, VALID_LOADERS } from 'next/dist/server/image-config'
7
7
  import Head from 'next/head'
8
8
  import type { ImageLoaderProps, ImageLoader } from 'next/image'
@@ -43,8 +43,6 @@ type LayoutValue = 'fill' | 'fixed' | 'intrinsic' | 'responsive' | undefined
43
43
 
44
44
  type PlaceholderValue = 'blur' | 'empty'
45
45
 
46
- type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
47
-
48
46
  interface StaticImageData {
49
47
  src: string
50
48
  height: number
@@ -70,6 +68,10 @@ export function isStaticImport(src: string | StaticImport): src is StaticImport
70
68
  return typeof src === 'object' && (isStaticRequire(src) || isStaticImageData(src))
71
69
  }
72
70
 
71
+ export function srcToString(src: StaticImport | string) {
72
+ return isStaticImport(src) ? (isStaticRequire(src) ? src.default : src).src : src
73
+ }
74
+
73
75
  // sort smallest to largest
74
76
  const allSizes = [...configDeviceSizes, ...configImageSizes]
75
77
  configDeviceSizes.sort((a, b) => a - b)
@@ -212,7 +214,7 @@ export type ImageProps = IntrisincImage & {
212
214
  dontReportWronglySizedImages?: boolean
213
215
  width?: number
214
216
  height?: number
215
- pictureProps?: JSX.IntrinsicElements['picture']
217
+ pictureProps?: JSX.IntrinsicElements['picture'] & { sx?: SxProps<Theme> }
216
218
  /**
217
219
  * Possible values:
218
220
  *
@@ -228,8 +230,13 @@ export type ImageProps = IntrisincImage & {
228
230
  placeholder?: PlaceholderValue
229
231
  /** Size the image is rendered on mobile */
230
232
  sizes?: SizesString | SizesRecord
233
+
234
+ sx?: SxProps<Theme>
231
235
  }
232
236
 
237
+ const Img = styled('img')({})
238
+ const Picture = styled('picture')({})
239
+
233
240
  const Image = React.forwardRef<HTMLImageElement, ImageProps>(
234
241
  (
235
242
  {
@@ -438,7 +445,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
438
445
  return (
439
446
  <>
440
447
  {unoptimized ? (
441
- <img
448
+ <Img
442
449
  ref={combinedRef}
443
450
  {...imgProps}
444
451
  loading={loading ?? 'lazy'}
@@ -449,7 +456,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
449
456
  style={style}
450
457
  />
451
458
  ) : (
452
- <picture {...pictureProps}>
459
+ <Picture {...pictureProps}>
453
460
  <source media='(-webkit-min-device-pixel-ratio: 2.5)' srcSet={srcSet3x} sizes={sizes} />
454
461
  <source media='(-webkit-min-device-pixel-ratio: 1.5)' srcSet={srcSet2x} sizes={sizes} />
455
462
  <source
@@ -457,7 +464,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
457
464
  srcSet={srcSet1x}
458
465
  sizes={sizes}
459
466
  />
460
- <img
467
+ <Img
461
468
  ref={combinedRef}
462
469
  {...imgProps}
463
470
  src={src}
@@ -469,7 +476,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
469
476
  data-nimg
470
477
  decoding='async'
471
478
  />
472
- </picture>
479
+ </Picture>
473
480
  )}
474
481
  {loading === 'eager' && (
475
482
  <Head>
package/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "@graphcommerce/image",
3
- "version": "2.105.13",
3
+ "version": "3.0.0",
4
4
  "sideEffects": false,
5
5
  "scripts": {
6
6
  "dev": "tsc -W"
7
7
  },
8
8
  "prettier": "@graphcommerce/prettier-config-pwa",
9
- "browserslist": [
10
- "extends @graphcommerce/browserslist-config-pwa"
11
- ],
12
9
  "eslintConfig": {
13
10
  "extends": "@graphcommerce/eslint-config-pwa",
14
11
  "parserOptions": {
@@ -16,21 +13,18 @@
16
13
  }
17
14
  },
18
15
  "dependencies": {
19
- "@graphcommerce/framer-utils": "^2.103.21"
16
+ "@graphcommerce/framer-utils": "^3.0.0"
20
17
  },
21
18
  "devDependencies": {
22
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
23
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
24
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
25
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
26
- "@playwright/test": "^1.17.1"
19
+ "@graphcommerce/eslint-config-pwa": "^4.0.0",
20
+ "@graphcommerce/prettier-config-pwa": "^4.0.0",
21
+ "@graphcommerce/typescript-config-pwa": "^4.0.0",
22
+ "@playwright/test": "^1.18.1"
27
23
  },
28
24
  "peerDependencies": {
29
- "clsx": "^1.1.1",
30
- "next": "^12.0.7",
25
+ "next": "^12.0.10",
31
26
  "react": "^17.0.2",
32
27
  "react-dom": "^17.0.2",
33
- "type-fest": "^2.8.0"
34
- },
35
- "gitHead": "ddea6bd034cb06864b33fc4d8af9a3b5dad1c914"
28
+ "type-fest": "^2.11.2"
29
+ }
36
30
  }