Expression in attribute (i.e class="a ${b}") causes unexpected identifier
davemackintosh opened this issue · comments
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?
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.
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?)
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. :(
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.