@graphcommerce/image 3.0.1 → 3.1.1

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 (4) hide show
  1. package/CHANGELOG.md +77 -68
  2. package/components/Image.tsx +75 -36
  3. package/config/config.ts +1 -0
  4. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,46 +1,82 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1307](https://github.com/ho-nl/m2-pwa/pull/1307) [`bd10506d3`](https://github.com/ho-nl/m2-pwa/commit/bd10506d32fdbc91d01dadc29a12ebd1e0943655) Thanks [@paales](https://github.com/paales)! - All default exports are now named exports internally and all `index.tsx` are renamed to the component name.
8
+
9
+ * [#1307](https://github.com/ho-nl/m2-pwa/pull/1307) [`27cb1f2d8`](https://github.com/ho-nl/m2-pwa/commit/27cb1f2d8dbfb8f1b301ce56fb6a2b6c1fc6a5ef) Thanks [@paales](https://github.com/paales)! - upgrade dependencies
10
+
11
+ * Updated dependencies [[`bd10506d3`](https://github.com/ho-nl/m2-pwa/commit/bd10506d32fdbc91d01dadc29a12ebd1e0943655), [`27cb1f2d8`](https://github.com/ho-nl/m2-pwa/commit/27cb1f2d8dbfb8f1b301ce56fb6a2b6c1fc6a5ef)]:
12
+ - @graphcommerce/framer-utils@3.0.4
13
+
14
+ ## 3.1.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [#1284](https://github.com/ho-nl/m2-pwa/pull/1284) [`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14) Thanks [@paales](https://github.com/paales)! - SvgIcon is now more extenable and flexible:
19
+
20
+ - It will automatically calculate the stroke-width of the SVG based on the rendered size, allowing for a more flexible use for icons.
21
+
22
+ - Make SvgIcon themable in your own Theme.
23
+
24
+ - Create overrides for components that will be used throughout the app.
25
+
26
+ ### Patch Changes
27
+
28
+ - [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96) Thanks [@paales](https://github.com/paales)! - made packages public
29
+
30
+ * [#1278](https://github.com/ho-nl/m2-pwa/pull/1278) [`81ea406d5`](https://github.com/ho-nl/m2-pwa/commit/81ea406d54d6b5c662c030a7fea444abc4117a20) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Upgraded dependencies to the latest version
31
+
32
+ * Updated dependencies [[`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96)]:
33
+ - @graphcommerce/framer-utils@3.0.3
34
+
35
+ ## 3.0.2
36
+
37
+ ### Patch Changes
38
+
39
+ - [#1276](https://github.com/ho-nl/m2-pwa/pull/1276) [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2) Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from `dependencies` to `peerDependencies`. The result of this is that there will be significantly less duplicate packages in the node_modules folders.
40
+
41
+ * [#1276](https://github.com/ho-nl/m2-pwa/pull/1276) [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d) Thanks [@paales](https://github.com/paales)! - Upgraded to [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be implementing [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) soon.
42
+
43
+ This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the frontend to be able to revalidate pages manually.
44
+
45
+ * Updated dependencies [[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2), [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
46
+ - @graphcommerce/framer-utils@3.0.2
47
+
3
48
  ## 3.0.1
4
49
 
5
50
  ### Patch Changes
6
51
 
7
- - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
8
- Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
9
- so that the packages link to back to the website and repository
10
- - Updated dependencies
11
- [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
52
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514) Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files, so that the packages link to back to the website and repository
53
+ - Updated dependencies [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
12
54
  - @graphcommerce/framer-utils@3.0.1
13
55
 
14
56
  ## 3.0.0
15
57
 
16
58
  ### Major Changes
17
59
 
18
- - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
19
- [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
20
- Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
60
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258) [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05) Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
21
61
 
22
62
  ### Patch Changes
23
63
 
24
- - Updated dependencies
25
- [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
64
+ - Updated dependencies [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
26
65
  - @graphcommerce/framer-utils@3.0.0
27
66
 
28
- All notable changes to this project will be documented in this file. See
29
- [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
67
+ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
30
68
 
31
69
  # [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.13...@graphcommerce/image@2.105.0) (2021-10-27)
32
70
 
33
71
  ### Features
34
72
 
35
- - **nextjs:** upgraded to nextjs 12
36
- ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
73
+ - **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
37
74
 
38
75
  ## [2.104.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.0...@graphcommerce/image@2.104.2) (2021-09-27)
39
76
 
40
77
  ### Bug Fixes
41
78
 
42
- - versions
43
- ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
79
+ - versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
44
80
 
45
81
  ## [2.104.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.104.0...@graphcommerce/image@2.104.1) (2021-09-27)
46
82
 
@@ -50,96 +86,69 @@ All notable changes to this project will be documented in this file. See
50
86
 
51
87
  ### Bug Fixes
52
88
 
53
- - cart item image sizes
54
- ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
55
- - ignore md files from triggering version updates
56
- ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
57
- - **image:** add loading attribute to unoptimized image
58
- ([13f7709](https://github.com/ho-nl/m2-pwa/commit/13f77096a5b1ed3f60cfa7b61ac7373d1a2b44d4))
59
- - **image:** change sizing of images on grid/productpage
60
- ([0e573b6](https://github.com/ho-nl/m2-pwa/commit/0e573b69a2d405126433e7c4747c01b533858b78))
61
- - **image:** component would rerender unnessarily
62
- ([bfc041d](https://github.com/ho-nl/m2-pwa/commit/bfc041d39e34faf60581dbdba7a15a32928368b3))
63
- - **image:** do not report when image isn't rendered yet
64
- ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
65
- - **image:** fix build
66
- ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
67
- - **image:** image decoding async added
68
- ([8c5f59f](https://github.com/ho-nl/m2-pwa/commit/8c5f59f54b9e28b60e197b7ddefdd78b71f6665e))
69
- - **image:** image src is visible while loading the image
70
- ([735d79e](https://github.com/ho-nl/m2-pwa/commit/735d79e8ccab296dcc5750458fc1760f17fe47c7))
71
- - **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of
72
- images
73
- ([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
74
- - introduced SvgImageSimple and solve issue with review chips
75
- ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
76
- - make packages private so they dont get published accidently
77
- ([f7b693f](https://github.com/ho-nl/m2-pwa/commit/f7b693ff6a4d232d0871f6a68922d14678853a96))
89
+ - cart item image sizes ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
90
+ - ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
91
+ - **image:** add loading attribute to unoptimized image ([13f7709](https://github.com/ho-nl/m2-pwa/commit/13f77096a5b1ed3f60cfa7b61ac7373d1a2b44d4))
92
+ - **image:** change sizing of images on grid/productpage ([0e573b6](https://github.com/ho-nl/m2-pwa/commit/0e573b69a2d405126433e7c4747c01b533858b78))
93
+ - **image:** component would rerender unnessarily ([bfc041d](https://github.com/ho-nl/m2-pwa/commit/bfc041d39e34faf60581dbdba7a15a32928368b3))
94
+ - **image:** do not report when image isn't rendered yet ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
95
+ - **image:** fix build ([b730cb6](https://github.com/ho-nl/m2-pwa/commit/b730cb6ae4e50dcf2f60e2046d6acf3047caacb3))
96
+ - **image:** image decoding async added ([8c5f59f](https://github.com/ho-nl/m2-pwa/commit/8c5f59f54b9e28b60e197b7ddefdd78b71f6665e))
97
+ - **image:** image src is visible while loading the image ([735d79e](https://github.com/ho-nl/m2-pwa/commit/735d79e8ccab296dcc5750458fc1760f17fe47c7))
98
+ - **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))
99
+ - introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
100
+ - make packages private so they dont get published accidently ([f7b693f](https://github.com/ho-nl/m2-pwa/commit/f7b693ff6a4d232d0871f6a68922d14678853a96))
78
101
 
79
102
  ### Features
80
103
 
81
- - **image:** allow passing props to the picture component
82
- ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
83
- - **image:** introduced completely rewritten Image component
84
- ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
85
- - **playwright:** added new playwright package to enable browser testing
86
- ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
87
- - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
88
- [@reachdigital](https://github.com/reachdigital)
89
- ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
90
- - upgraded to nextjs 11
91
- ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
104
+ - **image:** allow passing props to the picture component ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
105
+ - **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
106
+ - **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
107
+ - 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))
108
+ - upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
92
109
 
93
110
  # Change Log
94
111
 
95
- All notable changes to this project will be documented in this file. See
96
- [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
112
+ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
97
113
 
98
114
  # [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.102.1...@graphcommerce/image@2.103.0) (2021-09-01)
99
115
 
100
116
  ### Features
101
117
 
102
- - **image:** allow passing props to the picture component
103
- ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
118
+ - **image:** allow passing props to the picture component ([3425664](https://github.com/ho-nl/m2-pwa/commit/3425664f197974d2e9db048fc94d447b2d34c280))
104
119
 
105
120
  # [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.5...@graphcommerce/image@2.102.0) (2021-08-12)
106
121
 
107
122
  ### Features
108
123
 
109
- - upgraded to nextjs 11
110
- ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
124
+ - upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
111
125
 
112
126
  ## [2.101.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.3...@graphcommerce/image@2.101.4) (2021-08-09)
113
127
 
114
128
  ### Bug Fixes
115
129
 
116
- - **image:** do not report when image isn't rendered yet
117
- ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
130
+ - **image:** do not report when image isn't rendered yet ([5aa08ef](https://github.com/ho-nl/m2-pwa/commit/5aa08efc1eade69f53e1645c37fcb0632d83bc5e))
118
131
 
119
132
  ## [2.101.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.2...@graphcommerce/image@2.101.3) (2021-08-06)
120
133
 
121
134
  ### Bug Fixes
122
135
 
123
- - introduced SvgImageSimple and solve issue with review chips
124
- ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
136
+ - introduced SvgImageSimple and solve issue with review chips ([931d7fd](https://github.com/ho-nl/m2-pwa/commit/931d7fdcf0faa9d2264899b72e564138215b6bd8))
125
137
 
126
138
  ## [2.101.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.101.1...@graphcommerce/image@2.101.2) (2021-08-04)
127
139
 
128
140
  ### Bug Fixes
129
141
 
130
- - cart item image sizes
131
- ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
142
+ - cart item image sizes ([e7c860c](https://github.com/ho-nl/m2-pwa/commit/e7c860c785e172b9275e1a00c8b51509d6b297a8))
132
143
 
133
144
  # [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.100.12...@graphcommerce/image@2.101.0) (2021-07-26)
134
145
 
135
146
  ### Features
136
147
 
137
- - **playwright:** added new playwright package to enable browser testing
138
- ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
148
+ - **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
139
149
 
140
150
  ## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image@2.100.10...@graphcommerce/image@2.100.11) (2021-07-20)
141
151
 
142
152
  ### Bug Fixes
143
153
 
144
- - ignore md files from triggering version updates
145
- ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
154
+ - ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
package/components/Image.tsx CHANGED
@@ -1,17 +1,23 @@
1
+ /* eslint-disable @typescript-eslint/no-restricted-imports */
1
2
  /* eslint-disable prefer-const */
2
3
  /* eslint-disable no-param-reassign */
3
4
  /* eslint-disable @next/next/no-img-element */
4
5
  /* eslint-disable jsx-a11y/alt-text */
5
6
  import { useForkRef, styled, SxProps, Theme } from '@mui/material'
6
- import { LoaderValue, VALID_LOADERS } from 'next/dist/server/image-config'
7
+ import {
8
+ ImageConfigComplete,
9
+ LoaderValue,
10
+ VALID_LOADERS,
11
+ imageConfigDefault,
12
+ } from 'next/dist/server/image-config'
13
+ import { ImageConfigContext } from 'next/dist/shared/lib/image-config-context'
7
14
  import Head from 'next/head'
8
15
  import type { ImageLoaderProps, ImageLoader } from 'next/image'
9
- import React, { useEffect, useRef } from 'react'
16
+ import React, { useContext, useEffect, useMemo, useRef } from 'react'
10
17
  import {
11
18
  akamaiLoader,
12
19
  cloudinaryLoader,
13
20
  configDeviceSizes,
14
- configImageSizes,
15
21
  configLoader,
16
22
  configPath,
17
23
  DefaultImageLoaderProps,
@@ -21,7 +27,7 @@ import {
21
27
 
22
28
  if (typeof window === 'undefined') {
23
29
  // eslint-disable-next-line no-underscore-dangle
24
- ;(global as any).__NEXT_IMAGE_IMPORTED = true
30
+ global.__NEXT_IMAGE_IMPORTED = true
25
31
  }
26
32
 
27
33
  export type { ImageLoaderProps, ImageLoader }
@@ -54,7 +60,7 @@ interface StaticRequire {
54
60
  default: StaticImageData
55
61
  }
56
62
 
57
- type StaticImport = StaticRequire | StaticImageData
63
+ export type StaticImport = StaticRequire | StaticImageData
58
64
 
59
65
  export function isStaticRequire(src: StaticRequire | StaticImageData): src is StaticRequire {
60
66
  return (src as StaticRequire).default !== undefined
@@ -72,12 +78,13 @@ export function srcToString(src: StaticImport | string) {
72
78
  return isStaticImport(src) ? (isStaticRequire(src) ? src.default : src).src : src
73
79
  }
74
80
 
75
- // sort smallest to largest
76
- const allSizes = [...configDeviceSizes, ...configImageSizes]
77
- configDeviceSizes.sort((a, b) => a - b)
78
- allSizes.sort((a, b) => a - b)
81
+ // // sort smallest to largest
82
+ // const allSizes = [...configDeviceSizes, ...configImageSizes]
83
+ // configDeviceSizes.sort((a, b) => a - b)
84
+ // allSizes.sort((a, b) => a - b)
79
85
 
80
86
  function getWidths(
87
+ config: ImageLoaderProps['config'],
81
88
  width: number | undefined,
82
89
  layout: LayoutValue,
83
90
  sizes = '',
@@ -94,12 +101,12 @@ function getWidths(
94
101
  const smallestRatio = Math.min(...percentSizes) * 0.01
95
102
 
96
103
  return {
97
- widths: allSizes.filter((s) => s >= configDeviceSizes[0] * smallestRatio),
104
+ widths: config.allSizes.filter((s) => s >= configDeviceSizes[0] * smallestRatio),
98
105
  kind: 'w',
99
106
  }
100
107
  }
101
108
 
102
- return { widths: allSizes, kind: 'w' }
109
+ return { widths: config.allSizes, kind: 'w' }
103
110
  }
104
111
  if (typeof width !== 'number' || layout === 'fill') {
105
112
  return { widths: configDeviceSizes, kind: 'w' }
@@ -116,7 +123,7 @@ function getWidths(
116
123
  // > something like a magnifying glass.
117
124
  // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
118
125
  [width, width * 2 /* , width * 3*/].map(
119
- (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1],
126
+ (w) => config.allSizes.find((p) => p >= w) || config.allSizes[config.allSizes.length - 1],
120
127
  ),
121
128
  ),
122
129
  ]
@@ -131,23 +138,17 @@ type GenImgAttrsData = {
131
138
  quality?: number
132
139
  sizes: string
133
140
  scale: number
141
+ config: ImageLoaderProps['config']
134
142
  }
135
143
 
136
- function generateSrcSet({
137
- src,
138
- layout,
139
- width,
140
- quality = 52,
141
- sizes,
142
- loader,
143
- scale,
144
- }: GenImgAttrsData): string {
145
- const { widths, kind } = getWidths(width, layout, sizes)
144
+ function generateSrcSet(props: GenImgAttrsData): string {
145
+ const { src, layout, width, quality = 52, sizes, loader, scale, config } = props
146
+ const { widths, kind } = getWidths(config, width, layout, sizes)
146
147
 
147
148
  return widths
148
149
  .map(
149
150
  (w, i) =>
150
- `${loader({ src, quality, width: w })} ${
151
+ `${loader({ src, quality, width: w, config })} ${
151
152
  kind === 'w' ? Math.round(w * scale) : i + 1
152
153
  }${kind}`,
153
154
  )
@@ -237,6 +238,9 @@ export type ImageProps = IntrisincImage & {
237
238
  const Img = styled('img')({})
238
239
  const Picture = styled('picture')({})
239
240
 
241
+ // eslint-disable-next-line no-underscore-dangle
242
+ const configEnv = process.env.__NEXT_IMAGE_OPTS as unknown as ImageConfigComplete
243
+
240
244
  const Image = React.forwardRef<HTMLImageElement, ImageProps>(
241
245
  (
242
246
  {
@@ -261,6 +265,14 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
261
265
  const ref = useRef<HTMLImageElement>(null)
262
266
  const combinedRef = useForkRef(ref, forwardedRef)
263
267
 
268
+ const configContext = useContext(ImageConfigContext)
269
+ const config: ImageLoaderProps['config'] = useMemo(() => {
270
+ const c = configEnv || configContext || imageConfigDefault
271
+ const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
272
+ const deviceSizes = c.deviceSizes.sort((a, b) => a - b)
273
+ return { ...c, allSizes, deviceSizes }
274
+ }, [configContext])
275
+
264
276
  const sizesOrig =
265
277
  layout === 'fixed' && width && !sizesIncomming
266
278
  ? (`${width}px` as SizesString)
@@ -272,16 +284,16 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
272
284
  if (process.env.NODE_ENV === 'production') return () => {}
273
285
  if (!ref.current || unoptimized || dontReportWronglySizedImages) return () => {}
274
286
 
275
- function getContainedSize(img: HTMLImageElement) {
276
- let ratio = img.naturalWidth / img.naturalHeight
277
- let w = img.height * ratio
278
- let h = img.height
279
- if (w > img.width) {
280
- w = img.width
281
- h = img.width / ratio
282
- }
283
- return [w, h]
284
- }
287
+ // function getContainedSize(img: HTMLImageElement) {
288
+ // let ratio = img.naturalWidth / img.naturalHeight
289
+ // let w = img.height * ratio
290
+ // let h = img.height
291
+ // if (w > img.width) {
292
+ // w = img.width
293
+ // h = img.width / ratio
294
+ // }
295
+ // return [w, h]
296
+ // }
285
297
 
286
298
  function reportSizes(img: HTMLImageElement) {
287
299
  let ratio: number
@@ -433,9 +445,36 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
433
445
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
434
446
  if (src?.startsWith('data:') || src?.startsWith('blob:')) unoptimized = true
435
447
 
436
- const srcSet3x = generateSrcSet({ src, layout, loader, quality, sizes, width, scale: 1.5 })
437
- const srcSet2x = generateSrcSet({ src, layout, loader, quality, sizes, width, scale: 1 })
438
- const srcSet1x = generateSrcSet({ src, layout, loader, quality, sizes, width, scale: 0.5 })
448
+ const srcSet3x = generateSrcSet({
449
+ config,
450
+ src,
451
+ layout,
452
+ loader,
453
+ quality,
454
+ sizes,
455
+ width,
456
+ scale: 1.5,
457
+ })
458
+ const srcSet2x = generateSrcSet({
459
+ config,
460
+ src,
461
+ layout,
462
+ loader,
463
+ quality,
464
+ sizes,
465
+ width,
466
+ scale: 1,
467
+ })
468
+ const srcSet1x = generateSrcSet({
469
+ config,
470
+ src,
471
+ layout,
472
+ loader,
473
+ quality,
474
+ sizes,
475
+ width,
476
+ scale: 0.5,
477
+ })
439
478
 
440
479
  if (layout !== 'fixed' && !style) style = {}
441
480
  if (layout === 'responsive') style = { ...style, width: '100%', height: 'auto' }
package/config/config.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { ImageConfigComplete, imageConfigDefault } from 'next/dist/server/image-config'
2
+ // eslint-disable-next-line @typescript-eslint/no-restricted-imports
2
3
  import { ImageLoaderProps } from 'next/image'
3
4
 
4
5
  export type DefaultImageLoaderProps = ImageLoaderProps & { root: string }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/image",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "3.0.1",
5
+ "version": "3.1.1",
6
6
  "sideEffects": false,
7
7
  "scripts": {
8
8
  "dev": "tsc -W"
@@ -15,18 +15,19 @@
15
15
  }
16
16
  },
17
17
  "dependencies": {
18
- "@graphcommerce/framer-utils": "^3.0.1"
18
+ "@graphcommerce/framer-utils": "^3.0.4"
19
19
  },
20
20
  "devDependencies": {
21
- "@graphcommerce/eslint-config-pwa": "^4.0.1",
22
- "@graphcommerce/prettier-config-pwa": "^4.0.1",
23
- "@graphcommerce/typescript-config-pwa": "^4.0.1",
24
- "@playwright/test": "^1.18.1"
21
+ "@graphcommerce/eslint-config-pwa": "^4.0.5",
22
+ "@graphcommerce/prettier-config-pwa": "^4.0.3",
23
+ "@graphcommerce/typescript-config-pwa": "^4.0.2",
24
+ "@playwright/test": "^1.19.2"
25
25
  },
26
26
  "peerDependencies": {
27
- "next": "^12.0.10",
27
+ "@mui/material": "^5.5.0",
28
+ "next": "^12.1.0",
28
29
  "react": "^17.0.2",
29
30
  "react-dom": "^17.0.2",
30
- "type-fest": "^2.11.2"
31
+ "type-fest": "^2.12.0"
31
32
  }
32
33
  }