Javascript Template Library

💡 Ideas
7

We already have the syntax to do this. It's called template literal strings. React came out before template literal strings were a thing - I'm betting if React came a little later, they would have just used them instead of making a new super-set language. (Perhaps they would still provide compile-time tooling to transform the template literals into something else, but such toolilng could be optional). I wish they provided the option to use them today, as it could make build-tooling a little easier to deal with when you're just getting started.

So, here are a couple of your examples, rewritten with template literals.

const element = jsx`<h1>Hello, world!</h1>`;

function getGreeting(user) {
  if (user) {
    return jsx`<h1>Hello, ${formatName(user)}!</h1>`; 
  return jsx`<h1>Hello, Stranger.</h1>`;}
}

const element = jsx`<img src=${user.avatarUrl}></img>`;

It looks like both Vue and Handlebars came out before es6 as well, so they were pretty limited in what they could use as well. Vue certainly could have chosen to use template tags as well had they come out a little later, but perhaps they wouldn't have chosen to use them, even if they could. Handlebars is a bit of a different story in that it's just a templating engine. I believe their philosophy follows the idea of separating the view from the logic behind it, so they probably wouldn't want to use any sort of feature that would mix the two together in the same file.

JavaScript itself doesn't provide any sort of built-in way to parse these templates, nor should it. These templates are very specific to HTML, and JavaScript doesn't always run in an enviornment where HTML can be used. However, providing a new, built-in html template tag that could be used to generate HTML and interpolate variables in a safe way could be useful, and perhaps a discussion could be started on the WICG forms - they're the ones in charge of providing the standard web APIs that all browsers must implement.

1 Like