Open LuckyMcBeast opened 11 months ago
Resolved the issue by removing the <body>
from the template string and using it as a wrapper directly under <BaseHtml>
. Still not completely ideal, but usable. Still curious as to the cause of the comma seperation.
I also ran into this problem and figured out it was from using multiple children elements instead of a single child.
This rendered the commas between each child:
<Page>
{categories.map((category) => (
<div class="list-item">
<div class="list-name">{category.name}</div>
<div class="list-description">{category.description}</div>
</div>
))}
</Page>
but making sure that children
is a single element did not have the commas:
<Page>
<div>
{categories.map((category) => (
<div class="list-item">
<div class="list-name">{category.name}</div>
<div class="list-description">{category.description}</div>
</div>
))}
</div>
</Page>
This removed the commas for me also, but it's not ideal. I am returning a chat ui with multiple messages inside a div. So it's not possible for me to return single child.
I also ran into this problem and figured out it was from using multiple children elements instead of a single child.
This rendered the commas between each child:
<Page> {categories.map((category) => ( <div class="list-item"> <div class="list-name">{category.name}</div> <div class="list-description">{category.description}</div> </div> ))} </Page>
but making sure that
children
is a single element did not have the commas:<Page> <div> {categories.map((category) => ( <div class="list-item"> <div class="list-name">{category.name}</div> <div class="list-description">{category.description}</div> </div> ))} </div> </Page>
The Problem
While using the typed-html library, commas are used to separate Children elements, which get rendered. (Maybe it's something dumb on my end. Was pretty surprised to see the output...)
Use Case
Using typed-html to create email templates which will be sent using Nodemailer via Gmail's SMTP server. Bun is the runtime.
Example
tsconfig.json
example.tsx
Expected
Actual