valtio-define 1.3.4 → 1.4.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.
package/README.md
CHANGED
|
@@ -124,7 +124,7 @@ Save and restore your store state using the `persist` plugin.
|
|
|
124
124
|
|
|
125
125
|
### Manual Hydration (SSR Friendly)
|
|
126
126
|
|
|
127
|
-
To avoid hydration mismatches during Server-Side Rendering, disable automatic hydration and
|
|
127
|
+
To avoid hydration mismatches during Server-Side Rendering, disable automatic hydration and rehydrate it in a `useEffect`.
|
|
128
128
|
|
|
129
129
|
```tsx
|
|
130
130
|
// Register with hydrate disabled
|
|
@@ -132,7 +132,7 @@ store.use(persist({ hydrate: false }))
|
|
|
132
132
|
|
|
133
133
|
// In your Client Entry / App Root
|
|
134
134
|
useEffect(() => {
|
|
135
|
-
store.$persist.
|
|
135
|
+
store.$persist.rehydrate()
|
|
136
136
|
}, [])
|
|
137
137
|
```
|
|
138
138
|
|
|
@@ -224,6 +224,11 @@ valtio.use(myPlugin())
|
|
|
224
224
|
// Local
|
|
225
225
|
const store = defineStore({ /* ... */ })
|
|
226
226
|
store.use(myPlugin())
|
|
227
|
+
|
|
228
|
+
// Local options
|
|
229
|
+
const store = defineStore({
|
|
230
|
+
use: [myPlugin()],
|
|
231
|
+
})
|
|
227
232
|
```
|
|
228
233
|
|
|
229
234
|
### Creating a Custom Plugin
|
|
@@ -8,7 +8,7 @@ function persist({ hydrate = true } = {}) {
|
|
|
8
8
|
return (context) => {
|
|
9
9
|
const { persist, getters } = context.options;
|
|
10
10
|
const { $state } = context.store;
|
|
11
|
-
context.store.$persist?.
|
|
11
|
+
context.store.$persist?.dehydrate?.();
|
|
12
12
|
if (!persist) return;
|
|
13
13
|
const getterKeys = new Set(Object.keys(getters || {}));
|
|
14
14
|
const options = persist === true ? {} : persist;
|
|
@@ -27,17 +27,17 @@ function persist({ hydrate = true } = {}) {
|
|
|
27
27
|
}
|
|
28
28
|
meta.hydrated = true;
|
|
29
29
|
}
|
|
30
|
-
function
|
|
30
|
+
function rehydrate() {
|
|
31
31
|
meta.mounted = true;
|
|
32
32
|
const value = storage.getItem(key);
|
|
33
33
|
value instanceof Promise ? value.then(initialize) : initialize(value);
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function dehydrate() {
|
|
36
36
|
meta.unsubscribe?.();
|
|
37
37
|
meta.unsubscribe = void 0;
|
|
38
38
|
}
|
|
39
39
|
function watch() {
|
|
40
|
-
|
|
40
|
+
dehydrate();
|
|
41
41
|
meta.unsubscribe = subscribe($state, () => {
|
|
42
42
|
if (!meta.hydrated) return;
|
|
43
43
|
const statePaths = (options.paths || Object.keys($state)).filter((p) => !getterKeys.has(p)).reduce((acc, p) => set(acc, p, get($state, p)), {});
|
|
@@ -45,11 +45,11 @@ function persist({ hydrate = true } = {}) {
|
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
47
|
context.store.$persist = {
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
rehydrate,
|
|
49
|
+
dehydrate,
|
|
50
50
|
meta
|
|
51
51
|
};
|
|
52
|
-
hydrate && !meta.mounted &&
|
|
52
|
+
hydrate && !meta.mounted && rehydrate();
|
|
53
53
|
watch();
|
|
54
54
|
};
|
|
55
55
|
}
|
package/package.json
CHANGED