@graphcommerce/next-ui 8.0.5-canary.1 → 8.0.5-canary.2
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.
- package/CHANGELOG.md +8 -0
- package/LazyHydrate/LazyHydrate.tsx +17 -7
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 8.0.5-canary.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
|
|
8
|
+
|
|
9
|
+
Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
|
|
10
|
+
|
|
3
11
|
## 8.0.5-canary.1
|
|
4
12
|
|
|
5
13
|
## 8.0.5-canary.0
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { Box, BoxProps } from '@mui/material'
|
|
1
2
|
import React, { useState, useRef, startTransition, useLayoutEffect, useEffect } from 'react'
|
|
2
3
|
|
|
3
4
|
// Make sure the server doesn't choke on the useLayoutEffect
|
|
4
5
|
export const useLayoutEffect2 = typeof window !== 'undefined' ? useLayoutEffect : useEffect
|
|
5
6
|
|
|
6
|
-
export type LazyHydrateProps = {
|
|
7
|
+
export type LazyHydrateProps = BoxProps<'div'> & {
|
|
7
8
|
/**
|
|
8
9
|
* The content is always rendered on the server and on the client it uses the server rendered HTML until it is hydrated.
|
|
9
10
|
*/
|
|
@@ -25,8 +26,8 @@ export type LazyHydrateProps = {
|
|
|
25
26
|
* This can be a way to improve the TBT of a page.
|
|
26
27
|
*/
|
|
27
28
|
export function LazyHydrate(props: LazyHydrateProps) {
|
|
28
|
-
const { hydrated, children } = props
|
|
29
|
-
const rootRef = useRef<
|
|
29
|
+
const { hydrated, children, ...elementProps } = props
|
|
30
|
+
const rootRef = useRef<HTMLDivElement>(null)
|
|
30
31
|
|
|
31
32
|
const [isHydrated, setIsHydrated] = useState(hydrated || false)
|
|
32
33
|
if (!isHydrated && hydrated) setIsHydrated(true)
|
|
@@ -58,15 +59,24 @@ export function LazyHydrate(props: LazyHydrateProps) {
|
|
|
58
59
|
}, [hydrated, isHydrated])
|
|
59
60
|
|
|
60
61
|
if (isHydrated) {
|
|
61
|
-
return <
|
|
62
|
+
return <Box {...elementProps}>{children}</Box>
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
if (typeof window === 'undefined') {
|
|
65
|
-
return
|
|
66
|
+
return (
|
|
67
|
+
<Box data-lazy-hydrate {...elementProps}>
|
|
68
|
+
{children}
|
|
69
|
+
</Box>
|
|
70
|
+
)
|
|
66
71
|
}
|
|
67
72
|
|
|
68
73
|
return (
|
|
69
|
-
|
|
70
|
-
|
|
74
|
+
<Box
|
|
75
|
+
ref={rootRef}
|
|
76
|
+
// eslint-disable-next-line react/no-danger
|
|
77
|
+
dangerouslySetInnerHTML={{ __html: '' }}
|
|
78
|
+
suppressHydrationWarning
|
|
79
|
+
{...elementProps}
|
|
80
|
+
/>
|
|
71
81
|
)
|
|
72
82
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/next-ui",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "8.0.5-canary.
|
|
5
|
+
"version": "8.0.5-canary.2",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"typescript": "5.3.3"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@graphcommerce/eslint-config-pwa": "^8.0.5-canary.
|
|
29
|
-
"@graphcommerce/framer-next-pages": "^8.0.5-canary.
|
|
30
|
-
"@graphcommerce/framer-scroller": "^8.0.5-canary.
|
|
31
|
-
"@graphcommerce/framer-utils": "^8.0.5-canary.
|
|
32
|
-
"@graphcommerce/image": "^8.0.5-canary.
|
|
33
|
-
"@graphcommerce/lingui-next": "^8.0.5-canary.
|
|
34
|
-
"@graphcommerce/prettier-config-pwa": "^8.0.5-canary.
|
|
35
|
-
"@graphcommerce/typescript-config-pwa": "^8.0.5-canary.
|
|
28
|
+
"@graphcommerce/eslint-config-pwa": "^8.0.5-canary.2",
|
|
29
|
+
"@graphcommerce/framer-next-pages": "^8.0.5-canary.2",
|
|
30
|
+
"@graphcommerce/framer-scroller": "^8.0.5-canary.2",
|
|
31
|
+
"@graphcommerce/framer-utils": "^8.0.5-canary.2",
|
|
32
|
+
"@graphcommerce/image": "^8.0.5-canary.2",
|
|
33
|
+
"@graphcommerce/lingui-next": "^8.0.5-canary.2",
|
|
34
|
+
"@graphcommerce/prettier-config-pwa": "^8.0.5-canary.2",
|
|
35
|
+
"@graphcommerce/typescript-config-pwa": "^8.0.5-canary.2",
|
|
36
36
|
"@lingui/core": "^4.2.1",
|
|
37
37
|
"@lingui/macro": "^4.2.1",
|
|
38
38
|
"@lingui/react": "^4.2.1",
|