ccstate-react 3.0.0

package/src/useGet.ts

@@ -0,0 +1,20 @@
+import { 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) => {
+      const ctrl = new AbortController();
+      store.sub(atom, command(fn), { signal: ctrl.signal });
+      return () => {
+        ctrl.abort();
+      };
+    },
+    () => {
+      return store.get(atom);
+    },
+  );
+}

package/src/useLoadable.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { useGet } from './useGet';
+import type { Computed, State } from 'ccstate';
+
+type Loadable<T> =
+  | {
+      state: 'loading';
+    }
+  | {
+      state: 'hasData';
+      data: T;
+    }
+  | {
+      state: 'hasError';
+      error: unknown;
+    };
+
+function useLoadableInternal<T>(
+  atom: State<Promise<T>> | Computed<Promise<T>>,
+  keepLastResolved: boolean,
+): Loadable<T> {
+  const promise = useGet(atom);
+  const [promiseResult, setPromiseResult] = useState<Loadable<T>>({
+    state: 'loading',
+  });
+
+  useEffect(() => {
+    const ctrl = new AbortController();
+    const signal = ctrl.signal;
+
+    if (!keepLastResolved) {
+      setPromiseResult({
+        state: 'loading',
+      });
+    }
+
+    void promise
+      .then((ret) => {
+        if (signal.aborted) return;
+
+        setPromiseResult({
+          state: 'hasData',
+          data: ret,
+        });
+      })
+      .catch((error: unknown) => {
+        if (signal.aborted) return;
+
+        setPromiseResult({
+          state: 'hasError',
+          error,
+        });
+      });
+
+    return () => {
+      ctrl.abort();
+    };
+  }, [promise]);
+
+  return promiseResult;
+}
+
+export function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T> {
+  return useLoadableInternal(atom, false);
+}
+
+export function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T> {
+  return useLoadableInternal(atom, true);
+}

package/src/useResolved.ts

@@ -0,0 +1,12 @@
+import { useLastLoadable, useLoadable } from './useLoadable';
+import type { Computed, State } from 'ccstate';
+
+export function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined {
+  const loadable = useLoadable(atom);
+  return loadable.state === 'hasData' ? loadable.data : undefined;
+}
+
+export function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined {
+  const loadable = useLastLoadable(atom);
+  return loadable.state === 'hasData' ? loadable.data : undefined;
+}

package/src/useSet.ts

@@ -0,0 +1,22 @@
+import { useStore } from './provider';
+import type { Command, Updater, State } from 'ccstate';
+
+export function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
+export function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+export function useSet<T, ARGS extends unknown[]>(
+  atom: State<T> | Command<T, ARGS>,
+): ((value: T | Updater<T>) => void) | ((...args: ARGS) => T) {
+  const store = useStore();
+
+  if ('write' in atom) {
+    return (...args: ARGS): T => {
+      const ret = store.set(atom, ...args);
+
+      return ret;
+    };
+  }
+
+  return (value: T | Updater<T>) => {
+    store.set(atom, value);
+  };
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.options.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*", "vitest.config.ts"]
+}

package/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({});