search

nicojs / typed-html

TypeSafe HTML templates using TypeScript. No need to learn a template library.
333 stars 51 forks source link

Undesireable Injection of Commas to Seperate Children Elements #46

Open LuckyMcBeast opened 11 months ago

LuckyMcBeast commented 11 months ago

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

"jsx": "react",
"jsxFactory": "elements.createElement"

example.tsx

 const BaseHtml = ({children}: elements.Children) => {
      return `<!DOCTYPE html>
     <html>
      //some starter html
        <body>
          ${children}
        </body>
      </html>`
}

const ExampleTemplate = () => {
    return (
        <BaseHtml>
            <h1>Test</h1>
            <h2>Testing h2</h2>
            <p>Testing paragraph</p>
        </BaseHtml>
    )
}

Expected

<!DOCTYPE html>
     <html>
       ....
        <body>
            <h1>Test</h1>
            <h2>Testing h2</h2>
            <p>Testing paragraph</p>
         <body>
     </html>

Actual

<!DOCTYPE html>
     <html>
       ....
        <body>
            <h1>Test</h1>,<h2>Testing h2</h2>,<p>Testing paragraph</p>
         <body>
     </html>
LuckyMcBeast commented 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.

burdell commented 10 months ago

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>
subodhpareek18 commented 9 months ago

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>