Merge pull request #761 from ryangjchandler/feature/prop-x-for-range

feature(prop x for range)

dist/alpine-ie11.js

@@ -6382,18 +6382,19 @@
 
     if (ifAttribute && !component.evaluateReturnExpression(el, ifAttribute.expression)) {
       return [];
-    } // This adds support for the `i in n` syntax.
+    }
 
+    var items = component.evaluateReturnExpression(el, iteratorNames.items, extraVars); // This adds support for the `i in n` syntax.
 
-    if (isNumeric(iteratorNames.items)) {
-      return Array.from(Array(parseInt(iteratorNames.items, 10)).keys(), function (i) {
+    if (isNumeric(items) && items > 0) {
+      items = Array.from(Array(items).keys(), function (i) {
         _newArrowCheck(this, _this4);
 
         return i + 1;
       }.bind(this));
     }
 
-    return component.evaluateReturnExpression(el, iteratorNames.items, extraVars);
+    return items;
   }
 
   function addElementInLoopAfterCurrentEl(templateEl, currentEl) {

dist/alpine.js

@@ -577,14 +577,15 @@
 
     if (ifAttribute && !component.evaluateReturnExpression(el, ifAttribute.expression)) {
       return [];
-    } // This adds support for the `i in n` syntax.
+    }
 
+    let items = component.evaluateReturnExpression(el, iteratorNames.items, extraVars); // This adds support for the `i in n` syntax.
 
-    if (isNumeric(iteratorNames.items)) {
-      return Array.from(Array(parseInt(iteratorNames.items, 10)).keys(), i => i + 1);
+    if (isNumeric(items) && items > 0) {
+      items = Array.from(Array(items).keys(), i => i + 1);
     }
 
-    return component.evaluateReturnExpression(el, iteratorNames.items, extraVars);
+    return items;
   }
 
   function addElementInLoopAfterCurrentEl(templateEl, currentEl) {

examples/index.html

@@ -77,7 +77,7 @@
                                 x-on:click.away="open= false"
                                 x-cloak>
                                 Dropdown Body
-                            </ul>
+                            </ul>6
                         </div>
                     </td>
                 </tr>
@@ -315,6 +315,18 @@
                     </td>
                 </tr>
 
+                <tr>
+                    <td>x-for over a range using <code>i in 10</code> syntax and data property</td>
+                    <td>
+                        <div x-data="{ count: 10 }">
+                            <template x-for="i in count" :key="i">
+                                <span x-text="i"></span>
+                            </template>
+                            <button type="button" @click="count++">Increment count</button>
+                        </div>
+                    </td>
+                </tr>
+
                 <tr>
                     <td>Transitions</td>
                     <td>

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "alpinejs",
-    "version": "2.6.0",
+    "version": "2.7.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

src/directives/for.js

@@ -91,13 +91,15 @@ function evaluateItemsAndReturnEmptyIfXIfIsPresentAndFalseOnElement(component, e
     if (ifAttribute && ! component.evaluateReturnExpression(el, ifAttribute.expression)) {
         return []
     }
+    
+    let items = component.evaluateReturnExpression(el, iteratorNames.items, extraVars)
 
     // This adds support for the `i in n` syntax.
-    if (isNumeric(iteratorNames.items)) {
-        return Array.from(Array(parseInt(iteratorNames.items, 10)).keys(), i => i + 1)
+    if (isNumeric(items) && items > 0) {
+        items = Array.from(Array(items).keys(), i => i + 1)
     }
 
-    return component.evaluateReturnExpression(el, iteratorNames.items, extraVars)
+    return items
 }
 
 function addElementInLoopAfterCurrentEl(templateEl, currentEl) {

test/for.spec.js

@@ -491,3 +491,17 @@ test('x-for over range using i in x syntax', async () => {
 
     expect(document.querySelectorAll('span').length).toEqual(10)
 })
+
+test('x-for over range using i in x syntax with data property', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ count: 10 }">
+            <template x-for="i in count">
+                <span x-text="i"></span>
+            </template>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelectorAll('span').length).toEqual(10)
+})