Open vwong opened 3 months ago
Curiously, this works as expected in the Marko Playground
@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.
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
it will insert elements (eg wrapping ,
, 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
which the browser attempts to fix and Marko doesn't recover from (hydration issue). I would recommend only putting the reordered
's inside of the 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 https://github.com/marko-js/marko/issues/2242#issuecomment-2143265865, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADR6AODQANDYPYUZOYO4K3ZFE6ADAVCNFSM6AAAAABITQPTVCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBTGI3DKOBWGU . You are receiving this because you were mentioned.Message ID: @.***>
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 withoutclient-reorder
.Actual Behavior
Both placeholder and result remains in the HTML.
Steps to Reproduce
See reproduction