ccstate-react 4.8.0 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # ccstate-react
 
+## 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
+
+- Updated dependencies [89440c6]
+  - ccstate@4.9.0
+
 ## 4.8.0
 
 ### Patch Changes

package/dist/index.cjs

@@ -48,6 +48,31 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -75,6 +100,307 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _regeneratorRuntime() {
+  _regeneratorRuntime = function () {
+    return e;
+  };
+  var t,
+    e = {},
+    r = Object.prototype,
+    n = r.hasOwnProperty,
+    o = Object.defineProperty || function (t, e, r) {
+      t[e] = r.value;
+    },
+    i = "function" == typeof Symbol ? Symbol : {},
+    a = i.iterator || "@@iterator",
+    c = i.asyncIterator || "@@asyncIterator",
+    u = i.toStringTag || "@@toStringTag";
+  function define(t, e, r) {
+    return Object.defineProperty(t, e, {
+      value: r,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), t[e];
+  }
+  try {
+    define({}, "");
+  } catch (t) {
+    define = function (t, e, r) {
+      return t[e] = r;
+    };
+  }
+  function wrap(t, e, r, n) {
+    var i = e && e.prototype instanceof Generator ? e : Generator,
+      a = Object.create(i.prototype),
+      c = new Context(n || []);
+    return o(a, "_invoke", {
+      value: makeInvokeMethod(t, r, c)
+    }), a;
+  }
+  function tryCatch(t, e, r) {
+    try {
+      return {
+        type: "normal",
+        arg: t.call(e, r)
+      };
+    } catch (t) {
+      return {
+        type: "throw",
+        arg: t
+      };
+    }
+  }
+  e.wrap = wrap;
+  var h = "suspendedStart",
+    l = "suspendedYield",
+    f = "executing",
+    s = "completed",
+    y = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  var p = {};
+  define(p, a, function () {
+    return this;
+  });
+  var d = Object.getPrototypeOf,
+    v = d && d(d(values([])));
+  v && v !== r && n.call(v, a) && (p = v);
+  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
+  function defineIteratorMethods(t) {
+    ["next", "throw", "return"].forEach(function (e) {
+      define(t, e, function (t) {
+        return this._invoke(e, t);
+      });
+    });
+  }
+  function AsyncIterator(t, e) {
+    function invoke(r, o, i, a) {
+      var c = tryCatch(t[r], t, o);
+      if ("throw" !== c.type) {
+        var u = c.arg,
+          h = u.value;
+        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
+          invoke("next", t, i, a);
+        }, function (t) {
+          invoke("throw", t, i, a);
+        }) : e.resolve(h).then(function (t) {
+          u.value = t, i(u);
+        }, function (t) {
+          return invoke("throw", t, i, a);
+        });
+      }
+      a(c.arg);
+    }
+    var r;
+    o(this, "_invoke", {
+      value: function (t, n) {
+        function callInvokeWithMethodAndArg() {
+          return new e(function (e, r) {
+            invoke(t, n, e, r);
+          });
+        }
+        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      }
+    });
+  }
+  function makeInvokeMethod(e, r, n) {
+    var o = h;
+    return function (i, a) {
+      if (o === f) throw Error("Generator is already running");
+      if (o === s) {
+        if ("throw" === i) throw a;
+        return {
+          value: t,
+          done: !0
+        };
+      }
+      for (n.method = i, n.arg = a;;) {
+        var c = n.delegate;
+        if (c) {
+          var u = maybeInvokeDelegate(c, n);
+          if (u) {
+            if (u === y) continue;
+            return u;
+          }
+        }
+        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+          if (o === h) throw o = s, n.arg;
+          n.dispatchException(n.arg);
+        } else "return" === n.method && n.abrupt("return", n.arg);
+        o = f;
+        var p = tryCatch(e, r, n);
+        if ("normal" === p.type) {
+          if (o = n.done ? s : l, p.arg === y) continue;
+          return {
+            value: p.arg,
+            done: n.done
+          };
+        }
+        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
+      }
+    };
+  }
+  function maybeInvokeDelegate(e, r) {
+    var n = r.method,
+      o = e.iterator[n];
+    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
+    var i = tryCatch(o, e.iterator, r.arg);
+    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+    var a = i.arg;
+    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+  }
+  function pushTryEntry(t) {
+    var e = {
+      tryLoc: t[0]
+    };
+    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
+  }
+  function resetTryEntry(t) {
+    var e = t.completion || {};
+    e.type = "normal", delete e.arg, t.completion = e;
+  }
+  function Context(t) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], t.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(e) {
+    if (e || "" === e) {
+      var r = e[a];
+      if (r) return r.call(e);
+      if ("function" == typeof e.next) return e;
+      if (!isNaN(e.length)) {
+        var o = -1,
+          i = function next() {
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
+            return next.value = t, next.done = !0, next;
+          };
+        return i.next = i;
+      }
+    }
+    throw new TypeError(typeof e + " is not iterable");
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
+    value: GeneratorFunctionPrototype,
+    configurable: !0
+  }), o(GeneratorFunctionPrototype, "constructor", {
+    value: GeneratorFunction,
+    configurable: !0
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
+    var e = "function" == typeof t && t.constructor;
+    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
+  }, e.mark = function (t) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
+  }, e.awrap = function (t) {
+    return {
+      __await: t
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
+    return this;
+  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+    void 0 === i && (i = Promise);
+    var a = new AsyncIterator(wrap(t, r, n, o), i);
+    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+      return t.done ? t.value : a.next();
+    });
+  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
+    return this;
+  }), define(g, "toString", function () {
+    return "[object Generator]";
+  }), e.keys = function (t) {
+    var e = Object(t),
+      r = [];
+    for (var n in e) r.push(n);
+    return r.reverse(), function next() {
+      for (; r.length;) {
+        var t = r.pop();
+        if (t in e) return next.value = t, next.done = !1, next;
+      }
+      return next.done = !0, next;
+    };
+  }, e.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (e) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+    },
+    stop: function () {
+      this.done = !0;
+      var t = this.tryEntries[0].completion;
+      if ("throw" === t.type) throw t.arg;
+      return this.rval;
+    },
+    dispatchException: function (e) {
+      if (this.done) throw e;
+      var r = this;
+      function handle(n, o) {
+        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
+      }
+      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+        var i = this.tryEntries[o],
+          a = i.completion;
+        if ("root" === i.tryLoc) return handle("end");
+        if (i.tryLoc <= this.prev) {
+          var c = n.call(i, "catchLoc"),
+            u = n.call(i, "finallyLoc");
+          if (c && u) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          } else if (c) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+          } else {
+            if (!u) throw Error("try statement without catch or finally");
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (t, e) {
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var o = this.tryEntries[r];
+        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
+          var i = o;
+          break;
+        }
+      }
+      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
+      var a = i ? i.completion : {};
+      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
+    },
+    complete: function (t, e) {
+      if ("throw" === t.type) throw t.arg;
+      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
+    },
+    finish: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
+      }
+    },
+    catch: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.tryLoc === t) {
+          var n = r.completion;
+          if ("throw" === n.type) {
+            var o = n.arg;
+            resetTryEntry(r);
+          }
+          return o;
+        }
+      }
+      throw Error("illegal catch attempt");
+    },
+    delegateYield: function (e, r, n) {
+      return this.delegate = {
+        iterator: values(e),
+        resultName: r,
+        nextLoc: n
+      }, "next" === this.method && (this.arg = t), y;
+    }
+  }, e;
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
@@ -86,8 +412,48 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
+var internalFloatingPromises$ = ccstate.state(new Set());
+var collectFloatingPromise$ = ccstate.command(function (_ref, promise, signal) {
+  var set = _ref.set;
+  signal.addEventListener('abort', function () {
+    set(internalFloatingPromises$, function (prev) {
+      var ret = new Set(prev);
+      ret["delete"](promise);
+      return ret;
+    });
+  });
+  set(internalFloatingPromises$, function (prev) {
+    var ret = new Set(prev);
+    ret.add(promise);
+    return ret;
+  });
+});
+var floatingPromises$ = ccstate.computed(function (get) {
+  return get(internalFloatingPromises$);
+});
+var asyncGetSettled$ = ccstate.computed(/*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(get) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.all(get(floatingPromises$));
+        case 2:
+          return _context.abrupt("return", _context.sent);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function (_x) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+
 function useLoadableInternal(atom, keepLastResolved) {
   var promise = useGet(atom);
+  var collectFloatingPromise = useSet(collectFloatingPromise$);
   var _useState = react.useState({
       state: 'loading'
     }),
@@ -95,26 +461,36 @@ 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 settledController = new AbortController();
     var signal = ctrl.signal;
     if (!keepLastResolved) {
       setPromiseResult({
         state: 'loading'
       });
     }
-    void promise.then(function (ret) {
+    collectFloatingPromise(promise.then(function (ret) {
+      settledController.abort();
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasData',
         data: ret
       });
-    })["catch"](function (error) {
+    }, function (error) {
+      settledController.abort();
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasError',
         error: error
       });
-    });
+    }), AbortSignal.any([signal, settledController.signal]));
     return function () {
       ctrl.abort();
     };
@@ -138,6 +514,7 @@ function useLastResolved(atom) {
 }
 
 exports.StoreProvider = StoreProvider;
+exports.asyncGetSettled$ = asyncGetSettled$;
 exports.useGet = useGet;
 exports.useLastLoadable = useLastLoadable;
 exports.useLastResolved = useLastResolved;

package/dist/index.d.cts

@@ -1,3 +1,4 @@
+import * as ccstate from 'ccstate';
 import { State, Computed, Command, StateArg, Store } from 'ccstate';
 import * as react from 'react';
 
@@ -8,8 +9,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,9 +21,11 @@ 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>;
 
-export { StoreProvider, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };
+declare const asyncGetSettled$: ccstate.Computed<Promise<unknown[]>>;
+
+export { StoreProvider, asyncGetSettled$, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as ccstate from 'ccstate';
 import { State, Computed, Command, StateArg, Store } from 'ccstate';
 import * as react from 'react';
 
@@ -8,8 +9,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,9 +21,11 @@ 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>;
 
-export { StoreProvider, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };
+declare const asyncGetSettled$: ccstate.Computed<Promise<unknown[]>>;
+
+export { StoreProvider, asyncGetSettled$, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useSyncExternalStore, useCallback, useState, useEffect } from 'react';
-import { getDefaultStore, command } from 'ccstate';
+import { getDefaultStore, command, state, computed } from 'ccstate';
 
 var StoreContext = createContext(null);
 var StoreProvider = StoreContext.Provider;
@@ -46,6 +46,31 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -73,6 +98,307 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _regeneratorRuntime() {
+  _regeneratorRuntime = function () {
+    return e;
+  };
+  var t,
+    e = {},
+    r = Object.prototype,
+    n = r.hasOwnProperty,
+    o = Object.defineProperty || function (t, e, r) {
+      t[e] = r.value;
+    },
+    i = "function" == typeof Symbol ? Symbol : {},
+    a = i.iterator || "@@iterator",
+    c = i.asyncIterator || "@@asyncIterator",
+    u = i.toStringTag || "@@toStringTag";
+  function define(t, e, r) {
+    return Object.defineProperty(t, e, {
+      value: r,
+      enumerable: !0,
+      configurable: !0,
+      writable: !0
+    }), t[e];
+  }
+  try {
+    define({}, "");
+  } catch (t) {
+    define = function (t, e, r) {
+      return t[e] = r;
+    };
+  }
+  function wrap(t, e, r, n) {
+    var i = e && e.prototype instanceof Generator ? e : Generator,
+      a = Object.create(i.prototype),
+      c = new Context(n || []);
+    return o(a, "_invoke", {
+      value: makeInvokeMethod(t, r, c)
+    }), a;
+  }
+  function tryCatch(t, e, r) {
+    try {
+      return {
+        type: "normal",
+        arg: t.call(e, r)
+      };
+    } catch (t) {
+      return {
+        type: "throw",
+        arg: t
+      };
+    }
+  }
+  e.wrap = wrap;
+  var h = "suspendedStart",
+    l = "suspendedYield",
+    f = "executing",
+    s = "completed",
+    y = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  var p = {};
+  define(p, a, function () {
+    return this;
+  });
+  var d = Object.getPrototypeOf,
+    v = d && d(d(values([])));
+  v && v !== r && n.call(v, a) && (p = v);
+  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
+  function defineIteratorMethods(t) {
+    ["next", "throw", "return"].forEach(function (e) {
+      define(t, e, function (t) {
+        return this._invoke(e, t);
+      });
+    });
+  }
+  function AsyncIterator(t, e) {
+    function invoke(r, o, i, a) {
+      var c = tryCatch(t[r], t, o);
+      if ("throw" !== c.type) {
+        var u = c.arg,
+          h = u.value;
+        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
+          invoke("next", t, i, a);
+        }, function (t) {
+          invoke("throw", t, i, a);
+        }) : e.resolve(h).then(function (t) {
+          u.value = t, i(u);
+        }, function (t) {
+          return invoke("throw", t, i, a);
+        });
+      }
+      a(c.arg);
+    }
+    var r;
+    o(this, "_invoke", {
+      value: function (t, n) {
+        function callInvokeWithMethodAndArg() {
+          return new e(function (e, r) {
+            invoke(t, n, e, r);
+          });
+        }
+        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      }
+    });
+  }
+  function makeInvokeMethod(e, r, n) {
+    var o = h;
+    return function (i, a) {
+      if (o === f) throw Error("Generator is already running");
+      if (o === s) {
+        if ("throw" === i) throw a;
+        return {
+          value: t,
+          done: !0
+        };
+      }
+      for (n.method = i, n.arg = a;;) {
+        var c = n.delegate;
+        if (c) {
+          var u = maybeInvokeDelegate(c, n);
+          if (u) {
+            if (u === y) continue;
+            return u;
+          }
+        }
+        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+          if (o === h) throw o = s, n.arg;
+          n.dispatchException(n.arg);
+        } else "return" === n.method && n.abrupt("return", n.arg);
+        o = f;
+        var p = tryCatch(e, r, n);
+        if ("normal" === p.type) {
+          if (o = n.done ? s : l, p.arg === y) continue;
+          return {
+            value: p.arg,
+            done: n.done
+          };
+        }
+        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
+      }
+    };
+  }
+  function maybeInvokeDelegate(e, r) {
+    var n = r.method,
+      o = e.iterator[n];
+    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
+    var i = tryCatch(o, e.iterator, r.arg);
+    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+    var a = i.arg;
+    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+  }
+  function pushTryEntry(t) {
+    var e = {
+      tryLoc: t[0]
+    };
+    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
+  }
+  function resetTryEntry(t) {
+    var e = t.completion || {};
+    e.type = "normal", delete e.arg, t.completion = e;
+  }
+  function Context(t) {
+    this.tryEntries = [{
+      tryLoc: "root"
+    }], t.forEach(pushTryEntry, this), this.reset(!0);
+  }
+  function values(e) {
+    if (e || "" === e) {
+      var r = e[a];
+      if (r) return r.call(e);
+      if ("function" == typeof e.next) return e;
+      if (!isNaN(e.length)) {
+        var o = -1,
+          i = function next() {
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
+            return next.value = t, next.done = !0, next;
+          };
+        return i.next = i;
+      }
+    }
+    throw new TypeError(typeof e + " is not iterable");
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
+    value: GeneratorFunctionPrototype,
+    configurable: !0
+  }), o(GeneratorFunctionPrototype, "constructor", {
+    value: GeneratorFunction,
+    configurable: !0
+  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
+    var e = "function" == typeof t && t.constructor;
+    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
+  }, e.mark = function (t) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
+  }, e.awrap = function (t) {
+    return {
+      __await: t
+    };
+  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
+    return this;
+  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+    void 0 === i && (i = Promise);
+    var a = new AsyncIterator(wrap(t, r, n, o), i);
+    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+      return t.done ? t.value : a.next();
+    });
+  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
+    return this;
+  }), define(g, "toString", function () {
+    return "[object Generator]";
+  }), e.keys = function (t) {
+    var e = Object(t),
+      r = [];
+    for (var n in e) r.push(n);
+    return r.reverse(), function next() {
+      for (; r.length;) {
+        var t = r.pop();
+        if (t in e) return next.value = t, next.done = !1, next;
+      }
+      return next.done = !0, next;
+    };
+  }, e.values = values, Context.prototype = {
+    constructor: Context,
+    reset: function (e) {
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+    },
+    stop: function () {
+      this.done = !0;
+      var t = this.tryEntries[0].completion;
+      if ("throw" === t.type) throw t.arg;
+      return this.rval;
+    },
+    dispatchException: function (e) {
+      if (this.done) throw e;
+      var r = this;
+      function handle(n, o) {
+        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
+      }
+      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+        var i = this.tryEntries[o],
+          a = i.completion;
+        if ("root" === i.tryLoc) return handle("end");
+        if (i.tryLoc <= this.prev) {
+          var c = n.call(i, "catchLoc"),
+            u = n.call(i, "finallyLoc");
+          if (c && u) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          } else if (c) {
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+          } else {
+            if (!u) throw Error("try statement without catch or finally");
+            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
+          }
+        }
+      }
+    },
+    abrupt: function (t, e) {
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var o = this.tryEntries[r];
+        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
+          var i = o;
+          break;
+        }
+      }
+      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
+      var a = i ? i.completion : {};
+      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
+    },
+    complete: function (t, e) {
+      if ("throw" === t.type) throw t.arg;
+      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
+    },
+    finish: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
+      }
+    },
+    catch: function (t) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var r = this.tryEntries[e];
+        if (r.tryLoc === t) {
+          var n = r.completion;
+          if ("throw" === n.type) {
+            var o = n.arg;
+            resetTryEntry(r);
+          }
+          return o;
+        }
+      }
+      throw Error("illegal catch attempt");
+    },
+    delegateYield: function (e, r, n) {
+      return this.delegate = {
+        iterator: values(e),
+        resultName: r,
+        nextLoc: n
+      }, "next" === this.method && (this.arg = t), y;
+    }
+  }, e;
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
@@ -84,8 +410,48 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
+var internalFloatingPromises$ = state(new Set());
+var collectFloatingPromise$ = command(function (_ref, promise, signal) {
+  var set = _ref.set;
+  signal.addEventListener('abort', function () {
+    set(internalFloatingPromises$, function (prev) {
+      var ret = new Set(prev);
+      ret["delete"](promise);
+      return ret;
+    });
+  });
+  set(internalFloatingPromises$, function (prev) {
+    var ret = new Set(prev);
+    ret.add(promise);
+    return ret;
+  });
+});
+var floatingPromises$ = computed(function (get) {
+  return get(internalFloatingPromises$);
+});
+var asyncGetSettled$ = computed(/*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(get) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.all(get(floatingPromises$));
+        case 2:
+          return _context.abrupt("return", _context.sent);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function (_x) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+
 function useLoadableInternal(atom, keepLastResolved) {
   var promise = useGet(atom);
+  var collectFloatingPromise = useSet(collectFloatingPromise$);
   var _useState = useState({
       state: 'loading'
     }),
@@ -93,26 +459,36 @@ 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 settledController = new AbortController();
     var signal = ctrl.signal;
     if (!keepLastResolved) {
       setPromiseResult({
         state: 'loading'
       });
     }
-    void promise.then(function (ret) {
+    collectFloatingPromise(promise.then(function (ret) {
+      settledController.abort();
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasData',
         data: ret
       });
-    })["catch"](function (error) {
+    }, function (error) {
+      settledController.abort();
       if (signal.aborted) return;
       setPromiseResult({
         state: 'hasError',
         error: error
       });
-    });
+    }), AbortSignal.any([signal, settledController.signal]));
     return function () {
       ctrl.abort();
     };
@@ -135,4 +511,4 @@ function useLastResolved(atom) {
   return loadable.state === 'hasData' ? loadable.data : undefined;
 }
 
-export { StoreProvider, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };
+export { StoreProvider, asyncGetSettled$, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/package.json

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

package/src/__tests__/loadable.test.tsx

@@ -3,13 +3,14 @@
 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, expect, it, vi } from 'vitest';
 import { computed, createStore, state } from 'ccstate';
 import type { Computed, State } from 'ccstate';
 import { StrictMode, useEffect } from 'react';
 import { StoreProvider, useSet, useLoadable } from '..';
 import { delay } from 'signal-timers';
 import { useLastLoadable } from '../useLoadable';
+import { asyncGetSettled$, floatingPromises$ } from '../floating-promise';
 
 afterEach(() => {
   cleanup();
@@ -530,3 +531,68 @@ 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();
+});
+
+it('will collect floating promises', async () => {
+  const trace = vi.fn();
+  const asyncComputed$ = computed(async () => {
+    await Promise.resolve();
+    trace();
+  });
+
+  const store = createStore();
+  function App() {
+    const result = useLoadable(asyncComputed$);
+
+    return <div>{result.state}</div>;
+  }
+
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+  );
+
+  expect(trace).not.toBeCalled();
+
+  await store.get(asyncGetSettled$);
+
+  expect(trace).toBeCalled();
+});
+
+it('will auto remove from collected floating promise when settled', async () => {
+  const asyncComputed$ = computed(async () => {
+    await Promise.resolve();
+  });
+
+  const store = createStore();
+  function App() {
+    const result = useLoadable(asyncComputed$);
+
+    return <div>{result.state}</div>;
+  }
+
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+  );
+
+  expect(store.get(floatingPromises$)).toHaveLength(1);
+
+  await store.get(asyncGetSettled$);
+
+  expect(store.get(floatingPromises$)).toHaveLength(0);
+});

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/floating-promise.ts

@@ -0,0 +1,27 @@
+import { command, computed, state } from 'ccstate';
+
+const internalFloatingPromises$ = state(new Set<Promise<unknown>>());
+
+export const collectFloatingPromise$ = command(({ set }, promise: Promise<unknown>, signal: AbortSignal) => {
+  signal.addEventListener('abort', () => {
+    set(internalFloatingPromises$, (prev) => {
+      const ret = new Set(prev);
+      ret.delete(promise);
+      return ret;
+    });
+  });
+
+  set(internalFloatingPromises$, (prev) => {
+    const ret = new Set(prev);
+    ret.add(promise);
+    return ret;
+  });
+});
+
+export const floatingPromises$ = computed((get) => {
+  return get(internalFloatingPromises$);
+});
+
+export const asyncGetSettled$ = computed(async (get) => {
+  return await Promise.all(get(floatingPromises$));
+});

package/src/index.ts

@@ -3,3 +3,4 @@ export { useSet } from './useSet';
 export { useResolved, useLastResolved } from './useResolved';
 export { useLoadable, useLastLoadable } from './useLoadable';
 export { StoreProvider } from './provider';
+export { asyncGetSettled$ } from './floating-promise';

package/src/useLoadable.ts

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useGet } from './useGet';
 import type { Computed, State } from 'ccstate';
+import { useSet } from './useSet';
+import { collectFloatingPromise$ } from './floating-promise';
 
 type Loadable<T> =
   | {
@@ -16,16 +18,28 @@ 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 collectFloatingPromise = useSet(collectFloatingPromise$);
+
   const [promiseResult, setPromiseResult] = useState<Loadable<T>>({
     state: 'loading',
   });
 
   useEffect(() => {
+    if (!(promise instanceof Promise)) {
+      setPromiseResult({
+        state: 'hasData',
+        data: promise,
+      });
+
+      return;
+    }
+
     const ctrl = new AbortController();
+    const settledController = new AbortController();
     const signal = ctrl.signal;
 
     if (!keepLastResolved) {
@@ -34,23 +48,29 @@ function useLoadableInternal<T>(
       });
     }
 
-    void promise
-      .then((ret) => {
-        if (signal.aborted) return;
+    collectFloatingPromise(
+      promise.then(
+        (ret) => {
+          settledController.abort();
+          if (signal.aborted) return;
 
-        setPromiseResult({
-          state: 'hasData',
-          data: ret,
-        });
-      })
-      .catch((error: unknown) => {
-        if (signal.aborted) return;
+          setPromiseResult({
+            state: 'hasData',
+            data: ret,
+          });
+        },
+        (error: unknown) => {
+          settledController.abort();
+          if (signal.aborted) return;
 
-        setPromiseResult({
-          state: 'hasError',
-          error,
-        });
-      });
+          setPromiseResult({
+            state: 'hasError',
+            error,
+          });
+        },
+      ),
+      AbortSignal.any([signal, settledController.signal]),
+    );
 
     return () => {
       ctrl.abort();
@@ -60,10 +80,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;
 }