Add warning for duplicate x-for keys

Author: calebporzio

packages/alpinejs/src/directives/x-for.js

@@ -60,15 +60,23 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
             items = Object.entries(items).map(([key, value]) => {
                 let scope = getIterationScopeVariables(iteratorNames, value, key, items)
 
-                evaluateKey(value => keys.push(value), { scope: { index: key, ...scope} })
+                evaluateKey(value => {
+                    if (keys.includes(value)) warn('Duplicate key on x-for', el)
+
+                    keys.push(value)
+                }, { scope: { index: key, ...scope} })
 
                 scopes.push(scope)
             })
         } else {
             for (let i = 0; i < items.length; i++) {
                 let scope = getIterationScopeVariables(iteratorNames, items[i], i, items)
 
-                evaluateKey(value => keys.push(value), { scope: { index: i, ...scope} })
+                evaluateKey(value => {
+                    if (keys.includes(value)) warn('Duplicate key on x-for', el)
+
+                    keys.push(value)
+                }, { scope: { index: i, ...scope} })
 
                 scopes.push(scope)
             }
@@ -158,7 +166,7 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {
             let marker = document.createElement('div')
 
             mutateDom(() => {
-                if (! elForSpot) warn(`x-for ":key" is undefined or invalid`, templateEl)
+                if (! elForSpot) warn(`x-for ":key" is undefined or invalid`, templateEl, keyForSpot, lookup)
 
                 elForSpot.after(marker)
                 elInSpot.after(elForSpot)