ccstate-react 4.13.0 → 5.2.0

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.2.0",
   "description": "CCState React Hooks",
   "repository": {
     "type": "git",
@@ -8,6 +8,10 @@
   },
   "license": "MIT",
   "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "prebuild": "shx rm -rf dist"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "exports": {
@@ -25,7 +29,7 @@
     "react": ">=17.0.0"
   },
   "dependencies": {
-    "ccstate": "^4.13.0"
+    "ccstate": "workspace:^"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -45,6 +49,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^18.3.1",
+    "ccstate": "workspace:^",
     "happy-dom": "^15.11.7",
     "jest-leak-detector": "^29.7.0",
     "json": "^11.0.0",
@@ -54,11 +59,6 @@
     "rollup-plugin-dts": "^6.1.1",
     "shx": "^0.3.4",
     "signal-timers": "^1.0.4",
-    "vitest": "^2.1.8",
-    "ccstate": "^4.13.0"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "prebuild": "shx rm -rf dist"
+    "vitest": "^2.1.8"
   }
-}
+}

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__/loadable-set.test.tsx

@@ -0,0 +1,255 @@
+// @vitest-environment happy-dom
+
+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 { delay } from 'signal-timers';
+import { command, createStore, state } from 'ccstate';
+import { StrictMode } from 'react';
+import { StoreProvider } from '..';
+import { useLoadableSet } from '../experimental';
+
+afterEach(() => {
+  cleanup();
+});
+
+function makeDefered<T>(): {
+  resolve: (value: T) => void;
+  reject: (error: unknown) => void;
+  promise: Promise<T>;
+} {
+  const deferred: {
+    resolve: (value: T) => void;
+    reject: (error: unknown) => void;
+    promise: Promise<T>;
+  } = {} as {
+    resolve: (value: T) => void;
+    reject: (error: unknown) => void;
+    promise: Promise<T>;
+  };
+
+  deferred.promise = new Promise((resolve, reject) => {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+
+  return deferred;
+}
+
+it('convert a async command to loadable', async () => {
+  const deferred = makeDefered<string>();
+  const setFoo$ = command(async () => {
+    return await deferred.promise;
+  });
+  const App = () => {
+    const [ret, setFoo] = useLoadableSet(setFoo$);
+    if (ret.state === 'loading') {
+      return <div>loading</div>;
+    } else if (ret.state === 'hasData') {
+      return <div>{ret.data}</div>;
+    }
+    return (
+      <button
+        onClick={() => {
+          void setFoo();
+        }}
+      >
+        Click
+      </button>
+    );
+  };
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+    { wrapper: StrictMode },
+  );
+
+  expect(screen.getByText('Click')).toBeTruthy();
+
+  const btn = await screen.findByText('Click');
+  await userEvent.click(btn);
+
+  expect(await screen.findByText('loading')).toBeTruthy();
+
+  deferred.resolve('foo');
+  expect(await screen.findByText('foo')).toBeTruthy();
+});
+
+it('async command reject turns into hasError', async () => {
+  const deferred = makeDefered<string>();
+  const setFoo$ = command(async () => {
+    return await deferred.promise;
+  });
+  const App = () => {
+    const [ret, setFoo] = useLoadableSet(setFoo$);
+    if (ret.state === 'loading') {
+      return <div>loading</div>;
+    } else if (ret.state === 'hasError') {
+      return <div>{String(ret.error)}</div>;
+    }
+    return (
+      <button
+        onClick={() => {
+          void setFoo();
+        }}
+      >
+        Click
+      </button>
+    );
+  };
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+    { wrapper: StrictMode },
+  );
+
+  await userEvent.click(await screen.findByText('Click'));
+  expect(await screen.findByText('loading')).toBeTruthy();
+
+  deferred.reject(new Error('oops'));
+  expect(await screen.findByText('Error: oops')).toBeTruthy();
+});
+
+it('sync command resolves immediately to hasData', async () => {
+  const setFoo$ = command(() => 42);
+  const App = () => {
+    const [ret, setFoo] = useLoadableSet(setFoo$);
+    if (ret.state === 'hasData') {
+      return <div>{String(ret.data)}</div>;
+    }
+    return (
+      <button
+        onClick={() => {
+          void setFoo();
+        }}
+      >
+        Click
+      </button>
+    );
+  };
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+    { wrapper: StrictMode },
+  );
+
+  await userEvent.click(await screen.findByText('Click'));
+  expect(await screen.findByText('42')).toBeTruthy();
+});
+
+it('state atom setter transitions to hasData', async () => {
+  const count$ = state(0);
+  const App = () => {
+    const [ret, setCount] = useLoadableSet(count$);
+    if (ret.state === 'hasData') {
+      return <div>done</div>;
+    }
+    return (
+      <button
+        onClick={() => {
+          setCount(1);
+        }}
+      >
+        Click
+      </button>
+    );
+  };
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+    { wrapper: StrictMode },
+  );
+
+  await userEvent.click(await screen.findByText('Click'));
+  expect(await screen.findByText('done')).toBeTruthy();
+});
+
+it('second invoke cancels first pending promise', async () => {
+  const deferred1 = makeDefered<string>();
+  const deferred2 = makeDefered<string>();
+  let counter = 0;
+
+  const setFoo$ = command(async () => {
+    const deferred = counter === 0 ? deferred1 : deferred2;
+    counter++;
+    return await deferred.promise;
+  });
+
+  const App = () => {
+    const [ret, setFoo] = useLoadableSet(setFoo$);
+    if (ret.state === 'hasData') {
+      return <div>data:{String(ret.data)}</div>;
+    }
+    return (
+      <button
+        onClick={() => {
+          void setFoo();
+        }}
+      >
+        Click
+      </button>
+    );
+  };
+
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+    { wrapper: StrictMode },
+  );
+
+  await userEvent.click(await screen.findByText('Click'));
+  // button still visible during loading — second invoke aborts the first
+  await userEvent.click(await screen.findByText('Click'));
+
+  deferred2.resolve('second');
+  expect(await screen.findByText('data:second')).toBeTruthy();
+
+  deferred1.resolve('first');
+  await delay(0);
+  expect(screen.queryByText('data:first')).toBeNull();
+});
+
+it('invoke return value is identical to command return value', async () => {
+  const deferred = makeDefered<string>();
+  const setFoo$ = command(async () => {
+    return await deferred.promise;
+  });
+
+  let invokeResult: Promise<string> | undefined;
+
+  const App = () => {
+    const [, setFoo] = useLoadableSet(setFoo$);
+    return (
+      <button
+        onClick={() => {
+          invokeResult = setFoo();
+        }}
+      >
+        Click
+      </button>
+    );
+  };
+
+  const store = createStore();
+  render(
+    <StoreProvider value={store}>
+      <App />
+    </StoreProvider>,
+    { wrapper: StrictMode },
+  );
+
+  await userEvent.click(await screen.findByText('Click'));
+  deferred.resolve('foo');
+  expect(await invokeResult).toBe('foo');
+});

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 { useLoadableSet } from './useLoadableSet';

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;