Skip to content

Commit 7d1cd53

Browse files
vis97cvis97c
committed
fix: handle nuxt hydration behavior
1 parent cfc06f8 commit 7d1cd53

File tree

10 files changed

+2948
-528
lines changed

10 files changed

+2948
-528
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ version: 2.1
66
defaults: &defaults
77
working_directory: ~/repo
88
docker:
9-
- image: cimg/node:20.18.3
9+
- image: cimg/node:20.19.3
1010

1111
release: &release
1212
<<: *defaults

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
},
3535
"packageManager": "[email protected]",
3636
"engines": {
37-
"node": ">=18",
37+
"node": ">=20.19.3",
3838
"yarn": ">=1.22.4"
3939
},
4040
"devDependencies": {

‎packages/common-enums/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"build": "yarn build:entries && yarn build:types"
4444
},
4545
"engines": {
46-
"node": ">=18",
46+
"node": ">=20.19.3",
4747
"yarn": ">=1.22.4"
4848
},
4949
"browserslist": [

‎packages/common-helpers/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
"@types/validator": "^13.11.1"
9292
},
9393
"engines": {
94-
"node": ">=18",
94+
"node": ">=20.19.3",
9595
"yarn": ">=1.22.4"
9696
},
9797
"browserslist": [

‎packages/common-types/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"sweetalert2": "^11.11.1"
3737
},
3838
"engines": {
39-
"node": ">=18",
39+
"node": ">=20.19.3",
4040
"yarn": ">=1.22.4"
4141
},
4242
"browserslist": [

‎packages/components-vue/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,20 +80,20 @@
8080
"storybook": "^8.1.1",
8181
"ts-md5": "^1.3.1",
8282
"validator": "^13.11.0",
83-
"vue": "^3.5.13",
84-
"vue-router": "^4.2.5"
83+
"vue": "^3.5.17",
84+
"vue-router": "^4.5.1"
8585
},
8686
"peerDependencies": {
87-
"vue": "^3.5.13",
88-
"vue-router": "^4.2.5"
87+
"vue": "^3.5.17",
88+
"vue-router": "^4.5.1"
8989
},
9090
"peerDependenciesMeta": {
9191
"vue-router": {
9292
"optional": true
9393
}
9494
},
9595
"engines": {
96-
"node": ">=18",
96+
"node": ">=20.19.3",
9797
"yarn": ">=1.22.4"
9898
}
9999
}

‎packages/components-vue/src/components/loader/ContentFetch.vue‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<BaseErrorBoundary :theme="theme">
33
<LoaderContent
44
v-bind="{
5-
content: !!content && patchedIsContent(content) && (!!fallback || firstLoad),
5+
content:
6+
!!content && patchedIsContent(content) && (!!fallback || firstLoad || hydrated),
67
errors,
78
loading,
89
refresh,
@@ -17,7 +18,9 @@
1718
:class="$attrs.class"
1819
>
1920
<slot
20-
v-if="!!content && patchedIsContent(content) && (!!fallback || firstLoad)"
21+
v-if="
22+
!!content && patchedIsContent(content) && (!!fallback || firstLoad || hydrated)
23+
"
2124
v-bind="{ content, refresh, loading, errors }"
2225
></slot>
2326
</LoaderContent>
@@ -108,35 +111,11 @@
108111
const useAsyncData: typeof useAsyncDataFn = internals?.useAsyncData ?? useAsyncDataFn;
109112
110113
const firstLoad = ref(false);
111-
const hydrated = ref(false);
112114
/** Whether component was deactivated by keep-alive */
113115
const deactivated = ref(false);
114116
115-
const hydrateContent = computed({
116-
get: () => (typeof fetchedContent !== "undefined" ? fetchedContent.value : undefined),
117-
set: (newContent) => {
118-
// prevent hydration
119-
if (deactivated.value) return;
120-
if (fetchedContent.value && !hydrated.value) return (hydrated.value = true);
121-
if (!props.preventAutoload && !firstLoad.value) return;
122-
123-
fetchedContent.value = newContent;
124-
},
125-
});
126-
const hydrateErrors = computed({
127-
get: () => (typeof errors !== "undefined" ? errors.value : undefined),
128-
set: (newContent) => {
129-
// prevent hydration
130-
if (deactivated.value) return;
131-
if (errors.value && !hydrated.value) return (hydrated.value = true);
132-
if (!props.preventAutoload && !firstLoad.value) return;
133-
134-
errors.value = newContent;
135-
},
136-
});
137-
138117
const {
139-
data: fetchedContent,
118+
data: content,
140119
pending: loading,
141120
error: errors,
142121
refresh,
@@ -182,7 +161,7 @@
182161
183162
firstLoad.value = true;
184163
185-
return newData;
164+
return newData ?? props.fallback ?? null;
186165
},
187166
{
188167
default: () => props.fallback,
@@ -191,7 +170,33 @@
191170
}
192171
);
193172
194-
const content = computed(() => fetchedContent.value ?? props.fallback);
173+
/**
174+
* Whether content was hydrated
175+
* By default, if firstLoad is not set but there is content, it means it was hydrated
176+
*/
177+
const hydrated = ref<boolean>(!props.fallback && !!content.value);
178+
const hydrateContent = computed({
179+
get: () => (typeof content !== "undefined" ? content.value : undefined),
180+
set: (newContent) => {
181+
// prevent hydration
182+
if (deactivated.value) return;
183+
if (content.value && !hydrated.value) return (hydrated.value = true);
184+
if (!props.preventAutoload && !firstLoad.value) return;
185+
186+
content.value = newContent;
187+
},
188+
});
189+
const hydrateErrors = computed({
190+
get: () => (typeof errors !== "undefined" ? errors.value : undefined),
191+
set: (newContent) => {
192+
// prevent hydration
193+
if (deactivated.value) return;
194+
if (errors.value && !hydrated.value) return (hydrated.value = true);
195+
if (!props.preventAutoload && !firstLoad.value) return;
196+
197+
errors.value = newContent;
198+
},
199+
});
195200
196201
function patchedIsContent(c?: T): boolean {
197202
return props.isContent?.(c) ?? !!c;

‎packages/nuxt/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"dist"
3535
],
3636
"engines": {
37-
"node": ">=18",
37+
"node": ">=20.19.3",
3838
"yarn": ">=1.22.4"
3939
},
4040
"scripts": {
@@ -47,7 +47,7 @@
4747
},
4848
"dependencies": {
4949
"@nuxt/image": "^1.10.0",
50-
"@nuxt/kit": "^3.16.1",
50+
"@nuxt/kit": "^3.17.6",
5151
"@open-xamu-co/ui-common-enums": "link:../common-enums",
5252
"@open-xamu-co/ui-common-helpers": "link:../common-helpers",
5353
"@open-xamu-co/ui-components-vue": "link:../components-vue",
@@ -64,7 +64,7 @@
6464
"@types/lodash-es": "^4.14.192",
6565
"lodash-es": "^4.17.21",
6666
"nuxi": "^3.23.1",
67-
"nuxt": "^3.16.1",
67+
"nuxt": "^3.17.6",
6868
"vitest": "^0.33.0"
6969
}
7070
}

‎packages/styles/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
"sassdoc-theme-herman": "^5.0.1"
8787
},
8888
"engines": {
89-
"node": ">=18",
89+
"node": ">=20.19.3",
9090
"yarn": ">=1.22.4"
9191
},
9292
"browserslist": [

0 commit comments

Comments
 (0)