Rough summary:
This adds a custom renderer just like lit but with built-in SSR functionality (being that TemplateResults from html can simply be rendered as strings) without the need for any shims or adjacent libraries. With this new renderer we don't constantly parse the template from string all the time and therefore will be able to use better features inside template. Now we can use special attributes like ?, . and @. The new renderer is way faster than the current vanilla renderer. If all goes well this new renderer should also be a bit faster than lit.
What is left to do?
[x] Allow for multiple parts per attribute
[x] Allow for fragments with multiple root nodes as child parts in arrays. this is why lit has more markers for lists
[x] Allow for different values/types inside array parts. Eg. [1, 'Hello', html'<p>World</p>'].map(item => html'<div>${item}</div>')
[x] Allow for real DOM nodes to be used as child parts. const div = document.createElement('div'); const page = html'${div}<p>This is some text</p>';
[x] Add JSDocs for everything
[x] Make the old tests pass
[x] Make the SSR template string results the same as the CSR
[x] Add more tests
[x] Refactor the code to be simpler and easier to understand
[x] Remove lit renderer and dependecy
[x] Allow for parts outside of attributes but within an element tag?
Consider an SVG tagged function? Lit has special behaviour for SVGs - should we also? #98
Checking Performance/Regression:
I've been checking the performance of the new renderer with a few metrics that can be done via the examples folder.
Rough summary: This adds a custom renderer just like lit but with built-in SSR functionality (being that TemplateResults from
htmlcan simply be rendered as strings) without the need for any shims or adjacent libraries. With this new renderer we don't constantly parse the template from string all the time and therefore will be able to use better features inside template. Now we can use special attributes like?,.and@. The new renderer is way faster than the current vanilla renderer. If all goes well this new renderer should also be a bit faster than lit.What is left to do?
[1, 'Hello', html'<p>World</p>'].map(item => html'<div>${item}</div>')const div = document.createElement('div'); const page = html'${div}<p>This is some text</p>';Consider an SVG tagged function? Lit has special behaviour for SVGs - should we also?#98Checking Performance/Regression: I've been checking the performance of the new renderer with a few metrics that can be done via the examples folder.