Merge branch 'master' into master

README.md

@@ -102,7 +102,7 @@ There are 13 directives available to you:
 | [`x-transition`](#x-transition) |
 | [`x-cloak`](#x-cloak) |
 
-And 3 magic properties:
+And 4 magic properties:
 
 | Magic Properties
 | --- |
@@ -407,9 +407,9 @@ These behave exactly like VueJs's transition directives, except they have differ
 ### `$refs`
 **Example:**
 ```html
-<span x-ref="foo">
+<span x-ref="foo"></span>
 
-<button x-on:click="$refs.foo.innerText = 'bar'">
+<button x-on:click="$refs.foo.innerText = 'bar'"></button>
 ```
 
 `$refs` is a magic property that can be used to retrieve DOM elements marked with `x-ref` inside the component. This is useful when you need to manually manipulate DOM elements.
@@ -452,7 +452,7 @@ You can also use `$dispatch()` to trigger data updates for `x-model` bindings. F
             $nextTick(() => { console.log($event.target.innerText) });
         "
         x-text="fruit"
-    >
+    ></button>
 </div>
 ```
 

src/component.js

@@ -76,7 +76,7 @@ export default class Component {
                 const setWasSuccessful = Reflect.set(obj, property, value)
 
                 // Don't react to data changes for cases like the `x-created` hook.
-                if (self.pauseReactivity) return
+                if (self.pauseReactivity) return setWasSuccessful
 
                 debounce(() => {
                     self.updateElements(self.$el)

src/directives/bind.js

@@ -49,7 +49,7 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             const newClasses = value.split(' ')
             el.setAttribute('class', arrayUnique(originalClasses.concat(newClasses)).join(' '))
         }
-    } else if (['disabled', 'readonly', 'required', 'checked', 'hidden'].includes(attrName)) {
+    } else if (['disabled', 'readonly', 'required', 'checked', 'hidden', 'selected'].includes(attrName)) {
         // Boolean attributes have to be explicitly added and removed, not just set.
         if (!! value) {
             el.setAttribute(attrName, '')

test/strict-mode.spec.js

@@ -0,0 +1,30 @@
+import Alpine from 'alpinejs'
+import { wait } from '@testing-library/dom'
+
+global.MutationObserver = class {
+    observe() {}
+}
+
+test('Proxy does not error in strict mode when reactivity is suspended', async () => {
+    "use strict"
+
+    global.statCounter = function () {
+        return {
+            count: 0,
+            init() {
+                this.count = 1200;
+            }
+        }
+    }
+    document.body.innerHTML = `
+        <div class="my-48">
+            <div x-data="statCounter()" x-init="init()">
+                <span x-text="count"></span>
+            </div>
+        </div>
+    `
+
+    Alpine.start()
+
+    await wait(() => { expect(document.querySelector('span').innerText).toEqual(1200) })
+})