Page MenuHomePhabricator

Make Termbox SSR and CSR match exactly
Open, Needs TriagePublic

Description

When hydrating the server-side rendered markup, Vue produces warnings and errors about some mismatches between the virtual DOM it’s now constructed and the actual DOM that was once generated by SSR. Currently, we hide these warnings and errors, but it would be nice to not emit them in the first place.

The main error seems to be related to the use of the <wb:sectionedit>…</wb:sectionedit> tags in the Sectionedit component, which some Wikibase PHP code (ToolbarEditSectionGenerator::enableSectionEditLinks( $text, $isEditable )) either replaces with their content (editable) or removes including their content (not editable).

Event Timeline

Instead of manipulating the SSR HTML in PHP, we might be able to add the necessary information to the wrapper element (which we need anyways, for mounting – see T296202#7652549 and the next comment there), and then use some CSS like .wikibase-entitytermsview-noneditable .wikibase-sectionedit { display: none; } to hide the sectionedit component when the wrapper element indicates the page is non-editable.

Task Review Notes:

  • In T318137 as part of the Gerrit patch, hydration was completely disabled, and the DOM is created from scratch in the client-side, which renders the problem presented in this task irrepreducible.
  • The question remains whether we want to re-enable hydration, and as a result we will need to solve this issue too.

Prioritization Notes:

  • Does not affect end - users / production
  • Does affect development efforts (ideally we do not suppress warning and errors, but solve them)
  • Unclear whether affect onboarding efforts (checks and tests are a pivotal part of trying to understand a system, ideally they should pass, but the task might be outdated)
  • Does not affect additional stakeholders.

I think MediaWiki-extensions-Wikibase-Client was added by mistake. If it was added intentionally, then feel free to readd it.