ccstate-react 5.0.0 → 5.2.1

package/dist/experimental.cjs

@@ -1,42 +1,109 @@
 'use strict';
 
-var ccstate = require('ccstate');
 var react = require('react');
 
-function useRefFactory(factory) {
-  var ref = react.useRef(null);
-  if (!ref.current) {
-    var value = factory();
-    ref.current = value;
-    return value;
-  }
-  return ref.current;
+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 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 _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 useComputed() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
+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;
   }
-  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];
+
+var StoreContext = react.createContext(null);
+StoreContext.Provider;
+function useStore() {
+  var store = react.useContext(StoreContext);
+  if (!store) {
+    throw new Error('useStore must be used within a StoreProvider');
   }
-  return useRefFactory(function () {
-    return ccstate.command.apply(void 0, args);
+  return store;
+}
+
+function useLoadableSet(signal) {
+  var store = useStore();
+  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.useLoadableSet = useLoadableSet;

package/dist/experimental.d.cts

@@ -1,7 +1,17 @@
-import { state, State, computed, Computed, command, Command } 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>;
+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 };
+export { useLoadableSet };

package/dist/experimental.d.ts

@@ -1,7 +1,17 @@
-import { state, State, computed, Computed, command, Command } 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>;
+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 };
+export { useLoadableSet };

package/dist/experimental.js

@@ -1,38 +1,107 @@
-import { state, computed, command } from 'ccstate';
-import { useRef } from 'react';
+import { createContext, useContext, useRef, useCallback, useSyncExternalStore } from 'react';
 
-function useRefFactory(factory) {
-  var ref = useRef(null);
-  if (!ref.current) {
-    var value = factory();
-    ref.current = value;
-    return value;
-  }
-  return ref.current;
+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 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 _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 useComputed() {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
+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;
   }
-  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];
+
+var StoreContext = createContext(null);
+StoreContext.Provider;
+function useStore() {
+  var store = useContext(StoreContext);
+  if (!store) {
+    throw new Error('useStore must be used within a StoreProvider');
   }
-  return useRefFactory(function () {
-    return command.apply(void 0, args);
+  return store;
+}
+
+function useLoadableSet(signal) {
+  var store = useStore();
+  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 };
+export { useLoadableSet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate-react",
-  "version": "5.0.0",
+  "version": "5.2.1",
   "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": "^5.0.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": "^5.0.0"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "prebuild": "shx rm -rf dist"
+    "vitest": "^2.1.8"
   }
-}
+}

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/experimental.ts

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