Open
Description
Description
I for example quite often inlining svgs when generating html
const headerTemplate =() => html`
<button id="mobile-menu-trigger" data-action="trigger-mobile-menu">
<span class="sr-only">Show Menu</span>
${readFile(new URL('../assets/burger-menu.svg', import.meta.url), 'utf8').then(res => res.toString())}
</button>
`;expected output
<button id="mobile-menu-trigger" data-action="trigger-mobile-menu">
<span class="sr-only">Show Menu</span>
<svg>...</svg>
</button>actual output
<button id="mobile-menu-trigger" data-action="trigger-mobile-menu">
<span class="sr-only">Show Menu</span>
[object Promise]
</button>now there are 2 issues
- it's async which does render as [object Promise]
- Using the until won't help as in ssr there is only one render
- it uses fs to access a file on the filesystem which you obviously can't do in the browser
some (crazy) ideas
- have a special ssr directive that only executes in ssr but is "static" on the client side?
- have a special ssr async directive that "blocks" the rendering until it's resolved so you get the value you want in a single pass?
what do you think?
Additional info
a simplified version
function* generator(i) {
yield i;
yield i + 10;
}
const template = ({ title, lang }) => html`
<p>${title}</p>
${new Promise((res) => { setTimeout(res('resolved-promise'), 10)})}
${generator(1)}
`;expected
<p>hello</p>
resolved-promise
1actual
<p>hello</p>
[object Promise]
[object Generator]Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
📋 Triaged