Pass standard “Array.map” arguments to “repeat”.

The “repeat” directive is just a shim to create arrays of _entries_. We
may remove this from the interface in the future, but we do need it
to function as expected in the interim!

Most callers rely on just the first “value” argument, but there’s no
good reason not to expose the `(value, index, array)`-triple that a
standard callback would receive from “Array.map”.

Author: theengineear

test/test-template-engine.js

@@ -1241,6 +1241,38 @@ describe('html updaters', () => {
     assert(container.querySelector('#c').textContent === 'fuzz');
     container.remove();
   });
+
+  it('repeat callbacks are provided args from underlying “.map” call', () => {
+    // The identify callback is written in a bizarre way to test that all the
+    //  expected function arguments are actually passed in. If they weren’t you
+    //  would get duplicated key errors or undefined key errors.
+    const getTemplate = ({ items }) => {
+      return html`
+        <div id="target">
+          ${repeat(items, (_, index, array) => array?.[index]?.id, (_, index, array) => {
+            return html`<div id="${array?.[index]?.id}" class="item">${array?.[index]?.id}</div>`;
+          })}
+        </div>
+      `;
+    };
+    const container = document.createElement('div');
+    document.body.append(container);
+    render(container, getTemplate({ items: [{ id: 'foo' }, { id: 'bar'}, { id: 'baz' }] }));
+    const foo = container.querySelector('#foo');
+    const bar = container.querySelector('#bar');
+    const baz = container.querySelector('#baz');
+    assert(container.querySelector('#target').childElementCount === 3);
+    assert(!!foo);
+    assert(!!bar);
+    assert(!!baz);
+    assert(container.querySelector('#target').children[0] === foo);
+    assert(container.querySelector('#target').children[1] === bar);
+    assert(container.querySelector('#target').children[2] === baz);
+    assert(foo.textContent === 'foo');
+    assert(bar.textContent === 'bar');
+    assert(baz.textContent === 'baz');
+    container.remove();
+  });
 });
 
 describe('updater errors', () => {

x-template.js

@@ -126,8 +126,8 @@ class TemplateEngine {
       throw new Error(`Unexpected repeat callback "${callback}" provided, expected a function.`);
     }
     return identify
-      ? items.map(item => [identify(item), callback(item)])
-      : items.map(item => callback(item)); // Just a basic array.
+      ? items.map((...args) => [identify(...args), callback(...args)])
+      : items.map((...args) => callback(...args)); // Just a basic array.
   }
 
   // Deprecated. Will remove in future release.