wip

src/component.js

@@ -73,15 +73,11 @@ export default class Component {
 
         const proxyHandler = {
             set(obj, property, value) {
-                let setWasSuccessful = false
-
                 // 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). :)
-                if (value['$isProxy']) {
-                    setWasSuccessful = Reflect.set(obj, property, value['$originalTarget'])
-                } else {
-                    setWasSuccessful = Reflect.set(obj, property, value)
-                }
+                // 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)
 
                 // Don't react to data changes for cases like the `x-created` hook.
                 if (self.pauseReactivity) return setWasSuccessful
@@ -98,17 +94,15 @@ export default class Component {
                 return setWasSuccessful
             },
             get(target, key) {
-                if (key === "$isProxy") {
-                    return true;
-                }
+                // Provide a way to determine if this object is an Alpine proxy or not.
+                if (key === "$isAlpineProxy") return true
 
-                if (key === "$originalTarget") {
-                    return target;
-                }
+                // 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 (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]
@@ -333,7 +327,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 === '$isRefsProxy') return true
 
                 var ref
 

test/data.spec.js

@@ -1,5 +1,5 @@
 import Alpine from 'alpinejs'
-import { fireEvent, wait } from '@testing-library/dom'
+import { wait } from '@testing-library/dom'
 
 global.MutationObserver = class {
     observe() {}
@@ -64,40 +64,21 @@ test('functions in x-data are reactive', async () => {
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('baz') })
 })
 
-test('Proxy are not nested and duplicated when manipulating an array', async () => {
+test('Proxies are not nested and duplicated when manipulating an array', async () => {
     const util = require('util')
 
     document.body.innerHTML = `
-        <div id="A" x-data="{ list: [ {name: 'foo'}, {name: 'bar'} ] }">
+        <div x-data="{ list: [ {name: 'foo'}, {name: 'bar'} ] }">
             <span x-text="list[0].name"></span>
             <button x-on:click="list.sort((a, b) => (a.name > b.name) ? 1 : -1)"></button>
         </div>
     `
+
     Alpine.start()
 
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('foo') })
 
-    // Getters should return a proxy when the element is an object so we don't break reactivity
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[0])).toEqual(true)
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[1])).toEqual(true)
-    // Control values '$isProxy' should be set to true
-    expect(document.querySelector('#A').__x.$data.list[0].$isProxy).toEqual(true)
-    expect(document.querySelector('#A').__x.$data.list[1].$isProxy).toEqual(true)
-    // Original values should not be proxies.
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[0].$originalTarget)).toEqual(false)
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[1].$originalTarget)).toEqual(false)
-
-    // Reorder
     document.querySelector('button').click()
-    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 
-    // Getters should return a proxy when the element is an object so we don't break reactivity
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[0])).toEqual(true)
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[1])).toEqual(true)
-    // Control values '$isProxy' should still be set to true
-    expect(document.querySelector('#A').__x.$data.list[0].$isProxy).toEqual(true)
-    expect(document.querySelector('#A').__x.$data.list[1].$isProxy).toEqual(true)
-    // Original values should not be proxies.
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[0].$originalTarget)).toEqual(false)
-    expect(util.types.isProxy(document.querySelector('#A').__x.$data.list[1].$originalTarget)).toEqual(false)
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 })