Lucas_Werkmeister_WMDE added a comment.
The above change doesn’t work properly yet:
> Hydration completed but contains mismatches.
(You can get more detailed messages with ?debug.) I think this is because of
the changed mounting behavior in Vue 3. The SSR contains HTML like `<section
class="wikibase-entitytermsview">`, and Wikibase adds that to its
server-rendered HTML for something like this:
<div class="wikibase-entityview-main">
<section class="wikibase-entitytermsview">
…
</section>
<div id="toc"></div>
<h2 class="wb-section-heading section-heading wikibase-statements"
dir="auto"><span class="mw-headline" id="claims">Statements</span></h2>
<div class="wikibase-statementgrouplistview">
…
</div>
</div>
Then, when hydrating the termbox, we call `app.mount(
'.wikibase-entitytermsview' )`, which under Vue 2 was expected to replace the
element matching that selector (the `<section>`). In Vue 3, this tries to mount
the app inside / below that element instead, which produces the hydration
mismatches, but also the following DOM when the hydration is finished:
<section class="wikibase-entitytermsview" dir="ltr" lang="en">
<div class="wb-ui-termbox">
<section class="wikibase-entitytermsview" dir="ltr" lang="en">
<div class="wb-ui-termbox">
…
</div>
</section>
</div>
</section>
We can’t just change the `.mount()` call to use the selector
`.wikibase-entityview-main` instead, because that would wipe the other content
in there (the statements). I think we need to introduce a new wrapper div. And
I think we need to do that in Wikibase.git (not in the SSR), so that we can
deploy these changes at the same time:
- Wikibase PHP code emits HTML with an extra div around the `<section>`
- Termbox JS code (Wikibase submodule) mounts under that extra div
And I think we’ll want to make sure that this div is in the part of the HTML
that doesn’t end up in the parser cache.
TASK DETAIL
https://phabricator.wikimedia.org/T296202
EMAIL PREFERENCES
https://phabricator.wikimedia.org/settings/panel/emailpreferences/
To: Lucas_Werkmeister_WMDE
Cc: Catrope, Michael, Lucas_Werkmeister_WMDE, Aklapper, 786, Suran38, Biggs657,
Invadibot, Lalamarie69, maantietaja, Juan90264, Alter-paule, Beast1978, Un1tY,
Akuckartz, Hook696, darthmon_wmde, Kent7301, joker88john, CucyNoiD, Nandana,
Gaboe420, lucamauri, Giuliamocci, Cpaulf30, Lahi, Gq86, Af420, Bsandipan,
GoranSMilovanovic, QZanden, LawExplorer, Lewizho99, Maathavan, _jensen,
rosalieper, Neuronton, Scott_WUaS, Wikidata-bugs, aude, Lydia_Pintscher,
Addshore, Mbch331
_______________________________________________
Wikidata-bugs mailing list -- [email protected]
To unsubscribe send an email to [email protected]
