ccstate-react 4.11.0 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # ccstate-react
 
+## 4.13.0
+
+### Minor Changes
+
+- 8f06427: refactor: avoid unhandledRejection in useLoadable
+
+### Patch Changes
+
+- ccstate@4.13.0
+
+## 4.12.0
+
+### Minor Changes
+
+- c8f4fca: fix(react): add global error handler for floating promises in useLoadable
+
+### Patch Changes
+
+- ccstate@4.12.0
+
 ## 4.11.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -16,13 +16,7 @@ function useStore() {
 function useGet(atom) {
   var store = useStore();
   return react.useSyncExternalStore(function (fn) {
-    var ctrl = new AbortController();
-    store.sub(atom, ccstate.command(fn), {
-      signal: ctrl.signal
-    });
-    return function () {
-      ctrl.abort();
-    };
+    return store.sub(atom, ccstate.command(fn));
   }, function () {
     return store.get(atom);
   });
@@ -86,8 +80,47 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
+/**
+ * Handles a specific behavior of useSyncExternalStore. In React, there are situations where the getSnapshot function of
+ * useSyncExternalStore executes, but the Render function doesn't execute.
+ *
+ * This can cause the promise generated in that round to not be caught, and userspace has no opportunity to handle this
+ * promise. Therefore, this issue needs to be handled in useGetPromise.
+ *
+ * @param atom
+ * @returns
+ */
+function useGetPromise(atom) {
+  var store = useStore();
+  var lastPromise = react.useRef(undefined);
+  var promiseProcessed = react.useRef(false);
+  var promise = react.useSyncExternalStore(function (fn) {
+    return store.sub(atom, ccstate.command(fn));
+  }, function () {
+    var val = store.get(atom);
+
+    // If the last promise is not processed and the current value is a promise,
+    // we need to silence the last promise to avoid unhandled rejections.
+    if (lastPromise.current !== undefined && lastPromise.current !== val && !promiseProcessed.current) {
+      lastPromise.current["catch"](function () {
+        return void 0;
+      });
+    }
+    if (lastPromise.current !== val) {
+      promiseProcessed.current = false;
+      lastPromise.current = val instanceof Promise ? val : undefined;
+    }
+    return val;
+  });
+  return [promise, function () {
+    promiseProcessed.current = true;
+  }];
+}
 function useLoadableInternal(atom, keepLastResolved) {
-  var promise = useGet(atom);
+  var _useGetPromise = useGetPromise(atom),
+    _useGetPromise2 = _slicedToArray(_useGetPromise, 2),
+    promise = _useGetPromise2[0],
+    setPromiseProcessed = _useGetPromise2[1];
   var _useState = react.useState({
       state: 'loading'
     }),
@@ -102,28 +135,28 @@ function useLoadableInternal(atom, keepLastResolved) {
       });
       return;
     }
-    var ctrl = new AbortController();
-    var signal = ctrl.signal;
+    var cancelled = false;
     if (!keepLastResolved) {
       setPromiseResult({
         state: 'loading'
       });
     }
+    setPromiseProcessed();
     promise.then(function (ret) {
-      if (signal.aborted) return;
+      if (cancelled) return;
       setPromiseResult({
         state: 'hasData',
         data: ret
       });
     }, function (error) {
-      if (signal.aborted) return;
+      if (cancelled) return;
       setPromiseResult({
         state: 'hasError',
         error: error
       });
     });
     return function () {
-      ctrl.abort();
+      cancelled = true;
     };
   }, [promise]);
   return promiseResult;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useSyncExternalStore, useCallback, useState, useEffect } from 'react';
+import { createContext, useContext, useSyncExternalStore, useCallback, useState, useEffect, useRef } from 'react';
 import { getDefaultStore, command } from 'ccstate';
 
 var StoreContext = createContext(null);
@@ -14,13 +14,7 @@ function useStore() {
 function useGet(atom) {
   var store = useStore();
   return useSyncExternalStore(function (fn) {
-    var ctrl = new AbortController();
-    store.sub(atom, command(fn), {
-      signal: ctrl.signal
-    });
-    return function () {
-      ctrl.abort();
-    };
+    return store.sub(atom, command(fn));
   }, function () {
     return store.get(atom);
   });
@@ -84,8 +78,47 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
+/**
+ * Handles a specific behavior of useSyncExternalStore. In React, there are situations where the getSnapshot function of
+ * useSyncExternalStore executes, but the Render function doesn't execute.
+ *
+ * This can cause the promise generated in that round to not be caught, and userspace has no opportunity to handle this
+ * promise. Therefore, this issue needs to be handled in useGetPromise.
+ *
+ * @param atom
+ * @returns
+ */
+function useGetPromise(atom) {
+  var store = useStore();
+  var lastPromise = useRef(undefined);
+  var promiseProcessed = useRef(false);
+  var promise = useSyncExternalStore(function (fn) {
+    return store.sub(atom, command(fn));
+  }, function () {
+    var val = store.get(atom);
+
+    // If the last promise is not processed and the current value is a promise,
+    // we need to silence the last promise to avoid unhandled rejections.
+    if (lastPromise.current !== undefined && lastPromise.current !== val && !promiseProcessed.current) {
+      lastPromise.current["catch"](function () {
+        return void 0;
+      });
+    }
+    if (lastPromise.current !== val) {
+      promiseProcessed.current = false;
+      lastPromise.current = val instanceof Promise ? val : undefined;
+    }
+    return val;
+  });
+  return [promise, function () {
+    promiseProcessed.current = true;
+  }];
+}
 function useLoadableInternal(atom, keepLastResolved) {
-  var promise = useGet(atom);
+  var _useGetPromise = useGetPromise(atom),
+    _useGetPromise2 = _slicedToArray(_useGetPromise, 2),
+    promise = _useGetPromise2[0],
+    setPromiseProcessed = _useGetPromise2[1];
   var _useState = useState({
       state: 'loading'
     }),
@@ -100,28 +133,28 @@ function useLoadableInternal(atom, keepLastResolved) {
       });
       return;
     }
-    var ctrl = new AbortController();
-    var signal = ctrl.signal;
+    var cancelled = false;
     if (!keepLastResolved) {
       setPromiseResult({
         state: 'loading'
       });
     }
+    setPromiseProcessed();
     promise.then(function (ret) {
-      if (signal.aborted) return;
+      if (cancelled) return;
       setPromiseResult({
         state: 'hasData',
         data: ret
       });
     }, function (error) {
-      if (signal.aborted) return;
+      if (cancelled) return;
       setPromiseResult({
         state: 'hasError',
         error: error
       });
     });
     return function () {
-      ctrl.abort();
+      cancelled = true;
     };
   }, [promise]);
   return promiseResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate-react",
-  "version": "4.11.0",
+  "version": "4.13.0",
   "description": "CCState React Hooks",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "ccstate": "^4.11.0"
+    "ccstate": "^4.13.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -55,7 +55,7 @@
     "shx": "^0.3.4",
     "signal-timers": "^1.0.4",
     "vitest": "^2.1.8",
-    "ccstate": "^4.11.0"
+    "ccstate": "^4.13.0"
   },
   "scripts": {
     "build": "rollup -c",

package/src/__tests__/loadable.test.tsx

@@ -3,7 +3,7 @@
 import '@testing-library/jest-dom/vitest';
 import { render, cleanup, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { afterEach, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, test, vi } from 'vitest';
 import { computed, createStore, state } from 'ccstate';
 import type { Computed, State } from 'ccstate';
 import { StrictMode, useEffect } from 'react';
@@ -543,3 +543,94 @@ it('useLoadable accept sync computed', async () => {
 
   expect(await screen.findByText('hasData')).toBeInTheDocument();
 });
+
+describe('works with AbortError', () => {
+  let abortController: AbortController;
+  let promise: Promise<void>;
+
+  beforeEach(() => {
+    abortController = new AbortController();
+  });
+
+  afterEach(async () => {
+    abortController.abort();
+
+    try {
+      await promise;
+    } catch {}
+  });
+
+  it('should not throw abortError', () => {
+    const store = createStore();
+    const signal = abortController.signal;
+
+    promise = new Promise((_resolve, reject) => {
+      signal.addEventListener('abort', () => {
+        reject(signal.reason as Error);
+      });
+    });
+
+    const reload$ = state(0);
+    const promise$ = computed(async (get) => {
+      get(reload$);
+      await promise;
+    });
+
+    function App() {
+      useLoadable(promise$);
+
+      return <div>Test</div>;
+    }
+
+    render(
+      <StrictMode>
+        <StoreProvider value={store}>
+          <App />
+        </StoreProvider>
+      </StrictMode>,
+    );
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+
+    store.set(reload$, (x) => x + 1);
+    store.set(reload$, (x) => x + 1);
+  });
+});
+
+test('useLoadable should catch errors', () => {
+  const reload$ = state(0);
+
+  const traceCatch = vi.fn();
+  const promise$ = computed((get) => {
+    get(reload$);
+
+    const p = Promise.resolve();
+    const originalCatch = p.catch.bind(p);
+    vi.spyOn(p, 'catch').mockImplementation((...args) => {
+      traceCatch();
+      return originalCatch(...args);
+    });
+    return p;
+  });
+
+  const store = createStore();
+
+  function App() {
+    useLoadable(promise$);
+
+    return null;
+  }
+
+  render(
+    <StrictMode>
+      <StoreProvider value={store}>
+        <App />
+      </StoreProvider>
+    </StrictMode>,
+  );
+
+  store.set(reload$, (x) => x + 1);
+  store.set(reload$, (x) => x + 1);
+
+  expect(traceCatch).toHaveBeenCalledTimes(1);
+});

package/src/useGet.ts

@@ -6,15 +6,7 @@ import type { Computed, State } from 'ccstate';
 export function useGet<T>(atom: State<T> | Computed<T>) {
   const store = useStore();
   return useSyncExternalStore(
-    (fn) => {
-      const ctrl = new AbortController();
-      store.sub(atom, command(fn), { signal: ctrl.signal });
-      return () => {
-        ctrl.abort();
-      };
-    },
-    () => {
-      return store.get(atom);
-    },
+    (fn) => store.sub(atom, command(fn)),
+    () => store.get(atom),
   );
 }

package/src/useLoadable.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useGet } from './useGet';
-import type { Computed, State } from 'ccstate';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { command, type Computed, type State } from 'ccstate';
+import { useStore } from './provider';
 
 type Loadable<T> =
   | {
@@ -15,12 +15,54 @@ type Loadable<T> =
       error: unknown;
     };
 
+/**
+ * Handles a specific behavior of useSyncExternalStore. In React, there are situations where the getSnapshot function of
+ * useSyncExternalStore executes, but the Render function doesn't execute.
+ *
+ * This can cause the promise generated in that round to not be caught, and userspace has no opportunity to handle this
+ * promise. Therefore, this issue needs to be handled in useGetPromise.
+ *
+ * @param atom
+ * @returns
+ */
+function useGetPromise<T, U extends Promise<T> | T>(atom: State<U> | Computed<U>): [U, () => void] {
+  const store = useStore();
+  const lastPromise = useRef<Promise<unknown> | undefined>(undefined);
+  const promiseProcessed = useRef(false);
+
+  const promise = useSyncExternalStore(
+    (fn) => store.sub(atom, command(fn)),
+    () => {
+      const val = store.get(atom);
+
+      // If the last promise is not processed and the current value is a promise,
+      // we need to silence the last promise to avoid unhandled rejections.
+      if (lastPromise.current !== undefined && lastPromise.current !== val && !promiseProcessed.current) {
+        lastPromise.current.catch(() => void 0);
+      }
+
+      if (lastPromise.current !== val) {
+        promiseProcessed.current = false;
+        lastPromise.current = val instanceof Promise ? val : undefined;
+      }
+
+      return val;
+    },
+  );
+
+  return [
+    promise,
+    () => {
+      promiseProcessed.current = true;
+    },
+  ];
+}
+
 function useLoadableInternal<T>(
   atom: State<Promise<T> | T> | Computed<Promise<T> | T>,
   keepLastResolved: boolean,
 ): Loadable<T> {
-  const promise = useGet(atom);
-
+  const [promise, setPromiseProcessed] = useGetPromise(atom);
   const [promiseResult, setPromiseResult] = useState<Loadable<T>>({
     state: 'loading',
   });
@@ -35,8 +77,7 @@ function useLoadableInternal<T>(
       return;
     }
 
-    const ctrl = new AbortController();
-    const signal = ctrl.signal;
+    let cancelled = false;
 
     if (!keepLastResolved) {
       setPromiseResult({
@@ -44,9 +85,11 @@ function useLoadableInternal<T>(
       });
     }
 
+    setPromiseProcessed();
+
     promise.then(
       (ret) => {
-        if (signal.aborted) return;
+        if (cancelled) return;
 
         setPromiseResult({
           state: 'hasData',
@@ -54,7 +97,7 @@ function useLoadableInternal<T>(
         });
       },
       (error: unknown) => {
-        if (signal.aborted) return;
+        if (cancelled) return;
 
         setPromiseResult({
           state: 'hasError',
@@ -64,7 +107,7 @@ function useLoadableInternal<T>(
     );
 
     return () => {
-      ctrl.abort();
+      cancelled = true;
     };
   }, [promise]);