x-for patch

src/component.js

@@ -253,17 +253,19 @@ export default class Component {
     }
 
     evaluateReturnExpression(el, expression, extraVars = () => {}) {
-        return saferEval(expression, this.$data, {
-            ...extraVars(),
-            $dispatch: this.getDispatchFunction(el),
-        })
+        let extraData = extraVars()
+        if (typeof extraData === 'undefined') extraData = {}
+        extraData['$dispatch'] = this.getDispatchFunction(el)
+
+        return saferEval(expression, this.$data, extraData)
     }
 
     evaluateCommandExpression(el, expression, extraVars = () => {}) {
-        saferEvalNoReturn(expression, this.$data, {
-            ...extraVars(),
-            $dispatch: this.getDispatchFunction(el),
-        })
+        let extraData = extraVars()
+        if (typeof extraData === 'undefined') extraData = {}
+        extraData['$dispatch'] = this.getDispatchFunction(el)
+
+        saferEvalNoReturn(expression, this.$data, extraData)
     }
 
     getDispatchFunction (el) {

src/directives/for.js

@@ -36,8 +36,23 @@ export function handleForDirective(component, el, expression, initialUpdate) {
 
             currentEl.__x_for_alias = single
             currentEl.__x_for_value = i
+
             component.updateElements(currentEl, () => {
-                return {[currentEl.__x_for_alias]: currentEl.__x_for_value}
+                // We wrap the additional variables in a proxy
+                // so we will update the original variable
+                // if somebody reassign it from the item context
+                // or bind it to a model
+                return new Proxy(
+                    { [currentEl.__x_for_alias]: currentEl.__x_for_value },
+                    {
+                        set(obj, property, value) {
+                            if (property === currentEl.__x_for_alias) {
+                                return Reflect.set(group, index, value)
+                            }
+                            return Reflect.set(obj, property, value)
+                        }
+                    }
+                )
             })
         } else {
             // There are no more .__x_for_key elements, meaning the page is first loading, OR, there are
@@ -60,8 +75,23 @@ export function handleForDirective(component, el, expression, initialUpdate) {
             // always up to date for listener handlers that don't get re-registered.
             currentEl.__x_for_alias = single
             currentEl.__x_for_value = i
+
             component.initializeElements(currentEl, () => {
-                return {[currentEl.__x_for_alias]: currentEl.__x_for_value}
+                // We wrap the additional variables in a proxy
+                // so we will update the original variable
+                // if somebody reassign it from the item context
+                // or bind it to a model
+                return new Proxy(
+                    {[currentEl.__x_for_alias]: currentEl.__x_for_value},
+                    {
+                        set(obj, property, value) {
+                            if (property === currentEl.__x_for_alias) {
+                                return Reflect.set(group, index, value)
+                            }
+                            return Reflect.set(obj, property, value)
+                        }
+                    }
+                )
             })
         }
 

src/directives/model.js

@@ -11,10 +11,11 @@ export function registerModelListener(component, el, modifiers, expression, extr
     const listenerExpression = `${expression} = rightSideOfExpression($event, ${expression})`
 
     registerListener(component, el, event, modifiers, listenerExpression, () => {
-        return {
-            ...extraVars(),
-            rightSideOfExpression: generateModelAssignmentFunction(el, modifiers, expression),
-        }
+        let extraData = extraVars()
+        if (typeof extraData === 'undefined') extraData = {}
+        extraData['rightSideOfExpression'] = generateModelAssignmentFunction(el, modifiers, expression)
+
+        return extraData
     })
 }
 

src/directives/on.js

@@ -47,7 +47,11 @@ export function registerListener(component, el, event, modifiers, expression, ex
 
 function runListenerHandler(component, expression, e, extraVars) {
     component.evaluateCommandExpression(e.target, expression, () => {
-        return {...extraVars(), '$event': e}
+        let extraData = extraVars()
+        if (typeof extraData === 'undefined') extraData = {}
+        extraData.$event = e
+
+        return extraData
     })
 }
 

src/utils.js

@@ -58,14 +58,20 @@ export function debounce(func, wait) {
 }
 
 export function saferEval(expression, dataContext, additionalHelperVariables = {}) {
-    return (new Function(['$data', ...Object.keys(additionalHelperVariables)], `var result; with($data) { result = ${expression} }; return result`))(
-        dataContext, ...Object.values(additionalHelperVariables)
+    return (new Function(
+        ['$data', 'additionalHelperVariables'],
+        `var result; with (additionalHelperVariables) { with($data) { result = ${expression} } }; return result`)
+    )(
+        dataContext, additionalHelperVariables
     )
 }
 
 export function saferEvalNoReturn(expression, dataContext, additionalHelperVariables = {}) {
-    return (new Function(['dataContext', ...Object.keys(additionalHelperVariables)], `with(dataContext) { ${expression} }`))(
-        dataContext, ...Object.values(additionalHelperVariables)
+    return (new Function(
+        ['dataContext', 'additionalHelperVariables'],
+        `with (additionalHelperVariables) { with(dataContext) { ${expression} } }`
+    ))(
+        dataContext, additionalHelperVariables
     )
 }
 

test/for.spec.js

@@ -1,5 +1,5 @@
 import Alpine from 'alpinejs'
-import { wait } from '@testing-library/dom'
+import { wait, fireEvent } from '@testing-library/dom'
 
 global.MutationObserver = class {
     observe() {}
@@ -69,7 +69,7 @@ test('removes all elements when array is empty and previously had multiple items
     await wait(() => { expect(document.querySelectorAll('span').length).toEqual(0) })
 })
 
-test('elements inside of loop are reactive', async () => {
+test('elements inside of loop are reactive - external changes', async () => {
     document.body.innerHTML = `
         <div x-data="{ items: ['first'], foo: 'bar' }">
             <button x-on:click="foo = 'baz'"></button>
@@ -97,6 +97,54 @@ test('elements inside of loop are reactive', async () => {
     })
 })
 
+test('elements inside of loop are reactive - internal changes', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ items: ['first', 'second'] }">
+
+            <template x-for="item in items">
+                <div>
+                    <span x-text="item"></span>
+                    <button x-on:click="item = 'foo'"></button>
+                </div>
+            </template>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelectorAll('span')[0].innerText).toEqual('first')
+
+    document.querySelectorAll('button')[0].click()
+
+    await wait(() => {
+        expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
+    })
+})
+
+test('elements can be bound to models', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ items: ['first', 'second'] }">
+
+            <template x-for="item in items">
+                <div>
+                    <span x-text="item"></span>
+                    <input x-model="item" />
+                </div>
+            </template>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelectorAll('span')[0].innerText).toEqual('first')
+
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: 'foo' }})
+
+    await wait(() => {
+        expect(document.querySelectorAll('span')[0].innerText).toEqual('foo')
+    })
+})
+
 test('components inside of loop are reactive', async () => {
     document.body.innerHTML = `
         <div x-data="{ items: ['first'] }">