ccstate-svelte 4.0.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# ccstate-svelte
+
+## 4.0.0
+
+### Patch Changes
+
+- Updated dependencies [b32ad0a]
+- Updated dependencies [3e45895]
+  - ccstate@4.0.0
+
+## 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+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/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env"], ["@babel/preset-typescript"]]
+}

package/dist/index.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var ccstate = require('ccstate');
+var svelte = require('svelte');
+
+var StoreKey = Symbol('ccstate-svelte-store');
+var provideStore = function provideStore(store) {
+  svelte.setContext(StoreKey, store);
+};
+var useStore = function useStore() {
+  var store = svelte.getContext(StoreKey);
+  if (!store) {
+    return ccstate.getDefaultStore();
+  }
+  return store;
+};
+
+function useGet(atom) {
+  var store = useStore();
+  return {
+    subscribe: function subscribe(fn) {
+      fn(store.get(atom));
+      return store.sub(atom, ccstate.command(function (_ref) {
+        var get = _ref.get;
+        var nextValue = get(atom);
+        fn(nextValue);
+      }));
+    }
+  };
+}
+
+function useSet(atom) {
+  var store = useStore();
+  if ('write' in atom) {
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var ret = store.set.apply(store, [atom].concat(args));
+      return ret;
+    };
+  }
+  return function (value) {
+    store.set(atom, value);
+  };
+}
+
+exports.provideStore = provideStore;
+exports.useGet = useGet;
+exports.useSet = useSet;
+exports.useStore = useStore;

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { State, Computed, Updater, Command, Store } from 'ccstate';
+
+declare function useGet<T>(atom: State<T> | Computed<T>): {
+    subscribe(fn: (payload: T) => void): () => void;
+};
+
+declare function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
+declare function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+
+declare const provideStore: (store: Store) => void;
+declare const useStore: () => Store;
+
+export { provideStore, useGet, useSet, useStore };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { State, Computed, Updater, Command, Store } from 'ccstate';
+
+declare function useGet<T>(atom: State<T> | Computed<T>): {
+    subscribe(fn: (payload: T) => void): () => void;
+};
+
+declare function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
+declare function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+
+declare const provideStore: (store: Store) => void;
+declare const useStore: () => Store;
+
+export { provideStore, useGet, useSet, useStore };

package/dist/index.js

@@ -0,0 +1,46 @@
+import { getDefaultStore, command } from 'ccstate';
+import { setContext, getContext } from 'svelte';
+
+var StoreKey = Symbol('ccstate-svelte-store');
+var provideStore = function provideStore(store) {
+  setContext(StoreKey, store);
+};
+var useStore = function useStore() {
+  var store = getContext(StoreKey);
+  if (!store) {
+    return getDefaultStore();
+  }
+  return store;
+};
+
+function useGet(atom) {
+  var store = useStore();
+  return {
+    subscribe: function subscribe(fn) {
+      fn(store.get(atom));
+      return store.sub(atom, command(function (_ref) {
+        var get = _ref.get;
+        var nextValue = get(atom);
+        fn(nextValue);
+      }));
+    }
+  };
+}
+
+function useSet(atom) {
+  var store = useStore();
+  if ('write' in atom) {
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var ret = store.set.apply(store, [atom].concat(args));
+      return ret;
+    };
+  }
+  return function (value) {
+    store.set(atom, value);
+  };
+}
+
+export { provideStore, useGet, useSet, useStore };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ccstate-svelte",
+  "version": "4.0.0",
+  "description": "CCState Svelte Hooks",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e7h4n/ccstate.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "ccstate": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.6",
+    "@testing-library/user-event": "^14.5.2",
+    "happy-dom": "^15.11.7",
+    "jest-leak-detector": "^29.7.0",
+    "json": "^11.0.0",
+    "rollup": "^4.28.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "shx": "^0.3.4",
+    "signal-timers": "^1.0.4",
+    "svelte": "^5.15.0",
+    "vite": "^6.0.5",
+    "vitest": "^2.1.8",
+    "ccstate": "^4.0.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prebuild": "shx rm -rf dist"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,84 @@
+// @ts-check
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { babel } from '@rollup/plugin-babel';
+import { dts } from 'rollup-plugin-dts';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const projectRootDir = path.resolve(__dirname);
+
+/**
+ * @param {string} id
+ * @returns {boolean}
+ */
+function external(id) {
+  return !id.startsWith('.') && !id.startsWith(projectRootDir);
+}
+
+/**
+ * @param {{input:string, targetCJS:string, targetES:string}} param0
+ * @returns {import('rollup').RollupOptions[]}
+ */
+function generateTarget({ input, targetCJS, targetES }) {
+  return [
+    {
+      input,
+      onwarn: (warning) => {
+        throw new Error(warning?.message);
+      },
+      external,
+      plugins: [
+        nodeResolve({
+          extensions: ['.ts'],
+        }),
+        babel({
+          exclude: 'node_modules/**',
+          extensions: ['.ts'],
+          babelHelpers: 'bundled',
+          configFile: path.resolve(projectRootDir, './babel.config.json'),
+        }),
+      ],
+      output: [
+        {
+          file: targetCJS,
+          format: 'cjs',
+        },
+        {
+          file: targetES,
+          format: 'es',
+        },
+      ],
+    },
+    {
+      input,
+      onwarn: (warning) => {
+        throw new Error(warning?.message);
+      },
+      external,
+      plugins: [
+        dts({
+          respectExternal: true,
+          tsconfig: path.resolve(projectRootDir, './tsconfig.json'),
+          // https://github.com/Swatinem/rollup-plugin-dts/issues/143
+          compilerOptions: { preserveSymlinks: false },
+        }),
+      ],
+      output: [
+        {
+          file: targetCJS.replace(/\.cjs$/, '.d.cts'),
+        },
+        {
+          file: targetES.replace(/\.js$/, '.d.ts'),
+        },
+      ],
+    },
+  ];
+}
+
+/** @type { Array<import('rollup').RollupOptions> } */
+export default generateTarget({
+  input: './src/index.ts',
+  targetCJS: './dist/index.cjs',
+  targetES: './dist/index.js',
+});

package/src/__tests__/App.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Counter from './Counter.svelte';
+  import { provideStore } from '..';
+  import type { Store } from 'ccstate';
+
+  export let store: Store | undefined = undefined;
+
+  if (store) {
+    provideStore(store);
+  }
+</script>
+
+<Counter />

package/src/__tests__/AsyncMemory.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Computed } from 'ccstate';
+  import { useLastResolved } from '../useResolved';
+
+  export let obj$: () => Computed<Promise<{ foo: string }>>;
+  const obj = useLastResolved(obj$());
+</script>
+
+<div>obj: {$obj?.foo}</div>

package/src/__tests__/Counter.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { count$, doubleIncrease$ } from './store';
+  import { useGet } from '..';
+  import { useSet } from '..';
+
+  const count = useGet(count$);
+  const setCount = useSet(count$);
+  const doubleIncrease = useSet(doubleIncrease$);
+</script>
+
+<div>count: {$count}</div>
+<button
+  on:click={() => {
+    setCount((x) => x + 1);
+  }}
+>
+  Increment
+</button>
+
+<button on:click={() => doubleIncrease(10)}>Double Increase</button>

package/src/__tests__/LastLoadable.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { State } from 'ccstate';
+  import { useLastLoadable } from '../useLoadable';
+
+  export let promise$: () => State<Promise<string>>;
+  const result = useLastLoadable(promise$());
+</script>
+
+{#if $result.state === 'loading'}
+  <div>Loading</div>
+{:else if $result.state === 'hasError'}
+  <div>{$result.error}</div>
+{:else}
+  <div>Result: {$result.data}</div>
+{/if}

package/src/__tests__/LastResolved.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { State } from 'ccstate';
+  import { useLastResolved } from '../useResolved';
+
+  export let promise$: () => State<Promise<string>>;
+  const result = useLastResolved(promise$());
+</script>
+
+{#if $result}
+  <div>Result: {$result}</div>
+{:else}
+  <div>Loading</div>
+{/if}

package/src/__tests__/Loadable.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { State } from 'ccstate';
+  import { useLoadable } from '../useLoadable';
+
+  export let promise$: () => State<Promise<string>>;
+  const result = useLoadable(promise$());
+</script>
+
+{#if $result.state === 'loading'}
+  <div>Loading</div>
+{:else if $result.state === 'hasError'}
+  <div>{$result.error}</div>
+{:else}
+  <div>Result: {$result.data}</div>
+{/if}

package/src/__tests__/Memory.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Computed } from 'ccstate';
+  import { useGet } from '..';
+
+  export let obj$: Computed<{ foo: string }>;
+  const obj = useGet(obj$);
+</script>
+
+<div>obj: {$obj.foo}</div>

package/src/__tests__/Prop.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  let props: {
+    obj: () => object;
+    cb: (obj: object) => void;
+  } = $props();
+  props.cb(props.obj());
+</script>
+
+<div>done</div>

package/src/__tests__/Resolved.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { State } from 'ccstate';
+  import { useResolved } from '../useResolved';
+
+  export let promise$: () => State<Promise<string>>;
+  const result = useResolved(promise$());
+</script>
+
+{#if $result}
+  <div>Result: {$result}</div>
+{:else}
+  <div>Loading</div>
+{/if}

package/src/__tests__/counter.test.ts

@@ -0,0 +1,54 @@
+import { render, cleanup, screen } from '@testing-library/svelte';
+import { afterEach, expect, it } from 'vitest';
+import { createStore, getDefaultStore } from 'ccstate';
+import '@testing-library/jest-dom/vitest';
+import App from './App.svelte';
+import { count$ } from './store';
+import { userEvent } from '@testing-library/user-event';
+
+afterEach(() => {
+  cleanup();
+});
+
+const user = userEvent.setup();
+
+it('simple counter', async () => {
+  render(App);
+
+  expect(screen.getByText('count: 0')).toBeInTheDocument();
+  getDefaultStore().set(count$, 1);
+
+  expect(await screen.findByText('count: 1')).toBeInTheDocument();
+
+  const button = screen.getByText('Increment');
+
+  await user.click(button);
+  await user.click(button);
+  expect(await screen.findByText('count: 3')).toBeInTheDocument();
+
+  await user.click(button);
+  expect(await screen.findByText('count: 4')).toBeInTheDocument();
+
+  const doubleButton = screen.getByText('Double Increase');
+  await user.click(doubleButton);
+  expect(await screen.findByText('count: 24')).toBeInTheDocument();
+});
+
+it('useStore custom store', async () => {
+  const store = createStore();
+  store.set(count$, 100);
+
+  render(App, {
+    props: {
+      store,
+    },
+  });
+
+  expect(screen.getByText('count: 100')).toBeInTheDocument();
+
+  const button = screen.getByText('Increment');
+
+  await user.click(button);
+
+  expect(store.get(count$)).toBe(101);
+});

package/src/__tests__/loadable.test.ts

@@ -0,0 +1,184 @@
+import { render, cleanup, screen } from '@testing-library/svelte';
+import { afterEach, expect, it } from 'vitest';
+import { createStore, getDefaultStore, state } from 'ccstate';
+import '@testing-library/jest-dom/vitest';
+import Loadable from './Loadable.svelte';
+import LastLoadable from './LastLoadable.svelte';
+import { StoreKey } from '../provider';
+import Resolved from './Resolved.svelte';
+import LastResolved from './LastResolved.svelte';
+
+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;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+it('simple loadable', async () => {
+  const promise$ = state(Promise.resolve('bar'));
+  render(Loadable, {
+    props: {
+      promise$: () => promise$,
+    },
+  });
+
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+  await Promise.resolve();
+  expect(screen.getByText('Result: bar')).toBeInTheDocument();
+});
+
+it('error loadable', async () => {
+  const promise$ = state(Promise.reject(new Error('INTEST')));
+  render(Loadable, {
+    props: {
+      promise$: () => promise$,
+    },
+  });
+
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+  await Promise.resolve();
+  expect(screen.getByText('Error: INTEST')).toBeInTheDocument();
+});
+
+it('switchMap', async () => {
+  const store = createStore();
+  const first = makeDefered<string>();
+
+  const promise$ = state(first.promise, {
+    debugLabel: 'promise$',
+  });
+  render(Loadable, {
+    props: {
+      promise$: () => promise$,
+    },
+    context: new Map([[StoreKey, store]]),
+  });
+
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+
+  store.set(promise$, Promise.resolve('second'));
+  expect(await screen.findByText('Result: second')).toBeInTheDocument();
+
+  first.resolve('first');
+  await expect(screen.findByText('Result: first')).rejects.toThrow();
+});
+
+it('switchMap and throw', async () => {
+  const store = createStore();
+  const first = makeDefered<string>();
+
+  const promise$ = state(first.promise, {
+    debugLabel: 'promise$',
+  });
+  render(Loadable, {
+    props: {
+      promise$: () => promise$,
+    },
+    context: new Map([[StoreKey, store]]),
+  });
+
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+
+  store.set(promise$, Promise.resolve('second'));
+  expect(await screen.findByText('Result: second')).toBeInTheDocument();
+
+  first.reject(new Error('INTEST'));
+  await expect(screen.findByText('Result: first')).rejects.toThrow();
+});
+
+it('update should change state to loading', async () => {
+  const store = createStore();
+
+  const promise$ = state(Promise.resolve('first'), {
+    debugLabel: 'promise$',
+  });
+  render(Loadable, {
+    props: {
+      promise$: () => promise$,
+    },
+    context: new Map([[StoreKey, store]]),
+  });
+
+  expect(await screen.findByText('Result: first')).toBeInTheDocument();
+
+  const deferred = makeDefered<string>();
+  store.set(promise$, deferred.promise);
+  expect(await screen.findByText('Loading')).toBeInTheDocument();
+  deferred.resolve('second');
+  expect(await screen.findByText('Result: second')).toBeInTheDocument();
+});
+
+it('use last loadable will keep latest resolved value', async () => {
+  const store = createStore();
+
+  const promise$ = state(Promise.resolve('first'), {
+    debugLabel: 'promise$',
+  });
+  render(LastLoadable, {
+    props: {
+      promise$: () => promise$,
+    },
+    context: new Map([[StoreKey, store]]),
+  });
+
+  expect(await screen.findByText('Result: first')).toBeInTheDocument();
+
+  const deferred = makeDefered<string>();
+  store.set(promise$, deferred.promise);
+  await expect(screen.findByText('Loading')).rejects.toThrow();
+  deferred.resolve('second');
+  expect(await screen.findByText('Result: second')).toBeInTheDocument();
+});
+
+it('simple resolved', async () => {
+  const promise$ = state(Promise.resolve('bar'));
+  render(Resolved, {
+    props: {
+      promise$: () => promise$,
+    },
+  });
+
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+  await Promise.resolve();
+  expect(screen.getByText('Result: bar')).toBeInTheDocument();
+});
+
+it('simple last resolved', async () => {
+  const promise$ = state(Promise.resolve('bar'));
+  render(LastResolved, {
+    props: {
+      promise$: () => promise$,
+    },
+  });
+
+  expect(screen.getByText('Loading')).toBeInTheDocument();
+  await Promise.resolve();
+  expect(screen.getByText('Result: bar')).toBeInTheDocument();
+
+  const deferred = makeDefered<string>();
+  getDefaultStore().set(promise$, deferred.promise);
+  await expect(screen.findByText('Loading')).rejects.toThrow();
+  deferred.resolve('second');
+  expect(await screen.findByText('Result: second')).toBeInTheDocument();
+});

package/src/__tests__/memory.test.ts

@@ -0,0 +1,50 @@
+// @vitest-environment happy-dom
+import '@testing-library/jest-dom/vitest';
+import LeakDetector from 'jest-leak-detector';
+import { render, cleanup, screen } from '@testing-library/svelte';
+import { expect, it } from 'vitest';
+import { computed, getDefaultStore, type Computed } from 'ccstate';
+import Memory from './Memory.svelte';
+import AsyncMemory from './AsyncMemory.svelte';
+
+it('should release memory after view cleanup', async () => {
+  let obj$: Computed<{ foo: string }> | undefined = computed(() => {
+    return { foo: 'bar' };
+  });
+  const store = getDefaultStore();
+  const leakDetector = new LeakDetector(store.get(obj$ as Computed<{ foo: string }>));
+
+  render(Memory, {
+    props: {
+      obj$,
+    },
+  });
+
+  expect(screen.getByText('obj: bar')).toBeInTheDocument();
+
+  obj$ = undefined;
+  cleanup();
+
+  expect(await leakDetector.isLeaking()).toBe(false);
+});
+
+it('should release promise memory after view cleanup', async () => {
+  let obj$: Computed<Promise<{ foo: string }>> | undefined = computed(() => {
+    return Promise.resolve({ foo: 'bar' });
+  });
+  const store = getDefaultStore();
+  const leakDetector = new LeakDetector(await store.get(obj$ as Computed<Promise<{ foo: string }>>));
+
+  render(AsyncMemory, {
+    props: {
+      obj$: () => obj$ as Computed<Promise<{ foo: string }>>,
+    },
+  });
+
+  expect(await screen.findByText('obj: bar')).toBeInTheDocument();
+
+  obj$ = undefined;
+  cleanup();
+
+  expect(await leakDetector.isLeaking()).toBe(false);
+});

package/src/__tests__/prop.test.ts

@@ -0,0 +1,25 @@
+import { render, cleanup, screen } from '@testing-library/svelte';
+import { afterEach, expect, it } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import Prop from './Prop.svelte';
+
+afterEach(() => {
+  cleanup();
+});
+
+it('prop takes same atom', async () => {
+  const obj = {};
+  let callbackObj: object | undefined;
+
+  render(Prop, {
+    props: {
+      obj: () => obj,
+      cb: (obj: object) => {
+        callbackObj = obj;
+      },
+    },
+  });
+
+  expect(await screen.findByText('done')).toBeInTheDocument();
+  expect(callbackObj).toBe(obj);
+});

package/src/__tests__/store.ts

@@ -0,0 +1,11 @@
+import { command, computed, state } from 'ccstate';
+
+export const count$ = state(0);
+
+export const doubleIncrease$ = command(({ get, set }, x: number) => {
+  set(count$, get(count$) + x * 2);
+});
+
+export const objToTestLeak$ = computed(() => {
+  return { foo: 'bar' };
+});

package/src/__tests__/svelte.d.ts

@@ -0,0 +1 @@
+declare module '*.svelte';

package/src/index.ts

@@ -0,0 +1,3 @@
+export { useGet } from './useGet';
+export { useSet } from './useSet';
+export { provideStore, useStore } from './provider';

package/src/provider.ts

@@ -0,0 +1,19 @@
+import { getDefaultStore } from 'ccstate';
+import type { Store } from 'ccstate';
+import { getContext, setContext } from 'svelte';
+
+export const StoreKey = Symbol('ccstate-svelte-store');
+
+export const provideStore = (store: Store) => {
+  setContext(StoreKey, store);
+};
+
+export const useStore = (): Store => {
+  const store = getContext(StoreKey);
+
+  if (!store) {
+    return getDefaultStore();
+  }
+
+  return store as Store;
+};

package/src/useGet.ts

@@ -0,0 +1,19 @@
+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 {
+    subscribe(fn: (payload: T) => void) {
+      fn(store.get(atom));
+      return store.sub(
+        atom,
+        command(({ get }) => {
+          const nextValue = get(atom);
+          fn(nextValue);
+        }),
+      );
+    },
+  };
+}

package/src/useLoadable.ts

@@ -0,0 +1,74 @@
+import { useGet } from './useGet';
+import type { Computed, State } from 'ccstate';
+import { onDestroy } from 'svelte';
+import { writable, type Readable } from 'svelte/store';
+
+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,
+): Readable<Loadable<T>> {
+  const promise = useGet(atom);
+  const loadable = writable<Loadable<T>>({
+    state: 'loading',
+  });
+
+  let abortController = new AbortController();
+  onDestroy(() => {
+    abortController.abort();
+  });
+
+  promise.subscribe((promiseValue) => {
+    abortController.abort();
+    abortController = new AbortController();
+    const signal = abortController.signal;
+
+    if (!keepLastResolved) {
+      loadable.set({
+        state: 'loading',
+      });
+    }
+
+    void promiseValue
+      .then((ret) => {
+        if (signal.aborted) return;
+
+        loadable.set({
+          state: 'hasData',
+          data: ret,
+        });
+      })
+      .catch(() => void 0);
+
+    void promiseValue.catch((error: unknown) => {
+      if (signal.aborted) return;
+
+      loadable.set({
+        state: 'hasError',
+        error,
+      });
+    });
+  });
+
+  return loadable;
+}
+
+export function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Readable<Loadable<T>> {
+  return useLoadableInternal(atom, false);
+}
+
+export function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Readable<Loadable<T>> {
+  return useLoadableInternal(atom, true);
+}

package/src/useResolved.ts

@@ -0,0 +1,13 @@
+import type { Computed, State } from 'ccstate';
+import { derived, type Readable } from 'svelte/store';
+import { useLastLoadable, useLoadable } from './useLoadable';
+
+export function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Readable<T | undefined> {
+  const loadable = useLoadable(atom);
+  return derived(loadable, ($loadable) => ($loadable.state === 'hasData' ? $loadable.data : undefined));
+}
+
+export function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Readable<T | undefined> {
+  const loadable = useLastLoadable(atom);
+  return derived(loadable, ($loadable) => ($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,7 @@
+{
+  "extends": "../../tsconfig.options.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM"]
+  },
+  "include": ["src/**/*", "vitest.config.ts"]
+}

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, type Plugin } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte() as Plugin[]],
+  test: {
+    environment: 'happy-dom',
+  },
+  resolve: {
+    conditions: ['development', 'browser'],
+  },
+});