@skaile/workspace-bridge-vue 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.26.0
+
+### Minor Changes
+
+- [#99](https://github.com/skaile-ai/workspaces/pull/99) [`1d829f7`](https://github.com/skaile-ai/workspaces/commit/1d829f75c9a4a5f1ae682907f5b30028ab4e5f88) Thanks [@peteralbert](https://github.com/peteralbert)! - `useSubscribableStore`, `useAgentStore`, and `useResourceClient` now accept a
+  `ref` or getter (`MaybeRefOrGetter`) in addition to a plain store. When a reactive
+  store is passed (e.g. `useAgentStore(() => props.store)`), the composable tears down
+  the old subscription and re-subscribes when the store identity changes — matching
+  the React binding's behaviour. Passing a plain store is unchanged (treated as
+  stable, no re-subscription).
+
+### Patch Changes
+
+- Updated dependencies [[`fb76100`](https://github.com/skaile-ai/workspaces/commit/fb76100d1524784ccfafb52520280e1764e0c38a), [`1d829f7`](https://github.com/skaile-ai/workspaces/commit/1d829f75c9a4a5f1ae682907f5b30028ab4e5f88), [`9ab9717`](https://github.com/skaile-ai/workspaces/commit/9ab9717f12c0afe999050d03864dc735e24a8b75), [`d3cddc7`](https://github.com/skaile-ai/workspaces/commit/d3cddc7acf8a259923aae0755b85e566472130d4), [`38aa24e`](https://github.com/skaile-ai/workspaces/commit/38aa24eb3eebebe70623c7bd663c8e9b9469b132), [`5be47c1`](https://github.com/skaile-ai/workspaces/commit/5be47c1f2a69c333ba323759b09265635a9c75fc), [`d755e79`](https://github.com/skaile-ai/workspaces/commit/d755e790f63b34a9bec6a70fc3017b9f66d34b3c), [`8b31c0b`](https://github.com/skaile-ai/workspaces/commit/8b31c0bf85f920f56936e92bf341ce3992fc9bd9), [`7229be9`](https://github.com/skaile-ai/workspaces/commit/7229be9564164bca5625a4f228e24468fada172d), [`22b44fb`](https://github.com/skaile-ai/workspaces/commit/22b44fbd2956067113b773c82fd79ec9f1a0e196)]:
+  - @skaile/workspaces@0.26.0
+
 ## 0.25.0
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { AgentStore, AgentStoreSnapshot, ResourceClient, ResourceClientSnapshot, SubscribableStore } from '@skaile/workspaces/store';
-import { ShallowRef } from 'vue';
+import { MaybeRefOrGetter, ShallowRef } from 'vue';
 
 /**
  * Subscribe to any {@link SubscribableStore} and return a reactive snapshot ref.
@@ -9,20 +9,25 @@ import { ShallowRef } from 'vue';
  * Uses `shallowRef` for fine-grained reactivity. The subscription is cleaned up
  * automatically when the owning scope is disposed (e.g. component unmount).
  *
+ * Accepts a plain store, a `ref`, or a getter. Pass a getter (`() => props.store`)
+ * or a ref when the store can change at runtime — the composable tears down the
+ * old subscription and re-subscribes to the new store. A plain value is treated
+ * as stable (no re-subscription).
+ *
  * @typeParam T - Snapshot type the store exposes via `getSnapshot()`.
- * @param store - The store to subscribe to.
+ * @param store - The store to subscribe to (or a ref/getter resolving to one).
  * @returns A `ShallowRef` whose `.value` is the current snapshot.
  *
  * @since 0.8.0
  */
-declare function useSubscribableStore<T>(store: SubscribableStore<T>): ShallowRef<T>;
+declare function useSubscribableStore<T>(store: MaybeRefOrGetter<SubscribableStore<T>>): ShallowRef<T>;
 /**
  * Subscribe to an {@link AgentStore} and return a reactive snapshot ref.
  *
  * Vue templates and computed properties that read `snapshot.value.messages`
  * etc. will update automatically as the store mutates.
  *
- * @param store - The store to subscribe to.
+ * @param store - The store to subscribe to (or a ref/getter resolving to one).
  * @returns A `ShallowRef` whose `.value` is the current immutable state snapshot.
  *
  * @example
@@ -31,12 +36,13 @@ declare function useSubscribableStore<T>(store: SubscribableStore<T>): ShallowRe
  * import { useAgentStore } from '@skaile/workspace-bridge-vue'
  *
  * const props = defineProps<{ store: AgentStore }>()
- * const snapshot = useAgentStore(props.store)
+ * // Pass a getter so the snapshot re-binds if `props.store` changes.
+ * const snapshot = useAgentStore(() => props.store)
  * // snapshot.value.messages, snapshot.value.streamingText, etc.
  * </script>
  * ```
  */
-declare function useAgentStore(store: AgentStore): ShallowRef<AgentStoreSnapshot>;
+declare function useAgentStore(store: MaybeRefOrGetter<AgentStore>): ShallowRef<AgentStoreSnapshot>;
 /**
  * Subscribe to a {@link ResourceClient} and return a reactive snapshot ref.
  *
@@ -44,7 +50,7 @@ declare function useAgentStore(store: AgentStore): ShallowRef<AgentStoreSnapshot
  * once on connect). The subscription is cleaned up automatically when the owning
  * scope is disposed.
  *
- * @param client - The resource client to subscribe to.
+ * @param client - The resource client to subscribe to (or a ref/getter resolving to one).
  * @returns A `ShallowRef` whose `.value` is the current resource snapshot.
  *
  * @example
@@ -53,11 +59,12 @@ declare function useAgentStore(store: AgentStore): ShallowRef<AgentStoreSnapshot
  * import { useResourceClient } from '@skaile/workspace-bridge-vue'
  *
  * const props = defineProps<{ client: ResourceClient }>()
- * const resources = useResourceClient(props.client)
+ * // Pass a getter so the snapshot re-binds if `props.client` changes.
+ * const resources = useResourceClient(() => props.client)
  * // resources.value.mounts, resources.value.connectors
  * </script>
  * ```
  */
-declare function useResourceClient(client: ResourceClient): ShallowRef<ResourceClientSnapshot>;
+declare function useResourceClient(client: MaybeRefOrGetter<ResourceClient>): ShallowRef<ResourceClientSnapshot>;
 
 export { useAgentStore, useResourceClient, useSubscribableStore };

package/dist/index.js

@@ -1,11 +1,27 @@
 // src/index.ts
-import { onScopeDispose, shallowRef } from "vue";
+import {
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  watch
+} from "vue";
 function useSubscribableStore(store) {
-  const snapshot = shallowRef(store.getSnapshot());
-  const unsub = store.subscribe(() => {
-    snapshot.value = store.getSnapshot();
-  });
-  onScopeDispose(unsub);
+  const snapshot = shallowRef(toValue(store).getSnapshot());
+  let unsub = () => {
+  };
+  const bind = (s) => {
+    unsub();
+    snapshot.value = s.getSnapshot();
+    unsub = s.subscribe(() => {
+      snapshot.value = s.getSnapshot();
+    });
+  };
+  bind(toValue(store));
+  watch(
+    () => toValue(store),
+    (s) => bind(s)
+  );
+  onScopeDispose(() => unsub());
   return snapshot;
 }
 function useAgentStore(store) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type {\n  AgentStore,\n  AgentStoreSnapshot,\n  ResourceClient,\n  ResourceClientSnapshot,\n  SubscribableStore,\n} from \"@skaile/workspaces/store\";\nimport { onScopeDispose, type ShallowRef, shallowRef } from \"vue\";\n\n/**\n * Subscribe to any {@link SubscribableStore} and return a reactive snapshot ref.\n *\n * Generic composable — works for {@link AgentStore}, {@link ResourceClient}, or\n * any future store implementing the same `subscribe`/`getSnapshot` contract.\n * Uses `shallowRef` for fine-grained reactivity. The subscription is cleaned up\n * automatically when the owning scope is disposed (e.g. component unmount).\n *\n * @typeParam T - Snapshot type the store exposes via `getSnapshot()`.\n * @param store - The store to subscribe to.\n * @returns A `ShallowRef` whose `.value` is the current snapshot.\n *\n * @since 0.8.0\n */\nexport function useSubscribableStore<T>(store: SubscribableStore<T>): ShallowRef<T> {\n  const snapshot = shallowRef(store.getSnapshot());\n  const unsub = store.subscribe(() => {\n    snapshot.value = store.getSnapshot();\n  });\n  onScopeDispose(unsub);\n  return snapshot;\n}\n\n/**\n * Subscribe to an {@link AgentStore} and return a reactive snapshot ref.\n *\n * Vue templates and computed properties that read `snapshot.value.messages`\n * etc. will update automatically as the store mutates.\n *\n * @param store - The store to subscribe to.\n * @returns A `ShallowRef` whose `.value` is the current immutable state snapshot.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useAgentStore } from '@skaile/workspace-bridge-vue'\n *\n * const props = defineProps<{ store: AgentStore }>()\n * const snapshot = useAgentStore(props.store)\n * // snapshot.value.messages, snapshot.value.streamingText, etc.\n * </script>\n * ```\n */\nexport function useAgentStore(store: AgentStore): ShallowRef<AgentStoreSnapshot> {\n  return useSubscribableStore(store);\n}\n\n/**\n * Subscribe to a {@link ResourceClient} and return a reactive snapshot ref.\n *\n * Re-renders only when the agent emits a `resources_available` event (typically\n * once on connect). The subscription is cleaned up automatically when the owning\n * scope is disposed.\n *\n * @param client - The resource client to subscribe to.\n * @returns A `ShallowRef` whose `.value` is the current resource snapshot.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useResourceClient } from '@skaile/workspace-bridge-vue'\n *\n * const props = defineProps<{ client: ResourceClient }>()\n * const resources = useResourceClient(props.client)\n * // resources.value.mounts, resources.value.connectors\n * </script>\n * ```\n */\nexport function useResourceClient(client: ResourceClient): ShallowRef<ResourceClientSnapshot> {\n  return useSubscribableStore(client);\n}\n"],"mappings":";AAOA,SAAS,gBAAiC,kBAAkB;AAgBrD,SAAS,qBAAwB,OAA4C;AAClF,QAAM,WAAW,WAAW,MAAM,YAAY,CAAC;AAC/C,QAAM,QAAQ,MAAM,UAAU,MAAM;AAClC,aAAS,QAAQ,MAAM,YAAY;AAAA,EACrC,CAAC;AACD,iBAAe,KAAK;AACpB,SAAO;AACT;AAsBO,SAAS,cAAc,OAAmD;AAC/E,SAAO,qBAAqB,KAAK;AACnC;AAuBO,SAAS,kBAAkB,QAA4D;AAC5F,SAAO,qBAAqB,MAAM;AACpC;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type {\n  AgentStore,\n  AgentStoreSnapshot,\n  ResourceClient,\n  ResourceClientSnapshot,\n  SubscribableStore,\n} from \"@skaile/workspaces/store\";\nimport {\n  type MaybeRefOrGetter,\n  onScopeDispose,\n  type ShallowRef,\n  shallowRef,\n  toValue,\n  watch,\n} from \"vue\";\n\n/**\n * Subscribe to any {@link SubscribableStore} and return a reactive snapshot ref.\n *\n * Generic composable — works for {@link AgentStore}, {@link ResourceClient}, or\n * any future store implementing the same `subscribe`/`getSnapshot` contract.\n * Uses `shallowRef` for fine-grained reactivity. The subscription is cleaned up\n * automatically when the owning scope is disposed (e.g. component unmount).\n *\n * Accepts a plain store, a `ref`, or a getter. Pass a getter (`() => props.store`)\n * or a ref when the store can change at runtime — the composable tears down the\n * old subscription and re-subscribes to the new store. A plain value is treated\n * as stable (no re-subscription).\n *\n * @typeParam T - Snapshot type the store exposes via `getSnapshot()`.\n * @param store - The store to subscribe to (or a ref/getter resolving to one).\n * @returns A `ShallowRef` whose `.value` is the current snapshot.\n *\n * @since 0.8.0\n */\nexport function useSubscribableStore<T>(\n  store: MaybeRefOrGetter<SubscribableStore<T>>,\n): ShallowRef<T> {\n  const snapshot = shallowRef(toValue(store).getSnapshot()) as ShallowRef<T>;\n  let unsub: () => void = () => {};\n\n  const bind = (s: SubscribableStore<T>): void => {\n    unsub();\n    snapshot.value = s.getSnapshot();\n    unsub = s.subscribe(() => {\n      snapshot.value = s.getSnapshot();\n    });\n  };\n  bind(toValue(store));\n\n  // Re-subscribe when a reactive `store` (ref/getter) resolves to a new store.\n  watch(\n    () => toValue(store),\n    (s) => bind(s),\n  );\n  onScopeDispose(() => unsub());\n  return snapshot;\n}\n\n/**\n * Subscribe to an {@link AgentStore} and return a reactive snapshot ref.\n *\n * Vue templates and computed properties that read `snapshot.value.messages`\n * etc. will update automatically as the store mutates.\n *\n * @param store - The store to subscribe to (or a ref/getter resolving to one).\n * @returns A `ShallowRef` whose `.value` is the current immutable state snapshot.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useAgentStore } from '@skaile/workspace-bridge-vue'\n *\n * const props = defineProps<{ store: AgentStore }>()\n * // Pass a getter so the snapshot re-binds if `props.store` changes.\n * const snapshot = useAgentStore(() => props.store)\n * // snapshot.value.messages, snapshot.value.streamingText, etc.\n * </script>\n * ```\n */\nexport function useAgentStore(\n  store: MaybeRefOrGetter<AgentStore>,\n): ShallowRef<AgentStoreSnapshot> {\n  return useSubscribableStore(store);\n}\n\n/**\n * Subscribe to a {@link ResourceClient} and return a reactive snapshot ref.\n *\n * Re-renders only when the agent emits a `resources_available` event (typically\n * once on connect). The subscription is cleaned up automatically when the owning\n * scope is disposed.\n *\n * @param client - The resource client to subscribe to (or a ref/getter resolving to one).\n * @returns A `ShallowRef` whose `.value` is the current resource snapshot.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useResourceClient } from '@skaile/workspace-bridge-vue'\n *\n * const props = defineProps<{ client: ResourceClient }>()\n * // Pass a getter so the snapshot re-binds if `props.client` changes.\n * const resources = useResourceClient(() => props.client)\n * // resources.value.mounts, resources.value.connectors\n * </script>\n * ```\n */\nexport function useResourceClient(\n  client: MaybeRefOrGetter<ResourceClient>,\n): ShallowRef<ResourceClientSnapshot> {\n  return useSubscribableStore(client);\n}\n"],"mappings":";AAOA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAqBA,SAAS,qBACd,OACe;AACf,QAAM,WAAW,WAAW,QAAQ,KAAK,EAAE,YAAY,CAAC;AACxD,MAAI,QAAoB,MAAM;AAAA,EAAC;AAE/B,QAAM,OAAO,CAAC,MAAkC;AAC9C,UAAM;AACN,aAAS,QAAQ,EAAE,YAAY;AAC/B,YAAQ,EAAE,UAAU,MAAM;AACxB,eAAS,QAAQ,EAAE,YAAY;AAAA,IACjC,CAAC;AAAA,EACH;AACA,OAAK,QAAQ,KAAK,CAAC;AAGnB;AAAA,IACE,MAAM,QAAQ,KAAK;AAAA,IACnB,CAAC,MAAM,KAAK,CAAC;AAAA,EACf;AACA,iBAAe,MAAM,MAAM,CAAC;AAC5B,SAAO;AACT;AAuBO,SAAS,cACd,OACgC;AAChC,SAAO,qBAAqB,KAAK;AACnC;AAwBO,SAAS,kBACd,QACoC;AACpC,SAAO,qBAAqB,MAAM;AACpC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skaile/workspace-bridge-vue",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Vue 3.3+ bindings for @skaile/workspaces (useAgentStore, useResourceClient, useSubscribableStore)",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@skaile/workspaces": "^0.25.0"
+    "@skaile/workspaces": "^0.26.0"
   },
   "peerDependencies": {
     "vue": ">=3.3"