feat!: biSyncRef renamed to syncRef, configable direction

.gitignore

@@ -9,3 +9,4 @@ packages/core/README.md
 types
 playgrounds/*/pnpm-lock.yaml
 components.d.ts
+*.log

package.json

@@ -27,7 +27,7 @@
     "test:watch": "vitest --watch",
     "typecheck": "tsc --noEmit",
     "types:fix": "esno scripts/fix-types.ts",
-    "update": "esno scripts/update.ts",
+    "update": "nr -C packages/metadata prepare && esno scripts/update.ts",
     "update:full": "nr update && nr build:types",
     "watch": "esno scripts/build.ts --watch"
   },

packages/shared/index.ts

@@ -1,5 +1,4 @@
 export * from './and'
-export * from './biSyncRef'
 export * from './controlledComputed'
 export * from './controlledRef'
 export * from './createEventHook'
@@ -25,6 +24,7 @@ export * from './reactivePick'
 export * from './refDefault'
 export * from './set'
 export * from './syncRef'
+export * from './syncRefs'
 export * from './throttledRef'
 export * from './throttledWatch'
 export * from './toReactive'

packages/shared/biSyncRef/demo.vue → packages/shared/syncRef/demo.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue-demi'
-import { biSyncRef } from '.'
+import { syncRef } from '.'
 
 const a = ref('')
 const b = ref('')
 
-biSyncRef(a, b)
+syncRef(a, b)
 </script>
 
 <template>

packages/shared/biSyncRef/index.md → packages/shared/syncRef/index.md

@@ -2,19 +2,19 @@
 category: Utilities
 ---
 
-# biSyncRef
+# syncRef
 
 Two-way refs synchronization.
 
 ## Usage
 
 ```ts
-import { biSyncRef } from '@vueuse/core'
+import { syncRef } from '@vueuse/core'
 
 const a = ref('a')
 const b = ref('b')
 
-const stop = biSyncRef(a, b)
+const stop = syncRef(a, b)
 
 console.log(a.value) // a
 
@@ -29,4 +29,4 @@ console.log(b.value) // bar
 
 ## Related Functions
 
-- `syncRef`
+- `syncRefs`

packages/shared/syncRef/index.test.ts

@@ -0,0 +1,50 @@
+import { ref } from 'vue-demi'
+import { syncRef } from '.'
+
+describe('syncRef', () => {
+  it('should work', () => {
+    const a = ref('foo')
+    const b = ref('bar')
+
+    const stop = syncRef(a, b)
+
+    expect(b.value).toBe('foo')
+
+    a.value = 'bar'
+
+    expect(a.value).toBe('bar')
+    expect(b.value).toBe('bar')
+
+    b.value = 'foo'
+
+    expect(a.value).toBe('foo')
+    expect(b.value).toBe('foo')
+
+    stop()
+
+    a.value = 'bar2'
+
+    expect(a.value).toBe('bar2')
+    expect(b.value).toBe('foo')
+  })
+
+  it('trl', () => {
+    const left = ref('left')
+    const right = ref('right')
+
+    const stop = syncRef(left, right, { direction: 'rtl' })
+
+    expect(left.value).toBe('right')
+    expect(right.value).toBe('right')
+
+    left.value = 'bar'
+
+    expect(left.value).toBe('bar')
+    expect(right.value).toBe('right')
+
+    right.value = 'foobar'
+
+    expect(left.value).toBe('foobar')
+    expect(right.value).toBe('foobar')
+  })
+})

packages/shared/syncRef/index.ts

@@ -0,0 +1,63 @@
+import type { Ref } from 'vue-demi'
+import { watch } from 'vue-demi'
+import type { ConfigurableFlushSync } from '../utils'
+
+export interface SyncRefOptions extends ConfigurableFlushSync {
+  /**
+   * Watch deeply
+   *
+   * @default false
+   */
+  deep?: boolean
+  /**
+   * Sync values immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+
+  /**
+   * Direction of syncing
+   *
+   * @default 'both'
+   */
+  direction?: 'ltr' | 'rtl' | 'both'
+}
+
+/**
+ * Two-way refs synchronization.
+ *
+ * @param left
+ * @param right
+ */
+export function syncRef<R extends Ref<any>>(left: R, right: R, options: SyncRefOptions = {}) {
+  const {
+    flush = 'sync',
+    deep = false,
+    immediate = true,
+    direction = 'both',
+  } = options
+
+  let stop1: Function, stop2: Function
+
+  if (direction === 'both' || direction === 'ltr') {
+    stop1 = watch(
+      left,
+      newValue => right.value = newValue,
+      { flush, deep, immediate },
+    )
+  }
+
+  if (direction === 'both' || direction === 'rtl') {
+    stop2 = watch(
+      right,
+      newValue => left.value = newValue,
+      { flush, deep, immediate },
+    )
+  }
+
+  return () => {
+    stop1?.()
+    stop2?.()
+  }
+}

packages/shared/syncRefs/index.ts

@@ -2,7 +2,7 @@ import type { Ref, WatchSource } from 'vue-demi'
 import { watch } from 'vue-demi'
 import type { ConfigurableFlushSync } from '../utils'
 
-export interface SyncRefOptions extends ConfigurableFlushSync {
+export interface SyncRefsOptions extends ConfigurableFlushSync {
   /**
    * Watch deeply
    *
@@ -26,11 +26,13 @@ export interface SyncRefOptions extends ConfigurableFlushSync {
 export function syncRefs<T>(
   source: WatchSource<T>,
   targets: Ref<T> | Ref<T>[],
-  {
+  options: SyncRefsOptions = {},
+) {
+  const {
     flush = 'sync',
     deep = false,
     immediate = true,
-  }: SyncRefOptions = {}) {
+  } = options
   if (!Array.isArray(targets))
     targets = [targets]