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

• Migrate all filter expressions in Extension:WikibaseLexeme (5 files)
  • resources/templates/glossWidget.vue.html (8 matches)
  • resources/templates/languageAndLexicalCategoryWidget.vue.html (4 matches)
  • resources/templates/lemma.vue.html (5 matches)
  • resources/templates/lexemeHeader.vue.html (3 matches)
  • resources/templates/representations.vue.html (5 matches)
• Modify php-vuejs-templating so that our server-side rendering still works as it used to

Notes

• The midterm plan is for php-vuejs-templating is to be replaced by proper general-purpose SSR.