feat(x-anchor): allow dynamic reference to be used with x-anchor (#4735)

* Add cypress anchor utils and update test spec

* feat(x-anchor): make reference dynamic by evaluating in effect API

* Include forgotten vertical anchoring assertion in util

* Review fixes: style cleanup, simplify test

- Remove semicolons to match project style
- Fix trailing whitespace
- Add missing newline at EOF
- Simplify test to check style.left changes instead of complex bounding rect math
- Remove unused beAnchoredTo/getBoundingRect utilities from utils.js
- Remove unused haveProperty import

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Caleb Porzio <calebporzio@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: 3 people

packages/anchor/src/index.js

@@ -13,37 +13,50 @@ export default function (Alpine) {
         }
     })
 
-    Alpine.directive('anchor', Alpine.skipDuringClone((el, { expression, modifiers, value }, { cleanup, evaluate }) => {
+    Alpine.directive('anchor', Alpine.skipDuringClone((el, { expression, modifiers, value }, { evaluate, effect, cleanup }) => {
         let { placement, offsetValue, unstyled } = getOptions(modifiers)
 
         el._x_anchor = Alpine.reactive({ x: 0, y: 0 })
 
-        let reference = evaluate(expression)
+        let previousReference = null
+        let release = null
 
-        if (! reference) throw 'Alpine: no element provided to x-anchor...'
+        let effector = effect(() => {
+            let reference = evaluate(expression)
+            if (! reference) throw 'Alpine: no element provided to x-anchor...'
 
-        let compute = () => {
-            let previousValue
+            if (previousReference !== reference) {
+                if (release) release()
 
-            computePosition(reference, el, {
-                placement,
-                middleware: [flip(), shift({padding: 5}), offset(offsetValue)],
-            }).then(({ x, y }) => {
-                unstyled || setStyles(el, x, y)
+                previousReference = reference
 
-                // Only trigger Alpine reactivity when the value actually changes...
-                if (JSON.stringify({ x, y }) !== previousValue) {
-                    el._x_anchor.x = x
-                    el._x_anchor.y = y
-                }
+                let compute = () => {
+                    let previousValue
 
-                previousValue = JSON.stringify({ x, y })
-            })
-        }
+                    computePosition(reference, el, {
+                        placement,
+                        middleware: [flip(), shift({padding: 5}), offset(offsetValue)],
+                    }).then(({ x, y }) => {
+                        unstyled || setStyles(el, x, y)
+
+                        // Only trigger Alpine reactivity when the value actually changes...
+                        if (JSON.stringify({ x, y }) !== previousValue) {
+                            el._x_anchor.x = x
+                            el._x_anchor.y = y
+                        }
+
+                        previousValue = JSON.stringify({ x, y })
+                    })
+                }
 
-        let release = autoUpdate(reference, el, () => compute())
+                release = autoUpdate(reference, el, () => compute())
+            }
+        })
 
-        cleanup(() => release())
+        cleanup(() => {
+            effector()
+            if (release) release()
+        })
     },
 
     // When cloning (or "morphing"), we will graft the style and position data from the live tree...

tests/cypress/integration/plugins/anchor.spec.js

@@ -11,3 +11,26 @@ test('can anchor an element',
         get('h1').should(haveComputedStyle('position', 'absolute'))
     },
 )
+
+test('can anchor to dynamic reference',
+    [html`
+        <div x-data="{ reference: null }" x-init="reference = document.getElementById('foo')">
+            <button id="foo">toggle foo</button>
+            <button id="bar" @click="reference = $el">toggle bar</button>
+            <h1 id="baz" x-anchor="reference">contents</h1>
+        </div>
+    `],
+    ({ get }) => {
+        let originalLeft
+
+        get('#baz').then($el => {
+            originalLeft = $el[0].style.left
+        })
+
+        get('#bar').click()
+
+        get('#baz').should($el => {
+            expect($el[0].style.left).not.to.eq(originalLeft)
+        })
+    }
+)