Improve Reactivity

package.json

@@ -20,6 +20,7 @@
         "@babel/preset-env": "^7.8.4",
         "@rollup/plugin-commonjs": "^11.0.2",
         "@rollup/plugin-multi-entry": "^3.0.0",
+        "@rollup/plugin-replace": "^2.3.1",
         "@testing-library/dom": "^6.12.2",
         "@testing-library/jest-dom": "^4.2.4",
         "@webcomponents/template": "^1.4.1",
@@ -32,6 +33,7 @@
         "element-remove": "^1.0.4",
         "jest": "^24.8.0",
         "jsdom-simulant": "^1.1.2",
+        "observable-membrane": "^0.26.1",
         "proxy-polyfill": "^0.3.0",
         "rollup": "^1.31.0",
         "rollup-plugin-babel": "^4.3.3",

rollup.config.js

@@ -1,8 +1,8 @@
 import babel from 'rollup-plugin-babel';
 import filesize from 'rollup-plugin-filesize';
-import { terser } from "rollup-plugin-terser";
 import resolve from "rollup-plugin-node-resolve"
 import stripCode from 'rollup-plugin-strip-code';
+import replace from '@rollup/plugin-replace';
 
 export default {
     input: 'src/index.js',
@@ -13,14 +13,10 @@ export default {
         sourcemap: true,
     },
     plugins: [
+        // 'observable-membrane' uses process.env. We don't have that...
+        replace({ "process.env.NODE_ENV": "'production'" }),
         resolve(),
         filesize(),
-        terser({
-            mangle: false,
-            compress: {
-                drop_debugger: false,
-            },
-        }),
         babel({
             exclude: 'node_modules/**'
         }),

src/component.js

@@ -1,10 +1,11 @@
-import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce, deepProxy } from './utils'
+import { walk, saferEval, saferEvalNoReturn, getXAttrs, debounce } from './utils'
 import { handleForDirective } from './directives/for'
 import { handleAttributeBindingDirective } from './directives/bind'
 import { handleShowDirective } from './directives/show'
 import { handleIfDirective } from './directives/if'
 import { registerModelListener } from './directives/model'
 import { registerListener } from './directives/on'
+import ObservableMembrane from 'observable-membrane'
 
 export default class Component {
     constructor(el, seedDataForCloning = null) {
@@ -25,7 +26,9 @@ export default class Component {
         /* IE11-ONLY:END */
 
         // Construct a Proxy-based observable. This will be used to handle reactivity.
-        this.$data = this.wrapDataInObservable(this.unobservedData)
+        let { membrane, data } = this.wrapDataInObservable(this.unobservedData)
+        this.$data = data
+        this.membrane = membrane
 
         // After making user-supplied data methods reactive, we can now add
         // our magic properties to the original data for access.
@@ -65,28 +68,25 @@ export default class Component {
     }
 
     getUnobservedData() {
-        let rawData = {}
+        let unwrappedData = this.membrane.unwrapProxy(this.$data)
+        let copy = {}
 
-        Object.keys(this.unobservedData).forEach(key => {
+        Object.keys(unwrappedData).forEach(key => {
             if (['$el', '$refs', '$nextTick'].includes(key)) return
 
-            rawData[key] = this.unobservedData[key]
+            copy[key] = unwrappedData[key]
         })
 
-        return rawData
+        return copy
     }
 
     wrapDataInObservable(data) {
         var self = this
 
-        const proxyHandler = {
-            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))
-
+        let membrane = new ObservableMembrane({
+            valueMutated(target, key) {
                 // Don't react to data changes for cases like the `x-created` hook.
-                if (self.pauseReactivity) return setWasSuccessful
+                if (self.pauseReactivity) return
 
                 debounce(() => {
                     self.updateElements(self.$el)
@@ -96,19 +96,13 @@ export default class Component {
                         self.nextTickStack.shift()()
                     }
                 }, 0)()
-
-                return setWasSuccessful
             },
-            get(target, key) {
-                // Provide a way to determine if this object is an Alpine proxy or not.
-                if (key === "$isAlpineProxy") return true
+        })
 
-                // Just return the flippin' value. Gawsh.
-                return target[key]
-            }
+        return {
+            data: membrane.getProxy(data),
+            membrane,
         }
-
-        return deepProxy(data, proxyHandler)
     }
 
     walkAndSkipNestedComponents(el, callback, initializeComponentCallback = () => {}) {

src/utils.js

@@ -361,42 +361,6 @@ export function transition(el, stages) {
     });
 }
 
-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.
-    for (let property in target) {
-        // Don't Proxy readonly properties.
-        if (propertyIsReadOnly(target, property)) continue
-
-        target[property] = deepProxy(target[property], proxyHandler)
-    }
-
-    return new Proxy(target, proxyHandler)
-}
-
-function propertyIsReadOnly(target, property) {
-    let propertyDescriptor = Object.getOwnPropertyDescriptor(target, property)
-
-    while (typeof propertyDescriptor === 'undefined' && target !== null) {
-        target = Object.getPrototypeOf(target)
-        propertyDescriptor = Object.getOwnPropertyDescriptor(target, property);
-    }
-
-    return propertyDescriptor && ! propertyDescriptor.writable
-}
-
 function isNumeric(subject){
     return ! isNaN(subject)
 }