ccstate-react 4.13.0 → 5.2.0

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

@@ -0,0 +1,72 @@
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { type Command, type State, type StateArg } from 'ccstate';
+import { useStore } from './provider';
+
+type LoadableSetResult<T> =
+  | { state: 'idle' }
+  | { state: 'loading' }
+  | { state: 'hasData'; data: Awaited<T> }
+  | { state: 'hasError'; error: unknown };
+
+export function useLoadableSet<T>(signal: State<T>): [LoadableSetResult<void>, (val: StateArg<T>) => void];
+export function useLoadableSet<T, CommandArgs extends unknown[]>(
+  signal: Command<T, CommandArgs>,
+): [LoadableSetResult<Awaited<T>>, (...args: CommandArgs) => T];
+export function useLoadableSet<T, CommandArgs extends unknown[]>(
+  signal: State<T> | Command<T, CommandArgs>,
+): [LoadableSetResult<unknown>, (...args: unknown[]) => unknown] {
+  const store = useStore();
+  const resultRef = useRef<LoadableSetResult<unknown>>({ state: 'idle' });
+  const notifyRef = useRef<(() => void) | null>(null);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const subscribe = useCallback((notify: () => void) => {
+    notifyRef.current = notify;
+    return () => {
+      notifyRef.current = null;
+      controllerRef.current?.abort();
+    };
+  }, []);
+
+  const invoke = useCallback(
+    (...args: unknown[]) => {
+      controllerRef.current?.abort();
+      const controller = new AbortController();
+      controllerRef.current = controller;
+      const { signal: abortSignal } = controller;
+
+      function updateResult(result: LoadableSetResult<unknown>) {
+        if (abortSignal.aborted) return;
+        resultRef.current = result;
+        notifyRef.current?.();
+      }
+
+      if ('write' in signal) {
+        const result = store.set(signal, ...(args as CommandArgs));
+        if (result instanceof Promise) {
+          updateResult({ state: 'loading' });
+          void result.then(
+            (data: unknown) => {
+              updateResult({ state: 'hasData', data });
+            },
+            (error: unknown) => {
+              updateResult({ state: 'hasError', error });
+            },
+          );
+        } else {
+          updateResult({ state: 'hasData', data: result });
+        }
+        return result;
+      } else {
+        store.set(signal, ...(args as [StateArg<T>]));
+        updateResult({ state: 'hasData', data: undefined });
+        return undefined;
+      }
+    },
+    [store, signal],
+  );
+
+  const loadable = useSyncExternalStore(subscribe, () => resultRef.current);
+
+  return [loadable, invoke];
+}

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

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 e7h4n
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN EFFECT OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

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

@@ -1,139 +0,0 @@
-import { afterEach, expect, it } from 'vitest';
-import { StoreProvider, useGet, useSet } from '..';
-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';
-
-afterEach(() => {
-  cleanup();
-});
-const user = userEvent.setup();
-
-it('use atom in React component', async () => {
-  function Counter() {
-    const count$ = useCCState(0, {
-      debugLabel: 'count$',
-    });
-    const double$ = useComputed(
-      (get) => {
-        return get(count$) * 2;
-      },
-      {
-        debugLabel: 'double$',
-      },
-    );
-    const incrementTriple$ = useCommand(
-      ({ get, set }, diff: number) => {
-        set(count$, get(count$) + diff * 3);
-      },
-      {
-        debugLabel: 'incrementTriple$',
-      },
-    );
-
-    const count = useGet(count$);
-    const double = useGet(double$);
-
-    const setCount = useSet(count$);
-    const incrementTriple = useSet(incrementTriple$);
-
-    return (
-      <>
-        <div>count: {String(count)}</div>
-        <div>double: {String(double)}</div>
-        <button
-          onClick={() => {
-            setCount((prev) => prev + 1);
-          }}
-        >
-          Increment
-        </button>
-        <button
-          onClick={() => {
-            incrementTriple(1);
-          }}
-        >
-          Increment Triple
-        </button>
-      </>
-    );
-  }
-
-  render(
-    <StrictMode>
-      <Counter />
-    </StrictMode>,
-  );
-  expect(screen.getByText('count: 0')).toBeInTheDocument();
-
-  const button = screen.getByText('Increment');
-  await user.click(button);
-  expect(screen.getByText('count: 1')).toBeInTheDocument();
-  expect(screen.getByText('double: 2')).toBeInTheDocument();
-
-  const incrementTripleButton = screen.getByText('Increment Triple');
-  await user.click(incrementTripleButton);
-  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/useInlineAtom.ts

@@ -1,40 +0,0 @@
-import { command, computed, state, type Command, type Computed, type State, type Subscribe } from 'ccstate';
-import { useEffect, useRef } from 'react';
-import { useStore } from './provider';
-
-function useRefFactory<T>(factory: () => T): T {
-  const ref = useRef<T | null>(null);
-  if (!ref.current) {
-    const value = factory();
-    ref.current = value;
-    return value;
-  }
-
-  return ref.current;
-}
-
-export function useCCState<T>(...args: Parameters<typeof state<T>>): State<T> {
-  return useRefFactory<State<T>>(() => {
-    return state(...args);
-  });
-}
-
-export function useComputed<T>(...args: Parameters<typeof computed<T>>): Computed<T> {
-  return useRefFactory<Computed<T>>(() => {
-    return computed(...args);
-  });
-}
-
-export function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof command<T, Args>>): Command<T, Args> {
-  return useRefFactory<Command<T, Args>>(() => {
-    return command(...args);
-  });
-}
-
-export function useSub(...args: Parameters<Subscribe>) {
-  const store = useStore();
-
-  useEffect(() => {
-    return store.sub(...args);
-  }, []);
-}