Hacker News new | ask | show | jobs
by orenelbaum 1571 days ago
This is another area where Solid has an advantage over React. With React you could use Hyperscript functions so the above JSX would be

React.createElement('div', null, `The count is: {this.state.count}`).

With Solid you get the choice, you could use JSX, Hyperscript functions or template literals like in your example. Solid does recommend using JSX because there are some tradeoffs to using template literals without compilation, but it still maintains almost all of its qualities AFAIK and in the big framework benchmark Solid with template literals is the fastest template literals implementation.

With Solid you don't even have to use any templating languages, you can take care of rendering yourself using the tools that the framework gives you. Solid at its core is more of a capable state management library similar to MobX but designed to be used as the only reactivity engine unlike MobX which is usually used on top of React.

1 comments

Using template literals to represent html is a security issue. If the state comes from the user, they can add script tags into the html. People try to solve this with tagged templates, but then if you forget the tag, you have a security issue again. Lit checks for this, but the fact that it has to check means it is less secure than not using tagged templates. There are libraries on github for creating sql using tagged templates which have the same security issue. The problem is that if your function works with both tagged templates and plain strings, when you forget to add the tag, you will never know.

    If the state comes from the user, they
    can add script tags into the html
How is that different with React?

And how is it a problem? A rendering engine would set the html of some element to the html I think?

This ...

    document.body.innerHTML='<script>alert(1)</script>';
...does not execute the script.
In terms of the placeholders in JSX, no they are escaped.
True.

But the same issue with reacts way.