search

solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
31.64k stars 887 forks source link

[JSX Validation]: A <tr/> which has a direct child text should produce a validation error #2183

Open KotoriK opened 4 weeks ago

KotoriK commented 4 weeks ago

Describe the bug

See this JSX:

 <div>
      <table>
        <thead>
          <tr>Name</tr>
        </thead>
        <tbody>
          <tr>
            <td>iPhone</td>
            <td>
              13
            </td>
          </tr>
        </tbody>
      </table>
    </div>

In the template above, a <tr/> has a text node as its child. As expected, malform syntaxes like this should be blocked in build stage. However this syntax somehow passes the validation, and result in a unclosed template like _$template(`<div><table><thead><tr>Name</tr></thead><tbody><tr><td>iPhone`). It will cause any insert efforts failed with TypeError: Cannot read properties of null (reading 'nextSibling') , since the template is not correct and browser explain it to something not expected.

Your Example Website or App

https://codesandbox.io/p/devbox/great-leaf-tyf99q?file=%2Fsrc%2FApp.tsx%3A21%2C21-21%2C51

Steps to Reproduce the Bug or Issue

  1. Open the devbox and everything should render correctly
  2. De-comment Line 15 -17
  3. Render will failed and in console a TypeError should be thrown

Expected behavior

Templates should be correctly generated, or a JSX validation error should be thrown.

Screenshots or Videos

No response

Platform

Additional context

No response

ryansolid commented 3 weeks ago

Yeah this needs a validation error. We can't really fix it as it is a browser correction. So far we only look for elements allowed in other elements using this package: https://github.com/MananTank/validate-html-nesting. Elements that can't accept text directly isn't a part of it. So this is a different sort of check.