Message code & build assets.

dist/alpine-ie11.js

@@ -7186,6 +7186,34 @@
 
               return callback(target[key]);
             }.bind(this));
+          } else if (Array.isArray(target)) {
+            // Arrays are special cases, if any of the items change, we consider the array as mutated.
+            Object.keys(self.watchers).forEach(function (fullDotNotationKey) {
+              var _this5 = this;
+
+              _newArrowCheck(this, _this4);
+
+              var dotNotationParts = fullDotNotationKey.split('.'); // Ignore length mutations since they would result in duplicate calls.
+              // For example, when calling push, we would get a mutation for the item's key
+              // and a second mutation for the length property.
+
+              if (key === 'length') return;
+              dotNotationParts.reduce(function (comparisonData, part) {
+                var _this6 = this;
+
+                _newArrowCheck(this, _this5);
+
+                if (Object.is(target, comparisonData[part])) {
+                  self.watchers[fullDotNotationKey].forEach(function (callback) {
+                    _newArrowCheck(this, _this6);
+
+                    return callback(target);
+                  }.bind(this));
+                }
+
+                return comparisonData[part];
+              }.bind(this), self.getUnobservedData());
+            }.bind(this));
           } else {
             // Let's walk through the watchers with "dot-notation" (foo.bar) and see
             // if this mutation fits any of them.
@@ -7194,7 +7222,7 @@
 
               return i.includes('.');
             }.bind(this)).forEach(function (fullDotNotationKey) {
-              var _this5 = this;
+              var _this7 = this;
 
               _newArrowCheck(this, _this4);
 
@@ -7205,14 +7233,14 @@
               // a match, and call the watcher if one's found.
 
               dotNotationParts.reduce(function (comparisonData, part) {
-                var _this6 = this;
+                var _this8 = this;
 
-                _newArrowCheck(this, _this5);
+                _newArrowCheck(this, _this7);
 
                 if (Object.is(target, comparisonData)) {
                   // Run the watchers.
                   self.watchers[fullDotNotationKey].forEach(function (callback) {
-                    _newArrowCheck(this, _this6);
+                    _newArrowCheck(this, _this8);
 
                     return callback(target[key]);
                   }.bind(this));
@@ -7231,13 +7259,13 @@
     }, {
       key: "walkAndSkipNestedComponents",
       value: function walkAndSkipNestedComponents(el, callback) {
-        var _this7 = this;
+        var _this9 = this;
 
         var initializeComponentCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-          _newArrowCheck(this, _this7);
+          _newArrowCheck(this, _this9);
         }.bind(this);
         walk(el, function (el) {
-          _newArrowCheck(this, _this7);
+          _newArrowCheck(this, _this9);
 
           // We've hit a component.
           if (el.hasAttribute('x-data')) {
@@ -7256,13 +7284,13 @@
     }, {
       key: "initializeElements",
       value: function initializeElements(rootEl) {
-        var _this8 = this;
+        var _this10 = this;
 
         var extraVars = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
-          _newArrowCheck(this, _this8);
+          _newArrowCheck(this, _this10);
         }.bind(this);
         this.walkAndSkipNestedComponents(rootEl, function (el) {
-          _newArrowCheck(this, _this8);
+          _newArrowCheck(this, _this10);
 
           // Don't touch spawns from for loop
           if (el.__x_for_key !== undefined) return false; // Don't touch spawns from if directives
@@ -7270,7 +7298,7 @@
           if (el.__x_inserted_me !== undefined) return false;
           this.initializeElement(el, extraVars);
         }.bind(this), function (el) {
-          _newArrowCheck(this, _this8);
+          _newArrowCheck(this, _this10);
 
           el.__x = new Component(el);
         }.bind(this));
@@ -7292,19 +7320,19 @@
     }, {
       key: "updateElements",
       value: function updateElements(rootEl) {
-        var _this9 = this;
+        var _this11 = this;
 
         var extraVars = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
-          _newArrowCheck(this, _this9);
+          _newArrowCheck(this, _this11);
         }.bind(this);
         this.walkAndSkipNestedComponents(rootEl, function (el) {
-          _newArrowCheck(this, _this9);
+          _newArrowCheck(this, _this11);
 
           // Don't touch spawns from for loop (and check if the root is actually a for loop in a parent, don't skip it.)
           if (el.__x_for_key !== undefined && !el.isSameNode(this.$el)) return false;
           this.updateElement(el, extraVars);
         }.bind(this), function (el) {
-          _newArrowCheck(this, _this9);
+          _newArrowCheck(this, _this11);
 
           el.__x = new Component(el);
         }.bind(this));
@@ -7314,14 +7342,14 @@
     }, {
       key: "executeAndClearNextTickStack",
       value: function executeAndClearNextTickStack(el) {
-        var _this10 = this;
+        var _this12 = this;
 
         // Skip spawns from alpine directives
         if (el === this.$el && this.nextTickStack.length > 0) {
           // We run the tick stack after the next frame to allow any
           // running transitions to pass the initial show stage.
           requestAnimationFrame(function () {
-            _newArrowCheck(this, _this10);
+            _newArrowCheck(this, _this12);
 
             while (this.nextTickStack.length > 0) {
               this.nextTickStack.shift()();
@@ -7332,45 +7360,45 @@
     }, {
       key: "executeAndClearRemainingShowDirectiveStack",
       value: function executeAndClearRemainingShowDirectiveStack() {
-        var _this11 = this;
+        var _this13 = this;
 
         // The goal here is to start all the x-show transitions
         // and build a nested promise chain so that elements
         // only hide when the children are finished hiding.
         this.showDirectiveStack.reverse().map(function (thing) {
-          var _this12 = this;
+          var _this14 = this;
 
-          _newArrowCheck(this, _this11);
+          _newArrowCheck(this, _this13);
 
           return new Promise(function (resolve) {
-            var _this13 = this;
+            var _this15 = this;
 
-            _newArrowCheck(this, _this12);
+            _newArrowCheck(this, _this14);
 
             thing(function (finish) {
-              _newArrowCheck(this, _this13);
+              _newArrowCheck(this, _this15);
 
               resolve(finish);
             }.bind(this));
           }.bind(this));
         }.bind(this)).reduce(function (nestedPromise, promise) {
-          var _this14 = this;
+          var _this16 = this;
 
-          _newArrowCheck(this, _this11);
+          _newArrowCheck(this, _this13);
 
           return nestedPromise.then(function () {
-            var _this15 = this;
+            var _this17 = this;
 
-            _newArrowCheck(this, _this14);
+            _newArrowCheck(this, _this16);
 
             return promise.then(function (finish) {
-              _newArrowCheck(this, _this15);
+              _newArrowCheck(this, _this17);
 
               return finish();
             }.bind(this));
           }.bind(this));
         }.bind(this), Promise.resolve(function () {
-          _newArrowCheck(this, _this11);
+          _newArrowCheck(this, _this13);
         }.bind(this))); // We've processed the handler stack. let's clear it.
 
         this.showDirectiveStack = [];
@@ -7384,10 +7412,10 @@
     }, {
       key: "registerListeners",
       value: function registerListeners(el, extraVars) {
-        var _this16 = this;
+        var _this18 = this;
 
         getXAttrs(el, this).forEach(function (_ref5) {
-          _newArrowCheck(this, _this16);
+          _newArrowCheck(this, _this18);
 
           var type = _ref5.type,
               value = _ref5.value,
@@ -7408,15 +7436,15 @@
     }, {
       key: "resolveBoundAttributes",
       value: function resolveBoundAttributes(el) {
-        var _this17 = this;
+        var _this19 = this;
 
         var initialUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
         var extraVars = arguments.length > 2 ? arguments[2] : undefined;
         var attrs = getXAttrs(el, this);
         attrs.forEach(function (_ref6) {
-          var _this18 = this;
+          var _this20 = this;
 
-          _newArrowCheck(this, _this17);
+          _newArrowCheck(this, _this19);
 
           var type = _ref6.type,
               value = _ref6.value,
@@ -7452,7 +7480,7 @@
               // If this element also has x-for on it, don't process x-if.
               // We will let the "x-for" directive handle the "if"ing.
               if (attrs.some(function (i) {
-                _newArrowCheck(this, _this18);
+                _newArrowCheck(this, _this20);
 
                 return i.type === 'for';
               }.bind(this))) return;
@@ -7473,10 +7501,10 @@
     }, {
       key: "evaluateReturnExpression",
       value: function evaluateReturnExpression(el, expression) {
-        var _this19 = this;
+        var _this21 = this;
 
         var extraVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-          _newArrowCheck(this, _this19);
+          _newArrowCheck(this, _this21);
         }.bind(this);
         return saferEval(expression, this.$data, _objectSpread2(_objectSpread2({}, extraVars()), {}, {
           $dispatch: this.getDispatchFunction(el)
@@ -7485,10 +7513,10 @@
     }, {
       key: "evaluateCommandExpression",
       value: function evaluateCommandExpression(el, expression) {
-        var _this20 = this;
+        var _this22 = this;
 
         var extraVars = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-          _newArrowCheck(this, _this20);
+          _newArrowCheck(this, _this22);
         }.bind(this);
         return saferEvalNoReturn(expression, this.$data, _objectSpread2(_objectSpread2({}, extraVars()), {}, {
           $dispatch: this.getDispatchFunction(el)
@@ -7508,7 +7536,7 @@
     }, {
       key: "listenForNewElementsToInitialize",
       value: function listenForNewElementsToInitialize() {
-        var _this21 = this;
+        var _this23 = this;
 
         var targetNode = this.$el;
         var observerOptions = {
@@ -7517,9 +7545,9 @@
           subtree: true
         };
         var observer = new MutationObserver(function (mutations) {
-          var _this22 = this;
+          var _this24 = this;
 
-          _newArrowCheck(this, _this21);
+          _newArrowCheck(this, _this23);
 
           for (var i = 0; i < mutations.length; i++) {
             // Filter out mutations triggered from child components.
@@ -7528,16 +7556,16 @@
 
             if (mutations[i].type === 'attributes' && mutations[i].attributeName === 'x-data') {
               (function () {
-                var _this23 = this;
+                var _this25 = this;
 
                 var rawData = saferEval(mutations[i].target.getAttribute('x-data') || '{}', {
-                  $el: _this22.$el
+                  $el: _this24.$el
                 });
                 Object.keys(rawData).forEach(function (key) {
-                  _newArrowCheck(this, _this23);
+                  _newArrowCheck(this, _this25);
 
-                  if (_this22.$data[key] !== rawData[key]) {
-                    _this22.$data[key] = rawData[key];
+                  if (_this24.$data[key] !== rawData[key]) {
+                    _this24.$data[key] = rawData[key];
                   }
                 }.bind(this));
               })();
@@ -7545,7 +7573,7 @@
 
             if (mutations[i].addedNodes.length > 0) {
               mutations[i].addedNodes.forEach(function (node) {
-                _newArrowCheck(this, _this22);
+                _newArrowCheck(this, _this24);
 
                 if (node.nodeType !== 1 || node.__x_inserted_me) return;
 
@@ -7564,7 +7592,7 @@
     }, {
       key: "getRefsProxy",
       value: function getRefsProxy() {
-        var _this24 = this;
+        var _this26 = this;
 
         var self = this;
         var refObj = {};
@@ -7576,7 +7604,7 @@
         // we just loop on the element, look for any x-ref and create a tmp property on a fake object.
 
         this.walkAndSkipNestedComponents(self.$el, function (el) {
-          _newArrowCheck(this, _this24);
+          _newArrowCheck(this, _this26);
 
           if (el.hasAttribute('x-ref')) {
             refObj[el.getAttribute('x-ref')] = true;
@@ -7590,14 +7618,14 @@
 
         return new Proxy(refObj, {
           get: function get(object, property) {
-            var _this25 = this;
+            var _this27 = this;
 
             if (property === '$isAlpineProxy') return true;
             var ref; // We can't just query the DOM because it's hard to filter out refs in
             // nested components.
 
             self.walkAndSkipNestedComponents(self.$el, function (el) {
-              _newArrowCheck(this, _this25);
+              _newArrowCheck(this, _this27);
 
               if (el.hasAttribute('x-ref') && el.getAttribute('x-ref') === property) {
                 ref = el;

dist/alpine.js

@@ -1480,6 +1480,22 @@
         if (self.watchers[key]) {
           // If there's a watcher for this specific key, run it.
           self.watchers[key].forEach(callback => callback(target[key]));
+        } else if (Array.isArray(target)) {
+          // Arrays are special cases, if any of the items change, we consider the array as mutated.
+          Object.keys(self.watchers).forEach(fullDotNotationKey => {
+            let dotNotationParts = fullDotNotationKey.split('.'); // Ignore length mutations since they would result in duplicate calls.
+            // For example, when calling push, we would get a mutation for the item's key
+            // and a second mutation for the length property.
+
+            if (key === 'length') return;
+            dotNotationParts.reduce((comparisonData, part) => {
+              if (Object.is(target, comparisonData[part])) {
+                self.watchers[fullDotNotationKey].forEach(callback => callback(target));
+              }
+
+              return comparisonData[part];
+            }, self.getUnobservedData());
+          });
         } else {
           // Let's walk through the watchers with "dot-notation" (foo.bar) and see
           // if this mutation fits any of them.

src/component.js

@@ -114,27 +114,25 @@ export default class Component {
         }, 0)
 
         return wrap(data, (target, key) => {
-            const isArray = Array.isArray(target)
             if (self.watchers[key]) {
                 // If there's a watcher for this specific key, run it.
                 self.watchers[key].forEach(callback => callback(target[key]))
-            } else if (isArray) {
-                // Array are special cases, if any of the element changes, we consider the array as mutated.
-                // Key is not relevant since it's going to be the item index
+            } else if (Array.isArray(target)) {
+                // Arrays are special cases, if any of the items change, we consider the array as mutated.
                 Object.keys(self.watchers)
                     .forEach(fullDotNotationKey => {
                         let dotNotationParts = fullDotNotationKey.split('.')
 
-                        // Ignore length mutations since they would result in duplicate calls
-                        // For example, when calling push, we would get a mutation for the item
-                        // and a second mutation for the length property
+                        // Ignore length mutations since they would result in duplicate calls.
+                        // For example, when calling push, we would get a mutation for the item's key
+                        // and a second mutation for the length property.
                         if (key === 'length') return
 
                         dotNotationParts.reduce((comparisonData, part) => {
                             if (Object.is(target, comparisonData[part])) {
-                                // Run the watchers.
                                 self.watchers[fullDotNotationKey].forEach(callback => callback(target))
                             }
+
                             return comparisonData[part]
                         }, self.getUnobservedData())
                     })