refactor(packages/vue): make getter param possible for useCached and useCounter

packages/vue/src/composables/useCached/index.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { ref, nextTick } from 'vue';
+import { ref, nextTick, reactive } from 'vue';
 import { useCached } from '.';
 
 const arrayEquals = (a: number[], b: number[]) => a.length === b.length && a.every((v, i) => v === b[i]);
@@ -14,10 +14,6 @@ describe('useCached', () => {
     externalValue.value = 1;
     await nextTick();
     expect(cachedValue.value).toBe(1);
-
-    externalValue.value = 10;
-    await nextTick();
-    expect(cachedValue.value).toBe(10);
   });
 
   it('custom array comparator', async () => {
@@ -41,4 +37,15 @@ describe('useCached', () => {
     expect(cachedValue.value).not.toEqual(initialValue);
     expect(cachedValue.value).toEqual([2]);
   });
+
+  it('getter source', async () => {
+    const externalValue = reactive({ value: 0 });
+    const cachedValue = useCached(() => externalValue.value);
+
+    expect(cachedValue.value).toBe(0);
+
+    externalValue.value = 1;
+    await nextTick();
+    expect(cachedValue.value).toBe(1);
+  });
 });

packages/vue/src/composables/useCached/index.ts

@@ -1,4 +1,4 @@
-import { ref, watch, type Ref, type WatchOptions } from 'vue';
+import { ref, watch, toValue, type MaybeRefOrGetter, type Ref, type WatchOptions } from 'vue';
 
 export type Comparator<Value> = (a: Value, b: Value) => boolean;
 
@@ -21,13 +21,13 @@ export type Comparator<Value> = (a: Value, b: Value) => boolean;
  * const cachedValue = useCached(externalValue, (a, b) => a === b, { immediate: true });
  */
 export function useCached<Value = unknown>(
-    externalValue: Ref<Value>,
+    externalValue: MaybeRefOrGetter<Value>,
     comparator: Comparator<Value> = (a, b) => a === b,
     watchOptions?: WatchOptions,
 ): Ref<Value> {
-    const cached = ref(externalValue.value) as Ref<Value>;
+    const cached = ref(toValue(externalValue)) as Ref<Value>;
 
-    watch(() => externalValue.value, (value) => {
+    watch(() => toValue(externalValue), (value) => {
         if (!comparator(value, cached.value))
             cached.value = value;
     }, watchOptions);

packages/vue/src/composables/useCounter/index.test.ts

@@ -13,6 +13,11 @@ describe('useCounter', () => {
     expect(count.value).toBe(5);
   });
 
+  it('initialize count with the provided initial value from a getter', () => {
+    const { count } = useCounter(() => 5);
+    expect(count.value).toBe(5);
+  });
+
   it('increment count by 1 by default', () => {
     const { count, increment } = useCounter(0);
     increment();

packages/vue/src/composables/useCounter/index.ts

@@ -1,4 +1,4 @@
-import { ref, unref, type MaybeRef, type Ref } from 'vue';
+import { ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue';
 import { clamp } from '@robonen/stdlib';
 
 export interface UseCounterOptions {
@@ -33,11 +33,11 @@ export interface UseConterReturn {
  * const { count, increment, decrement, set, get, reset } = useCounter(0, { min: 0, max: 10 });
  */
 export function useCounter(
-    initialValue: MaybeRef<number> = 0,
+    initialValue: MaybeRefOrGetter<number> = 0,
     options: UseCounterOptions = {},
 ): UseConterReturn {
-    let _initialValue = unref(initialValue);
+    let _initialValue = toValue(initialValue);
-    const count = ref(initialValue);
+    const count = ref(_initialValue);
 
     const {
         min = Number.MIN_SAFE_INTEGER,