x-interpolate

[earthboundkid]

Problem: x-text is great for replace all text, but a pain when you only want to replace a subset:

<h1 x-data="{ n: 1 }" @click="n++">Hello, #<span x-text="n"></span></h1>

Solution: x-interpolate

<h1 x-data="{ n: 1 }" @click="n++" x-interpolate>Hello, #${n}</h1>

Code for the plugin:

Alpine.directive("interpolate", (el, _, { effect, evaluateLater }) => {
  let evaluate = evaluateLater("`" + el.innerText + "`");

  effect(() => {
    evaluate((value) => {
      el.textContent = value;
    });
  });
});

What do y'all think?

CodePen: https://codepen.io/carlmjohnson/pen/QWvbeLZ

[earthboundkid]

There is probably a better name than "interpolate". It could maybe be an option on x-text, like

<h1 x-data="{ n: 1 }" @click="n++" x-text.replace>Hello, #${n}</h1>

[KevinBatdorf]

I don't think x-text.replace is better but I like the idea. x-inline-template would probably be the more obvious naming

[earthboundkid]

I like the name x-template.

[KevinBatdorf]

Vue uses inline-template but yeah even just x-template sounds like a good choice for naming.

[earthboundkid]

This is different from Vue because, for example, it overwrites any tags inside of the element, whereas Vue hydrates them. I think it's good to have a distinct name, so people don't expect the same behavior.

[KevinBatdorf]

Good point.

By the way, I'd probably attach a codepen showing it off in your original post so others can see it more quickly.

[earthboundkid]

https://codepen.io/carlmjohnson/pen/QWvbeLZ

[earthboundkid]

One more thought. x-text="`Hello, ${name}`" is awkward to write because of the quotes in quotes. What if x-template looks at whether it has an argument or not, and if there's no argument, it uses innerText, and if there is, it uses the expression. That way you can write the pre-init fallback text in the HTML and then have it overwritten once Alpine loads.

https://codepen.io/carlmjohnson/pen/ZEKbzNr