🐛 Allows Class methods/props to be exposed as the root data component

alpinejs · Feb 15, 2024 · a5b2427 · a5b2427
1 parent 9501ba4
commit a5b2427
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git 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
@@ -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"));
+    }
+);
+