ccstate-react 4.13.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # ccstate-react
 
+## 5.0.0
+
+### Major Changes
+
+- 2fdba09: feat: provide watch method to replace sub
+
+### Minor Changes
+
+- 211f5b5: refactor: better promise rejection handling
+- 52c52fd: refactor: remove defaultStore
+
+### Patch Changes
+
+- Updated dependencies [2fdba09]
+- Updated dependencies [52c52fd]
+  - ccstate@5.0.0
+
 ## 4.13.0
 
 ### Minor Changes

package/dist/experimental.cjs

@@ -3,16 +3,6 @@
 var ccstate = require('ccstate');
 var react = require('react');
 
-var StoreContext = react.createContext(null);
-StoreContext.Provider;
-function useStore() {
-  var store = react.useContext(StoreContext);
-  if (!store) {
-    return ccstate.getDefaultStore();
-  }
-  return store;
-}
-
 function useRefFactory(factory) {
   var ref = react.useRef(null);
   if (!ref.current) {
@@ -46,17 +36,7 @@ function useCommand() {
     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];
-  }
-  var store = useStore();
-  react.useEffect(function () {
-    return store.sub.apply(store, args);
-  }, []);
-}
 
 exports.useCCState = useCCState;
 exports.useCommand = useCommand;
 exports.useComputed = useComputed;
-exports.useSub = useSub;

package/dist/experimental.d.cts

@@ -1,8 +1,7 @@
-import { state, State, computed, Computed, command, Command, Subscribe } from 'ccstate';
+import { state, State, computed, Computed, command, 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;
 
-export { useCCState, useCommand, useComputed, useSub };
+export { useCCState, useCommand, useComputed };

package/dist/experimental.d.ts

@@ -1,8 +1,7 @@
-import { state, State, computed, Computed, command, Command, Subscribe } from 'ccstate';
+import { state, State, computed, Computed, command, 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;
 
-export { useCCState, useCommand, useComputed, useSub };
+export { useCCState, useCommand, useComputed };

package/dist/experimental.js

@@ -1,15 +1,5 @@
-import { getDefaultStore, state, computed, command } from 'ccstate';
-import { createContext, useContext, useEffect, useRef } from 'react';
-
-var StoreContext = createContext(null);
-StoreContext.Provider;
-function useStore() {
-  var store = useContext(StoreContext);
-  if (!store) {
-    return getDefaultStore();
-  }
-  return store;
-}
+import { state, computed, command } from 'ccstate';
+import { useRef } from 'react';
 
 function useRefFactory(factory) {
   var ref = useRef(null);
@@ -44,14 +34,5 @@ function useCommand() {
     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];
-  }
-  var store = useStore();
-  useEffect(function () {
-    return store.sub.apply(store, args);
-  }, []);
-}
 
-export { useCCState, useCommand, useComputed, useSub };
+export { useCCState, useCommand, useComputed };

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>;
 

package/dist/index.js

@@ -1,21 +1,30 @@
-import { createContext, useContext, useSyncExternalStore, useCallback, useState, useEffect, useRef } from 'react';
-import { getDefaultStore, command } from 'ccstate';
+import { createContext, useContext, useRef, useSyncExternalStore, useCallback } from 'react';
 
 var StoreContext = createContext(null);
 var StoreProvider = 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 useGet(atom) {
   var store = useStore();
-  return useSyncExternalStore(function (fn) {
-    return store.sub(atom, command(fn));
-  }, function () {
+  var onChange = useRef(function (fn) {
+    var controller = new AbortController();
+    store.watch(function (get) {
+      get(atom);
+      fn();
+    }, {
+      signal: controller.signal
+    });
+    return function () {
+      controller.abort();
+    };
+  });
+  return useSyncExternalStore(onChange.current, function () {
     return store.get(atom);
   });
 }
@@ -32,132 +41,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 = 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;
+function useLoadableInternal(promise$, keepLastResolved) {
+  var promiseResult = 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 = useState({
-      state: 'loading'
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    promiseResult = _useState2[0],
-    setPromiseResult = _useState2[1];
-  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 = 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 useSyncExternalStore(subStore, function () {
+    return promiseResult.current;
+  });
 }
 function useLoadable(atom) {
   return useLoadableInternal(atom, false);

package/package.json

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

package/src/__tests__/get-and-set.test.tsx

@@ -1,7 +1,7 @@
 import { render, cleanup, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { computed, createStore, command, state, createDebugStore, getDefaultStore } from 'ccstate';
+import { computed, createStore, command, state, createDebugStore } from 'ccstate';
 import { StoreProvider, useGet, useSet } from '..';
 import { StrictMode, useState } from 'react';
 import '@testing-library/jest-dom/vitest';
@@ -198,21 +198,21 @@ describe('react', () => {
     expect(await screen.findByText('1')).toBeInTheDocument();
   });
 
-  it('should use default store if no provider', () => {
+  it('throw error if no store provide', () => {
     const count$ = state(0);
-    getDefaultStore().set(count$, 10);
 
     function App() {
       const count = useGet(count$);
       return <div>{count}</div>;
     }
 
-    render(
-      <StrictMode>
-        <App />
-      </StrictMode>,
-    );
-    expect(screen.getByText('10')).toBeInTheDocument();
+    expect(() => {
+      render(
+        <StrictMode>
+          <App />
+        </StrictMode>,
+      );
+    }).toThrowError('useStore must be used within a StoreProvider');
   });
 
   it('will unmount when component cleanup', async () => {
@@ -221,7 +221,7 @@ describe('react', () => {
 
     function App() {
       const ret = useGet(base$);
-      return <div>{ret}</div>;
+      return <div>ret:{ret}</div>;
     }
 
     function Container() {
@@ -252,12 +252,16 @@ describe('react', () => {
     );
 
     const user = userEvent.setup();
-    expect(store.getSubscribeGraph()).toHaveLength(1);
+
+    expect(screen.getByText('ret:0')).toBeInTheDocument();
     const button = screen.getByText('hide');
+
+    expect(store.getReadDependents(base$)).toHaveLength(2);
+
     expect(button).toBeInTheDocument();
     await user.click(button);
     expect(await screen.findByText('unmounted')).toBeInTheDocument();
-    expect(store.getSubscribeGraph()).toHaveLength(0);
+    expect(store.getReadDependents(base$)).toHaveLength(1);
   });
 });
 
@@ -287,7 +291,12 @@ it('useSet should be stable', () => {
     return <div>Render</div>;
   }
 
-  render(<Container />);
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <Container />
+    </StoreProvider>,
+  );
 
   expect(trace).toHaveBeenCalledTimes(2);
   expect(trace.mock.calls[0][0]).toBe(trace.mock.calls[1][0]);

package/src/__tests__/inline-atom.test.tsx

@@ -4,8 +4,8 @@ import '@testing-library/jest-dom/vitest';
 import { screen, cleanup, render } from '@testing-library/react';
 import { StrictMode } from 'react';
 import userEvent from '@testing-library/user-event';
-import { useCCState, useCommand, useComputed, useSub } from '../experimental';
-import { createDebugStore } from 'ccstate';
+import { useCCState, useCommand, useComputed } from '../experimental';
+import { createStore } from 'ccstate';
 
 afterEach(() => {
   cleanup();
@@ -62,9 +62,12 @@ it('use atom in React component', async () => {
     );
   }
 
+  const store = createStore();
   render(
     <StrictMode>
-      <Counter />
+      <StoreProvider value={store}>
+        <Counter />
+      </StoreProvider>
     </StrictMode>,
   );
   expect(screen.getByText('count: 0')).toBeInTheDocument();
@@ -79,61 +82,3 @@ it('use atom in React component', async () => {
   expect(screen.getByText('count: 4')).toBeInTheDocument();
   expect(screen.getByText('double: 8')).toBeInTheDocument();
 });
-
-it('use sub in React component', async () => {
-  function Counter() {
-    const count$ = useCCState(0, {
-      debugLabel: 'count$',
-    });
-    const double$ = useCCState(0, {
-      debugLabel: 'double$',
-    });
-
-    const updateDouble$ = useCommand(
-      ({ get, set }) => {
-        const double = get(count$) * 2;
-        set(double$, double);
-      },
-      {
-        debugLabel: 'updateDouble$',
-      },
-    );
-    useSub(count$, updateDouble$);
-
-    const count = useGet(count$);
-    const double = useGet(double$);
-    const setCount = useSet(count$);
-
-    return (
-      <>
-        <div>count: {String(count)}</div>
-        <div>double: {String(double)}</div>
-        <button
-          onClick={() => {
-            setCount((prev) => prev + 1);
-          }}
-        >
-          Increment
-        </button>
-      </>
-    );
-  }
-
-  const store = createDebugStore();
-  render(
-    <StrictMode>
-      <StoreProvider value={store}>
-        <Counter />
-      </StoreProvider>
-    </StrictMode>,
-  );
-  expect(screen.getByText('count: 0')).toBeInTheDocument();
-
-  const button = screen.getByText('Increment');
-  await user.click(button);
-  expect(screen.getByText('count: 1')).toBeInTheDocument();
-  expect(await screen.findByText('double: 2')).toBeInTheDocument();
-
-  cleanup();
-  expect(store.getSubscribeGraph()).toEqual([]);
-});

package/src/__tests__/loadable.test.tsx

@@ -539,7 +539,12 @@ it('useLoadable accept sync computed', async () => {
     return <div>{base.state}</div>;
   }
 
-  render(<App />);
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+  );
 
   expect(await screen.findByText('hasData')).toBeInTheDocument();
 });
@@ -605,10 +610,10 @@ test('useLoadable should catch errors', () => {
     get(reload$);
 
     const p = Promise.resolve();
-    const originalCatch = p.catch.bind(p);
-    vi.spyOn(p, 'catch').mockImplementation((...args) => {
+    const originalThen = p.then.bind(p);
+    vi.spyOn(p, 'then').mockImplementation((...args) => {
       traceCatch();
-      return originalCatch(...args);
+      return originalThen(...args);
     });
     return p;
   });
@@ -628,9 +633,12 @@ test('useLoadable should catch errors', () => {
       </StoreProvider>
     </StrictMode>,
   );
+  expect(traceCatch).toHaveBeenCalledTimes(2); // strict mode renders twice
 
   store.set(reload$, (x) => x + 1);
-  store.set(reload$, (x) => x + 1);
+  expect(traceCatch).toHaveBeenCalledTimes(3);
 
-  expect(traceCatch).toHaveBeenCalledTimes(1);
+  store.set(reload$, (x) => x + 1);
+  store.set(reload$, (x) => x + 1);
+  expect(traceCatch).toHaveBeenCalledTimes(5);
 });

package/src/__tests__/resolved.test.tsx

@@ -109,7 +109,12 @@ it('useResolved accept sync computed', async () => {
     return <div>{base}</div>;
   }
 
-  render(<App />);
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+  );
 
   expect(await screen.findByText('0')).toBeInTheDocument();
 });

package/src/experimental.ts

@@ -1 +1 @@
-export { useCCState, useComputed, useCommand, useSub } from './useInlineAtom';
+export { useCCState, useComputed, useCommand } from './useInlineAtom';

package/src/provider.ts

@@ -1,5 +1,4 @@
 import { createContext, useContext } from 'react';
-import { getDefaultStore } from 'ccstate';
 import type { Store } from 'ccstate';
 
 const StoreContext = createContext<Store | null>(null);
@@ -10,7 +9,7 @@ export function useStore(): Store {
   const store = useContext(StoreContext);
 
   if (!store) {
-    return getDefaultStore();
+    throw new Error('useStore must be used within a StoreProvider');
   }
 
   return store;

package/src/useGet.ts

@@ -1,12 +1,25 @@
-import { useSyncExternalStore } from 'react';
+import { useRef, useSyncExternalStore } from 'react';
 import { useStore } from './provider';
-import { command } from 'ccstate';
+
 import type { Computed, State } from 'ccstate';
 
 export function useGet<T>(atom: State<T> | Computed<T>) {
   const store = useStore();
-  return useSyncExternalStore(
-    (fn) => store.sub(atom, command(fn)),
-    () => store.get(atom),
-  );
+  const onChange = useRef((fn: () => void) => {
+    const controller = new AbortController();
+    store.watch(
+      (get) => {
+        get(atom);
+        fn();
+      },
+      {
+        signal: controller.signal,
+      },
+    );
+    return () => {
+      controller.abort();
+    };
+  });
+
+  return useSyncExternalStore(onChange.current, () => store.get(atom));
 }

package/src/useInlineAtom.ts

@@ -1,6 +1,5 @@
-import { command, computed, state, type Command, type Computed, type State, type Subscribe } from 'ccstate';
-import { useEffect, useRef } from 'react';
-import { useStore } from './provider';
+import { command, computed, state, type Command, type Computed, type State } from 'ccstate';
+import { useRef } from 'react';
 
 function useRefFactory<T>(factory: () => T): T {
   const ref = useRef<T | null>(null);
@@ -30,11 +29,3 @@ export function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof
     return command(...args);
   });
 }
-
-export function useSub(...args: Parameters<Subscribe>) {
-  const store = useStore();
-
-  useEffect(() => {
-    return store.sub(...args);
-  }, []);
-}

package/src/useLoadable.ts

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
-import { command, type Computed, type State } from 'ccstate';
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { type Computed, type State } from 'ccstate';
 import { useStore } from './provider';
 
 type Loadable<T> =
@@ -8,120 +8,99 @@ type Loadable<T> =
     }
   | {
       state: 'hasData';
-      data: T;
+      data: Awaited<T>;
     }
   | {
       state: 'hasError';
       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>,
+function useLoadableInternal<T, U extends Promise<Awaited<T>> | Awaited<T>>(
+  promise$: State<U> | Computed<U>,
   keepLastResolved: boolean,
 ): Loadable<T> {
-  const [promise, setPromiseProcessed] = useGetPromise(atom);
-  const [promiseResult, setPromiseResult] = useState<Loadable<T>>({
+  const promiseResult = useRef<Loadable<T>>({
     state: 'loading',
   });
 
-  useEffect(() => {
-    if (!(promise instanceof Promise)) {
-      setPromiseResult({
-        state: 'hasData',
-        data: promise,
-      });
-
-      return;
-    }
-
-    let cancelled = false;
-
-    if (!keepLastResolved) {
-      setPromiseResult({
-        state: 'loading',
-      });
-    }
-
-    setPromiseProcessed();
-
-    promise.then(
-      (ret) => {
-        if (cancelled) return;
-
-        setPromiseResult({
-          state: 'hasData',
-          data: ret,
-        });
-      },
-      (error: unknown) => {
-        if (cancelled) return;
-
-        setPromiseResult({
-          state: 'hasError',
-          error,
-        });
-      },
-    );
+  const store = useStore();
+  const subStore = useCallback(
+    (fn: () => void) => {
+      function updateResult(result: Loadable<T>, signal: AbortSignal) {
+        if (signal.aborted) return;
+        promiseResult.current = result;
+        fn();
+      }
 
-    return () => {
-      cancelled = true;
-    };
-  }, [promise]);
+      const controller = new AbortController();
+
+      store.watch(
+        (get, { signal }) => {
+          const promise: Promise<Awaited<T>> | Awaited<T> = get(promise$);
+          if (!(promise instanceof Promise)) {
+            updateResult(
+              {
+                state: 'hasData',
+                data: promise,
+              },
+              signal,
+            );
+            return;
+          }
+
+          if (!keepLastResolved) {
+            updateResult(
+              {
+                state: 'loading',
+              },
+              signal,
+            );
+          }
+
+          promise.then(
+            (ret) => {
+              updateResult(
+                {
+                  state: 'hasData',
+                  data: ret,
+                },
+                signal,
+              );
+            },
+            (error: unknown) => {
+              updateResult(
+                {
+                  state: 'hasError',
+                  error,
+                },
+                signal,
+              );
+            },
+          );
+        },
+        {
+          signal: controller.signal,
+        },
+      );
+
+      return () => {
+        controller.abort();
+      };
+    },
+    [store, promise$],
+  );
 
-  return promiseResult;
+  return useSyncExternalStore(subStore, () => promiseResult.current);
 }
 
 export function useLoadable<T>(
   atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
-): Loadable<Awaited<T>> {
+): Loadable<T> {
   return useLoadableInternal(atom, false);
 }
 
 export function useLastLoadable<T>(
   atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
-): Loadable<Awaited<T>> {
+): Loadable<T> {
   return useLoadableInternal(atom, true);
 }

package/src/useResolved.ts

@@ -4,13 +4,13 @@ import type { Computed, State } from 'ccstate';
 export function useResolved<T>(
   atom: State<Promise<Awaited<T>> | Awaited<T>> | Computed<Promise<Awaited<T>> | Awaited<T>>,
 ): Awaited<T> | undefined {
-  const loadable = useLoadable(atom);
+  const loadable = useLoadable<T>(atom);
   return loadable.state === 'hasData' ? loadable.data : 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);
+  const loadable = useLastLoadable<T>(atom);
   return loadable.state === 'hasData' ? loadable.data : undefined;
 }