Page MenuHomePhabricator

Migrate filters in WikibaseLexeme Vue templates to something Vue 3 compatible
Closed, ResolvedPublic5 Estimated Story Points


As part of the migration of Vue 2 to Vue 3 for all code that is deployed on Wikimedia-deployed MediaWikis, we need to also migrate the Vue code in WikibaseLexeme. That code is still using the legacy Vue 2 feature of "filters". They are no longer available in Vue 3.

In WikibaseLexeme we're using three different filters:

  • gloss.language|languageName
  • gloss.language|directionality
  • 'wikibaselexeme-sense-gloss-redundant-language'|message

There is already a change demonstrating how to replace these filter calls with method calls: Vue 3: Turn filters into methods (I28310c09)

However, one particular challenge is that we are using the wmde-built library php-vuejs-templating to render these templates in a PHP process. That library needs to be modified to support the new syntax. On the positive side though, this library is currently only used for Lexeme, but is much more general than it needs to be for that purpose. Particularly, it supports arguments for filters, multiple variables and multiple filters, even though we have no instance where any of that is used.
So we can simplify it down to supporting only our current use-case.

You can see a current list of filter expressions in our templates in code search: filter expressions in *.vue.html files in WikibaseLexeme

Acceptance Criteria

Event Timeline

While figuring out what needs to be done in php-vuejs-templating, I accidentally implemented a minimal version of it:

This still needs to roll out with the next train starting on 2022-11-14, but as far as I can tell, this is completely done, and I'm not aware of any meaningful dangling pieces. (I found T322623 while testing, but that seems unrelated.)

Lucas_Werkmeister_WMDE assigned this task to Michael.

We haven’t heard of any breakage on Lexeme pages since this rolled out, so I think we can call this done \o/