From ec11d59e22136a9a9c45895ba5a13967695895f8 Mon Sep 17 00:00:00 2001
From: Eric Kwoka <43540491+ekwoka@users.noreply.github.com>
Date: Sun, 18 Feb 2024 19:29:00 +0400
Subject: [PATCH] :bug: Allows Class methods/props to be exposed as the root
 data component (#4038)

---
 packages/alpinejs/src/scope.js          |  6 ++---
 tests/cypress/integration/scope.spec.js | 29 +++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/alpinejs/src/scope.js b/packages/alpinejs/src/scope.js
index 7028b5e96..e1f36feb5 100644
--- a/packages/alpinejs/src/scope.js
+++ b/packages/alpinejs/src/scope.js
@@ -48,7 +48,7 @@ let mergeProxyTrap = {
         if (name == Symbol.unscopables) return false;
 
         return objects.some((obj) =>
-            Object.prototype.hasOwnProperty.call(obj, name)
+            Reflect.has(obj, name)
         );
     },
 
@@ -57,7 +57,7 @@ let mergeProxyTrap = {
 
         return Reflect.get(
             objects.find((obj) =>
-                Object.prototype.hasOwnProperty.call(obj, name)
+                Reflect.has(obj, name)
             ) || {},
             name,
             thisProxy
@@ -66,7 +66,7 @@ let mergeProxyTrap = {
 
     set({ objects }, name, value, thisProxy) {
         const target = objects.find((obj) =>
-                Object.prototype.hasOwnProperty.call(obj, name)
+               Reflect.has(obj, name)
             ) || objects[objects.length - 1];
         const descriptor = Object.getOwnPropertyDescriptor(target, name);
         if (descriptor?.set && descriptor?.get)
diff --git a/tests/cypress/integration/scope.spec.js b/tests/cypress/integration/scope.spec.js
index b5fcfbbf9..3efa0d3fc 100644
--- a/tests/cypress/integration/scope.spec.js
+++ b/tests/cypress/integration/scope.spec.js
@@ -56,3 +56,32 @@ test(
         get("span#two").should(haveText("foobar"));
     }
 );
+
+test(
+    "allows accessing class methods",
+    [
+        html`
+            <script>
+                class Counter {
+                    value = 0;
+                    constructor() {}
+                    increment() {
+                        this.value++;
+                    }
+                }
+                document.addEventListener("alpine:init", () => 
+                    Alpine.data("counter", () => new Counter())
+                )
+            </script>
+            <div x-data="counter">
+                <button type="button" @click="increment" x-text=value></button>
+            </div>
+        `,
+    ],
+    ({ get }) => {
+        get("button").should(haveText("0"));
+        get("button").click();
+        get("button").should(haveText("1"));
+    }
+);
+