possible x-text/x-html enhancement?

[archoo]

Would it be possible to extend the x-text and x-html attributes to work on the block of text within an element rather than just the attribute value? Perhaps by assuming (or enforcing) a string template if the attribute is valueless?

eg.. instead of

<div><span x-text="item_name"> ($<span x-text="item_price"><span>)</div>

do..

<div x-text>${item_name} (\$${item_price})</div>

or.. i suppose

<div x-text>`${item_name} (\$${item_price})`</div>

I know I can insert a string template into the attribute value now, but that gets unwieldy with longer blocks of text, and the trade off of lots of sub elements with x-texts all the way down gets messy too..

I'm sure there are arguments that this isn't the intended usecase, and that such data manipulation is better handled by some sort of templating solution, but that second snippet above just feels cleaner, so thought it was worth the thought bubble??

[SimoTod]

It's not immediate because alpine uses the real html not a virtual DOM.
To achieve what you described, you would need your page to display that text on page load before Alpine starts (with equivalent flickering that requires x-cloak) + alpine would need to find all the substrings containing a specific sequence of characters and replace it with the relevant variable.
It's not impossible but it's more complicated than the way Alpine works and computationally expensive.
By the way, I think someone made a directive to achieve that in the past.

[archoo]

ok.. makes sense.. I also just realised that my "templating solution" comment is probably more relevant that I had first thought..

I ended up just implementing a series of "template" functions in the x-data component that simply return the appropriate template strings to x-text with the substitutions already included..

[ekwoka]

Generally, Alpine will still be used with templating systems, where they can handle far more of that.

And custom directives can be made to do this without much trouble where it makes sense.

Either a kind of x-text that automatically evaluates the expression like a template literal, or one that evaluates the internal text nodes as template literals.