diff --git a/test/test-template-engine.js b/test/test-template-engine.js index f9b1f48..0eecdb8 100644 --- a/test/test-template-engine.js +++ b/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` +
+ ${repeat(items, (_, index, array) => array?.[index]?.id, (_, index, array) => { + return html`
${array?.[index]?.id}
`; + })} +
+ `; + }; + 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', () => { diff --git a/x-template.js b/x-template.js index 91c1ba4..be0264a 100644 --- a/x-template.js +++ b/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.