Revert to more conservative strategy

src/utils.js

@@ -58,15 +58,26 @@ export function debounce(func, wait) {
 }
 
 export function saferEval(expression, dataContext, additionalHelperVariables = {}) {
-    return (new Function(['$data', '$extras'], `var result; with($extras) { with($data) { result = ${expression} } }; return result`))(
-        dataContext, additionalHelperVariables
+    return (new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`))(
+        dataContext, ...Object.values(additionalHelperVariables)
     )
 }
 
 export function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {
-    if (! expression) expression = 'undefined'
-    return (new Function(['$data', '$extras'], `with ($extras) { var result; with($data) { result = ${expression} }; if (typeof result === 'function') { if (typeof $event !== 'undefined') { result($event); } else { result(); } } };`))(
-        dataContext, additionalHelperVariables
+    // For the cases when users pass only a function reference to the caller: `x-on:click="foo"`
+    // Where "foo" is a function. Also, we'll pass the function the event instance when we call it.
+    if (Object.keys(dataContext).includes(expression)) {
+        let methodReference = (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { return ${expression} }`))(
+            dataContext, ...Object.values(additionalHelperVariables)
+        )
+
+        if (typeof methodReference === 'function') {
+            return methodReference.call(dataContext, additionalHelperVariables['$event'])
+        }
+    }
+
+    return (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`))(
+        dataContext, ...Object.values(additionalHelperVariables)
     )
 }
 

test/on.spec.js

@@ -348,7 +348,6 @@ test('event with colon', async () => {
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
 
-
 test('prevent default action when an event returns false', async () => {
     window.confirm = jest.fn().mockImplementation(() => false)
 
@@ -372,3 +371,41 @@ test('prevent default action when an event returns false', async () => {
 
     expect(document.querySelector('input').checked).toEqual(true)
 })
+
+test('allow method reference to be passed to listeners', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar', changeFoo() { this.foo = 'baz' } }">
+            <button x-on:click="changeFoo"></button>
+            <span x-text="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('bar')
+
+    document.querySelector('button').click()
+
+    await new Promise(resolve => setTimeout(resolve, 1))
+
+    expect(document.querySelector('span').innerText).toEqual('baz')
+})
+
+test('event instance is passed to method reference', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar', changeFoo(e) { this.foo = e.target.id } }">
+            <button x-on:click="changeFoo" id="baz"></button>
+            <span x-text="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').innerText).toEqual('bar')
+
+    document.querySelector('button').click()
+
+    await new Promise(resolve => setTimeout(resolve, 1))
+
+    expect(document.querySelector('span').innerText).toEqual('baz')
+})