`<await>` tag doesn't render correctly with `client-reorder` when inside `<table>` element

[vwong]

Marko Version: 5.35.0

Details

I'm trying to run <await client-reorder> inside a <table> to await each row independently.

Expected Behavior

<table> is rendered correctly, the same way as without client-reorder.

Actual Behavior

Both placeholder and result remains in the HTML.

Steps to Reproduce

See reproduction

[vwong]

Curiously, this works as expected in the Marko Playground

[DylanPiercey]

@vwong this is a somewhat known issue.

I'm not sure of a good way to work around it.
In essence the reason this is problematic is because when a browser parser a <table> it will insert elements (eg wrapping <tbody>, <tr>, <td> etc).

The way client-reorder works currently is by inserting a dummy element to wrap your <@placeholder> content, so that Marko can find and replace that content after. In your case this ends up with markup something like <span><tr><td> which the browser attempts to fix and Marko doesn't recover from (hydration issue).

I would recommend only putting the reordered <await>'s inside of the <td> or outside of the table altogether (sadly).

FYI the reason this works in the playground is because the playground lies to you. It actually does a client render (which does technically support async) and client renders don't go through the browsers html parser and avoids any kind of hydration issue.

---

I am very open to discussing ways we could potentially work around this although I'm not sure we can.
Possibly if we changed the placeholder to be wrapped with comments - but that makes the inlined out of order runtime more complicated and maybe isn't worth it. Also I'm not sure off the top of my head if the browser moves comments within tables while parsing like it moves other stuff.

[vwong]

So, the problem is the placeholder, not its replacement… Would it be possible to copy the implementation of `await`, as something like `await-tr` locally, and get it to use `tr` instead of `span` as the wrapping element, so the browser handles it properly?

…

On Sat, 1 June 2024, 1:31 pm Dylan Piercey, ***@***.***> wrote: @vwong <https://github.com/vwong> this is a somewhat known issue. I'm not sure of a good way to work around it. In essence the reason this is problematic is because when a browser parser a <table> it will insert elements (eg wrapping <tbody>, <tr>, <td> etc). The way client-reorder works currently is by inserting a dummy element to wrap your ***@***.***> content, so that Marko can find and replace that content after. In your case this ends up with markup something like <span><tr><td> which the browser attempts to fix and Marko doesn't recover from (hydration issue). I would recommend only putting the reordered <await>'s inside of the <td> or outside of the table altogether (sadly). FYI the reason this works in the playground is because the playground lies to you. It actually does a client render (which does technically support async) and client renders don't go through the browsers html parser and avoids any kind of hydration issue. — Reply to this email directly, view it on GitHub <#2242 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADR6AODQANDYPYUZOYO4K3ZFE6ADAVCNFSM6AAAAABITQPTVCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBTGI3DKOBWGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>