preact/debug: Incorrect table warning

[marvinhagemeister]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
preact/debug throws a warning when the code is valid HTML code. That's unexpected.

To Reproduce

import "preact/debug";
import { render } from "preact";

render(<table><tr /></table>, document.getElementById("app"));

Expected behavior
No warning, it's a valid HTML structure. Iirc there are some rules regarding tbody when it must be present and not. I don't know them at the top of my head, best to check with the spec.

[adamgreg]

I originally noticed this with a complete table structure, including thead and tbody. I was also getting warnings about those elements needing a table parent (which they had).

[JoviDeCroock]

@marvinhagemeister this does not warn for me https://codesandbox.io/s/damp-dream-td65f3?file=/src/index.js

[nmain]

This vdom structure does result in HTML which doesn't match the vdom and is modified during hydration.

See this (admittedly canned) example where there's a flash of styling change when hydration happens: https://codesandbox.io/s/busy-williams-scnwzw?file=/src/index.mjs

[marvinhagemeister]

Interesting! Looks like the browser automatically inserts a <tbody> element.

[rschristian]

This doesn't throw/log an error, but it should; while the spec technically allows for <tr> to be a child of <table>, it does this knowing full well that all parsers will instead wrap it inside of a <tbody>.

We should warn here.