@evolu/react 9.0.1-preview.5 → 10.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.
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/useIsSsr.d.ts +7 -0
- package/dist/useIsSsr.d.ts.map +1 -0
- package/dist/useIsSsr.js +13 -0
- package/dist/useQueries.js +2 -2
- package/dist/useQuery.d.ts.map +1 -1
- package/dist/useQuery.js +3 -3
- package/package.json +3 -3
- package/src/index.ts +1 -1
- package/src/useIsSsr.ts +15 -0
- package/src/useQueries.ts +2 -2
- package/src/useQuery.ts +4 -3
- package/dist/useWasSsr.d.ts +0 -12
- package/dist/useWasSsr.d.ts.map +0 -1
- package/dist/useWasSsr.js +0 -17
- package/src/useWasSsr.ts +0 -23
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAE1C,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAE1C,cAAc,eAAe,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsSsr.d.ts","sourceRoot":"","sources":["../src/useIsSsr.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,QAAO,OAG3B,CAAC"}
|
package/dist/useIsSsr.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { constFalse, constTrue } from "@evolu/common";
|
|
2
|
+
import { useSyncExternalStore } from "react";
|
|
3
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4
|
+
const emptySubscribe = () => () => { };
|
|
5
|
+
/**
|
|
6
|
+
* Avoiding hydration mismatches.
|
|
7
|
+
*
|
|
8
|
+
* @see https://kurtextrem.de/posts/react-uses-hydration
|
|
9
|
+
*/
|
|
10
|
+
export const useIsSsr = () => {
|
|
11
|
+
// TODO: Consider useDeferredValue(isSSRSync);
|
|
12
|
+
return useSyncExternalStore(emptySubscribe, constFalse, constTrue);
|
|
13
|
+
};
|
package/dist/useQueries.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { use, useRef } from "react";
|
|
2
2
|
import { useEvolu } from "./useEvolu.js";
|
|
3
3
|
import { useQuerySubscription } from "./useQuerySubscription.js";
|
|
4
|
-
import {
|
|
4
|
+
import { useIsSsr } from "./useIsSsr.js";
|
|
5
5
|
/**
|
|
6
6
|
* The same as {@link useQuery}, but for many queries.
|
|
7
7
|
*
|
|
@@ -11,7 +11,7 @@ export const useQueries = (queries, options = {}) => {
|
|
|
11
11
|
const evolu = useEvolu();
|
|
12
12
|
const once = useRef(options).current.once;
|
|
13
13
|
const allQueries = once ? queries.concat(once) : queries;
|
|
14
|
-
const wasSSR =
|
|
14
|
+
const wasSSR = useIsSsr();
|
|
15
15
|
if (wasSSR) {
|
|
16
16
|
if (!options.promises)
|
|
17
17
|
void evolu.loadQueries(allQueries);
|
package/dist/useQuery.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAO5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EACpC,OAAO,KAAK,CAAC,CAAC,CAAC,EACf,UAAS,OAAO,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAEvB,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAM,KACN,SAAS,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useQuery.d.ts","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAO5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EACpC,OAAO,KAAK,CAAC,CAAC,CAAC,EACf,UAAS,OAAO,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAEvB,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAM,KACN,SAAS,CAAC,CAAC,CAWb,CAAC"}
|
package/dist/useQuery.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { use } from "react";
|
|
2
2
|
import { useEvolu } from "./useEvolu.js";
|
|
3
3
|
import { useQuerySubscription } from "./useQuerySubscription.js";
|
|
4
|
-
import {
|
|
4
|
+
import { useIsSsr } from "./useIsSsr.js";
|
|
5
5
|
/**
|
|
6
6
|
* Load and subscribe to the Query, and return an object with `rows` and `row`
|
|
7
7
|
* properties that are automatically updated when data changes.
|
|
@@ -33,8 +33,8 @@ import { useWasSsr } from "./useWasSsr.js";
|
|
|
33
33
|
*/
|
|
34
34
|
export const useQuery = (query, options = {}) => {
|
|
35
35
|
const evolu = useEvolu();
|
|
36
|
-
const
|
|
37
|
-
if (
|
|
36
|
+
const isSSR = useIsSsr();
|
|
37
|
+
if (isSSR) {
|
|
38
38
|
if (!options.promise)
|
|
39
39
|
void evolu.loadQuery(query);
|
|
40
40
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@evolu/react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"description": "Evolu for React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"evolu",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"shx": "^0.4.0",
|
|
37
37
|
"typescript": "^5.9.2",
|
|
38
38
|
"vitest": "^4.0.4",
|
|
39
|
-
"@evolu/common": "
|
|
39
|
+
"@evolu/common": "7.0.0",
|
|
40
40
|
"@evolu/tsconfig": "0.0.2"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@evolu/common": "^
|
|
43
|
+
"@evolu/common": "^7.0.0",
|
|
44
44
|
"react": ">=19"
|
|
45
45
|
},
|
|
46
46
|
"publishConfig": {
|
package/src/index.ts
CHANGED
package/src/useIsSsr.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { constFalse, constTrue } from "@evolu/common";
|
|
2
|
+
import { useSyncExternalStore } from "react";
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5
|
+
const emptySubscribe = () => () => {};
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Avoiding hydration mismatches.
|
|
9
|
+
*
|
|
10
|
+
* @see https://kurtextrem.de/posts/react-uses-hydration
|
|
11
|
+
*/
|
|
12
|
+
export const useIsSsr = (): boolean => {
|
|
13
|
+
// TODO: Consider useDeferredValue(isSSRSync);
|
|
14
|
+
return useSyncExternalStore(emptySubscribe, constFalse, constTrue);
|
|
15
|
+
};
|
package/src/useQueries.ts
CHANGED
|
@@ -8,7 +8,7 @@ import { use, useRef } from "react";
|
|
|
8
8
|
import { useEvolu } from "./useEvolu.js";
|
|
9
9
|
import type { useQuery } from "./useQuery.js";
|
|
10
10
|
import { useQuerySubscription } from "./useQuerySubscription.js";
|
|
11
|
-
import {
|
|
11
|
+
import { useIsSsr } from "./useIsSsr.js";
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* The same as {@link useQuery}, but for many queries.
|
|
@@ -35,7 +35,7 @@ export const useQueries = <
|
|
|
35
35
|
const evolu = useEvolu();
|
|
36
36
|
const once = useRef(options).current.once;
|
|
37
37
|
const allQueries = once ? queries.concat(once) : queries;
|
|
38
|
-
const wasSSR =
|
|
38
|
+
const wasSSR = useIsSsr();
|
|
39
39
|
if (wasSSR) {
|
|
40
40
|
if (!options.promises) void evolu.loadQueries(allQueries);
|
|
41
41
|
} else {
|
package/src/useQuery.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { use } from "react";
|
|
|
3
3
|
import { useEvolu } from "./useEvolu.js";
|
|
4
4
|
import type { useQueries } from "./useQueries.js";
|
|
5
5
|
import { useQuerySubscription } from "./useQuerySubscription.js";
|
|
6
|
-
import {
|
|
6
|
+
import { useIsSsr } from "./useIsSsr.js";
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Load and subscribe to the Query, and return an object with `rows` and `row`
|
|
@@ -45,12 +45,13 @@ export const useQuery = <R extends Row>(
|
|
|
45
45
|
}> = {},
|
|
46
46
|
): QueryRows<R> => {
|
|
47
47
|
const evolu = useEvolu();
|
|
48
|
-
const
|
|
48
|
+
const isSSR = useIsSsr();
|
|
49
49
|
|
|
50
|
-
if (
|
|
50
|
+
if (isSSR) {
|
|
51
51
|
if (!options.promise) void evolu.loadQuery(query);
|
|
52
52
|
} else {
|
|
53
53
|
use(options.promise ?? evolu.loadQuery(query));
|
|
54
54
|
}
|
|
55
|
+
|
|
55
56
|
return useQuerySubscription(query, options);
|
|
56
57
|
};
|
package/dist/useWasSsr.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Unlike the `typeof window === 'undefined'`, this ensures that the server and
|
|
3
|
-
* hydration see the same thing.
|
|
4
|
-
*
|
|
5
|
-
* We use this so people can use Evolu with SSR even though it's not recommended
|
|
6
|
-
* because of layout shift during rendering.
|
|
7
|
-
*
|
|
8
|
-
* @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
|
|
9
|
-
* @see https://kurtextrem.de/posts/react-uses-hydration
|
|
10
|
-
*/
|
|
11
|
-
export declare const useWasSsr: () => boolean;
|
|
12
|
-
//# sourceMappingURL=useWasSsr.d.ts.map
|
package/dist/useWasSsr.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useWasSsr.d.ts","sourceRoot":"","sources":["../src/useWasSsr.ts"],"names":[],"mappings":"AAKA;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,QAAO,OAO5B,CAAC"}
|
package/dist/useWasSsr.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { useRef, useSyncExternalStore } from "react";
|
|
2
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3
|
-
const emptySubscribe = () => () => { };
|
|
4
|
-
/**
|
|
5
|
-
* Unlike the `typeof window === 'undefined'`, this ensures that the server and
|
|
6
|
-
* hydration see the same thing.
|
|
7
|
-
*
|
|
8
|
-
* We use this so people can use Evolu with SSR even though it's not recommended
|
|
9
|
-
* because of layout shift during rendering.
|
|
10
|
-
*
|
|
11
|
-
* @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
|
|
12
|
-
* @see https://kurtextrem.de/posts/react-uses-hydration
|
|
13
|
-
*/
|
|
14
|
-
export const useWasSsr = () => {
|
|
15
|
-
const ref = useRef(false);
|
|
16
|
-
return useSyncExternalStore(emptySubscribe, () => ref.current, () => (ref.current = true));
|
|
17
|
-
};
|
package/src/useWasSsr.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useRef, useSyncExternalStore } from "react";
|
|
2
|
-
|
|
3
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4
|
-
const emptySubscribe = () => () => {};
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Unlike the `typeof window === 'undefined'`, this ensures that the server and
|
|
8
|
-
* hydration see the same thing.
|
|
9
|
-
*
|
|
10
|
-
* We use this so people can use Evolu with SSR even though it's not recommended
|
|
11
|
-
* because of layout shift during rendering.
|
|
12
|
-
*
|
|
13
|
-
* @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
|
|
14
|
-
* @see https://kurtextrem.de/posts/react-uses-hydration
|
|
15
|
-
*/
|
|
16
|
-
export const useWasSsr = (): boolean => {
|
|
17
|
-
const ref = useRef(false);
|
|
18
|
-
return useSyncExternalStore(
|
|
19
|
-
emptySubscribe,
|
|
20
|
-
() => ref.current,
|
|
21
|
-
() => (ref.current = true),
|
|
22
|
-
);
|
|
23
|
-
};
|