ccstate-react 4.9.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # ccstate-react
 
+## 4.11.0
+
+### Minor Changes
+
+- 81795a2: remove asyncGetSettled$
+
+### Patch Changes
+
+- ccstate@4.11.0
+
+## 4.10.0
+
+### Minor Changes
+
+- e00d4af: feat: useLoadable support non-promise signals
+- e00d4af: feat: collect floating promise in async computed
+
+### Patch Changes
+
+- ccstate@4.10.0
+
 ## 4.9.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -95,6 +95,13 @@ function useLoadableInternal(atom, keepLastResolved) {
     promiseResult = _useState2[0],
     setPromiseResult = _useState2[1];
   react.useEffect(function () {
+    if (!(promise instanceof Promise)) {
+      setPromiseResult({
+        state: 'hasData',
+        data: promise
+      });
+      return;
+    }
     var ctrl = new AbortController();
     var signal = ctrl.signal;
     if (!keepLastResolved) {
@@ -102,13 +109,13 @@ function useLoadableInternal(atom, keepLastResolved) {
         state: 'loading'
       });
     }
-    void promise.then(function (ret) {
+    promise.then(function (ret) {
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasData',
         data: ret
       });
-    })["catch"](function (error) {
+    }, function (error) {
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasError',

package/dist/index.d.cts

@@ -8,8 +8,8 @@ type CommandInvoker<T, CommandArgs extends unknown[]> = (...args: CommandArgs) =
 declare function useSet<T>(signal: State<T>): ValueSetter<T>;
 declare function useSet<T, CommandArgs extends unknown[]>(signal: Command<T, CommandArgs>): CommandInvoker<T, CommandArgs>;
 
-declare function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
-declare function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
+declare function useResolved<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Awaited<T> | undefined;
+declare function useLastResolved<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Awaited<T> | undefined;
 
 type Loadable<T> = {
     state: 'loading';
@@ -20,8 +20,8 @@ type Loadable<T> = {
     state: 'hasError';
     error: unknown;
 };
-declare function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
-declare function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
+declare function useLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<Awaited<T>>;
+declare function useLastLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<Awaited<T>>;
 
 declare const StoreProvider: react.Provider<Store | null>;
 

package/dist/index.d.ts

@@ -8,8 +8,8 @@ type CommandInvoker<T, CommandArgs extends unknown[]> = (...args: CommandArgs) =
 declare function useSet<T>(signal: State<T>): ValueSetter<T>;
 declare function useSet<T, CommandArgs extends unknown[]>(signal: Command<T, CommandArgs>): CommandInvoker<T, CommandArgs>;
 
-declare function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
-declare function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
+declare function useResolved<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Awaited<T> | undefined;
+declare function useLastResolved<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Awaited<T> | undefined;
 
 type Loadable<T> = {
     state: 'loading';
@@ -20,8 +20,8 @@ type Loadable<T> = {
     state: 'hasError';
     error: unknown;
 };
-declare function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
-declare function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
+declare function useLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<Awaited<T>>;
+declare function useLastLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<Awaited<T>>;
 
 declare const StoreProvider: react.Provider<Store | null>;
 

package/dist/index.js

@@ -93,6 +93,13 @@ function useLoadableInternal(atom, keepLastResolved) {
     promiseResult = _useState2[0],
     setPromiseResult = _useState2[1];
   useEffect(function () {
+    if (!(promise instanceof Promise)) {
+      setPromiseResult({
+        state: 'hasData',
+        data: promise
+      });
+      return;
+    }
     var ctrl = new AbortController();
     var signal = ctrl.signal;
     if (!keepLastResolved) {
@@ -100,13 +107,13 @@ function useLoadableInternal(atom, keepLastResolved) {
         state: 'loading'
       });
     }
-    void promise.then(function (ret) {
+    promise.then(function (ret) {
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasData',
         data: ret
       });
-    })["catch"](function (error) {
+    }, function (error) {
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasError',

package/package.json

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

package/src/__tests__/loadable.test.tsx

@@ -530,3 +530,16 @@ it('use lastLoadable will will not use old promise error if new promise is made'
   await delay(0);
   expect(screen.getByText('num2')).toBeInTheDocument();
 });
+
+it('useLoadable accept sync computed', async () => {
+  const base$ = state(0);
+  function App() {
+    const base = useLoadable(base$);
+
+    return <div>{base.state}</div>;
+  }
+
+  render(<App />);
+
+  expect(await screen.findByText('hasData')).toBeInTheDocument();
+});

package/src/__tests__/resolved.test.tsx

@@ -100,3 +100,16 @@ it('use lastLoadable should not update when new promise pending', async () => {
   await delay(0);
   expect(screen.getByText('num2')).toBeInTheDocument();
 });
+
+it('useResolved accept sync computed', async () => {
+  const base$ = state(0);
+  function App() {
+    const base = useResolved(base$);
+
+    return <div>{base}</div>;
+  }
+
+  render(<App />);
+
+  expect(await screen.findByText('0')).toBeInTheDocument();
+});

package/src/useLoadable.ts

@@ -16,15 +16,25 @@ type Loadable<T> =
     };
 
 function useLoadableInternal<T>(
-  atom: State<Promise<T>> | Computed<Promise<T>>,
+  atom: State<Promise<T> | T> | Computed<Promise<T> | T>,
   keepLastResolved: boolean,
 ): Loadable<T> {
   const promise = useGet(atom);
+
   const [promiseResult, setPromiseResult] = useState<Loadable<T>>({
     state: 'loading',
   });
 
   useEffect(() => {
+    if (!(promise instanceof Promise)) {
+      setPromiseResult({
+        state: 'hasData',
+        data: promise,
+      });
+
+      return;
+    }
+
     const ctrl = new AbortController();
     const signal = ctrl.signal;
 
@@ -34,23 +44,24 @@ function useLoadableInternal<T>(
       });
     }
 
-    void promise
-      .then((ret) => {
+    promise.then(
+      (ret) => {
         if (signal.aborted) return;
 
         setPromiseResult({
           state: 'hasData',
           data: ret,
         });
-      })
-      .catch((error: unknown) => {
+      },
+      (error: unknown) => {
         if (signal.aborted) return;
 
         setPromiseResult({
           state: 'hasError',
           error,
         });
-      });
+      },
+    );
 
     return () => {
       ctrl.abort();
@@ -60,10 +71,14 @@ function useLoadableInternal<T>(
   return promiseResult;
 }
 
-export function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T> {
+export function useLoadable<T>(
+  atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
+): Loadable<Awaited<T>> {
   return useLoadableInternal(atom, false);
 }
 
-export function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T> {
+export function useLastLoadable<T>(
+  atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
+): Loadable<Awaited<T>> {
   return useLoadableInternal(atom, true);
 }

package/src/useResolved.ts

@@ -1,12 +1,16 @@
 import { useLastLoadable, useLoadable } from './useLoadable';
 import type { Computed, State } from 'ccstate';
 
-export function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined {
+export function useResolved<T>(
+  atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
+): Awaited<T> | undefined {
   const loadable = useLoadable(atom);
   return loadable.state === 'hasData' ? loadable.data : undefined;
 }
 
-export function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined {
+export function useLastResolved<T>(
+  atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
+): Awaited<T> | undefined {
   const loadable = useLastLoadable(atom);
   return loadable.state === 'hasData' ? loadable.data : undefined;
 }