Merge branch 'master' into feature/event-return-value

src/component.js

@@ -1,4 +1,4 @@
-import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils'
+import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, deepProxy } from './utils'
 import { handleForDirective } from './directives/for'
 import { handleAttributeBindingDirective } from './directives/bind'
 import { handleShowDirective } from './directives/show'
@@ -73,11 +73,9 @@ export default class Component {
 
         const proxyHandler = {
             set(obj, property, value) {
-                // If value is an Alpine proxy (i.e. an element returned when sorting a list of objects),
-                // we want to set the original element to avoid a matryoshka effect (nested proxies).
-                const setWasSuccessful = value['$isAlpineProxy']
-                    ? Reflect.set(obj, property, value['$originalTarget'])
-                    : Reflect.set(obj, property, value)
+                // Set the value converting it to a "Deep Proxy" when required
+                // Note that if a project is not a valid object, it won't be converted to a proxy
+                const setWasSuccessful = Reflect.set(obj, property, deepProxy(value, proxyHandler))
 
                 // Don't react to data changes for cases like the `x-created` hook.
                 if (self.pauseReactivity) return setWasSuccessful
@@ -97,28 +95,12 @@ export default class Component {
                 // Provide a way to determine if this object is an Alpine proxy or not.
                 if (key === "$isAlpineProxy") return true
 
-                // Provide a hook to access the underlying "proxied" data directly.
-                if (key === "$originalTarget") return target
-
-                // If the property we are trying to get is a proxy, just return it.
-                // Like in the case of $refs
-                if (target[key] && target[key].$isRefsProxy) return target[key]
-
-                // If property is a DOM node, just return it. (like in the case of this.$el)
-                if (target[key] && target[key] instanceof Node) return target[key]
-
-                // If accessing a nested property, return this proxy recursively.
-                // This enables reactivity on setting nested data.
-                if (typeof target[key] === 'object' && target[key] !== null) {
-                    return new Proxy(target[key], proxyHandler)
-                }
-
-                // If none of the above, just return the flippin' value. Gawsh.
+                // Just return the flippin' value. Gawsh.
                 return target[key]
             }
         }
 
-        return new Proxy(data, proxyHandler)
+        return deepProxy(data, proxyHandler)
     }
 
     walkAndSkipNestedComponents(el, callback, initializeComponentCallback = () => {}) {
@@ -327,7 +309,7 @@ export default class Component {
         // For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
         return new Proxy({}, {
             get(object, property) {
-                if (property === '$isRefsProxy') return true
+                if (property === '$isAlpineProxy') return true
 
                 var ref
 

src/utils.js

@@ -168,3 +168,26 @@ export function transition(el, classesDuring, classesStart, classesEnd, hook1, h
         })
     });
 }
+
+export function deepProxy(target, proxyHandler) {
+    // If target is null, return it.
+    if (target === null) return target;
+
+    // If target is not an object, return it.
+    if (typeof target !== 'object') return target;
+
+    // If target is a DOM node (like in the case of this.$el), return it.
+    if (target instanceof Node) return target
+
+    // If target is already an Alpine proxy, return it.
+    if (target['$isAlpineProxy']) return target;
+
+    // Otherwise proxy the properties recursively.
+    // This enables reactivity on setting nested data.
+    // Note that if a project is not a valid object, it won't be converted to a proxy
+    for (let property in target) {
+        target[property] = deepProxy(target[property], proxyHandler)
+    }
+
+    return new Proxy(target, proxyHandler)
+}