|
|
@@ -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'
|
|
|
@@ -81,11 +81,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
|
|
|
@@ -105,28 +103,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 = () => {}) {
|
|
|
@@ -268,7 +250,7 @@ export default class Component {
|
|
|
}
|
|
|
|
|
|
evaluateCommandExpression(el, expression, extraVars = () => {}) {
|
|
|
- saferEvalNoReturn(expression, this.$data, {
|
|
|
+ return saferEvalNoReturn(expression, this.$data, {
|
|
|
...extraVars(),
|
|
|
$dispatch: this.getDispatchFunction(el),
|
|
|
})
|
|
|
@@ -353,7 +335,7 @@ export default class Component {
|
|
|
// For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
|
|
|
return new Proxy(refObj, {
|
|
|
get(object, property) {
|
|
|
- if (property === '$isRefsProxy') return true
|
|
|
+ if (property === '$isAlpineProxy') return true
|
|
|
|
|
|
var ref
|
|
|
|
Keyur Shah