Marking the end of #-syntax

[benmccann]

Hi, thanks for providing stage0! I've been testing it out a bit and it seems super fast.

I have a question about the #-syntax. How would I use it with the following template?

const sectionEl = h`<section><h1>Hello #name!</h1> <p>#description</p></section>`;

I was hoping to use stage0 in a library with user-provided input, so I can't just say something like use <h1>Hello #name</h1> and then put the exclamation mark in the name

It might be nice if a syntax with an ending were used so I could do something like <h1>Hello {name}!</h1>. Any chance this is something that might be able to be changed?

[Freak613]

While that could be changed, it would have performance implications because of developer experience. Having Hello {name}! will result in 3 text nodes instead of one: Hello , name part and !. While this could being managed inside, I decided not to do so. How you can achieve that is:

const sectionEl = h`<section><h1>#welcome</h1> <p>#description</p></section>`;
...
sectionEl.refs.welcome.textContent = `Hello ${name}!`;

[benmccann]

Why not give the user the option? They could do <h1>{welcome}</h1> if they preferred to maximize performance or <h1>Hello {name}!</h1> if they wanted to focus on ease-of-use

In any case, thanks again for sharing the library!

[Freak613]

Don't get me wrong, but focus of this library is on performance and bundle size constraints. h tool is not full blown template solution, it's here only to collect references to DOM nodes. It doesn't try to solve all problems, only one.

[s0kil]

If you are looking for a library with very wide support, you should go with https://lit-html.polymer-project.org