`<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: ***@***.***>

[DylanPiercey]

@vwong FYI I was looking at this with Marko 6
https://markojs.com/playground#djIfiwgAAAAAAAAThVDLSsQwFP2VS3CRwmDqdkzLfIKIO-Mi01ycYJoMyR2rdPrv0kcwgujuvs7jnueRnTWd2J5Zb_DjttfxLbAd64In9MT2LJEm20EXfCJ4RY9REz6GARrgygNwo0lX0LRzA-BxgIcYepuQ84gpuHectzCue4CE9GR7DBfi_OcGYAOsnPd5Pu3grq7rPJgq5edaeUn66HBRlnQM5nMzISnmEkAezk53eArOYGy_tSSV3dybduGD4l4KMiVGFCApfmWWetCWrhHTxdG14UVmXLEYBtjCTYpV1T-GbsaVZ_rbyCKZnxf5eylyKFKsSbHp5Qsrxi_p8gEAAA

I think it's more difficult than I originally thought above. Basically Marko 6 now uses comments for the placeholders (which means the placeholder renders fine). However this still has a problem because when the replacement content resolves, parsing a <tr> outside of a table element just doesn't work (the browser completely omits it).

Essentially Marko 6 sends something like this:

<t>
  <tr>row contents</tr> 
</t>

which the browser parses into

<t>
  row contents
</t>

The reason we use <t> and not <template> for the replacements is to allow the browser to actually begin processing the assets inside the reordered content (which can avoid FOUC and other issues).

🤔

[vwong]

Hmm... It's been a while since I raised this, and I've since moved on to putting the <await> outside of the table. I suppose we can close this and mark it as a "known issue" perhaps?