fix(syncRef): avoid infinite sync

packages/shared/syncRef/index.test.ts

@@ -51,26 +51,26 @@ describe('syncRef', () => {
 
   it('works with mutual convertors', () => {
     const left = ref(10)
-    const right = ref(1)
+    const right = ref(2)
 
     syncRef(left, right, {
       transform: {
         ltr: left => left * 2,
-        rtl: right => Math.round(right / 2),
+        rtl: right => Math.floor(right / 3),
       },
     })
 
     // check immediately sync
     expect(right.value).toBe(20)
-    expect(left.value).toBe(10)
+    expect(left.value).toBe(6)
 
     left.value = 30
     expect(right.value).toBe(60)
     expect(left.value).toBe(30)
 
     right.value = 10
     expect(right.value).toBe(10)
-    expect(left.value).toBe(5)
+    expect(left.value).toBe(3)
   })
 
   it('works with only rtl convertor', () => {

packages/shared/syncRef/index.ts

@@ -50,21 +50,37 @@ export function syncRef<L, R = L>(left: Ref<L>, right: Ref<R>, options: SyncRefO
   let watchLeft: WatchStopHandle
   let watchRight: WatchStopHandle
 
+  let stop = false
+
   const transformLTR = transform.ltr ?? (v => v)
   const transformRTL = transform.rtl ?? (v => v)
 
   if (direction === 'both' || direction === 'ltr') {
     watchLeft = watch(
       left,
-      newValue => right.value = transformLTR(newValue) as R,
+      (newValue) => {
+        if (stop)
+          return
+
+        stop = true
+        right.value = transformLTR(newValue) as R
+        stop = false
+      },
       { flush, deep, immediate },
     )
   }
 
   if (direction === 'both' || direction === 'rtl') {
     watchRight = watch(
       right,
-      newValue => left.value = transformRTL(newValue) as L,
+      (newValue) => {
+        if (stop)
+          return
+
+        stop = true
+        left.value = transformRTL(newValue) as L
+        stop = false
+      },
       { flush, deep, immediate },
     )
   }