fix: watch for returned value changes

fixes: #46

Author: Djaler

packages/core/src/useRouteQuery.ts

@@ -1,9 +1,10 @@
-import { computed, Ref } from 'vue-demi';
+import { computed, reactive, Ref, watch } from 'vue-demi';
 
 import { useRoute, useRouter } from './helpers';
 import { queueQueryUpdate } from './queue-query-update';
 import { RouteQueryTransformer } from './transformers';
 import { RouteQuery } from './types';
+import { isObject } from './utils';
 
 export function useRouteQuery(key: string, defaultValue: string): Ref<string>;
 export function useRouteQuery(key: string, defaultValue: string | null): Ref<string | null>;
@@ -16,39 +17,60 @@ export function useRouteQuery<T>(key: string, defaultValue: T, transformer?: Rou
         queueQueryUpdate(router, route.value.query, key, newValue);
     }
 
-    return computed({
-        get() {
-            if (!(key in route.value.query)) {
-                return defaultValue;
-            }
+    function get(): T {
+        if (!(key in route.value.query)) {
+            return defaultValue;
+        }
 
-            const value = getQueryValue(route.value.query, key);
+        const value = getQueryValue(route.value.query, key);
 
-            if (!value) {
-                return defaultValue;
-            }
+        if (!value) {
+            return defaultValue;
+        }
 
-            if (!transformer) {
-                // we know for sure that the value is a T (really a string) here if transformer is not provided
-                return value as unknown as T;
-            }
+        if (!transformer) {
+            // we know for sure that the value is a T (really a string) here if transformer is not provided
+            return value as unknown as T;
+        }
 
-            const transformedValue = transformer.fromQuery(value);
-            if (transformedValue === undefined) {
-                return defaultValue;
-            }
+        const transformedValue = transformer.fromQuery(value);
+        if (transformedValue === undefined) {
+            return defaultValue;
+        }
+
+        return transformedValue;
+    }
 
-            return transformedValue;
+    function set(value: T) {
+        if (!transformer) {
+            // we know for sure that the value is a string or null here if transformer is not provided
+            updateQueryParam(value as unknown as string | null);
+            return;
+        }
+
+        const transformedValue = transformer.toQuery(value ?? undefined);
+        updateQueryParam(transformedValue);
+    }
+
+    let valueWatchStopHandle: (() => void) | undefined;
+
+    return computed({
+        get() {
+            const value = get();
+            if (isObject(value)) {
+                const reactiveValue = reactive(value) as T & object;
+                valueWatchStopHandle?.();
+                valueWatchStopHandle = watch(reactiveValue, (newValue) => {
+                    set(newValue);
+                });
+                return reactiveValue;
+            }
+            return value;
         },
         set(value) {
-            if (!transformer) {
-                // we know for sure that the value is a string or null here if transformer is not provided
-                updateQueryParam(value as unknown as string | null);
-                return;
-            }
+            valueWatchStopHandle?.();
 
-            const transformedValue = transformer.toQuery(value ?? undefined);
-            updateQueryParam(transformedValue);
+            set(value);
         },
     });
 }

packages/core/src/utils.ts

@@ -8,3 +8,7 @@ export function removeEmptyValues<T extends Record<string, any>>(object: T): T {
 function isEmpty(value: any): boolean {
     return value === null || value === undefined || value === '';
 }
+
+export function isObject(value: any): value is object {
+    return typeof value === 'object' && value !== null;
+}

packages/tests-base/index.ts

@@ -142,6 +142,50 @@ export function testUseRouteQuery(
         expect(query.foo).toBe('FOO');
         expect(query.bar).toBe('BAR');
     });
+
+    it('should update query after changes in returned array', async () => {
+        const transformer: RouteQueryTransformer<string[]> = {
+            fromQuery(value: string): string[] | undefined {
+                return value?.split(',');
+            },
+            toQuery(value: string[] | undefined): string | undefined {
+                return value?.join(',');
+            },
+        };
+
+        const { result } = mountComposition(() => useRouteQuery('array', [], transformer));
+
+        result.value.push('foo');
+        result.value.push('bar');
+        await flushPromises();
+
+        expect(getCurrentQuery().array).toBe('foo,bar');
+
+        result.value = ['baz'];
+        await flushPromises();
+
+        expect(getCurrentQuery().array).toBe('baz');
+    });
+
+    it('should not react on returned array changes if it was reassigned', async () => {
+        const transformer: RouteQueryTransformer<string[]> = {
+            fromQuery(value: string): string[] | undefined {
+                return value?.split(',');
+            },
+            toQuery(value: string[] | undefined): string | undefined {
+                return value?.join(',');
+            },
+        };
+
+        const { result } = mountComposition(() => useRouteQuery('array', [], transformer));
+
+        const array = result.value;
+        result.value = ['foo', 'bar'];
+        array.push('baz');
+        await flushPromises();
+
+        expect(getCurrentQuery().array).toBe('foo,bar');
+    });
 }
 
 function flushPromises(): Promise<void> {