ccstate-vue 3.0.0

package/src/__tests__/memory.test.ts

@@ -0,0 +1,92 @@
+// @vitest-environment happy-dom
+import '@testing-library/jest-dom/vitest';
+import LeakDetector from 'jest-leak-detector';
+import { render, cleanup, screen } from '@testing-library/vue';
+import { expect, it } from 'vitest';
+import { computed, createStore, type Computed } from 'ccstate';
+import { provideStore } from '../provider';
+import { useGet } from '..';
+import { useLastResolved } from '../useResolved';
+import { delay } from 'signal-timers';
+
+it('should release memory after view cleanup', async () => {
+  let base$:
+    | Computed<{
+        foo: string;
+      }>
+    | undefined = computed(() => {
+    return {
+      foo: 'bar',
+    };
+  });
+
+  const Component = {
+    setup() {
+      const base = useGet(
+        base$ as Computed<{
+          foo: string;
+        }>,
+      );
+      return { foo: base.value.foo };
+    },
+    template: `
+      <div>
+        <p>foo: {{ foo }}</p>
+      </div>
+    `,
+  };
+
+  const store = createStore();
+  const leakDetector = new LeakDetector(store.get(base$));
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(screen.getByText('foo: bar')).toBeInTheDocument();
+
+  base$ = undefined;
+  cleanup();
+
+  expect(await leakDetector.isLeaking()).toBe(false);
+});
+
+it('should release memory for promise & loadable', async () => {
+  let base$: Computed<Promise<string>> | undefined = computed(() => {
+    return Promise.resolve('bar');
+  });
+
+  const Component = {
+    setup() {
+      if (!base$) {
+        return {};
+      }
+      const base = useLastResolved(base$);
+      return { base };
+    },
+    template: `
+        <div>
+          <p>{{ base }}</p>
+        </div>
+      `,
+  };
+
+  const store = createStore();
+  const leakDetector = new LeakDetector(store.get(base$));
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  base$ = undefined;
+  cleanup();
+  await delay(0);
+
+  expect(await leakDetector.isLeaking()).toBe(false);
+});

package/src/__tests__/resolved.test.ts

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, screen } from '@testing-library/vue';
+import { afterEach, expect, it } from 'vitest';
+import { createStore, state } from 'ccstate';
+import { provideStore } from '../provider';
+import { useResolved, useLastResolved } from '../useResolved';
+import { delay } from 'signal-timers';
+
+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 promise to awaited value', async () => {
+  const base = state(Promise.resolve('foo'));
+
+  const Component = {
+    setup() {
+      const ret = useResolved(base);
+      return { ret };
+    },
+    template: `<div>{{ ret }}</div>`,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+});
+
+it('loading state', async () => {
+  const deferred = makeDefered<string>();
+  const base = state(deferred.promise);
+
+  const Component = {
+    setup() {
+      const ret = useResolved(base);
+      return { ret };
+    },
+    template: `<div>{{ ret ?? 'loading' }}</div>`,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('loading')).toBeInTheDocument();
+  deferred.resolve('foo');
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+});
+
+it('use lastResolved should not update when new promise pending', async () => {
+  const async$ = state(Promise.resolve(1));
+
+  const Component = {
+    setup() {
+      const number = useLastResolved(async$);
+      return { number };
+    },
+    template: `<div>num{{ number }}</div>`,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('num1')).toBeInTheDocument();
+
+  const defered = makeDefered();
+  store.set(async$, defered.promise);
+
+  await delay(0);
+  expect(screen.getByText('num1')).toBeInTheDocument();
+  defered.resolve(2);
+  await delay(0);
+  expect(screen.getByText('num2')).toBeInTheDocument();
+});

package/src/index.ts

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

package/src/provider.ts

@@ -0,0 +1,17 @@
+import { inject, provide, type InjectionKey } from 'vue';
+import type { Store } from 'ccstate';
+
+export const StoreKey = Symbol('ccstate-vue-store') as InjectionKey<Store>;
+
+export const provideStore = (store: Store) => {
+  provide(StoreKey, store);
+};
+
+export const useStore = (): Store => {
+  const store = inject(StoreKey);
+  if (store === undefined) {
+    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+  }
+
+  return store;
+};

package/src/useGet.ts

@@ -0,0 +1,30 @@
+import { getCurrentInstance, onScopeDispose, shallowReadonly, shallowRef, type ShallowRef } from 'vue';
+import { useStore } from './provider';
+import { command, type Computed, type State } from 'ccstate';
+
+export function useGet<Value>(atom: Computed<Value> | State<Value>): Readonly<ShallowRef<Value>> {
+  const store = useStore();
+  const initialValue = store.get(atom);
+
+  const vueState = shallowRef(initialValue);
+
+  const controller = new AbortController();
+  store.sub(
+    atom,
+    command(() => {
+      const nextValue = store.get(atom);
+      vueState.value = nextValue;
+    }),
+    {
+      signal: controller.signal,
+    },
+  );
+
+  if (getCurrentInstance()) {
+    onScopeDispose(() => {
+      controller.abort();
+    });
+  }
+
+  return shallowReadonly(vueState);
+}

package/src/useLoadable.ts

@@ -0,0 +1,75 @@
+import { useGet } from './useGet';
+import type { Computed, State } from 'ccstate';
+import { shallowReadonly, shallowRef, watch, type ShallowRef } from 'vue';
+
+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,
+): Readonly<ShallowRef<Loadable<T>>> {
+  const promise = useGet(atom);
+  const loadable = shallowRef<Loadable<T>>({
+    state: 'loading',
+  });
+
+  watch(
+    promise,
+    (promiseValue, _, onCleanup) => {
+      const ctrl = new AbortController();
+      onCleanup(() => {
+        ctrl.abort();
+      });
+
+      if (!keepLastResolved) {
+        loadable.value = {
+          state: 'loading',
+        };
+      }
+
+      void promiseValue
+        .then((ret) => {
+          if (ctrl.signal.aborted) return;
+
+          loadable.value = {
+            state: 'hasData',
+            data: ret,
+          };
+        })
+        .catch(() => void 0);
+
+      void promiseValue.catch((error: unknown) => {
+        if (ctrl.signal.aborted) return;
+
+        loadable.value = {
+          state: 'hasError',
+          error,
+        };
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  return shallowReadonly(loadable);
+}
+
+export function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Readonly<ShallowRef<Loadable<T>>> {
+  return useLoadableInternal(atom, false);
+}
+
+export function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Readonly<ShallowRef<Loadable<T>>> {
+  return useLoadableInternal(atom, true);
+}

package/src/useResolved.ts

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

package/src/useSet.ts

@@ -0,0 +1,22 @@
+import { useStore } from './provider';
+import { type Command, type State, type Updater } 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,3 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({});