False positive when mapping over a list of elements

danielo515 commented 1 year ago

Hello, thank you for this nice server-side jsx alternative and plugin for safer operation.

I'm getting what I think it is a false positive in one quite common JSX usage, mapping over a list of elements. I'm just iterating a list and using a component, which has the required safe attributes, but the compiler is complaining at the mapping site. Here are the component and the part where it errors:

/// <reference types="@kitajs/html/htmx.d.ts" />
import '@kitajs/html/register';
import { Elysia } from 'elysia'
import { html } from '@elysiajs/html'
import { SelectChat } from './db/schema'
import { getAllChats, getChatMessages } from './db/db'

const Chat = (chat: SelectChat) => (
  <article>
    <hgroup>
      <h3>
        <a
          hx-get={`/chats/${chat.id}`}
          hx-target="#chats"
        >
          {chat.name}</a>
      </h3>
      <h4>
        <span> {chat.isGroup ? '👥' : ''} </span>
        <span>{chat.automaticAudioTranscription ? '🎤' : ''}</span>
      </h4>
    </hgroup>
    <p safe>{chat.id}</p>
  </article >
)

const app = new Elysia()
  .use(html())
  .get('/', async () => {
    const chats = await getAllChats()
    return (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
        </head>
        <body>
          <main class='container'>
            <div class='grid container-fluid'>
              <div class='chats-list'>
                {chats.map(({ chats }) => <Chat chat={chats} />)} // <- Error here
              </div>
              <article id='chats'> </article>
            </div>
          </main>
        </body>
      </html>
    )
  })

As you can see, the component is already taking care of escaping any potential issue, so, how can I workaround this?

arthurfiorette commented 1 year ago

Hey @danielo515, thanks for this report! Open to a PR?

danielo515 commented 1 year ago

Hey @danielo515, thanks for this report! Open to a PR?

If it is within my ability, then sure. But I don't know where to start. Mind giving me a little guidance?

arthurfiorette commented 1 year ago

Hey @danielo515 I could not reproduce the error you reported... Can you provide a small and complete example? Also, your component is typed wrong, it should be:

const Chat = ({ chat }: { chat: SelectChat }) => (

The JSX syntax provides all properties through a single object parameter...

arthurfiorette commented 1 year ago

I fixed some type cases with JSX.Element and Html.Children. Your problem may have been fixed. Feel free to reopen this issue :)

danielo515 commented 1 year ago

Also, your component is typed wrong, it should be:

Yep, I also noticed that some time after opening this issue. Gonna update the pgin and see if this problem is fixed. Thanks

kitajs / ts-html-plugin

False positive when mapping over a list of elements #1