False positive when mapping over a list of elements #1

danielo515 · 2023-09-28T12:34:03Z

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 · 2023-09-29T04:58:42Z

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

danielo515 · 2023-09-29T07:46:27Z

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 · 2023-10-02T22:52:41Z

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 · 2023-10-03T02:02:04Z

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

danielo515 · 2023-10-03T08:41:33Z

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

danielo515 mentioned this issue Sep 29, 2023

False negative based on property name #2

Closed

arthurfiorette added a commit that referenced this issue Oct 3, 2023

fix: handle Html.Children and JSX.Element types (#1)

72b998b

arthurfiorette closed this as completed Oct 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

False positive when mapping over a list of elements #1

False positive when mapping over a list of elements #1

danielo515 commented Sep 28, 2023

arthurfiorette commented Sep 29, 2023

danielo515 commented Sep 29, 2023

arthurfiorette commented Oct 2, 2023

arthurfiorette commented Oct 3, 2023

danielo515 commented Oct 3, 2023

False positive when mapping over a list of elements #1

False positive when mapping over a list of elements #1

Comments

danielo515 commented Sep 28, 2023

arthurfiorette commented Sep 29, 2023

danielo515 commented Sep 29, 2023

arthurfiorette commented Oct 2, 2023

arthurfiorette commented Oct 3, 2023

danielo515 commented Oct 3, 2023