feat(monorepo): migrate vue packages and apply oxlint refactors

vue/toolkit/src/composables/reactivity/useSyncRefs/index.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { useSyncRefs } from '.';
+
+describe(useSyncRefs, () => {
+  it('sync the value of a source ref with multiple target refs', () => {
+    const source = ref(0);
+    const target1 = ref(0);
+    const target2 = ref(0);
+    useSyncRefs(source, [target1, target2]);
+
+    source.value = 10;
+
+    expect(target1.value).toBe(10);
+    expect(target2.value).toBe(10);
+  });
+
+  it('sync the value of a source ref with a single target ref', () => {
+    const source = ref(0);
+    const target = ref(0);
+    useSyncRefs(source, target);
+
+    source.value = 20;
+
+    expect(target.value).toBe(20);
+  });
+
+  it('stop watching when the stop handle is called', () => {
+    const source = ref(0);
+    const target = ref(0);
+    const stop = useSyncRefs(source, target);
+
+    source.value = 30;
+    stop();
+    source.value = 40;
+
+    expect(target.value).toBe(30);
+  });
+});

vue/toolkit/src/composables/reactivity/useSyncRefs/index.ts

@@ -0,0 +1,47 @@
+import { watch } from 'vue';
+import type { Ref, WatchOptions, WatchSource } from 'vue';
+import { isArray } from '@robonen/stdlib';
+
+/**
+ * @name useSyncRefs
+ * @category Reactivity
+ * @description Syncs the value of a source ref with multiple target refs
+ *
+ * @param {WatchSource<T>} source Source ref to sync
+ * @param {Ref<T> | Ref<T>[]} targets Target refs to sync
+ * @param {WatchOptions} watchOptions Watch options
+ * @returns {WatchStopHandle} Watch stop handle
+ *
+ * @example
+ * const source = ref(0);
+ * const target1 = ref(0);
+ * const target2 = ref(0);
+ * useSyncRefs(source, [target1, target2]);
+ *
+ * @example
+ * const source = ref(0);
+ * const target1 = ref(0);
+ * useSyncRefs(source, target1, { immediate: true });
+ *
+ * @since 0.0.1
+ */
+export function useSyncRefs<T = unknown>(
+  source: WatchSource<T>,
+  targets: Ref<T> | Ref<T>[],
+  watchOptions: WatchOptions = {},
+) {
+  const {
+    flush = 'sync',
+    deep = false,
+    immediate = true,
+  } = watchOptions;
+
+  if (!isArray(targets))
+    targets = [targets];
+
+  return watch(
+    source,
+    value => targets.forEach((target) => { target.value = value; }),
+    { flush, deep, immediate },
+  );
+}