handle id resolution within repeats

[JoernT]

ids must be resolved in their respective repeat context to make functions like index() work that refer to another element.

[DrRataplan]

I tried my best to implement the (hard to read) spec in #74. I am having great difficulty reading the rest of the spec to see where id resolving is actually used. I expected a test fixture like

   const el = await fixtureSync(html`
     <fx-fore>
       <fx-model>
         <fx-instance>
           <data>
             <item>a</item>
             <item>b</item>
             <item>c</item>
           </data>
         </fx-instance>
       </fx-model>
       <pre id="indices">
       <fx-repeat id="repeat" ref="/data/item">
         <template>
           <fx-repeat id="nested-repeat" ref="/data/item">
             <template>
               <span>({index("repeat") || ";" || index("nested-repeat")})</span>
             </template>
           </fx-repeat>
         </template>
       </fx-repeat>
</pre>
     </fx-fore>
   `);

to be a good start: output all the 'coordinates' of the 3x3 nested repeat. However, this is outputting (1;1) nine times over.

The spec is not really helpful here as I could not find concrete examples of how this should actually work: the spec mentions the 'current' index of a repeat but I do not understand if that should be the temporal current (as in, actually for the current repeat-item) or whether it is the 'focus'.

@JoernT do you maybe have concrete example of this behaviour in index? Or is my test correct and is it

[DrRataplan]

Whew, I totally misunderstood the spec: it's the 'focus' for example that should update it, but templates where not updated when the index is. I fixed this in my PR.

[JoernT]

there's one use case that even exists beyond functions - not sure how we can address this.

Consider a repeated control that uses a label - this would usually look like this:

<fx-repeat ref="...">
    <fx-control ref="...">
         <label for="foo">a label</label>
         <input id="foo">
....

This would currently fail as the browser will just always take the first control it finds. This is especially a problem with checkboxes where you want the label to be clickable to check/uncheck the box.

[JoernT]

probably an overwritten version of fn:id() is needed that uses the new resolveId function to accomplish the use case like this:

<fx-repeat ref="...">
    <fx-control ref="...">
         <label for="id('foo')">a label</label>
         <input id="foo">

Alternative approach would be a dedicated label component:

<fx-repeat ref="...">
    <fx-control ref="...">
         <fx-label for="foo">a label</fx-label>
         <input id="foo">

This would use the resolveId under the hood to match it's control.