@coaction/vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Michael Lin
+
+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 ACTION 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/README.md

@@ -0,0 +1,53 @@
+# @coaction/vue
+
+![Node CI](https://github.com/unadlib/coaction/workflows/Node%20CI/badge.svg)
+[![npm](https://img.shields.io/npm/v/@coaction/vue.svg)](https://www.npmjs.com/package/@coaction/vue)
+![license](https://img.shields.io/npm/l/@coaction/vue)
+
+A Coaction integration tool for Vue
+
+## Installation
+
+You can install it via npm, yarn or pnpm.
+
+```sh
+npm install coaction @coaction/vue
+```
+
+## Usage
+
+```jsx
+import { create } from '@coaction/vue';
+
+const useStore = create((set) => ({
+  count: 0,
+  increment() {
+    set((draft) => {
+      draft.count += 1;
+    });
+  }
+}));
+
+export default {
+  setup() {
+    const state = useStore();
+    const count = useStore((current) => current.count);
+    return {
+      state,
+      count
+    };
+  }
+};
+```
+
+Use `autoSelector` to receive computed refs for each field:
+
+```tsx
+const selectors = useStore({ autoSelector: true });
+selectors.increment();
+console.log(selectors.count.value);
+```
+
+## Documentation
+
+You can find the documentation [here](https://github.com/unadlib/coaction).

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import { ISlices, Slice, StoreOptions, Store, SliceState, ClientStoreOptions, Asyncify } from 'coaction';
+export * from 'coaction';
+import { ComputedRef } from 'vue';
+
+type SelectorOptions = {
+    autoSelector?: boolean;
+};
+type AutoSelector<T> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => any ? T[K] : T[K] extends readonly any[] ? ComputedRef<T[K]> : T[K] extends object ? AutoSelector<T[K]> : ComputedRef<T[K]>;
+};
+type StoreReturn<T extends object> = Store<T> & {
+    <P>(selector: (state: T) => P): ComputedRef<P>;
+    (options: {
+        autoSelector: true;
+    }): AutoSelector<T>;
+    (options?: SelectorOptions): T;
+};
+type StoreWithAsyncFunction<T extends object, D extends true | false = false> = Store<Asyncify<T, D>> & {
+    <P>(selector: (state: Asyncify<T, D>) => P): ComputedRef<P>;
+    (options: {
+        autoSelector: true;
+    }): AutoSelector<Asyncify<T, D>>;
+    (options?: SelectorOptions): Asyncify<T, D>;
+};
+type CreateState = ISlices | Record<string, Slice<any>>;
+type Creator = {
+    <T extends Record<string, Slice<any>>>(createState: T, options?: StoreOptions<T>): StoreReturn<SliceState<T>>;
+    <T extends ISlices>(createState: Slice<T>, options?: StoreOptions<T>): StoreReturn<T>;
+    <T extends Record<string, Slice<any>>>(createState: T, options?: ClientStoreOptions<T>): StoreWithAsyncFunction<SliceState<T>, true>;
+    <T extends ISlices>(createState: Slice<T>, options?: ClientStoreOptions<T>): StoreWithAsyncFunction<T>;
+};
+declare const create: Creator;
+
+export { type CreateState, type Creator, type StoreReturn, type StoreWithAsyncFunction, create };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { ISlices, Slice, StoreOptions, Store, SliceState, ClientStoreOptions, Asyncify } from 'coaction';
+export * from 'coaction';
+import { ComputedRef } from 'vue';
+
+type SelectorOptions = {
+    autoSelector?: boolean;
+};
+type AutoSelector<T> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => any ? T[K] : T[K] extends readonly any[] ? ComputedRef<T[K]> : T[K] extends object ? AutoSelector<T[K]> : ComputedRef<T[K]>;
+};
+type StoreReturn<T extends object> = Store<T> & {
+    <P>(selector: (state: T) => P): ComputedRef<P>;
+    (options: {
+        autoSelector: true;
+    }): AutoSelector<T>;
+    (options?: SelectorOptions): T;
+};
+type StoreWithAsyncFunction<T extends object, D extends true | false = false> = Store<Asyncify<T, D>> & {
+    <P>(selector: (state: Asyncify<T, D>) => P): ComputedRef<P>;
+    (options: {
+        autoSelector: true;
+    }): AutoSelector<Asyncify<T, D>>;
+    (options?: SelectorOptions): Asyncify<T, D>;
+};
+type CreateState = ISlices | Record<string, Slice<any>>;
+type Creator = {
+    <T extends Record<string, Slice<any>>>(createState: T, options?: StoreOptions<T>): StoreReturn<SliceState<T>>;
+    <T extends ISlices>(createState: Slice<T>, options?: StoreOptions<T>): StoreReturn<T>;
+    <T extends Record<string, Slice<any>>>(createState: T, options?: ClientStoreOptions<T>): StoreWithAsyncFunction<SliceState<T>, true>;
+    <T extends ISlices>(createState: Slice<T>, options?: ClientStoreOptions<T>): StoreWithAsyncFunction<T>;
+};
+declare const create: Creator;
+
+export { type CreateState, type Creator, type StoreReturn, type StoreWithAsyncFunction, create };

package/dist/index.js

@@ -0,0 +1,143 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  create: () => create
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  create: () => create
+});
+var import_coaction = require("coaction");
+var import_vue = require("vue");
+__reExport(src_exports, require("coaction"));
+var createStateProxy = (store, version) => new Proxy({}, {
+  get(_, key) {
+    version.value;
+    const state = store.getState();
+    const value = state[key];
+    if (typeof value === "function") {
+      return value.bind(store.getState());
+    }
+    return value;
+  },
+  has(_, key) {
+    version.value;
+    return key in store.getState();
+  },
+  ownKeys() {
+    version.value;
+    return Reflect.ownKeys(store.getState());
+  },
+  getOwnPropertyDescriptor(_, key) {
+    version.value;
+    const descriptor = Object.getOwnPropertyDescriptor(store.getState(), key);
+    if (!descriptor) {
+      return void 0;
+    }
+    return {
+      ...descriptor,
+      configurable: true
+    };
+  }
+});
+var createAutoSelector = (store, version) => {
+  const state = store.getState();
+  if (!store.isSliceStore) {
+    const autoSelector2 = {};
+    const descriptors = Object.getOwnPropertyDescriptors(state);
+    for (const key in descriptors) {
+      const descriptor = descriptors[key];
+      if (typeof descriptor.value === "function") {
+        autoSelector2[key] = descriptor.value.bind(state);
+      } else {
+        autoSelector2[key] = (0, import_vue.computed)(() => {
+          version.value;
+          return store.getState()[key];
+        });
+      }
+    }
+    return autoSelector2;
+  }
+  const autoSelector = {};
+  for (const sliceKey in state) {
+    const slice = state[sliceKey];
+    if (typeof slice !== "object" || slice === null) {
+      continue;
+    }
+    const sliceAutoSelector = {};
+    const descriptors = Object.getOwnPropertyDescriptors(slice);
+    for (const key in descriptors) {
+      const descriptor = descriptors[key];
+      if (typeof descriptor.value === "function") {
+        sliceAutoSelector[key] = descriptor.value.bind(slice);
+      } else {
+        sliceAutoSelector[key] = (0, import_vue.computed)(() => {
+          version.value;
+          return store.getState()[sliceKey][key];
+        });
+      }
+    }
+    autoSelector[sliceKey] = sliceAutoSelector;
+  }
+  return autoSelector;
+};
+var create = (createState, options) => {
+  const store = (0, import_coaction.create)(createState, options);
+  const version = (0, import_vue.ref)(0);
+  const unsubscribe = store.subscribe(() => {
+    version.value += 1;
+  });
+  const baseDestroy = store.destroy;
+  store.destroy = () => {
+    unsubscribe();
+    baseDestroy();
+  };
+  const stateProxy = createStateProxy(store, version);
+  let autoSelector;
+  const useStore = (0, import_coaction.wrapStore)(store, (selector) => {
+    if (typeof selector === "function") {
+      return (0, import_vue.computed)(() => {
+        version.value;
+        return selector(store.getState());
+      });
+    }
+    if (selector?.autoSelector) {
+      if (!autoSelector) {
+        autoSelector = createAutoSelector(store, version);
+      }
+      return autoSelector;
+    }
+    return stateProxy;
+  });
+  return useStore;
+};
+
+// index.ts
+__reExport(index_exports, src_exports, module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  create
+});

package/dist/index.mjs

@@ -0,0 +1,140 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  create: () => create
+});
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  create: () => create
+});
+__reExport(src_exports, coaction_star);
+import { create as createVanilla, wrapStore } from "coaction";
+import { computed, ref } from "vue";
+import * as coaction_star from "coaction";
+var createStateProxy = (store, version) => new Proxy({}, {
+  get(_, key) {
+    version.value;
+    const state = store.getState();
+    const value = state[key];
+    if (typeof value === "function") {
+      return value.bind(store.getState());
+    }
+    return value;
+  },
+  has(_, key) {
+    version.value;
+    return key in store.getState();
+  },
+  ownKeys() {
+    version.value;
+    return Reflect.ownKeys(store.getState());
+  },
+  getOwnPropertyDescriptor(_, key) {
+    version.value;
+    const descriptor = Object.getOwnPropertyDescriptor(store.getState(), key);
+    if (!descriptor) {
+      return void 0;
+    }
+    return {
+      ...descriptor,
+      configurable: true
+    };
+  }
+});
+var createAutoSelector = (store, version) => {
+  const state = store.getState();
+  if (!store.isSliceStore) {
+    const autoSelector2 = {};
+    const descriptors = Object.getOwnPropertyDescriptors(state);
+    for (const key in descriptors) {
+      const descriptor = descriptors[key];
+      if (typeof descriptor.value === "function") {
+        autoSelector2[key] = descriptor.value.bind(state);
+      } else {
+        autoSelector2[key] = computed(() => {
+          version.value;
+          return store.getState()[key];
+        });
+      }
+    }
+    return autoSelector2;
+  }
+  const autoSelector = {};
+  for (const sliceKey in state) {
+    const slice = state[sliceKey];
+    if (typeof slice !== "object" || slice === null) {
+      continue;
+    }
+    const sliceAutoSelector = {};
+    const descriptors = Object.getOwnPropertyDescriptors(slice);
+    for (const key in descriptors) {
+      const descriptor = descriptors[key];
+      if (typeof descriptor.value === "function") {
+        sliceAutoSelector[key] = descriptor.value.bind(slice);
+      } else {
+        sliceAutoSelector[key] = computed(() => {
+          version.value;
+          return store.getState()[sliceKey][key];
+        });
+      }
+    }
+    autoSelector[sliceKey] = sliceAutoSelector;
+  }
+  return autoSelector;
+};
+var create = (createState, options) => {
+  const store = createVanilla(createState, options);
+  const version = ref(0);
+  const unsubscribe = store.subscribe(() => {
+    version.value += 1;
+  });
+  const baseDestroy = store.destroy;
+  store.destroy = () => {
+    unsubscribe();
+    baseDestroy();
+  };
+  const stateProxy = createStateProxy(store, version);
+  let autoSelector;
+  const useStore = wrapStore(store, (selector) => {
+    if (typeof selector === "function") {
+      return computed(() => {
+        version.value;
+        return selector(store.getState());
+      });
+    }
+    if (selector?.autoSelector) {
+      if (!autoSelector) {
+        autoSelector = createAutoSelector(store, version);
+      }
+      return autoSelector;
+    }
+    return stateProxy;
+  });
+  return useStore;
+};
+
+// index.ts
+__reExport(index_exports, src_exports);
+export {
+  create
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@coaction/vue",
+  "version": "1.0.0",
+  "description": "A Coaction integration tool for Vue",
+  "keywords": [
+    "coaction",
+    "vue",
+    "multithreading",
+    "mutative",
+    "data-transport"
+  ],
+  "authors": [
+    "Michael Lin <unadlib@gmail.com> (https://github.com/unadlib)"
+  ],
+  "homepage": "https://github.com/unadlib/coaction/tree/main/packages/coaction-vue#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/unadlib/coaction.git",
+    "directory": "packages/coaction-vue"
+  },
+  "bugs": {
+    "url": "https://github.com/unadlib/coaction/issues"
+  },
+  "peerDependencies": {
+    "coaction": "^0.2.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "coaction": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^8.1.0",
+    "coaction": "^0.2.0",
+    "vue": "^3.5.28"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "author": "unadlib",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "test": "vitest run test",
+    "build": "tsup index.ts --format cjs,esm --dts --clean --out-dir dist",
+    "dev": "tsup index.ts --format cjs,esm --dts --watch --out-dir dist"
+  }
+}