@livestore/livestore 0.0.41-dev.0 → 0.0.41-dev.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.
- package/dist/.tsbuildinfo +1 -1
- package/dist/react/useQuery.test copy.d.ts +2 -0
- package/dist/react/useQuery.test copy.d.ts.map +1 -0
- package/dist/react/useQuery.test copy.js +44 -0
- package/dist/react/useQuery.test copy.js.map +1 -0
- package/dist/react/useRow.d.ts.map +1 -1
- package/dist/react/useRow.js +3 -2
- package/dist/react/useRow.js.map +1 -1
- package/dist/react/useTemporaryQuery.d.ts.map +1 -1
- package/dist/react/useTemporaryQuery.js +3 -2
- package/dist/react/useTemporaryQuery.js.map +1 -1
- package/dist/react/useTemporaryQuery.test.d.ts +2 -0
- package/dist/react/useTemporaryQuery.test.d.ts.map +1 -0
- package/dist/react/useTemporaryQuery.test.js +33 -0
- package/dist/react/useTemporaryQuery.test.js.map +1 -0
- package/dist/react/utils/useCleanup.d.ts +7 -0
- package/dist/react/utils/useCleanup.d.ts.map +1 -0
- package/dist/react/utils/useCleanup.js +24 -0
- package/dist/react/utils/useCleanup.js.map +1 -0
- package/package.json +4 -4
- package/src/react/useRow.ts +4 -4
- package/src/react/useTemporaryQuery.test.tsx +51 -0
- package/src/react/useTemporaryQuery.ts +4 -4
- package/src/react/utils/useCleanup.ts +30 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useQuery.test copy.d.ts","sourceRoot":"","sources":["../../src/react/useQuery.test copy.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { act, renderHook } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
import { makeTodoMvc, parseTodos } from '../__tests__/react/fixture.js';
|
|
5
|
+
import { querySQL } from '../reactiveQueries/sql.js';
|
|
6
|
+
import * as LiveStoreReact from './index.js';
|
|
7
|
+
describe('useQuery', () => {
|
|
8
|
+
it('simple', async () => {
|
|
9
|
+
let renderCount = 0;
|
|
10
|
+
const { wrapper, store, cud } = await makeTodoMvc();
|
|
11
|
+
const allTodos$ = querySQL(`select * from todos`, { map: parseTodos });
|
|
12
|
+
const { result } = renderHook(() => {
|
|
13
|
+
renderCount++;
|
|
14
|
+
return LiveStoreReact.useQuery(allTodos$);
|
|
15
|
+
}, { wrapper });
|
|
16
|
+
expect(result.current.length).toBe(0);
|
|
17
|
+
expect(renderCount).toBe(1);
|
|
18
|
+
act(() => store.mutate(cud.todos.insert({ id: 't1', text: 'buy milk', completed: false })));
|
|
19
|
+
expect(result.current.length).toBe(1);
|
|
20
|
+
expect(result.current[0].text).toBe('buy milk');
|
|
21
|
+
expect(renderCount).toBe(2);
|
|
22
|
+
});
|
|
23
|
+
it('same `useQuery` hook invoked with different queries', async () => {
|
|
24
|
+
let renderCount = 0;
|
|
25
|
+
const { wrapper, store, cud } = await makeTodoMvc();
|
|
26
|
+
const todo1$ = querySQL(`select * from todos where id = 't1'`, { label: 'libraryTracksView1', map: parseTodos });
|
|
27
|
+
const todo2$ = querySQL(`select * from todos where id = 't2'`, { label: 'libraryTracksView2', map: parseTodos });
|
|
28
|
+
store.mutate(cud.todos.insert({ id: 't1', text: 'buy milk', completed: false }), cud.todos.insert({ id: 't2', text: 'buy eggs', completed: false }));
|
|
29
|
+
const { result, rerender } = renderHook((todoId) => {
|
|
30
|
+
renderCount++;
|
|
31
|
+
const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId]);
|
|
32
|
+
return LiveStoreReact.useQuery(query$)[0].text;
|
|
33
|
+
}, { wrapper, initialProps: 't1' });
|
|
34
|
+
expect(result.current).toBe('buy milk');
|
|
35
|
+
expect(renderCount).toBe(1);
|
|
36
|
+
act(() => store.mutate(cud.todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })));
|
|
37
|
+
expect(result.current).toBe('buy soy milk');
|
|
38
|
+
expect(renderCount).toBe(2);
|
|
39
|
+
rerender('t2');
|
|
40
|
+
expect(result.current).toBe('buy eggs');
|
|
41
|
+
expect(renderCount).toBe(3);
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
//# sourceMappingURL=useQuery.test%20copy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useQuery.test copy.js","sourceRoot":"","sources":["../../src/react/useQuery.test copy.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRow.d.ts","sourceRoot":"","sources":["../../src/react/useRow.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,QAAQ,EAAoB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"useRow.d.ts","sourceRoot":"","sources":["../../src/react/useRow.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,QAAQ,EAAoB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAKvH,MAAM,MAAM,YAAY,CAAC,SAAS,SAAS,QAAQ,IAAI;IACrD,GAAG,EAAE,SAAS,CAAC,SAAS,CAAC;IACzB,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;CACnD,CAAA;AAED,MAAM,MAAM,yBAAyB,CAAC,SAAS,SAAS,QAAQ,IAAI;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,EAAE;IACnB,CAAC,SAAS,SAAS,QAAQ,CAAC,qBAAqB,EAAE,OAAO,EAAE,YAAY,GAAG;QAAE,WAAW,EAAE,IAAI,CAAA;KAAE,CAAC,EAC/F,KAAK,EAAE,SAAS,EAChB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,YAAY,CAAC,SAAS,CAAC,CAAA;IAC1B,CAAC,SAAS,SAAS,QAAQ,CAAC,qBAAqB,EAAE,OAAO,EAAE,YAAY,GAAG;QAAE,WAAW,EAAE,KAAK,CAAA;KAAE,CAAC,EAChG,KAAK,EAAE,SAAS,EAEhB,EAAE,EAAE,MAAM,EACV,OAAO,CAAC,EAAE,iBAAiB,GAAG,yBAAyB,CAAC,SAAS,CAAC,GACjE,YAAY,CAAC,SAAS,CAAC,CAAA;CA6G3B,CAAA;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;AAC7C,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,YAAY,CAAC,SAAS,SAAS,QAAQ,IAAI,SAAS,CAAC,gBAAgB,CAAC,SAAS,IAAI,GAC3F,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,GAC9C;KACG,CAAC,IAAI,MAAM,SAAS,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrF,GAAG;IACF,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;CACjE,CAAA"}
|
package/dist/react/useRow.js
CHANGED
|
@@ -6,6 +6,7 @@ import { rowQuery } from '../row-query.js';
|
|
|
6
6
|
import { tableIsSingleton } from '../schema/table-def.js';
|
|
7
7
|
import { useStore } from './LiveStoreContext.js';
|
|
8
8
|
import { useQueryRef } from './useQuery.js';
|
|
9
|
+
import { useCleanup } from './utils/useCleanup.js';
|
|
9
10
|
/**
|
|
10
11
|
* Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
|
|
11
12
|
*
|
|
@@ -44,7 +45,7 @@ export const useRow = (table, idOrOptions, options_) => {
|
|
|
44
45
|
rcCache.set(table, id ?? 'singleton', query$, reactId, otelContext, span);
|
|
45
46
|
return { query$, otelContext };
|
|
46
47
|
}, [table, id, reactId, store, defaultValues, dbGraph]);
|
|
47
|
-
React.
|
|
48
|
+
useCleanup(React.useCallback(() => {
|
|
48
49
|
const cachedItem = rcCache.get(table, id ?? 'singleton');
|
|
49
50
|
cachedItem.reactIds.delete(reactId);
|
|
50
51
|
if (cachedItem.reactIds.size === 0) {
|
|
@@ -52,7 +53,7 @@ export const useRow = (table, idOrOptions, options_) => {
|
|
|
52
53
|
cachedItem.query$.destroy();
|
|
53
54
|
cachedItem.span.end();
|
|
54
55
|
}
|
|
55
|
-
}, [table, id, reactId]);
|
|
56
|
+
}, [table, id, reactId]));
|
|
56
57
|
const query$Ref = useQueryRef(query$, otelContext);
|
|
57
58
|
const setState = React.useMemo(() => {
|
|
58
59
|
if (table.isSingleColumn) {
|
package/dist/react/useRow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRow.js","sourceRoot":"","sources":["../../src/react/useRow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAA6C,gBAAgB,EAAqB,MAAM,wBAAwB,CAAA;AACvH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"useRow.js","sourceRoot":"","sources":["../../src/react/useRow.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTemporaryQuery.d.ts","sourceRoot":"","sources":["../../src/react/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"useTemporaryQuery.d.ts","sourceRoot":"","sources":["../../src/react/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAA;AAUjE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,qGACW,CAAA;AAEzC,eAAO,MAAM,oBAAoB,6HAgChC,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useQueryRef } from './useQuery.js';
|
|
3
|
+
import { useCleanup } from './utils/useCleanup.js';
|
|
3
4
|
/**
|
|
4
5
|
* This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷.
|
|
5
6
|
* The map entry is being removed again in the `React.useEffect` call below.
|
|
@@ -23,14 +24,14 @@ export const useTemporaryQueryRef = (makeQuery) => {
|
|
|
23
24
|
queryCache.set(makeQuery, { reactIds: new Set([reactId]), query$ });
|
|
24
25
|
return query$;
|
|
25
26
|
}, [reactId, makeQuery]);
|
|
26
|
-
React.
|
|
27
|
+
useCleanup(React.useCallback(() => {
|
|
27
28
|
const cachedItem = queryCache.get(makeQuery);
|
|
28
29
|
cachedItem.reactIds.delete(reactId);
|
|
29
30
|
if (cachedItem.reactIds.size === 0) {
|
|
30
31
|
cachedItem.query$.destroy();
|
|
31
32
|
queryCache.delete(makeQuery);
|
|
32
33
|
}
|
|
33
|
-
}, [makeQuery, reactId]);
|
|
34
|
+
}, [makeQuery, reactId]));
|
|
34
35
|
return useQueryRef(query$);
|
|
35
36
|
};
|
|
36
37
|
//# sourceMappingURL=useTemporaryQuery.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTemporaryQuery.js","sourceRoot":"","sources":["../../src/react/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"useTemporaryQuery.js","sourceRoot":"","sources":["../../src/react/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD;;;GAGG;AACH,MAAM,UAAU,GAAG,IAAI,GAAG,EAA2E,CAAA;AAErG;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAU,SAAmC,EAAW,EAAE,CACzF,oBAAoB,CAAC,SAAS,CAAC,CAAC,OAAO,CAAA;AAEzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAU,SAAmC,EAAmC,EAAE;IACpH,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAE7B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QAC5C,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC7B,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YAEhC,OAAO,UAAU,CAAC,MAAM,CAAA;QAC1B,CAAC;QAED,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;QAE1B,UAAU,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAA;QAEnE,OAAO,MAAM,CAAA;IACf,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,UAAU,CACR,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrB,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,CAAE,CAAA;QAE7C,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QAEnC,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YACnC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;YAC3B,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CACzB,CAAA;IAED,OAAO,WAAW,CAAC,MAAM,CAAC,CAAA;AAC5B,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTemporaryQuery.test.d.ts","sourceRoot":"","sources":["../../src/react/useTemporaryQuery.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { renderHook } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
|
+
import { makeTodoMvc, parseTodos } from '../__tests__/react/fixture.js';
|
|
5
|
+
import { querySQL } from '../reactiveQueries/sql.js';
|
|
6
|
+
import * as LiveStoreReact from './index.js';
|
|
7
|
+
describe('useTemporaryQuery', () => {
|
|
8
|
+
it('simple', async () => {
|
|
9
|
+
let renderCount = 0;
|
|
10
|
+
const { wrapper, store, cud } = await makeTodoMvc();
|
|
11
|
+
store.mutate(cud.todos.insert({ id: 't1', text: 'buy milk', completed: false }), cud.todos.insert({ id: 't2', text: 'buy bread', completed: false }));
|
|
12
|
+
const queryMap = new Map();
|
|
13
|
+
const { rerender, result } = renderHook((id) => {
|
|
14
|
+
renderCount++;
|
|
15
|
+
return LiveStoreReact.useTemporaryQuery(React.useCallback(() => {
|
|
16
|
+
const query$ = querySQL(`select * from todos where id = '${id}'`, { map: parseTodos });
|
|
17
|
+
queryMap.set(id, query$);
|
|
18
|
+
return query$;
|
|
19
|
+
}, [id]));
|
|
20
|
+
}, { wrapper, initialProps: 't1' });
|
|
21
|
+
expect(result.current.length).toBe(1);
|
|
22
|
+
expect(result.current[0].text).toBe('buy milk');
|
|
23
|
+
expect(renderCount).toBe(1);
|
|
24
|
+
expect(queryMap.get('t1').runs).toBe(1);
|
|
25
|
+
rerender('t2');
|
|
26
|
+
expect(result.current.length).toBe(1);
|
|
27
|
+
expect(result.current[0].text).toBe('buy bread');
|
|
28
|
+
expect(renderCount).toBe(2);
|
|
29
|
+
expect(queryMap.get('t1').runs).toBe(1);
|
|
30
|
+
expect(queryMap.get('t2').runs).toBe(1);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
//# sourceMappingURL=useTemporaryQuery.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTemporaryQuery.test.js","sourceRoot":"","sources":["../../src/react/useTemporaryQuery.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,KAAK,cAAc,MAAM,YAAY,CAAA;AAE5C,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;QACtB,IAAI,WAAW,GAAG,CAAC,CAAA;QAEnB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,MAAM,WAAW,EAAE,CAAA;QAEnD,KAAK,CAAC,MAAM,CACV,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAClE,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACpE,CAAA;QAED,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAyC,CAAA;QAEjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,UAAU,CACrC,CAAC,EAAU,EAAE,EAAE;YACb,WAAW,EAAE,CAAA;YAEb,OAAO,cAAc,CAAC,iBAAiB,CACrC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;gBACrB,MAAM,MAAM,GAAG,QAAQ,CAAC,mCAAmC,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAA;gBACtF,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;gBACxB,OAAO,MAAM,CAAA;YACf,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CACT,CAAA;QACH,CAAC,EACD,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAChC,CAAA;QAED,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACrC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QAChD,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAExC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEd,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACrC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QACjD,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACxC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Like cleanup callback of `React.useEffect` but running as part of the render loop.
|
|
3
|
+
*
|
|
4
|
+
* NOTE: This hook should not be used with React strict mode.
|
|
5
|
+
*/
|
|
6
|
+
export declare const useCleanup: (cleanupCallback: () => void) => void;
|
|
7
|
+
//# sourceMappingURL=useCleanup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCleanup.d.ts","sourceRoot":"","sources":["../../../src/react/utils/useCleanup.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,UAAU,oBAEJ,MAAM,IAAI,SAoB5B,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Like cleanup callback of `React.useEffect` but running as part of the render loop.
|
|
4
|
+
*
|
|
5
|
+
* NOTE: This hook should not be used with React strict mode.
|
|
6
|
+
*/
|
|
7
|
+
export const useCleanup = (
|
|
8
|
+
/** Needs to be a `React.useCallback` value */
|
|
9
|
+
cleanupCallback) => {
|
|
10
|
+
const callbackRef = React.useRef(cleanupCallback);
|
|
11
|
+
const alreadyRun = React.useRef(false);
|
|
12
|
+
if (callbackRef.current !== cleanupCallback) {
|
|
13
|
+
callbackRef.current();
|
|
14
|
+
callbackRef.current = cleanupCallback;
|
|
15
|
+
alreadyRun.current = true;
|
|
16
|
+
}
|
|
17
|
+
React.useEffect(() => () => {
|
|
18
|
+
if (alreadyRun.current === false) {
|
|
19
|
+
callbackRef.current();
|
|
20
|
+
alreadyRun.current = true;
|
|
21
|
+
}
|
|
22
|
+
}, []);
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=useCleanup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCleanup.js","sourceRoot":"","sources":["../../../src/react/utils/useCleanup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;AACxB,8CAA8C;AAC9C,eAA2B,EAC3B,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAEtC,IAAI,WAAW,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;QAC5C,WAAW,CAAC,OAAO,EAAE,CAAA;QACrB,WAAW,CAAC,OAAO,GAAG,eAAe,CAAA;QACrC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;IAC3B,CAAC;IAED,KAAK,CAAC,SAAS,CACb,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,UAAU,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACjC,WAAW,CAAC,OAAO,EAAE,CAAA;YACrB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;QAC3B,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@livestore/livestore",
|
|
3
|
-
"version": "0.0.41-dev.
|
|
3
|
+
"version": "0.0.41-dev.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"comlink": "^4.4.1",
|
|
76
76
|
"lodash-es": "^4.17.21",
|
|
77
77
|
"sqlite-esm": "3.42.0-build6",
|
|
78
|
-
"@livestore/sql-queries": "0.0.41-dev.
|
|
79
|
-
"
|
|
80
|
-
"
|
|
78
|
+
"@livestore/sql-queries": "0.0.41-dev.1",
|
|
79
|
+
"effect-db-schema": "0.0.41-dev.1",
|
|
80
|
+
"@livestore/utils": "0.0.41-dev.1"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
83
83
|
"@opentelemetry/sdk-trace-base": "1.21.0",
|
package/src/react/useRow.ts
CHANGED
|
@@ -11,6 +11,7 @@ import { rowQuery } from '../row-query.js'
|
|
|
11
11
|
import { type DefaultSqliteTableDef, type TableDef, tableIsSingleton, type TableOptions } from '../schema/table-def.js'
|
|
12
12
|
import { useStore } from './LiveStoreContext.js'
|
|
13
13
|
import { useQueryRef } from './useQuery.js'
|
|
14
|
+
import { useCleanup } from './utils/useCleanup.js'
|
|
14
15
|
|
|
15
16
|
export type UseRowResult<TTableDef extends TableDef> = [
|
|
16
17
|
row: RowResult<TTableDef>,
|
|
@@ -95,8 +96,8 @@ export const useRow: {
|
|
|
95
96
|
return { query$, otelContext }
|
|
96
97
|
}, [table, id, reactId, store, defaultValues, dbGraph])
|
|
97
98
|
|
|
98
|
-
|
|
99
|
-
(
|
|
99
|
+
useCleanup(
|
|
100
|
+
React.useCallback(() => {
|
|
100
101
|
const cachedItem = rcCache.get(table, id ?? 'singleton')!
|
|
101
102
|
|
|
102
103
|
cachedItem.reactIds.delete(reactId)
|
|
@@ -105,8 +106,7 @@ export const useRow: {
|
|
|
105
106
|
cachedItem.query$.destroy()
|
|
106
107
|
cachedItem.span.end()
|
|
107
108
|
}
|
|
108
|
-
},
|
|
109
|
-
[table, id, reactId],
|
|
109
|
+
}, [table, id, reactId]),
|
|
110
110
|
)
|
|
111
111
|
|
|
112
112
|
const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowResult<TTableDef>>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { renderHook } from '@testing-library/react'
|
|
2
|
+
import React from 'react'
|
|
3
|
+
import { describe, expect, it } from 'vitest'
|
|
4
|
+
|
|
5
|
+
import { makeTodoMvc, parseTodos } from '../__tests__/react/fixture.js'
|
|
6
|
+
import type * as LiveStore from '../index.js'
|
|
7
|
+
import { querySQL } from '../reactiveQueries/sql.js'
|
|
8
|
+
import * as LiveStoreReact from './index.js'
|
|
9
|
+
|
|
10
|
+
describe('useTemporaryQuery', () => {
|
|
11
|
+
it('simple', async () => {
|
|
12
|
+
let renderCount = 0
|
|
13
|
+
|
|
14
|
+
const { wrapper, store, cud } = await makeTodoMvc()
|
|
15
|
+
|
|
16
|
+
store.mutate(
|
|
17
|
+
cud.todos.insert({ id: 't1', text: 'buy milk', completed: false }),
|
|
18
|
+
cud.todos.insert({ id: 't2', text: 'buy bread', completed: false }),
|
|
19
|
+
)
|
|
20
|
+
|
|
21
|
+
const queryMap = new Map<string, LiveStore.LiveQuery<any, any>>()
|
|
22
|
+
|
|
23
|
+
const { rerender, result } = renderHook(
|
|
24
|
+
(id: string) => {
|
|
25
|
+
renderCount++
|
|
26
|
+
|
|
27
|
+
return LiveStoreReact.useTemporaryQuery(
|
|
28
|
+
React.useCallback(() => {
|
|
29
|
+
const query$ = querySQL(`select * from todos where id = '${id}'`, { map: parseTodos })
|
|
30
|
+
queryMap.set(id, query$)
|
|
31
|
+
return query$
|
|
32
|
+
}, [id]),
|
|
33
|
+
)
|
|
34
|
+
},
|
|
35
|
+
{ wrapper, initialProps: 't1' },
|
|
36
|
+
)
|
|
37
|
+
|
|
38
|
+
expect(result.current.length).toBe(1)
|
|
39
|
+
expect(result.current[0]!.text).toBe('buy milk')
|
|
40
|
+
expect(renderCount).toBe(1)
|
|
41
|
+
expect(queryMap.get('t1')!.runs).toBe(1)
|
|
42
|
+
|
|
43
|
+
rerender('t2')
|
|
44
|
+
|
|
45
|
+
expect(result.current.length).toBe(1)
|
|
46
|
+
expect(result.current[0]!.text).toBe('buy bread')
|
|
47
|
+
expect(renderCount).toBe(2)
|
|
48
|
+
expect(queryMap.get('t1')!.runs).toBe(1)
|
|
49
|
+
expect(queryMap.get('t2')!.runs).toBe(1)
|
|
50
|
+
})
|
|
51
|
+
})
|
|
@@ -2,6 +2,7 @@ import React from 'react'
|
|
|
2
2
|
|
|
3
3
|
import type { LiveQuery } from '../reactiveQueries/base-class.js'
|
|
4
4
|
import { useQueryRef } from './useQuery.js'
|
|
5
|
+
import { useCleanup } from './utils/useCleanup.js'
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷.
|
|
@@ -35,8 +36,8 @@ export const useTemporaryQueryRef = <TResult>(makeQuery: () => LiveQuery<TResult
|
|
|
35
36
|
return query$
|
|
36
37
|
}, [reactId, makeQuery])
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
(
|
|
39
|
+
useCleanup(
|
|
40
|
+
React.useCallback(() => {
|
|
40
41
|
const cachedItem = queryCache.get(makeQuery)!
|
|
41
42
|
|
|
42
43
|
cachedItem.reactIds.delete(reactId)
|
|
@@ -45,8 +46,7 @@ export const useTemporaryQueryRef = <TResult>(makeQuery: () => LiveQuery<TResult
|
|
|
45
46
|
cachedItem.query$.destroy()
|
|
46
47
|
queryCache.delete(makeQuery)
|
|
47
48
|
}
|
|
48
|
-
},
|
|
49
|
-
[makeQuery, reactId],
|
|
49
|
+
}, [makeQuery, reactId]),
|
|
50
50
|
)
|
|
51
51
|
|
|
52
52
|
return useQueryRef(query$)
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Like cleanup callback of `React.useEffect` but running as part of the render loop.
|
|
5
|
+
*
|
|
6
|
+
* NOTE: This hook should not be used with React strict mode.
|
|
7
|
+
*/
|
|
8
|
+
export const useCleanup = (
|
|
9
|
+
/** Needs to be a `React.useCallback` value */
|
|
10
|
+
cleanupCallback: () => void,
|
|
11
|
+
) => {
|
|
12
|
+
const callbackRef = React.useRef(cleanupCallback)
|
|
13
|
+
const alreadyRun = React.useRef(false)
|
|
14
|
+
|
|
15
|
+
if (callbackRef.current !== cleanupCallback) {
|
|
16
|
+
callbackRef.current()
|
|
17
|
+
callbackRef.current = cleanupCallback
|
|
18
|
+
alreadyRun.current = true
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
React.useEffect(
|
|
22
|
+
() => () => {
|
|
23
|
+
if (alreadyRun.current === false) {
|
|
24
|
+
callbackRef.current()
|
|
25
|
+
alreadyRun.current = true
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
[],
|
|
29
|
+
)
|
|
30
|
+
}
|