ccstate-react 4.13.0 → 5.2.0

package/dist/experimental.cjs

@@ -1,62 +1,109 @@
 'use strict';
 
-var ccstate = require('ccstate');
 var react = require('react');
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 var StoreContext = react.createContext(null);
 StoreContext.Provider;
 function useStore() {
   var store = react.useContext(StoreContext);
   if (!store) {
-    return ccstate.getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
   return store;
 }
 
-function useRefFactory(factory) {
-  var ref = react.useRef(null);
-  if (!ref.current) {
-    var value = factory();
-    ref.current = value;
-    return value;
-  }
-  return ref.current;
-}
-function useCCState() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return useRefFactory(function () {
-    return ccstate.state.apply(void 0, args);
-  });
-}
-function useComputed() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
-  return useRefFactory(function () {
-    return ccstate.computed.apply(void 0, args);
-  });
-}
-function useCommand() {
-  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    args[_key3] = arguments[_key3];
-  }
-  return useRefFactory(function () {
-    return ccstate.command.apply(void 0, args);
-  });
-}
-function useSub() {
-  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    args[_key4] = arguments[_key4];
-  }
+function useLoadableSet(signal) {
   var store = useStore();
-  react.useEffect(function () {
-    return store.sub.apply(store, args);
+  var resultRef = react.useRef({
+    state: 'idle'
+  });
+  var notifyRef = react.useRef(null);
+  var controllerRef = react.useRef(null);
+  var subscribe = react.useCallback(function (notify) {
+    notifyRef.current = notify;
+    return function () {
+      var _controllerRef$curren;
+      notifyRef.current = null;
+      (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 || _controllerRef$curren.abort();
+    };
   }, []);
+  var invoke = react.useCallback(function () {
+    var _controllerRef$curren2;
+    (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 || _controllerRef$curren2.abort();
+    var controller = new AbortController();
+    controllerRef.current = controller;
+    var abortSignal = controller.signal;
+    function updateResult(result) {
+      var _notifyRef$current;
+      if (abortSignal.aborted) return;
+      resultRef.current = result;
+      (_notifyRef$current = notifyRef.current) === null || _notifyRef$current === void 0 || _notifyRef$current.call(notifyRef);
+    }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if ('write' in signal) {
+      var result = store.set.apply(store, [signal].concat(_toConsumableArray(args)));
+      if (result instanceof Promise) {
+        updateResult({
+          state: 'loading'
+        });
+        void result.then(function (data) {
+          updateResult({
+            state: 'hasData',
+            data: data
+          });
+        }, function (error) {
+          updateResult({
+            state: 'hasError',
+            error: error
+          });
+        });
+      } else {
+        updateResult({
+          state: 'hasData',
+          data: result
+        });
+      }
+      return result;
+    } else {
+      store.set.apply(store, [signal].concat(_toConsumableArray(args)));
+      updateResult({
+        state: 'hasData',
+        data: undefined
+      });
+      return undefined;
+    }
+  }, [store, signal]);
+  var loadable = react.useSyncExternalStore(subscribe, function () {
+    return resultRef.current;
+  });
+  return [loadable, invoke];
 }
 
-exports.useCCState = useCCState;
-exports.useCommand = useCommand;
-exports.useComputed = useComputed;
-exports.useSub = useSub;
+exports.useLoadableSet = useLoadableSet;

package/dist/experimental.d.cts

@@ -1,8 +1,17 @@
-import { state, State, computed, Computed, command, Command, Subscribe } from 'ccstate';
+import { State, StateArg, Command } from 'ccstate';
 
-declare function useCCState<T>(...args: Parameters<typeof state<T>>): State<T>;
-declare function useComputed<T>(...args: Parameters<typeof computed<T>>): Computed<T>;
-declare function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof command<T, Args>>): Command<T, Args>;
-declare function useSub(...args: Parameters<Subscribe>): void;
+type LoadableSetResult<T> = {
+    state: 'idle';
+} | {
+    state: 'loading';
+} | {
+    state: 'hasData';
+    data: Awaited<T>;
+} | {
+    state: 'hasError';
+    error: unknown;
+};
+declare function useLoadableSet<T>(signal: State<T>): [LoadableSetResult<void>, (val: StateArg<T>) => void];
+declare function useLoadableSet<T, CommandArgs extends unknown[]>(signal: Command<T, CommandArgs>): [LoadableSetResult<Awaited<T>>, (...args: CommandArgs) => T];
 
-export { useCCState, useCommand, useComputed, useSub };
+export { useLoadableSet };

package/dist/experimental.d.ts

@@ -1,8 +1,17 @@
-import { state, State, computed, Computed, command, Command, Subscribe } from 'ccstate';
+import { State, StateArg, Command } from 'ccstate';
 
-declare function useCCState<T>(...args: Parameters<typeof state<T>>): State<T>;
-declare function useComputed<T>(...args: Parameters<typeof computed<T>>): Computed<T>;
-declare function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof command<T, Args>>): Command<T, Args>;
-declare function useSub(...args: Parameters<Subscribe>): void;
+type LoadableSetResult<T> = {
+    state: 'idle';
+} | {
+    state: 'loading';
+} | {
+    state: 'hasData';
+    data: Awaited<T>;
+} | {
+    state: 'hasError';
+    error: unknown;
+};
+declare function useLoadableSet<T>(signal: State<T>): [LoadableSetResult<void>, (val: StateArg<T>) => void];
+declare function useLoadableSet<T, CommandArgs extends unknown[]>(signal: Command<T, CommandArgs>): [LoadableSetResult<Awaited<T>>, (...args: CommandArgs) => T];
 
-export { useCCState, useCommand, useComputed, useSub };
+export { useLoadableSet };

package/dist/experimental.js

@@ -1,57 +1,107 @@
-import { getDefaultStore, state, computed, command } from 'ccstate';
-import { createContext, useContext, useEffect, useRef } from 'react';
+import { createContext, useContext, useRef, useCallback, useSyncExternalStore } from 'react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 var StoreContext = createContext(null);
 StoreContext.Provider;
 function useStore() {
   var store = useContext(StoreContext);
   if (!store) {
-    return getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
   return store;
 }
 
-function useRefFactory(factory) {
-  var ref = useRef(null);
-  if (!ref.current) {
-    var value = factory();
-    ref.current = value;
-    return value;
-  }
-  return ref.current;
-}
-function useCCState() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return useRefFactory(function () {
-    return state.apply(void 0, args);
-  });
-}
-function useComputed() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
-  return useRefFactory(function () {
-    return computed.apply(void 0, args);
-  });
-}
-function useCommand() {
-  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    args[_key3] = arguments[_key3];
-  }
-  return useRefFactory(function () {
-    return command.apply(void 0, args);
-  });
-}
-function useSub() {
-  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    args[_key4] = arguments[_key4];
-  }
+function useLoadableSet(signal) {
   var store = useStore();
-  useEffect(function () {
-    return store.sub.apply(store, args);
+  var resultRef = useRef({
+    state: 'idle'
+  });
+  var notifyRef = useRef(null);
+  var controllerRef = useRef(null);
+  var subscribe = useCallback(function (notify) {
+    notifyRef.current = notify;
+    return function () {
+      var _controllerRef$curren;
+      notifyRef.current = null;
+      (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 || _controllerRef$curren.abort();
+    };
   }, []);
+  var invoke = useCallback(function () {
+    var _controllerRef$curren2;
+    (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 || _controllerRef$curren2.abort();
+    var controller = new AbortController();
+    controllerRef.current = controller;
+    var abortSignal = controller.signal;
+    function updateResult(result) {
+      var _notifyRef$current;
+      if (abortSignal.aborted) return;
+      resultRef.current = result;
+      (_notifyRef$current = notifyRef.current) === null || _notifyRef$current === void 0 || _notifyRef$current.call(notifyRef);
+    }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if ('write' in signal) {
+      var result = store.set.apply(store, [signal].concat(_toConsumableArray(args)));
+      if (result instanceof Promise) {
+        updateResult({
+          state: 'loading'
+        });
+        void result.then(function (data) {
+          updateResult({
+            state: 'hasData',
+            data: data
+          });
+        }, function (error) {
+          updateResult({
+            state: 'hasError',
+            error: error
+          });
+        });
+      } else {
+        updateResult({
+          state: 'hasData',
+          data: result
+        });
+      }
+      return result;
+    } else {
+      store.set.apply(store, [signal].concat(_toConsumableArray(args)));
+      updateResult({
+        state: 'hasData',
+        data: undefined
+      });
+      return undefined;
+    }
+  }, [store, signal]);
+  var loadable = useSyncExternalStore(subscribe, function () {
+    return resultRef.current;
+  });
+  return [loadable, invoke];
 }
 
-export { useCCState, useCommand, useComputed, useSub };
+export { useLoadableSet };

package/dist/index.cjs

@@ -1,23 +1,32 @@
 'use strict';
 
 var react = require('react');
-var ccstate = require('ccstate');
 
 var StoreContext = react.createContext(null);
 var StoreProvider = StoreContext.Provider;
 function useStore() {
   var store = react.useContext(StoreContext);
   if (!store) {
-    return ccstate.getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
   return store;
 }
 
 function useGet(atom) {
   var store = useStore();
-  return react.useSyncExternalStore(function (fn) {
-    return store.sub(atom, ccstate.command(fn));
-  }, function () {
+  var onChange = react.useRef(function (fn) {
+    var controller = new AbortController();
+    store.watch(function (get) {
+      get(atom);
+      fn();
+    }, {
+      signal: controller.signal
+    });
+    return function () {
+      controller.abort();
+    };
+  });
+  return react.useSyncExternalStore(onChange.current, function () {
     return store.get(atom);
   });
 }
@@ -34,132 +43,54 @@ function useSet(signal) {
   }, [store, signal]);
 }
 
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _arrayWithHoles(r) {
-  if (Array.isArray(r)) return r;
-}
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-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 _slicedToArray(r, e) {
-  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
-}
-
-/**
- * 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;
+function useLoadableInternal(promise$, keepLastResolved) {
+  var promiseResult = react.useRef({
+    state: 'loading'
   });
-  return [promise, function () {
-    promiseProcessed.current = true;
-  }];
-}
-function useLoadableInternal(atom, keepLastResolved) {
-  var _useGetPromise = useGetPromise(atom),
-    _useGetPromise2 = _slicedToArray(_useGetPromise, 2),
-    promise = _useGetPromise2[0],
-    setPromiseProcessed = _useGetPromise2[1];
-  var _useState = react.useState({
-      state: 'loading'
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    promiseResult = _useState2[0],
-    setPromiseResult = _useState2[1];
-  react.useEffect(function () {
-    if (!(promise instanceof Promise)) {
-      setPromiseResult({
-        state: 'hasData',
-        data: promise
-      });
-      return;
-    }
-    var cancelled = false;
-    if (!keepLastResolved) {
-      setPromiseResult({
-        state: 'loading'
-      });
+  var store = useStore();
+  var subStore = react.useCallback(function (fn) {
+    function updateResult(result, signal) {
+      if (signal.aborted) return;
+      promiseResult.current = result;
+      fn();
     }
-    setPromiseProcessed();
-    promise.then(function (ret) {
-      if (cancelled) return;
-      setPromiseResult({
-        state: 'hasData',
-        data: ret
-      });
-    }, function (error) {
-      if (cancelled) return;
-      setPromiseResult({
-        state: 'hasError',
-        error: error
+    var controller = new AbortController();
+    store.watch(function (get, _ref) {
+      var signal = _ref.signal;
+      var promise = get(promise$);
+      if (!(promise instanceof Promise)) {
+        updateResult({
+          state: 'hasData',
+          data: promise
+        }, signal);
+        return;
+      }
+      if (!keepLastResolved) {
+        updateResult({
+          state: 'loading'
+        }, signal);
+      }
+      promise.then(function (ret) {
+        updateResult({
+          state: 'hasData',
+          data: ret
+        }, signal);
+      }, function (error) {
+        updateResult({
+          state: 'hasError',
+          error: error
+        }, signal);
       });
+    }, {
+      signal: controller.signal
     });
     return function () {
-      cancelled = true;
+      controller.abort();
     };
-  }, [promise]);
-  return promiseResult;
+  }, [store, promise$]);
+  return react.useSyncExternalStore(subStore, function () {
+    return promiseResult.current;
+  });
 }
 function useLoadable(atom) {
   return useLoadableInternal(atom, false);

package/dist/index.d.cts

@@ -15,13 +15,13 @@ type Loadable<T> = {
     state: 'loading';
 } | {
     state: 'hasData';
-    data: T;
+    data: Awaited<T>;
 } | {
     state: 'hasError';
     error: unknown;
 };
-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 function useLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<T>;
+declare function useLastLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<T>;
 
 declare const StoreProvider: react.Provider<Store | null>;
 

package/dist/index.d.ts

@@ -15,13 +15,13 @@ type Loadable<T> = {
     state: 'loading';
 } | {
     state: 'hasData';
-    data: T;
+    data: Awaited<T>;
 } | {
     state: 'hasError';
     error: unknown;
 };
-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 function useLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<T>;
+declare function useLastLoadable<T>(atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>): Loadable<T>;
 
 declare const StoreProvider: react.Provider<Store | null>;