Expression in attribute (i.e class="a ${b}") causes unexpected identifier

[davemackintosh]

I'm working on a little web components/virtual dom thing (as a learning experience on virtual dom) and have noticed that if I have

t7`${thing.range(6, index => {
<div class="string string-${index}"></div>
})
`

where thing.range = (max, cb) => return Array.from({length: max}, () => null).map((_, index) => cb(index))

causes an error, the (formatted) generated function is

function(__$props__, __$components__, t7) {
  "use strict";
  return {
     tag: 'div',
     attrs: Object.assign({ 
        'class': string string-__$props__[0], // Here be the issue
     })
  }
}

If I remove the ${index} from the attribute, it works. It also works if I add a new attribute with only that value as the value of the attribute but multiple values (say, a className (yeah, tried that too)) it causes issues.

Any ideas, is it a bug or have I missed something in the docs?

[trueadm]

Can you try doing this instead:

t7`${thing.range(6, index => {
<div class=${ 'string string-' + index}></div>
})

The reason is that t7 can't work out ahead of time that you're attempting to concat a static string to a partial dynamic string.

[davemackintosh]

Thanks for the speedy response, appreciated. I will try shortly and let you know if it works.

Are there any plans to support this scenario? Attributes are always strings so maybe a string literal always makes sense (& will continue to work with transpilers?)

[trueadm]

I'd be happy for this functionality to be added in a PR. In fact, I'd love it if this project had other maintainers other than I, as I've simply not got the time to work on the t7 at the moment. :(

[davemackintosh]

If I can dig my heels in, I will 😊 pretty busy with Multicolour (my main project) but if I get the time, I'll try to help out here since I'm using it in my side project.