create-adaptable-composable

1# Create Adaptable Composable
2 
3Adaptable composables are reusable functions that can accept both reactive and non-reactive inputs. This allows developers to use the composable in a variety of contexts without worrying about the reactivity of the inputs.
4 
5Steps to design an adaptable composable in Vue.js:
61. Confirm the composable's purpose and API design and expected inputs/outputs.
72. Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter).
83. Use `toValue()` or `toRef()` to normalize inputs inside reactive effects.
94. Implement the core logic of the composable using Vue's reactivity APIs.
10 
11## Core Type Concepts
12 
13### Type Utilities
14 
15```ts
16/**
17 * value or writable ref (value/ref/shallowRef/writable computed)
18 */
19export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;
20 
21/**
22 * MaybeRef<T> + ComputedRef<T> + () => T
23 */
24export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);
25```
26 
27### Policy and Rules
28 
29- Read-only, computed-friendly input: use `MaybeRefOrGetter`
30- Needs to be writable / two-way input: use `MaybeRef`
31- Parameter might be a function value (callback/predicate/comparator): do not use `MaybeRefOrGetter`, or you may accidentally invoke it as a getter.
32- DOM/Element targets: if you want computed/derived targets, use `MaybeRefOrGetter`.
33 
34When `MaybeRefOrGetter` or `MaybeRef` is used: 
35- resolve reactive value using `toRef()` (e.g. watcher source)
36- resolve non-reactive value using `toValue()`
37…