@kdeveloper/kvark 0.6.3 → 0.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -75,7 +75,7 @@ function UserCard() {
|
|
|
75
75
|
|
|
76
76
|
### Vue 3
|
|
77
77
|
|
|
78
|
-
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).
|
|
78
|
+
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). Until the first `get` resolves, that ref’s value is `undefined`; TypeScript types it as `V | undefined` (`ThenableShallowRef<V>`). After `await useAtomValue(atom)` you get `Readonly<ShallowRef<V>>` with a defined `.value`. The ref also implements `PromiseLike`, so awaiting it in an async `setup` suspends until the first `get` resolves — see [Suspense (Vue 3)](#suspense-vue-3).
|
|
79
79
|
|
|
80
80
|
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.
|
|
81
81
|
|
|
@@ -112,10 +112,14 @@ const user = useAtomValue(userAtom);
|
|
|
112
112
|
</script>
|
|
113
113
|
|
|
114
114
|
<template>
|
|
115
|
-
<div>{{ user
|
|
115
|
+
<div>{{ user?.name }}</div>
|
|
116
116
|
</template>
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
+
While the atom is **pending**, the unwrapped ref is `undefined`, so `{{ user.name }}` would throw at runtime and TypeScript flags `user.name` in script. Use optional chaining (as above), `v-if="user"`, or `await useAtomValue(userAtom)` with `<Suspense>`.
|
|
120
|
+
|
|
121
|
+
With `useAtomValue(atom, { observe: true })`, the ref always holds an `ObservedValue` object (`value`, `isStale`, `error`); `value` is `V | undefined` while pending (`ThenableObservedShallowRef<V>`).
|
|
122
|
+
|
|
119
123
|
`App.vue`
|
|
120
124
|
|
|
121
125
|
```vue
|
|
@@ -417,6 +421,8 @@ const balance = await readBalance();
|
|
|
417
421
|
|
|
418
422
|
Same composable names and behaviour as React: `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`. Wrap your app (or subtree) with `Provider` and pass `:store="store"`.
|
|
419
423
|
|
|
424
|
+
Exported types: **`ThenableShallowRef<V>`** (default `useAtomValue`), **`ThenableObservedShallowRef<V>`** and **`ObservedValue<V>`** (with `{ observe: true }`). They encode pending vs resolved ref shapes for TypeScript.
|
|
425
|
+
|
|
420
426
|
`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>`.
|
|
421
427
|
|
|
422
428
|
### Suspense (Vue 3)
|
|
@@ -610,7 +616,7 @@ type Writable = IsWritable<typeof countAtom>; // → true | false
|
|
|
610
616
|
| -------------------------- | --------------------------------------------------------------------------------- |
|
|
611
617
|
| `@kdeveloper/kvark` | `atom`, `createStore`, all types |
|
|
612
618
|
| `@kdeveloper/kvark/react` | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext` |
|
|
613
|
-
| `@kdeveloper/kvark/vue` | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext` |
|
|
619
|
+
| `@kdeveloper/kvark/vue` | `Provider`, `useStore`, `useAtomValue`, `useSetAtom`, `useAtom`, `useAtomContext`; types `ThenableShallowRef`, `ThenableObservedShallowRef`, `ObservedValue` |
|
|
614
620
|
| `@kdeveloper/kvark/family` | `atomFamily`, `stableFamilyKey`, re-exports `atom` / `createStore` and core types |
|
|
615
621
|
|
|
616
622
|
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`.
|