ccstate-react 4.11.0 → 4.12.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # ccstate-react
 
+## 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

@@ -13,7 +13,8 @@ function useStore() {
   return store;
 }
 
-function useGet(atom) {
+function useGetInternal(atom, _ref) {
+  var silenceUnhandleRejection = _ref.silenceUnhandleRejection;
   var store = useStore();
   return react.useSyncExternalStore(function (fn) {
     var ctrl = new AbortController();
@@ -24,7 +25,18 @@ function useGet(atom) {
       ctrl.abort();
     };
   }, function () {
-    return store.get(atom);
+    var val = store.get(atom);
+    if (val instanceof Promise && silenceUnhandleRejection) {
+      val["catch"](function () {
+        return void 0;
+      });
+    }
+    return val;
+  });
+}
+function useGet(atom) {
+  return useGetInternal(atom, {
+    silenceUnhandleRejection: false
   });
 }
 
@@ -87,7 +99,9 @@ function _unsupportedIterableToArray(r, a) {
 }
 
 function useLoadableInternal(atom, keepLastResolved) {
-  var promise = useGet(atom);
+  var promise = useGetInternal(atom, {
+    silenceUnhandleRejection: true
+  });
   var _useState = react.useState({
       state: 'loading'
     }),

package/dist/index.js

@@ -11,7 +11,8 @@ function useStore() {
   return store;
 }
 
-function useGet(atom) {
+function useGetInternal(atom, _ref) {
+  var silenceUnhandleRejection = _ref.silenceUnhandleRejection;
   var store = useStore();
   return useSyncExternalStore(function (fn) {
     var ctrl = new AbortController();
@@ -22,7 +23,18 @@ function useGet(atom) {
       ctrl.abort();
     };
   }, function () {
-    return store.get(atom);
+    var val = store.get(atom);
+    if (val instanceof Promise && silenceUnhandleRejection) {
+      val["catch"](function () {
+        return void 0;
+      });
+    }
+    return val;
+  });
+}
+function useGet(atom) {
+  return useGetInternal(atom, {
+    silenceUnhandleRejection: false
   });
 }
 
@@ -85,7 +97,9 @@ function _unsupportedIterableToArray(r, a) {
 }
 
 function useLoadableInternal(atom, keepLastResolved) {
-  var promise = useGet(atom);
+  var promise = useGetInternal(atom, {
+    silenceUnhandleRejection: true
+  });
   var _useState = useState({
       state: 'loading'
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate-react",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "CCState React Hooks",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "ccstate": "^4.11.0"
+    "ccstate": "^4.12.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.12.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 } from 'vitest';
 import { computed, createStore, state } from 'ccstate';
 import type { Computed, State } from 'ccstate';
 import { StrictMode, useEffect } from 'react';
@@ -543,3 +543,54 @@ 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(
+      <StoreProvider value={store}>
+        <App />
+      </StoreProvider>,
+    );
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+
+    store.set(reload$, (x) => x + 1);
+    store.set(reload$, (x) => x + 1);
+  });
+});

package/src/useGet.ts

@@ -3,7 +3,10 @@ import { useStore } from './provider';
 import { command } from 'ccstate';
 import type { Computed, State } from 'ccstate';
 
-export function useGet<T>(atom: State<T> | Computed<T>) {
+export function useGetInternal<T>(
+  atom: State<T> | Computed<T>,
+  { silenceUnhandleRejection }: { silenceUnhandleRejection: boolean },
+) {
   const store = useStore();
   return useSyncExternalStore(
     (fn) => {
@@ -14,7 +17,15 @@ export function useGet<T>(atom: State<T> | Computed<T>) {
       };
     },
     () => {
-      return store.get(atom);
+      const val = store.get(atom);
+      if (val instanceof Promise && silenceUnhandleRejection) {
+        val.catch(() => void 0);
+      }
+      return val;
     },
   );
 }
+
+export function useGet<T>(atom: State<T> | Computed<T>) {
+  return useGetInternal(atom, { silenceUnhandleRejection: false });
+}

package/src/useLoadable.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useGet } from './useGet';
+import { useGetInternal } from './useGet';
 import type { Computed, State } from 'ccstate';
 
 type Loadable<T> =
@@ -19,7 +19,9 @@ function useLoadableInternal<T>(
   atom: State<Promise<T> | T> | Computed<Promise<T> | T>,
   keepLastResolved: boolean,
 ): Loadable<T> {
-  const promise = useGet(atom);
+  const promise = useGetInternal(atom, {
+    silenceUnhandleRejection: true,
+  });
 
   const [promiseResult, setPromiseResult] = useState<Loadable<T>>({
     state: 'loading',