@arronqzy/vue-rx-store 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# @arronqzy/vue-rx-store
+
+Vue 3 composables，用于订阅 `@arronqzy/rx-store` 全局状态。
+
+## API
+
+| Composable | 说明 |
+|------------|------|
+| `useStore(selector?)` | 订阅状态切片（快照值） |
+| `useStoreRef(selector?)` | 返回 `ref`，适合模板 |
+| `useNode(id, selector?)` | 按节点 id 订阅 props |
+| `useSelectedNodes()` | 当前选中节点 props |
+| `useSelectedPositions()` | 选中节点位置 |
+| `useSelectedNodesFull()` | 选中节点完整对象 |
+
+## 示例
+
+```vue
+<script setup lang="ts">
+import { useStoreRef } from "@arronqzy/vue-rx-store";
+
+const selectedCount = useStoreRef((s) => s.selectedIds.length);
+</script>
+
+<template>
+  <span>已选 {{ selectedCount }} 个</span>
+</template>
+```
+
+## 许可证
+
+MIT

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@arronqzy/vue-rx-store",
+  "version": "0.1.0",
+  "description": "Vue 3 composables for @arronqzy/rx-store",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@arronqzy/rx-store": "1.0.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "typescript": "^5.5.4",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0",
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint \"src/**/*.{ts,vue}\"",
+    "typecheck": "vue-tsc -p tsconfig.json --noEmit",
+    "build": "pnpm run typecheck"
+  }
+}

package/src/composables/useNode.ts

@@ -0,0 +1,13 @@
+import { store } from "@arronqzy/rx-store";
+import { useStoreRef } from "./useStore";
+
+export function useNode<T = Record<string, unknown>>(
+  id: string,
+  selector?: (props: Record<string, unknown>) => T
+) {
+  return useStoreRef((state) => {
+    const node = store.findNodeById(state.root, id);
+    const props = (node?.props ?? {}) as Record<string, unknown>;
+    return selector ? selector(props) : (props as T);
+  });
+}

package/src/composables/useSelectedNodes.ts

@@ -0,0 +1,36 @@
+import { store, type Node } from "@arronqzy/rx-store";
+import { useStoreRef } from "./useStore";
+
+export function useSelectedNodes() {
+  return useStoreRef((state) => {
+    const selectedMap: Record<string, Record<string, unknown>> = {};
+    state.selectedIds.forEach((id) => {
+      const node = store.findNodeById(state.root, id);
+      if (node) selectedMap[id] = node.props as Record<string, unknown>;
+    });
+    return selectedMap;
+  });
+}
+
+export function useSelectedPositions() {
+  return useStoreRef((state) => {
+    const posMap: Record<string, { x: number; y: number }> = {};
+    state.selectedIds.forEach((id) => {
+      const node = store.findNodeById(state.root, id);
+      if (node) {
+        const props = node.props as { x?: number; y?: number };
+        posMap[id] = { x: props.x ?? 0, y: props.y ?? 0 };
+      }
+    });
+    return posMap;
+  });
+}
+
+export function useSelectedNodesFull() {
+  return useStoreRef(
+    (state) =>
+      state.selectedIds
+        .map((id) => store.findNodeById(state.root, id))
+        .filter(Boolean) as Node[]
+  );
+}

package/src/composables/useStore.ts

@@ -0,0 +1,49 @@
+import { store, type State } from "@arronqzy/rx-store";
+import { ref, onBeforeUnmount } from "vue";
+
+function shallowEqual<T>(a: T, b: T): boolean {
+  return Object.is(a, b);
+}
+
+/**
+ * 订阅 rx-store 全局状态切片。
+ * @example const count = useStore((s) => s.selectedIds.length);
+ */
+export function useStore<T = State>(
+  selector?: (state: State) => T,
+  equalityFn: (a: T, b: T) => boolean = shallowEqual
+): T {
+  const sel = selector ?? ((s: State) => s as unknown as T);
+  const state = ref(sel(store.getState())) as { value: T };
+
+  const sub = store.select().subscribe(() => {
+    const next = sel(store.getState());
+    if (!equalityFn(state.value, next)) {
+      state.value = next;
+    }
+  });
+
+  onBeforeUnmount(() => sub.unsubscribe());
+
+  return state.value;
+}
+
+/** 返回响应式 ref，适合模板绑定 */
+export function useStoreRef<T = State>(
+  selector?: (state: State) => T,
+  equalityFn: (a: T, b: T) => boolean = shallowEqual
+) {
+  const sel = selector ?? ((s: State) => s as unknown as T);
+  const state = ref(sel(store.getState())) as { value: T };
+
+  const sub = store.select().subscribe(() => {
+    const next = sel(store.getState());
+    if (!equalityFn(state.value, next)) {
+      state.value = next;
+    }
+  });
+
+  onBeforeUnmount(() => sub.unsubscribe());
+
+  return state;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { useStore, useStoreRef } from "./composables/useStore";
+export { useNode } from "./composables/useNode";
+export {
+  useSelectedNodes,
+  useSelectedPositions,
+  useSelectedNodesFull,
+} from "./composables/useSelectedNodes";