close
Page MenuHomePhabricator

[MEX] Let wbui2025 server-side rendering serve <style>s of .vue files to no-JS clients
Closed, ResolvedPublic

Description

Currently, Wikibase’s repo/resources/wikibase.wbui2025/ directory contains some .vue files with included <style> blocks, and some .vue files with associated separate .less files. We would like to use the former style for all components, with no separate .less files anymore.

The reason for the current format is purely technical. Our server-side rendering approach can render .vue files into HTML that we can send to no-JS clients; however, it currently ignores <style> blocks inside those files. Thus, if we want the server-rendered no-JS HTML to be styled at all, those styles need to be in separate .less files, which we can then serve via a separate ResourceLoader module (wikibase.wbui2025.entityView.styles); whereas components that are never server-rendered (anything interactive) don’t need this and can use normal <style> blocks inside the component.

We should extend php-vuejs-templating so that it can extract the <style> blocks, wire those up so they can be served by ResourceLoader, and then merge all the .less files into the corresponding .vue files.

Acceptance criteria:

  • there are no more separate .less files inside repo/resources/wikibase.wbui2025
  • the server-rendered HTML still looks nice and correctly styled without JavaScript enabled

Event Timeline

Task Time note: the task is ready for picking up, but doesn’t go into the backlog yet because it’s not part of milestone 3.

Implementation notes:

  • This would probably take the form of a custom MediaWiki\ResourceLoader\Module subclass, which pulls the styles out of the php-vuejs-templating App in its getStyles() (or similar) implementation.
    • maybe we should put that App into the service container?
  • It would probably still be a separate RL module for no-JS clients, distinct from the “main” wbui2025 module with all the JS code and the interactive .vue files.

Change #1300105 had a related patch set uploaded (by Mahmoud-abdelsattar; author: Mahmoud-abdelsattar):

[mediawiki/extensions/Wikibase@master] Serve component styles from .vue <style> blocks

https://gerrit.wikimedia.org/r/1300105

Change #1303399 had a related patch set uploaded (by Mahmoud-abdelsattar; author: Mahmoud-abdelsattar):

[mediawiki/extensions/Wikibase@master] Bump wmde/php-vuejs-templating to 2.2.0-beta.12

https://gerrit.wikimedia.org/r/1303399

Change #1303432 had a related patch set uploaded (by Mahmoud-abdelsattar; author: Mahmoud-abdelsattar):

[mediawiki/vendor@master] Bump wmde/php-vuejs-templating to 2.2.0-beta.12

https://gerrit.wikimedia.org/r/1303432

Change #1303432 merged by jenkins-bot:

[mediawiki/vendor@master] Bump wmde/php-vuejs-templating to 2.2.0-beta.12

https://gerrit.wikimedia.org/r/1303432

Change #1303399 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Bump wmde/php-vuejs-templating to 2.2.0-beta.12

https://gerrit.wikimedia.org/r/1303399

Change #1300105 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Serve component styles from .vue <style> blocks

https://gerrit.wikimedia.org/r/1300105