ccstate-vue 3.0.0

package/dist/index.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var vue = require('vue');
+var ccstate = require('ccstate');
+
+var StoreKey = Symbol('ccstate-vue-store');
+var provideStore = function provideStore(store) {
+  vue.provide(StoreKey, store);
+};
+var useStore = function useStore() {
+  var store = vue.inject(StoreKey);
+  if (store === undefined) {
+    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+  }
+  return store;
+};
+
+function useGet(atom) {
+  var store = useStore();
+  var initialValue = store.get(atom);
+  var vueState = vue.shallowRef(initialValue);
+  var controller = new AbortController();
+  store.sub(atom, ccstate.command(function () {
+    var nextValue = store.get(atom);
+    vueState.value = nextValue;
+  }), {
+    signal: controller.signal
+  });
+  if (vue.getCurrentInstance()) {
+    vue.onScopeDispose(function () {
+      controller.abort();
+    });
+  }
+  return vue.shallowReadonly(vueState);
+}
+
+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,12 @@
+import { Store, Computed, State, Updater, Command } from 'ccstate';
+import { ShallowRef } from 'vue';
+
+declare const provideStore: (store: Store) => void;
+declare const useStore: () => Store;
+
+declare function useGet<Value>(atom: Computed<Value> | State<Value>): Readonly<ShallowRef<Value>>;
+
+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;
+
+export { provideStore, useGet, useSet, useStore };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { Store, Computed, State, Updater, Command } from 'ccstate';
+import { ShallowRef } from 'vue';
+
+declare const provideStore: (store: Store) => void;
+declare const useStore: () => Store;
+
+declare function useGet<Value>(atom: Computed<Value> | State<Value>): Readonly<ShallowRef<Value>>;
+
+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;
+
+export { provideStore, useGet, useSet, useStore };

package/dist/index.js

@@ -0,0 +1,51 @@
+import { provide, inject, shallowRef, getCurrentInstance, onScopeDispose, shallowReadonly } from 'vue';
+import { command } from 'ccstate';
+
+var StoreKey = Symbol('ccstate-vue-store');
+var provideStore = function provideStore(store) {
+  provide(StoreKey, store);
+};
+var useStore = function useStore() {
+  var store = inject(StoreKey);
+  if (store === undefined) {
+    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+  }
+  return store;
+};
+
+function useGet(atom) {
+  var store = useStore();
+  var initialValue = store.get(atom);
+  var vueState = shallowRef(initialValue);
+  var controller = new AbortController();
+  store.sub(atom, command(function () {
+    var nextValue = store.get(atom);
+    vueState.value = nextValue;
+  }), {
+    signal: controller.signal
+  });
+  if (getCurrentInstance()) {
+    onScopeDispose(function () {
+      controller.abort();
+    });
+  }
+  return shallowReadonly(vueState);
+}
+
+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/dist/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "ccstate-vue",
+  "version": "2.2.0",
+  "description": "CCState Vue Hooks",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e7h4n/ccstate.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "vue": ">=3.2.0",
+    "ccstate": "workspace:^"
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "ccstate-vue",
+  "version": "3.0.0",
+  "description": "CCState Vue 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": {
+    "vue": ">=3.2.0",
+    "ccstate": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@codspeed/vitest-plugin": "^3.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/vue": "^8.1.0",
+    "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",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.13"
+  },
+  "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__/get-set.test.ts

@@ -0,0 +1,111 @@
+// @vitest-environment happy-dom
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, cleanup, screen } from '@testing-library/vue';
+import { afterEach, expect, it } from 'vitest';
+import { command, createStore, state } from 'ccstate';
+import { provideStore } from '../provider';
+import { useGet, useSet } from '..';
+
+afterEach(() => {
+  cleanup();
+});
+
+it('increments value on click', async () => {
+  const count$ = state(0);
+
+  const Component = {
+    setup() {
+      const count = useGet(count$);
+      const setCount = useSet(count$);
+      return { count, setCount };
+    },
+    template: `
+    <div>
+      <p>Times clicked: {{ count }}</p>
+      <button @click="setCount((prev) => prev + 1)">increment</button>
+    </div>
+  `,
+  };
+
+  render({
+    components: { Component },
+    setup() {
+      provideStore(createStore());
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(screen.getByText('Times clicked: 0')).toBeInTheDocument();
+
+  const button = screen.getByText('increment');
+
+  await fireEvent.click(button);
+  await fireEvent.click(button);
+  expect(screen.getByText('Times clicked: 2')).toBeInTheDocument();
+
+  await fireEvent.click(button);
+  expect(screen.getByText('Times clicked: 3')).toBeInTheDocument();
+});
+
+it('call command by useSet', async () => {
+  const count$ = state(0);
+  const increase$ = command(({ get, set }, count: number) => {
+    set(count$, get(count$) + count);
+  });
+
+  const Component = {
+    setup() {
+      const count = useGet(count$);
+      const increase = useSet(increase$);
+      return { count, increase };
+    },
+    template: `
+    <div>
+      <p>Times clicked: {{ count }}</p>
+      <button @click="increase(10)">increment</button>
+    </div>
+  `,
+  };
+
+  render({
+    components: { Component },
+    setup() {
+      provideStore(createStore());
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(screen.getByText('Times clicked: 0')).toBeInTheDocument();
+
+  const button = screen.getByText('increment');
+
+  await fireEvent.click(button);
+  await fireEvent.click(button);
+  expect(screen.getByText('Times clicked: 20')).toBeInTheDocument();
+
+  await fireEvent.click(button);
+  expect(screen.getByText('Times clicked: 30')).toBeInTheDocument();
+});
+
+it('throw if can not find store', () => {
+  const count$ = state(0);
+
+  const Component = {
+    setup() {
+      const count = useGet(count$);
+      return { count };
+    },
+    template: `
+    <div>
+      <p>{{ count }}</p>
+    </div>
+  `,
+  };
+
+  expect(() => {
+    render({
+      components: { Component },
+      template: `<div><Component /></div>`,
+    });
+  }).toThrow();
+});

package/src/__tests__/loadable.test.ts

@@ -0,0 +1,257 @@
+// @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 { useLoadable, useLastLoadable } from '../useLoadable';
+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 loadable', async () => {
+  const base = state(Promise.resolve('foo'));
+
+  const Component = {
+    setup() {
+      const ret = useLoadable(base);
+      return { ret };
+    },
+    template: `
+      <div>
+        <p v-if="ret.state === 'loading'">loading</p>
+        <p v-else-if="ret.state === 'hasData'">{{ ret.data }}</p>
+      </div>
+    `,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(screen.getByText('loading')).toBeInTheDocument();
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+});
+
+it('reset promise atom will reset loadable', async () => {
+  const base = state(Promise.resolve('foo'));
+
+  const Component = {
+    setup() {
+      const ret = useLoadable(base);
+      return { ret };
+    },
+    template: `
+      <div>
+        <p v-if="ret.state === 'loading'">loading</p>
+        <p v-else-if="ret.state === 'hasData'">{{ ret.data }}</p>
+      </div>
+    `,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+
+  const [, promise] = (() => {
+    let ret;
+    const promise = new Promise((r) => (ret = r));
+    return [ret, promise];
+  })();
+
+  store.set(base, promise);
+  expect(await screen.findByText('loading')).toBeInTheDocument();
+});
+
+it('switchMap', async () => {
+  const base = state(Promise.resolve('foo'));
+
+  const Component = {
+    setup() {
+      const ret = useLoadable(base);
+      return { ret };
+    },
+    template: `
+      <div>
+        <p v-if="ret.state === 'loading'">loading</p>
+        <p v-else-if="ret.state === 'hasData'">{{ ret.data }}</p>
+      </div>
+    `,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+
+  const defered = makeDefered();
+
+  store.set(base, defered.promise);
+  expect(await screen.findByText('loading')).toBeInTheDocument();
+
+  store.set(base, Promise.resolve('bar'));
+  expect(await screen.findByText('bar')).toBeInTheDocument();
+
+  defered.resolve('baz');
+  await delay(0);
+  expect(screen.queryByText('baz')).not.toBeInTheDocument();
+});
+
+it('switchMap catch error', async () => {
+  const base = state(Promise.resolve('foo'));
+
+  const Component = {
+    setup() {
+      const ret = useLoadable(base);
+      return { ret };
+    },
+    template: `
+      <div>
+        <p v-if="ret.state === 'loading'">loading</p>
+        <p v-else-if="ret.state === 'hasError'">{{ String(ret.error) }}</p>
+        <p v-else-if="ret.state === 'hasData'">{{ ret.data }}</p>
+      </div>
+    `,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('foo')).toBeInTheDocument();
+
+  const defered = makeDefered();
+
+  store.set(base, defered.promise);
+  expect(await screen.findByText('loading')).toBeInTheDocument();
+
+  store.set(base, Promise.resolve('bar'));
+  expect(await screen.findByText('bar')).toBeInTheDocument();
+
+  defered.reject(new Error('error'));
+  await delay(0);
+  expect(screen.queryByText('Error: error')).not.toBeInTheDocument();
+});
+
+it('use lastLoadable should not update when new promise pending', async () => {
+  const async$ = state(Promise.resolve(1));
+
+  const Component = {
+    setup() {
+      const number = useLastLoadable(async$);
+      return { number };
+    },
+    template: `
+      <div>
+        <p v-if="number.state === 'loading'">loading</p>
+        <p v-else-if="number.state === 'hasData'">num{{ number.data }}</p>
+      </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();
+});
+
+it('use lastLoadable should keep error', async () => {
+  const async$ = state(Promise.reject(new Error('error')));
+
+  const Component = {
+    setup() {
+      const number = useLastLoadable(async$);
+      return { number };
+    },
+    template: `
+      <div>
+        <p v-if="number.state === 'loading'">loading</p>
+        <p v-else-if="number.state === 'hasError'">{{ String(number.error) }}</p>
+        <p v-else-if="number.state === 'hasData'">num{{ number.data }}</p>
+      </div>
+    `,
+  };
+
+  const store = createStore();
+  render({
+    components: { Component },
+    setup() {
+      provideStore(store);
+    },
+    template: `<div><Component /></div>`,
+  });
+
+  expect(await screen.findByText('Error: error')).toBeInTheDocument();
+
+  const defered = makeDefered();
+  store.set(async$, defered.promise);
+
+  await delay(0);
+  expect(screen.getByText('Error: error')).toBeInTheDocument();
+  defered.resolve(2);
+  await delay(0);
+  expect(screen.getByText('num2')).toBeInTheDocument();
+});