Undesireable Injection of Commas to Seperate Children Elements #46

LuckyMcBeast · 2023-09-10T21:41:27Z

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>

The text was updated successfully, but these errors were encountered:

LuckyMcBeast · 2023-09-10T21:57:40Z

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 · 2023-10-07T18:57:07Z

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 · 2023-11-18T08:57:43Z

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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Undesireable Injection of Commas to Seperate Children Elements #46

Undesireable Injection of Commas to Seperate Children Elements #46

LuckyMcBeast commented Sep 10, 2023 •

edited

LuckyMcBeast commented Sep 10, 2023

burdell commented Oct 7, 2023 •

edited

subodhpareek18 commented Nov 18, 2023

Undesireable Injection of Commas to Seperate Children Elements #46

Undesireable Injection of Commas to Seperate Children Elements #46

Comments

LuckyMcBeast commented Sep 10, 2023 • edited

The Problem

Use Case

Example

Expected

Actual

LuckyMcBeast commented Sep 10, 2023

burdell commented Oct 7, 2023 • edited

subodhpareek18 commented Nov 18, 2023

LuckyMcBeast commented Sep 10, 2023 •

edited

burdell commented Oct 7, 2023 •

edited