Page MenuHomePhabricator

Implement $i18n in UV
Open, In Progress, MediumPublic

Description

As part of our effort to reduce our bundle size (see T348406, T348405), we will switch to using the in-built i18n that comes with MediaWiki Vue.

  • restructure i18n loading to support mw.message format
  • convert i18next files to mw.message format
  • load i18n files based on config
  • replace all calls to i18next with $i18n

Details

TitleReferenceAuthorSource BranchDest Branch
Draft: Use $.i18n instead of i18next (T348470)repos/10nm/ultraviolet!7sportzwork/sportz/T348470dev
Customize query in GitLab

Event Timeline

Sportzpikachu moved this task from Needs Triaging to Backlog on the Ultraviolet board.
Sportzpikachu renamed this task from Use mw.Message instead of i18next to Use $.i18n instead of i18next.Oct 12 2023, 8:40 AM
Sportzpikachu updated the task description. (Show Details)
Sportzpikachu changed the task status from Open to In Progress.Oct 13 2023, 6:44 PM

Should we rename this task, @Sportzpikachu? Considering we only really have one choice for internationalization (per T348406).

Sportzpikachu renamed this task from Use $.i18n instead of i18next to Implement i18n in UV.Mon, Apr 29, 11:29 AM
Chlod renamed this task from Implement i18n in UV to Implement $i18n in UV.Mon, Apr 29, 11:36 AM
Chlod updated the task description. (Show Details)

Some problems with mw.Message and its Vue plugin:

  • Doesn't seem to have bidi support by default (provided by mw.jqueryMsg module)
  • No locale key loading - no fallbacks, etc
    • only way to switch locale is by overriding keys
  • No reactivity with message keys
    • Keys must be loaded before any UI is mounted (i.e., configuration must be loaded and user-defined locale must be loaded before UI mount)
    • Locale switching does not affect UI and requires a reload

One approach we might be able to take is to bundle banana-i18n for now until it arrives in ResourceLoader (see T352618). This allows us to use vue-banana-i18n as well, which allows for reactive message rendering that updates with global locale changes.