From 541ee73d16537d44c40002a0849186362557ff6b Mon Sep 17 00:00:00 2001 From: Grant Forrest Date: Thu, 19 Dec 2024 11:37:22 -0500 Subject: [PATCH] back to suspend-react --- .changeset/seven-hornets-lie.md | 5 ++++ packages/react/package.json | 1 + packages/react/src/hooks.tsx | 53 +++++++++++++++++++-------------- pnpm-lock.yaml | 43 ++++++++++++++++++++++++-- 4 files changed, 77 insertions(+), 25 deletions(-) create mode 100644 .changeset/seven-hornets-lie.md diff --git a/.changeset/seven-hornets-lie.md b/.changeset/seven-hornets-lie.md new file mode 100644 index 00000000..23ed3a13 --- /dev/null +++ b/.changeset/seven-hornets-lie.md @@ -0,0 +1,5 @@ +--- +'@verdant-web/react': patch +--- + +Revert to suspend-react due to hook errors with use(Promise) diff --git a/packages/react/package.json b/packages/react/package.json index 34d26644..b5d15560 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -37,6 +37,7 @@ }, "dependencies": { "@verdant-web/common": "workspace:*", + "suspend-react": "^0.1.3", "use-sync-external-store": "^1.2.0" }, "devDependencies": { diff --git a/packages/react/src/hooks.tsx b/packages/react/src/hooks.tsx index 4efd072c..6684dc44 100644 --- a/packages/react/src/hooks.tsx +++ b/packages/react/src/hooks.tsx @@ -28,16 +28,20 @@ import { useState, useSyncExternalStore, } from 'react'; +import { suspend } from 'suspend-react'; import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js'; import { useWatch } from './watch.js'; -function isQueryCurrentValid(query: Query) { - return !(query.status === 'initial' || query.status === 'initializing'); +function queryIsInitializing(query: Query) { + return query.status === 'initial' || query.status === 'initializing'; } -function useLiveQuery(liveQuery: Query | null, disableSuspense = false) { +function useLiveQueryResult( + liveQuery: Query | null, + disableSuspense = false, +) { // suspend if the query doesn't have a valid result set yet. - if (!disableSuspense && liveQuery && !isQueryCurrentValid(liveQuery)) { - use(liveQuery.resolved); + if (!disableSuspense && liveQuery && queryIsInitializing(liveQuery)) { + suspend(() => liveQuery.resolved, [liveQuery]); } return useSyncExternalStore( (callback) => { @@ -94,11 +98,14 @@ export function createHooks( createContext | null>(null); function useStorage(): ClientWithCollections { - const ctx = useContext(Context); + const ctx = use(Context); if (!ctx) { throw new Error('No verdant provider was found'); } - return use(ctx.readyPromise) as ClientWithCollections; + return suspend( + () => ctx.readyPromise, + [`verdant_${ctx.namespace}`], + ) as ClientWithCollections; } function useOnChange( @@ -597,8 +604,8 @@ export function createHooks( const storage = useStorage(); const liveQuery = useMemo(() => { return skip ? null : storage[pluralName].get(id); - }, [id, skip]); - const data = useLiveQuery(liveQuery); + }, [id, skip, storage]); + const data = useLiveQueryResult(liveQuery); return data; }; @@ -609,8 +616,8 @@ export function createHooks( const storage = useStorage(); const liveQuery = useMemo(() => { return skip ? null : storage[pluralName].get(id); - }, [id, skip]); - const data = useLiveQuery(liveQuery, true); + }, [id, skip, storage]); + const data = useLiveQueryResult(liveQuery, true); const status = useLiveQueryStatus(liveQuery); return { data, status }; @@ -630,8 +637,8 @@ export function createHooks( const index = useStableIndex(unstableIndex); const liveQuery = useMemo(() => { return skip ? null : storage[pluralName].findOne({ index, key }); - }, [index, skip]); - const data = useLiveQuery(liveQuery); + }, [index, skip, storage, key]); + const data = useLiveQueryResult(liveQuery); return data; }; hooks[findOneHookName + 'Unsuspended'] = function useOneUnsuspended({ @@ -647,8 +654,8 @@ export function createHooks( const index = useStableIndex(unstableIndex); const liveQuery = useMemo(() => { return skip ? null : storage[pluralName].findOne({ index, key }); - }, [index, skip]); - const data = useLiveQuery(liveQuery, true); + }, [index, skip, storage, key]); + const data = useLiveQueryResult(liveQuery, true); const status = useLiveQueryStatus(liveQuery); return { data, status }; @@ -670,9 +677,9 @@ export function createHooks( // query identity for subsequent calls. const liveQuery = useMemo( () => (skip ? null : storage[pluralName].findAll({ index, key })), - [index, skip], + [index, skip, storage, key], ); - const data = useLiveQuery(liveQuery); + const data = useLiveQueryResult(liveQuery); return data || []; }; hooks[getAllHookName + 'Unsuspended'] = function useAllUnsuspended({ @@ -690,9 +697,9 @@ export function createHooks( // query identity for subsequent calls. const liveQuery = useMemo( () => (skip ? null : storage[pluralName].findAll({ index, key })), - [index, skip], + [index, skip, storage, key], ); - const data = useLiveQuery(liveQuery, true) || []; + const data = useLiveQueryResult(liveQuery, true) || []; const status = useLiveQueryStatus(liveQuery); return { data, status }; @@ -726,9 +733,9 @@ export function createHooks( page: 0, key: key || getAllPaginatedHookName, }), - [index, skip, pageSize], + [index, skip, pageSize, storage, key], ); - const data = useLiveQuery(liveQuery, suspend === false); + const data = useLiveQueryResult(liveQuery, suspend === false); const status = useLiveQueryStatus(liveQuery); const tools = useMemo( @@ -779,9 +786,9 @@ export function createHooks( pageSize, key: key || getAllInfiniteHookName, }), - [index, skip, pageSize], + [index, skip, pageSize, storage, key], ); - const data = useLiveQuery(liveQuery, suspend === false); + const data = useLiveQueryResult(liveQuery, suspend === false); const status = useLiveQueryStatus(liveQuery); const tools = useMemo( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56cd0445..f319ecc9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -315,6 +315,9 @@ importers: '@verdant-web/common': specifier: workspace:* version: link:../common + suspend-react: + specifier: ^0.1.3 + version: 0.1.3(react@19.0.0) use-sync-external-store: specifier: ^1.2.0 version: 1.4.0(react@19.0.0) @@ -16252,6 +16255,28 @@ snapshots: - vite optional: true + '@vitest/browser@2.1.8(@types/node@22.10.2)(playwright@1.49.1)(typescript@5.7.2)(vite@4.5.5(@types/node@22.10.2)(terser@5.37.0))(vitest@2.1.8)': + dependencies: + '@testing-library/dom': 10.4.0 + '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0) + '@vitest/mocker': 2.1.8(msw@2.6.9(@types/node@22.10.2)(typescript@5.7.2))(vite@4.5.5(@types/node@22.10.2)(terser@5.37.0)) + '@vitest/utils': 2.1.8 + magic-string: 0.30.17 + msw: 2.6.9(@types/node@22.10.2)(typescript@5.7.2) + sirv: 3.0.0 + tinyrainbow: 1.2.0 + vitest: 2.1.8(@types/node@22.10.2)(@vitest/browser@2.1.8)(jsdom@20.0.3)(msw@2.6.9(@types/node@22.10.2)(typescript@5.7.2))(terser@5.37.0) + ws: 8.18.0 + optionalDependencies: + playwright: 1.49.1 + transitivePeerDependencies: + - '@types/node' + - bufferutil + - typescript + - utf-8-validate + - vite + optional: true + '@vitest/browser@2.1.8(@types/node@22.10.2)(playwright@1.49.1)(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2)(terser@5.37.0))(vitest@2.1.8)': dependencies: '@testing-library/dom': 10.4.0 @@ -16262,7 +16287,7 @@ snapshots: msw: 2.6.9(@types/node@22.10.2)(typescript@5.7.2) sirv: 3.0.0 tinyrainbow: 1.2.0 - vitest: 2.1.8(@types/node@22.10.2)(@vitest/browser@2.1.8)(jsdom@20.0.3)(msw@2.6.9(@types/node@22.10.2)(typescript@5.7.2))(terser@5.37.0) + vitest: 2.1.8(@types/node@22.10.2)(@vitest/browser@2.1.8)(jsdom@25.0.1)(msw@2.6.9(@types/node@22.10.2)(typescript@5.7.2))(terser@5.37.0) ws: 8.18.0 optionalDependencies: playwright: 1.49.1 @@ -16314,6 +16339,16 @@ snapshots: msw: 2.6.9(@types/node@20.17.10)(typescript@5.7.2) vite: 5.4.11(@types/node@20.17.10)(terser@5.37.0) + '@vitest/mocker@2.1.8(msw@2.6.9(@types/node@22.10.2)(typescript@5.7.2))(vite@4.5.5(@types/node@22.10.2)(terser@5.37.0))': + dependencies: + '@vitest/spy': 2.1.8 + estree-walker: 3.0.3 + magic-string: 0.30.17 + optionalDependencies: + msw: 2.6.9(@types/node@22.10.2)(typescript@5.7.2) + vite: 4.5.5(@types/node@22.10.2)(terser@5.37.0) + optional: true + '@vitest/mocker@2.1.8(msw@2.6.9(@types/node@22.10.2)(typescript@5.7.2))(vite@5.4.11(@types/node@22.10.2)(terser@5.37.0))': dependencies: '@vitest/spy': 2.1.8 @@ -22494,6 +22529,10 @@ snapshots: dependencies: react: 18.3.1 + suspend-react@0.1.3(react@19.0.0): + dependencies: + react: 19.0.0 + svg-parser@2.0.4: {} svgo@2.8.0: @@ -23491,7 +23530,7 @@ snapshots: why-is-node-running: 2.3.0 optionalDependencies: '@types/node': 22.10.2 - '@vitest/browser': 2.1.8(@types/node@22.10.2)(playwright@1.49.1)(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2)(terser@5.37.0))(vitest@2.1.8) + '@vitest/browser': 2.1.8(@types/node@22.10.2)(playwright@1.49.1)(typescript@5.7.2)(vite@4.5.5(@types/node@22.10.2)(terser@5.37.0))(vitest@2.1.8) jsdom: 20.0.3 transitivePeerDependencies: - less