Make "el" not return a proxy

alpinejs · Jan 9, 2020 · 123e6ae · 123e6ae
1 parent 1ddb894
commit 123e6ae
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Think of it like [Tailwind](https://tailwindcss.com/) for JavaScript.
 
 **From CDN:** Add the following script to the end of your `<head>` section.
 ```html
-<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected].0/dist/alpine.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected].1/dist/alpine.js" defer></script>
 ```
 
 That's it. It will initialize itself.

diff --git a/dist/alpine.js b/dist/alpine.js
diff --git a/dist/alpine.js.map b/dist/alpine.js.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "main": "dist/alpine.js",
   "name": "alpinejs",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "repository": {
     "type": "git",
     "url": "git://github.com/alpinejs/alpine.git"

diff --git a/src/component.js b/src/component.js
@@ -86,6 +86,9 @@ export default class Component {
                 // Like in the case of $refs
                 if (target[key] && target[key].isProxy) 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, retur this proxy recursively.
                 if (typeof target[key] === 'object' && target[key] !== null) {
                     const propertyName = keyPrefix ? `${keyPrefix}.${key}` : key

diff --git a/test/el.spec.js b/test/el.spec.js
@@ -20,3 +20,22 @@ test('$el', async () => {
 
     await wait(() => { expect(document.querySelector('div').innerHTML).toEqual('foo') })
 })
+
+test('$el doesnt return a proxy', async () => {
+    var isProxy
+    window.setIsProxy = function (el) {
+        isProxy = !! el.isProxy
+    }
+
+    document.body.innerHTML = `
+        <div x-data>
+            <button @click="setIsProxy($el)"></button>
+        </div>
+    `
+
+    Alpine.start()
+
+    document.querySelector('button').click()
+
+    expect(isProxy).toEqual(false)
+})