@kdeveloper/kvark 0.6.0 → 0.6.2

package/README.md

@@ -1,12 +1,12 @@
 # @kdeveloper/kvark
 
-Atomic state management for React with **explicit dependency graphs**, stale-while-revalidate, and first-class external invalidation.
+Atomic state management for **React** and **Vue 3** with **explicit dependency graphs**, stale-while-revalidate, and first-class external invalidation.
 
-Inspired by Jotai, but built around a key difference: dependencies are declared upfront rather than inferred at runtime. This makes the data graph statically analysable, enables parallel loading, and allows invalidation from anywhere — WebSocket handlers, SSE streams, timers, Service Workers — without any React hooks.
+Inspired by Jotai, but built around a key difference: dependencies are declared upfront rather than inferred at runtime. This makes the data graph statically analysable, enables parallel loading, and allows invalidation from anywhere — WebSocket handlers, SSE streams, timers, Service Workers — without framework hooks.
 
-```
-npm install @kdeveloper/kvark
-# peer dependency: react >=18
+```bash
+pnpm add @kdeveloper/kvark
+# optional peers: react >=18 and/or vue >=3.4 (install the one you use)
 ```
 
 ## Why Kvark?
@@ -26,7 +26,7 @@ npm install @kdeveloper/kvark
 
 ```bash
 pnpm add @kdeveloper/kvark
-# react >=18 is a peer dependency
+# optional peers: react >=18 and/or vue >=3.4
 ```
 
 ## Quick Start
@@ -73,6 +73,69 @@ function UserCard() {
 }
 ```
 
+### Vue 3
+
+The same atoms and store work with `@kdeveloper/kvark/vue`. Composables mirror the React hooks; `useAtomValue` returns an **awaitable** [`shallowRef`](https://vuejs.org/api/reactivity-advanced.html#shallowref) — use `.value` in `<script setup>` (templates unwrap refs automatically). The ref also implements `PromiseLike`, so `await useAtomValue(atom)` in an async `setup` suspends until the first `get` resolves — see [Suspense (Vue 3)](#suspense-vue-3).
+
+Composables must run **inside** a `Provider` subtree. Put `useAtomValue` / `useAtom` in a child component (or a nested route), not in the same component that renders `Provider` without passing the store through a wrapper.
+
+`atoms.ts` — lift the atom definitions from the Quick Start into a shared module:
+
+```ts
+import { atom } from "@kdeveloper/kvark";
+
+export const userIdAtom = atom({
+  debugLabel: "userId",
+  get: async () => 1,
+  set: async () => {},
+});
+
+export const userAtom = atom({
+  debugLabel: "user",
+  dependencies: { userId: userIdAtom },
+  get: async (ctx) => {
+    const id = await ctx.get("userId");
+    const res = await fetch(`/api/users/${id}`, { signal: ctx.signal });
+    return res.json();
+  },
+});
+```
+
+`UserCard.vue`
+
+```vue
+<script setup lang="ts">
+import { useAtomValue } from "@kdeveloper/kvark/vue";
+import { userAtom } from "./atoms";
+
+const user = useAtomValue(userAtom);
+</script>
+
+<template>
+  <div>{{ user.name }}</div>
+</template>
+```
+
+`App.vue`
+
+```vue
+<script setup lang="ts">
+import { createStore } from "@kdeveloper/kvark";
+import { Provider } from "@kdeveloper/kvark/vue";
+import UserCard from "./UserCard.vue";
+
+const store = createStore();
+</script>
+
+<template>
+  <Provider :store="store">
+    <UserCard />
+  </Provider>
+</template>
+```
+
+Unlike React, Vue’s `<Suspense>` only activates for **async** child components. Since `useAtomValue` and `useAtom` return `PromiseLike` refs, just **`await`** them in an async `setup` (or top-level `<script setup>`) to trigger Suspense — see [Suspense (Vue 3)](#suspense-vue-3).
+
 ## Core Concepts
 
 ### Atoms
@@ -174,7 +237,7 @@ Both can update an atom's cached value, but they serve different purposes:
 
 ### `onMount`
 
-Optional lifecycle hook that runs when the atom **first gains a subscriber** in a store (for example when a React component using `useAtomValue` mounts). It receives a synchronous `set(value)` that marks the atom `fresh` and notifies listeners — useful for timers, subscriptions, or imperative updates that should not go through `get`.
+Optional lifecycle hook that runs when the atom **first gains a subscriber** in a store (for example when a component using `useAtomValue` mounts). It receives a synchronous `set(value)` that marks the atom `fresh` and notifies listeners — useful for timers, subscriptions, or imperative updates that should not go through `get`.
 
 You may return a cleanup function; it runs when the **last** subscriber unsubscribes (for example when the last mounted consumer unmounts). If several components subscribe to the same atom, `onMount` runs once and the cleanup runs once after all of them unsubscribe.
 
@@ -300,10 +363,14 @@ A built-in helper that serialises plain objects and arrays into a deterministic
 - Not supported: class instances (other than plain `Object`/`Array`), `Map`, `Set`, `Symbol`, functions, circular references.
 - Memoises by object reference via a `WeakMap` — repeated calls with the **same object reference** are O(1). Treat param objects as **immutable** after the first call; mutating an object after it has been memoised will silently return the stale key.
 
-## React Hooks
+## React (`@kdeveloper/kvark/react`)
 
 All hooks must be used inside a `<Provider>`.
 
+### `useStore`
+
+Returns the `Store` instance from context — for advanced cases (e.g. calling `store.resolve` in async setup patterns) or when you need the store outside atom helpers.
+
 ### `useAtomValue`
 
 Reads an atom value and subscribes to updates. Suspends on first load.
@@ -346,9 +413,75 @@ const readBalance = useAtomContext(async (client) => {
 const balance = await readBalance();
 ```
 
+## Vue 3 (`@kdeveloper/kvark/vue`)
+
+Same composable names and behaviour as React: `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`. Wrap your app (or subtree) with `Provider` and pass `:store="store"`.
+
+`useAtomValue` / `useAtom` expose values as **awaitable shallow refs** (`PromiseLike`) — in script code use `.value`; in templates Vue unwraps refs for you. `await useAtomValue(atom)` in an async setup suspends until the atom's first `get` resolves, integrating with `<Suspense>`.
+
+### Suspense (Vue 3)
+
+Vue’s `<Suspense>` boundary applies to **async** components (e.g. **`async setup`** or [top-level `await` in `<script setup>`](https://vuejs.org/guide/built-ins/suspense.html#async-setup)), not to composables alone. Because `useAtomValue` and `useAtom` return `PromiseLike` refs, you can simply `await` them to suspend until the first `get` resolves.
+
+`atoms.ts`
+
+```ts
+import { atom } from "@kdeveloper/kvark";
+
+export const slowAtom = atom({
+  get: async () => {
+    await new Promise((r) => setTimeout(r, 50));
+    return "ready";
+  },
+});
+```
+
+`AsyncRead.vue` (under `Provider`; top-level `await` makes this component async for Suspense)
+
+```vue
+<script setup lang="ts">
+import { useAtomValue } from "@kdeveloper/kvark/vue";
+import { slowAtom } from "./atoms";
+
+const value = await useAtomValue(slowAtom);
+</script>
+
+<template>
+  <div>{{ value }}</div>
+</template>
+```
+
+`App.vue`
+
+```vue
+<script setup lang="ts">
+import { Suspense } from "vue";
+import { createStore } from "@kdeveloper/kvark";
+import { Provider } from "@kdeveloper/kvark/vue";
+import AsyncRead from "./AsyncRead.vue";
+
+const store = createStore();
+</script>
+
+<template>
+  <Provider :store="store">
+    <Suspense>
+      <template #default>
+        <AsyncRead />
+      </template>
+      <template #fallback>
+        <div>Loading…</div>
+      </template>
+    </Suspense>
+  </Provider>
+</template>
+```
+
+Alternatively, use **`defineComponent({ async setup() { ... } })`** and `await useAtomValue(slowAtom)` before returning the render function — the same pattern as in `test/vue/hooks.test.ts`. `useAtom` is also awaitable: `const [ref, set] = await useAtom(writableAtom)`.
+
 ## External Invalidation
 
-`StoreClient` exposes the store's full capabilities outside of React — useful for WebSocket handlers, SSE streams, polling timers, and Service Workers.
+`StoreClient` exposes the store's full capabilities outside your component tree — useful for WebSocket handlers, SSE streams, polling timers, and Service Workers.
 
 ```ts
 import { createStore } from "@kdeveloper/kvark";
@@ -377,7 +510,7 @@ sse.addEventListener("prices.updated", () => {
 // Polling
 setInterval(() => client.invalidate(statusAtom), 30_000);
 
-// Subscribe to state changes outside React
+// Subscribe to state changes outside components
 const unsub = client.subscribe(userAtom, (state) => {
   if (state.status === "fresh") {
     analytics.identify(state.value.id);
@@ -424,6 +557,8 @@ interface StoreClient {
 
 ## Provider and Store Setup
 
+**React**
+
 ```tsx
 // store.ts
 import { createStore } from "@kdeveloper/kvark";
@@ -442,6 +577,23 @@ export function App() {
 }
 ```
 
+**Vue 3**
+
+```vue
+<script setup lang="ts">
+import { createStore } from "@kdeveloper/kvark";
+import { Provider } from "@kdeveloper/kvark/vue";
+
+const store = createStore();
+</script>
+
+<template>
+  <Provider :store="store">
+    <RouterView />
+  </Provider>
+</template>
+```
+
 ## Utility Types
 
 ```ts
@@ -454,19 +606,21 @@ type Writable = IsWritable<typeof countAtom>; // → true | false
 
 ## Package Structure
 
-| Import                     | Contents                                                              |
-| -------------------------- | --------------------------------------------------------------------- |
-| `@kdeveloper/kvark`        | `atom`, `createStore`, all types                                      |
-| `@kdeveloper/kvark/react`  | `Provider`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext` |
-| `@kdeveloper/kvark/family` | `atomFamily`                                                          |
+| Import                     | Contents                                                                                    |
+| -------------------------- | ------------------------------------------------------------------------------------------- |
+| `@kdeveloper/kvark`        | `atom`, `createStore`, all types                                                            |
+| `@kdeveloper/kvark/react`  | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`           |
+| `@kdeveloper/kvark/vue`    | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`           |
+| `@kdeveloper/kvark/family` | `atomFamily`, `stableFamilyKey`, re-exports `atom` / `createStore` and core types           |
 
-The core (`@kdeveloper/kvark`) has **zero runtime dependencies**. React is a peer dependency only needed when using the `/react` subpath.
+The core (`@kdeveloper/kvark`) has **zero runtime dependencies**. **React** and **Vue** are optional peer dependencies — install the framework you use and import from `/react` or `/vue`.
 
 ## Requirements
 
 - **Node.js** ≥ 20
 - **TypeScript** ≥ 6 (strict mode recommended)
-- **React** ≥ 18 (for `@kdeveloper/kvark/react`)
+- **React** ≥ 18 (optional peer, for `@kdeveloper/kvark/react`)
+- **Vue** ≥ 3.4 (optional peer, for `@kdeveloper/kvark/vue`)
 
 ## License
 

package/dist/vue/index.d.mts

@@ -24,19 +24,21 @@ type ObservedValue<V> = {
   isStale: boolean;
   error: unknown;
 };
-declare function useAtomValue<V>(atom: Atom<V>): Readonly<ShallowRef<V>>;
+type ThenableShallowRef<V> = Readonly<ShallowRef<V>> & PromiseLike<Readonly<ShallowRef<V>>>;
+declare function useAtomValue<V>(atom: Atom<V>): ThenableShallowRef<V>;
 declare function useAtomValue<V>(atom: Atom<V>, opts: {
   observe: true;
-}): Readonly<ShallowRef<ObservedValue<V>>>;
+}): ThenableShallowRef<ObservedValue<V>>;
 //#endregion
 //#region src/vue/use-set-atom.d.ts
 declare function useSetAtom<V, A extends readonly unknown[]>(atom: WritableAtom<V, A>): (...args: A) => Promise<void>;
 //#endregion
 //#region src/vue/use-atom.d.ts
-declare function useAtom<V, A extends readonly unknown[]>(atom: WritableAtom<V, A>): readonly [Readonly<ShallowRef<V>>, (...args: A) => Promise<void>];
+type ThenableAtomTuple<V, A extends readonly unknown[]> = readonly [ThenableShallowRef<V>, (...args: A) => Promise<void>] & PromiseLike<readonly [ThenableShallowRef<V>, (...args: A) => Promise<void>]>;
+declare function useAtom<V, A extends readonly unknown[]>(atom: WritableAtom<V, A>): ThenableAtomTuple<V, A>;
 //#endregion
 //#region src/vue/use-atom-context.d.ts
 declare function useAtomContext<R>(callback: (ctx: StoreClient) => Promise<R>): () => Promise<R>;
 //#endregion
-export { Provider, useAtom, useAtomContext, useAtomValue, useSetAtom, useStore };
+export { Provider, type ThenableShallowRef, useAtom, useAtomContext, useAtomValue, useSetAtom, useStore };
 //# sourceMappingURL=index.d.mts.map

package/dist/vue/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vue/provider.ts","../../src/vue/use-atom-value.ts","../../src/vue/use-set-atom.ts","../../src/vue/use-atom.ts","../../src/vue/use-atom-context.ts"],"mappings":";;;;;cAWa,QAAA,QAAQ,eAAA,CAGgB,KAAA,CAHhB,gBAAA;;UAGQ,QAAA,CAAS,KAAA;;;sBAHjB,KAAA,CAAA,YAAA;;gIAGgB,KAAA,CAAA,gBAAA;;UAAR,QAAA,CAAS,KAAA;;;;iBAQtB,QAAA,CAAA,GAAY,KAAA;;;KClBvB,aAAA;EACH,KAAA,EAAO,CAAA;EACP,OAAA;EACA,KAAA;AAAA;AAAA,iBAGc,YAAA,GAAA,CAAgB,IAAA,EAAM,IAAA,CAAK,CAAA,IAAK,QAAA,CAAS,UAAA,CAAW,CAAA;AAAA,iBACpD,YAAA,GAAA,CACd,IAAA,EAAM,IAAA,CAAK,CAAA,GACX,IAAA;EAAQ,OAAA;AAAA,IACP,QAAA,CAAS,UAAA,CAAW,aAAA,CAAc,CAAA;;;iBCXrB,UAAA,iCAAA,CACd,IAAA,EAAM,YAAA,CAAa,CAAA,EAAG,CAAA,QACjB,IAAA,EAAM,CAAA,KAAM,OAAA;;;iBCAH,OAAA,iCAAA,CACd,IAAA,EAAM,YAAA,CAAa,CAAA,EAAG,CAAA,cACX,QAAA,CAAS,UAAA,CAAW,CAAA,QAAS,IAAA,EAAM,CAAA,KAAM,OAAA;;;iBCJtC,cAAA,GAAA,CAAkB,QAAA,GAAW,GAAA,EAAK,WAAA,KAAgB,OAAA,CAAQ,CAAA,UAAW,OAAA,CAAQ,CAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/vue/provider.ts","../../src/vue/use-atom-value.ts","../../src/vue/use-set-atom.ts","../../src/vue/use-atom.ts","../../src/vue/use-atom-context.ts"],"mappings":";;;;;cAWa,QAAA,QAAQ,eAAA,CAGgB,KAAA,CAHhB,gBAAA;;UAGQ,QAAA,CAAS,KAAA;;;sBAHjB,KAAA,CAAA,YAAA;;gIAGgB,KAAA,CAAA,gBAAA;;UAAR,QAAA,CAAS,KAAA;;;;iBAQtB,QAAA,CAAA,GAAY,KAAA;;;KClBvB,aAAA;EACH,KAAA,EAAO,CAAA;EACP,OAAA;EACA,KAAA;AAAA;AAAA,KAGU,kBAAA,MAAwB,QAAA,CAAS,UAAA,CAAW,CAAA,KACtD,WAAA,CAAY,QAAA,CAAS,UAAA,CAAW,CAAA;AAAA,iBAElB,YAAA,GAAA,CAAgB,IAAA,EAAM,IAAA,CAAK,CAAA,IAAK,kBAAA,CAAmB,CAAA;AAAA,iBACnD,YAAA,GAAA,CACd,IAAA,EAAM,IAAA,CAAK,CAAA,GACX,IAAA;EAAQ,OAAA;AAAA,IACP,kBAAA,CAAmB,aAAA,CAAc,CAAA;;;iBCdpB,UAAA,iCAAA,CACd,IAAA,EAAM,YAAA,CAAa,CAAA,EAAG,CAAA,QACjB,IAAA,EAAM,CAAA,KAAM,OAAA;;;KCDd,iBAAA,8CACH,kBAAA,CAAmB,CAAA,OACf,IAAA,EAAM,CAAA,KAAM,OAAA,UAEhB,WAAA,WACY,kBAAA,CAAmB,CAAA,OAAQ,IAAA,EAAM,CAAA,KAAM,OAAA;AAAA,iBAGrC,OAAA,iCAAA,CACd,IAAA,EAAM,YAAA,CAAa,CAAA,EAAG,CAAA,IACrB,iBAAA,CAAkB,CAAA,EAAG,CAAA;;;iBCXR,cAAA,GAAA,CAAkB,QAAA,GAAW,GAAA,EAAK,WAAA,KAAgB,OAAA,CAAQ,CAAA,UAAW,OAAA,CAAQ,CAAA"}

package/dist/vue/index.mjs

@@ -61,7 +61,11 @@ function useAtomValue(atom, opts) {
 			result.value = derive(store.getSnapshot(atom));
 		}));
 	});
-	return readonly(result);
+	const ref = readonly(result);
+	return new Proxy(ref, { get(target, prop, receiver) {
+		if (prop === "then") return (onFulfilled, onRejected) => store.resolve(atom).then(() => ref, onRejected).then(onFulfilled);
+		return Reflect.get(target, prop, receiver);
+	} });
 }
 //#endregion
 //#region src/vue/use-set-atom.ts
@@ -72,7 +76,11 @@ function useSetAtom(atom) {
 //#endregion
 //#region src/vue/use-atom.ts
 function useAtom(atom) {
-	return [useAtomValue(atom), useSetAtom(atom)];
+	const value = useAtomValue(atom);
+	const setter = useSetAtom(atom);
+	return Object.assign([value, setter], { then(onFulfilled, onRejected) {
+		return Promise.resolve(value).then(() => [value, setter], onRejected).then(onFulfilled);
+	} });
 }
 //#endregion
 //#region src/vue/use-atom-context.ts

package/dist/vue/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/vue/provider.ts","../../src/vue/use-atom-value.ts","../../src/vue/use-set-atom.ts","../../src/vue/use-atom.ts","../../src/vue/use-atom-context.ts"],"sourcesContent":["import {\n  type InjectionKey,\n  type PropType,\n  defineComponent,\n  inject,\n  provide,\n} from \"vue\";\nimport { Store } from \"@/internal/store.js\";\n\nconst StoreKey: InjectionKey<Store> = Symbol(\"kvark-store\");\n\nexport const Provider = defineComponent({\n  name: \"KvarkProvider\",\n  props: {\n    store: { type: Object as PropType<Store>, required: true },\n  },\n  setup(props, { slots }) {\n    provide(StoreKey, props.store);\n    return () => slots[\"default\"]?.();\n  },\n});\n\nexport function useStore(): Store {\n  const store = inject(StoreKey);\n  if (store == null) {\n    throw new Error(\"useStore must be used within a <Provider>\");\n  }\n  return store;\n}\n","import { type ShallowRef, readonly, shallowRef, watchEffect } from \"vue\";\nimport type { Atom, AtomState } from \"@/internal/types.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\ntype ObservedValue<V> = {\n  value: V;\n  isStale: boolean;\n  error: unknown;\n};\n\nexport function useAtomValue<V>(atom: Atom<V>): Readonly<ShallowRef<V>>;\nexport function useAtomValue<V>(\n  atom: Atom<V>,\n  opts: { observe: true },\n): Readonly<ShallowRef<ObservedValue<V>>>;\nexport function useAtomValue<V>(\n  atom: Atom<V>,\n  opts?: { observe: true },\n): Readonly<ShallowRef<V | ObservedValue<V>>> {\n  const store = useStore();\n\n  function derive(snapshot: AtomState<V>): V | ObservedValue<V> {\n    if (snapshot.status === \"pending\") {\n      void store.resolve(atom);\n      if (opts?.observe === true) {\n        return { value: undefined as V, isStale: false, error: undefined };\n      }\n      return undefined as V;\n    }\n\n    if (snapshot.status === \"stale\") {\n      void store.resolve(atom);\n      if (opts?.observe === true) {\n        return { value: snapshot.value, isStale: true, error: undefined };\n      }\n      return snapshot.value;\n    }\n\n    if (snapshot.status === \"error\") {\n      if (opts?.observe === true && snapshot.value !== undefined) {\n        return { value: snapshot.value as V, isStale: false, error: snapshot.error };\n      }\n      throw snapshot.error;\n    }\n\n    // status === \"fresh\"\n    if (opts?.observe === true) {\n      return { value: snapshot.value, isStale: false, error: undefined };\n    }\n    return snapshot.value;\n  }\n\n  const result = shallowRef(derive(store.getSnapshot(atom)));\n\n  watchEffect((onCleanup) => {\n    const unsub = store.subscribe(atom, () => {\n      result.value = derive(store.getSnapshot(atom));\n    });\n    onCleanup(unsub);\n  });\n\n  return readonly(result) as Readonly<ShallowRef<V | ObservedValue<V>>>;\n}\n","import type { WritableAtom } from \"@/internal/types.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\nexport function useSetAtom<V, A extends readonly unknown[]>(\n  atom: WritableAtom<V, A>,\n): (...args: A) => Promise<void> {\n  const store = useStore();\n  return (...args: A): Promise<void> => store.set(atom, ...args);\n}\n","import type { ShallowRef } from \"vue\";\nimport type { WritableAtom } from \"@/internal/types.js\";\nimport { useAtomValue } from \"@/vue/use-atom-value.js\";\nimport { useSetAtom } from \"@/vue/use-set-atom.js\";\n\nexport function useAtom<V, A extends readonly unknown[]>(\n  atom: WritableAtom<V, A>,\n): readonly [Readonly<ShallowRef<V>>, (...args: A) => Promise<void>] {\n  const value = useAtomValue(atom);\n  const setter = useSetAtom(atom);\n  return [value, setter] as const;\n}\n","import type { StoreClient } from \"@/internal/store.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\nexport function useAtomContext<R>(callback: (ctx: StoreClient) => Promise<R>): () => Promise<R> {\n  const store = useStore();\n  return (): Promise<R> => callback(store.getClient());\n}\n"],"mappings":";;AASA,MAAM,WAAgC,OAAO,cAAc;AAE3D,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,OAAO,EACL,OAAO;EAAE,MAAM;EAA2B,UAAU;EAAM,EAC3D;CACD,MAAM,OAAO,EAAE,SAAS;AACtB,UAAQ,UAAU,MAAM,MAAM;AAC9B,eAAa,MAAM,cAAc;;CAEpC,CAAC;AAEF,SAAgB,WAAkB;CAChC,MAAM,QAAQ,OAAO,SAAS;AAC9B,KAAI,SAAS,KACX,OAAM,IAAI,MAAM,4CAA4C;AAE9D,QAAO;;;;ACZT,SAAgB,aACd,MACA,MAC4C;CAC5C,MAAM,QAAQ,UAAU;CAExB,SAAS,OAAO,UAA8C;AAC5D,MAAI,SAAS,WAAW,WAAW;AAC5B,SAAM,QAAQ,KAAK;AACxB,OAAI,MAAM,YAAY,KACpB,QAAO;IAAE,OAAO,KAAA;IAAgB,SAAS;IAAO,OAAO,KAAA;IAAW;AAEpE;;AAGF,MAAI,SAAS,WAAW,SAAS;AAC1B,SAAM,QAAQ,KAAK;AACxB,OAAI,MAAM,YAAY,KACpB,QAAO;IAAE,OAAO,SAAS;IAAO,SAAS;IAAM,OAAO,KAAA;IAAW;AAEnE,UAAO,SAAS;;AAGlB,MAAI,SAAS,WAAW,SAAS;AAC/B,OAAI,MAAM,YAAY,QAAQ,SAAS,UAAU,KAAA,EAC/C,QAAO;IAAE,OAAO,SAAS;IAAY,SAAS;IAAO,OAAO,SAAS;IAAO;AAE9E,SAAM,SAAS;;AAIjB,MAAI,MAAM,YAAY,KACpB,QAAO;GAAE,OAAO,SAAS;GAAO,SAAS;GAAO,OAAO,KAAA;GAAW;AAEpE,SAAO,SAAS;;CAGlB,MAAM,SAAS,WAAW,OAAO,MAAM,YAAY,KAAK,CAAC,CAAC;AAE1D,cAAa,cAAc;AAIzB,YAHc,MAAM,UAAU,YAAY;AACxC,UAAO,QAAQ,OAAO,MAAM,YAAY,KAAK,CAAC;IAC9C,CACc;GAChB;AAEF,QAAO,SAAS,OAAO;;;;AC1DzB,SAAgB,WACd,MAC+B;CAC/B,MAAM,QAAQ,UAAU;AACxB,SAAQ,GAAG,SAA2B,MAAM,IAAI,MAAM,GAAG,KAAK;;;;ACFhE,SAAgB,QACd,MACmE;AAGnE,QAAO,CAFO,aAAa,KAAK,EACjB,WAAW,KAAK,CACT;;;;ACPxB,SAAgB,eAAkB,UAA8D;CAC9F,MAAM,QAAQ,UAAU;AACxB,cAAyB,SAAS,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/vue/provider.ts","../../src/vue/use-atom-value.ts","../../src/vue/use-set-atom.ts","../../src/vue/use-atom.ts","../../src/vue/use-atom-context.ts"],"sourcesContent":["import {\n  type InjectionKey,\n  type PropType,\n  defineComponent,\n  inject,\n  provide,\n} from \"vue\";\nimport { Store } from \"@/internal/store.js\";\n\nconst StoreKey: InjectionKey<Store> = Symbol(\"kvark-store\");\n\nexport const Provider = defineComponent({\n  name: \"KvarkProvider\",\n  props: {\n    store: { type: Object as PropType<Store>, required: true },\n  },\n  setup(props, { slots }) {\n    provide(StoreKey, props.store);\n    return () => slots[\"default\"]?.();\n  },\n});\n\nexport function useStore(): Store {\n  const store = inject(StoreKey);\n  if (store == null) {\n    throw new Error(\"useStore must be used within a <Provider>\");\n  }\n  return store;\n}\n","import { type ShallowRef, readonly, shallowRef, watchEffect } from \"vue\";\nimport type { Atom, AtomState } from \"@/internal/types.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\ntype ObservedValue<V> = {\n  value: V;\n  isStale: boolean;\n  error: unknown;\n};\n\nexport type ThenableShallowRef<V> = Readonly<ShallowRef<V>> &\n  PromiseLike<Readonly<ShallowRef<V>>>;\n\nexport function useAtomValue<V>(atom: Atom<V>): ThenableShallowRef<V>;\nexport function useAtomValue<V>(\n  atom: Atom<V>,\n  opts: { observe: true },\n): ThenableShallowRef<ObservedValue<V>>;\nexport function useAtomValue<V>(\n  atom: Atom<V>,\n  opts?: { observe: true },\n): ThenableShallowRef<V | ObservedValue<V>> {\n  const store = useStore();\n\n  function derive(snapshot: AtomState<V>): V | ObservedValue<V> {\n    if (snapshot.status === \"pending\") {\n      void store.resolve(atom);\n      if (opts?.observe === true) {\n        return { value: undefined as V, isStale: false, error: undefined };\n      }\n      return undefined as V;\n    }\n\n    if (snapshot.status === \"stale\") {\n      void store.resolve(atom);\n      if (opts?.observe === true) {\n        return { value: snapshot.value, isStale: true, error: undefined };\n      }\n      return snapshot.value;\n    }\n\n    if (snapshot.status === \"error\") {\n      if (opts?.observe === true && snapshot.value !== undefined) {\n        return { value: snapshot.value as V, isStale: false, error: snapshot.error };\n      }\n      throw snapshot.error;\n    }\n\n    // status === \"fresh\"\n    if (opts?.observe === true) {\n      return { value: snapshot.value, isStale: false, error: undefined };\n    }\n    return snapshot.value;\n  }\n\n  const result = shallowRef(derive(store.getSnapshot(atom)));\n\n  watchEffect((onCleanup) => {\n    const unsub = store.subscribe(atom, () => {\n      result.value = derive(store.getSnapshot(atom));\n    });\n    onCleanup(unsub);\n  });\n\n  const ref = readonly(result) as Readonly<ShallowRef<V | ObservedValue<V>>>;\n\n  return new Proxy(ref, {\n    get(target, prop, receiver) {\n      if (prop === \"then\") {\n        return (\n          onFulfilled?: (v: typeof ref) => unknown,\n          onRejected?: (e: unknown) => unknown,\n        ) =>\n          store\n            .resolve(atom)\n            .then(() => ref, onRejected)\n            .then(onFulfilled as never);\n      }\n      return Reflect.get(target, prop, receiver);\n    },\n  }) as ThenableShallowRef<V | ObservedValue<V>>;\n}\n","import type { WritableAtom } from \"@/internal/types.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\nexport function useSetAtom<V, A extends readonly unknown[]>(\n  atom: WritableAtom<V, A>,\n): (...args: A) => Promise<void> {\n  const store = useStore();\n  return (...args: A): Promise<void> => store.set(atom, ...args);\n}\n","import type { WritableAtom } from \"@/internal/types.js\";\nimport { type ThenableShallowRef, useAtomValue } from \"@/vue/use-atom-value.js\";\nimport { useSetAtom } from \"@/vue/use-set-atom.js\";\n\ntype ThenableAtomTuple<V, A extends readonly unknown[]> = readonly [\n  ThenableShallowRef<V>,\n  (...args: A) => Promise<void>,\n] &\n  PromiseLike<\n    readonly [ThenableShallowRef<V>, (...args: A) => Promise<void>]\n  >;\n\nexport function useAtom<V, A extends readonly unknown[]>(\n  atom: WritableAtom<V, A>,\n): ThenableAtomTuple<V, A> {\n  const value = useAtomValue(atom);\n  const setter = useSetAtom(atom);\n  const tuple = [value, setter] as const;\n\n  return Object.assign(tuple, {\n    then(\n      onFulfilled?: (v: typeof tuple) => unknown,\n      onRejected?: (e: unknown) => unknown,\n    ) {\n      return Promise.resolve(value).then(\n        () => [value, setter] as const,\n        onRejected,\n      ).then(onFulfilled as never);\n    },\n  }) as ThenableAtomTuple<V, A>;\n}\n","import type { StoreClient } from \"@/internal/store.js\";\nimport { useStore } from \"@/vue/provider.js\";\n\nexport function useAtomContext<R>(callback: (ctx: StoreClient) => Promise<R>): () => Promise<R> {\n  const store = useStore();\n  return (): Promise<R> => callback(store.getClient());\n}\n"],"mappings":";;AASA,MAAM,WAAgC,OAAO,cAAc;AAE3D,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,OAAO,EACL,OAAO;EAAE,MAAM;EAA2B,UAAU;EAAM,EAC3D;CACD,MAAM,OAAO,EAAE,SAAS;AACtB,UAAQ,UAAU,MAAM,MAAM;AAC9B,eAAa,MAAM,cAAc;;CAEpC,CAAC;AAEF,SAAgB,WAAkB;CAChC,MAAM,QAAQ,OAAO,SAAS;AAC9B,KAAI,SAAS,KACX,OAAM,IAAI,MAAM,4CAA4C;AAE9D,QAAO;;;;ACTT,SAAgB,aACd,MACA,MAC0C;CAC1C,MAAM,QAAQ,UAAU;CAExB,SAAS,OAAO,UAA8C;AAC5D,MAAI,SAAS,WAAW,WAAW;AAC5B,SAAM,QAAQ,KAAK;AACxB,OAAI,MAAM,YAAY,KACpB,QAAO;IAAE,OAAO,KAAA;IAAgB,SAAS;IAAO,OAAO,KAAA;IAAW;AAEpE;;AAGF,MAAI,SAAS,WAAW,SAAS;AAC1B,SAAM,QAAQ,KAAK;AACxB,OAAI,MAAM,YAAY,KACpB,QAAO;IAAE,OAAO,SAAS;IAAO,SAAS;IAAM,OAAO,KAAA;IAAW;AAEnE,UAAO,SAAS;;AAGlB,MAAI,SAAS,WAAW,SAAS;AAC/B,OAAI,MAAM,YAAY,QAAQ,SAAS,UAAU,KAAA,EAC/C,QAAO;IAAE,OAAO,SAAS;IAAY,SAAS;IAAO,OAAO,SAAS;IAAO;AAE9E,SAAM,SAAS;;AAIjB,MAAI,MAAM,YAAY,KACpB,QAAO;GAAE,OAAO,SAAS;GAAO,SAAS;GAAO,OAAO,KAAA;GAAW;AAEpE,SAAO,SAAS;;CAGlB,MAAM,SAAS,WAAW,OAAO,MAAM,YAAY,KAAK,CAAC,CAAC;AAE1D,cAAa,cAAc;AAIzB,YAHc,MAAM,UAAU,YAAY;AACxC,UAAO,QAAQ,OAAO,MAAM,YAAY,KAAK,CAAC;IAC9C,CACc;GAChB;CAEF,MAAM,MAAM,SAAS,OAAO;AAE5B,QAAO,IAAI,MAAM,KAAK,EACpB,IAAI,QAAQ,MAAM,UAAU;AAC1B,MAAI,SAAS,OACX,SACE,aACA,eAEA,MACG,QAAQ,KAAK,CACb,WAAW,KAAK,WAAW,CAC3B,KAAK,YAAqB;AAEjC,SAAO,QAAQ,IAAI,QAAQ,MAAM,SAAS;IAE7C,CAAC;;;;AC7EJ,SAAgB,WACd,MAC+B;CAC/B,MAAM,QAAQ,UAAU;AACxB,SAAQ,GAAG,SAA2B,MAAM,IAAI,MAAM,GAAG,KAAK;;;;ACKhE,SAAgB,QACd,MACyB;CACzB,MAAM,QAAQ,aAAa,KAAK;CAChC,MAAM,SAAS,WAAW,KAAK;AAG/B,QAAO,OAAO,OAFA,CAAC,OAAO,OAAO,EAED,EAC1B,KACE,aACA,YACA;AACA,SAAO,QAAQ,QAAQ,MAAM,CAAC,WACtB,CAAC,OAAO,OAAO,EACrB,WACD,CAAC,KAAK,YAAqB;IAE/B,CAAC;;;;AC1BJ,SAAgB,eAAkB,UAA8D;CAC9F,MAAM,QAAQ,UAAU;AACxB,cAAyB,SAAS,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdeveloper/kvark",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Atomic state management with explicit dependency graphs",
   "license": "MIT",
   "files": [