From 0913cdb1ec902a48084e197916c3229a7a6346c5 Mon Sep 17 00:00:00 2001
From: Eric Kwoka <43540491+ekwoka@users.noreply.github.com>
Date: Wed, 18 Oct 2023 15:38:53 +0400
Subject: [PATCH] :bug: Fixes proxy stack setters bug (#3807)

* :bug: Fixes proxy stack setters bug

* :test_tube: Adds additional test for stack direction

* :white_check_mark: Fixes test
---
 packages/alpinejs/src/scope.js          | 14 +++---
 tests/cypress/integration/scope.spec.js | 58 +++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 tests/cypress/integration/scope.spec.js

diff --git a/packages/alpinejs/src/scope.js b/packages/alpinejs/src/scope.js
index 5a629b6ca..7028b5e96 100644
--- a/packages/alpinejs/src/scope.js
+++ b/packages/alpinejs/src/scope.js
@@ -64,14 +64,14 @@ let mergeProxyTrap = {
         )
     },
 
-    set({ objects }, name, value) {
-        return Reflect.set(
-            objects.find((obj) =>
+    set({ objects }, name, value, thisProxy) {
+        const target = objects.find((obj) =>
                 Object.prototype.hasOwnProperty.call(obj, name)
-            ) || objects[objects.length-1],
-            name,
-            value
-        )
+            ) || objects[objects.length - 1];
+        const descriptor = Object.getOwnPropertyDescriptor(target, name);
+        if (descriptor?.set && descriptor?.get)
+            return Reflect.set(target, name, value, thisProxy);
+        return Reflect.set(target, name, value);
     },
 }
 
diff --git a/tests/cypress/integration/scope.spec.js b/tests/cypress/integration/scope.spec.js
new file mode 100644
index 000000000..b5fcfbbf9
--- /dev/null
+++ b/tests/cypress/integration/scope.spec.js
@@ -0,0 +1,58 @@
+import { haveText, html, test } from "../utils";
+
+test(
+    "properly merges the datastack",
+    [
+        html`
+            <div x-data="{ foo: 'fizz' }">
+                <div x-data="{ bar: 'buzz' }">
+                    <span x-text="foo + bar"></span>
+                </div>
+            </div>
+        `,
+    ],
+    ({ get }) => {
+        get("span").should(haveText("fizzbuzz"));
+    }
+);
+
+test(
+    "merges stack from bottom up",
+    [
+        html`
+            <div x-data="{ foo: 'fizz' }">
+                <div x-data="{ foo: 'buzz', get bar() { return this.foo } }">
+                    <span id="one" x-text="bar + foo"></span>
+                </div>
+                <span id="two" x-text="foo"></span>
+            </div>
+        `,
+    ],
+    ({ get }) => {
+        get("span#one").should(haveText("buzzbuzz"));
+        get("span#two").should(haveText("fizz"));
+    }
+);
+
+test(
+    "handles getter setter pairs",
+    [
+        html`
+            <div x-data="{ foo: 'fizzbuzz' }">
+                <div
+                    x-data="{ get bar() { return this.foo }, set bar(value) { this.foo = value } }"
+                >
+                    <span id="one" x-text="bar" @click="bar = 'foobar'"></span>
+                </div>
+                <span id="two" x-text="foo"></span>
+            </div>
+        `,
+    ],
+    ({ get }) => {
+        get("span#one").should(haveText("fizzbuzz"));
+        get("span#two").should(haveText("fizzbuzz"));
+        get("span#one").click();
+        get("span#one").should(haveText("foobar"));
+        get("span#two").should(haveText("foobar"));
+    }
+);