Page MenuHomePhabricator
Create Task
Maniphest T289017

[EPIC] <Core Technology> Upgrade MediaWiki projects from Vue 2 to Vue 3
Open, In Progress, HighPublic
Actions

Description

Upgrade MediaWiki projects to Vue 3 and remove compatibility build

Current Status (5/31/23)
  • MediaWiki currently ships Vue 3 with the Compatibility build included.
  • New Vue-based features and Codex components are all being developed against the full Vue 3 API. However, there are still some legacy Vue apps embedded in skins or extensions which rely on Vue 2 behavior.
Acceptance Criteria
  • All code that uses Vue has been migrated to the full version of Vue 3, and the compatibility build has been removed.
  • This work must be completed before Vue 2 reaches EOL at the end of 2023.
Next Steps:
  • Now that we are using Vue 3 with the Compatibility Build across MediaWiki, we should go into each codebase which is using Vue.js and follow the steps documented in the Vue 3 Migration Guide. To test Vue 3 compatibility, set compatConfig: { MODE: 3 } as an option in each component file – this disables all compatibility mode features and forces full Vue 3 behavior on a per-component basis. See T289020: Migrate all extension/skin code to Vue 3 for a list of all Vue-based features; subtasks should be filed against that task for each codebase, and patches should be written against the respective codebase-specific tasks to add compatConfig flags to Vue components. These patches can be tested, deployed, and (if necessary) reverted normally.
Steps: Vue 3 Full Build
  • Begin migrating all code using Vue, addressing migration warnings then disabling compat mode for migrated components (T289020)
  • Ensure all code using Vuex is ready to be migrated (T289089)
  • Wait for the security readiness review for Vuex 4 (T288768) to be completed
  • Upgrade the Vuex version in MediaWiki to 4.0.2 (T289102)
  • Migrate code using Vuex to the new calling style (T289103)
  • Once everything is migrated, remove compatibility code and switch from the migration build of Vue to the regular build (T289104)
  • Clean up other compatibility/migration remnants, like the { compatConfig: { MODE: 3 } } settings disabling compat mode for migrated components (T289105)
Deploy Checklist
  • Coordinate QA timelines and QA sign-off across teams (product/program)
  • Target deploy train and post ETA in comments
  • Prod verify and address fast-follows

Details

TitleReferenceAuthorSource BranchDest Branch
Remove Vue.configureCompat callrepos/design-systems/CodexExample!9egardnerremove-vue-compatmain
Customize query in GitLab

Related Objects
Search...

StatusSubtypeAssignedTask
 Duplicate• STHT302350 <Core Technology> Upgrade MediaWiki to Vue 3
 In ProgressNoneT289017 [EPIC] <Core Technology> Upgrade MediaWiki projects from Vue 2 to Vue 3
 ResolvedsbassettT257734 Security Readiness Review For Vue version 3
 ResolvedMstylesT288768 Security Readiness Review For Vuex 4 (upgrade from Vuex 3)
 ResolvedCatropeT287526 Minifier can sometimes split "..." spread operator (affects Vue 3.1.5-compat)
 ResolvedNoneT289019 Test Vue 3 migration build with extensions/skins using Vue
 ResolvedegardnerT294449 Prepare MediaSearch Extension for migration to Vue 3
 ResolvedLucas_Werkmeister_WMDET294465 Make Wikibase work with the Vue 3 migration build
 ResolvedMichaelT295894 Remove vue-class-componets from Data Bridge
 ResolvedLucas_Werkmeister_WMDET296202 Migrate Termbox to Vue 3
 ResolvedLucas_Werkmeister_WMDET297006 Migrate Termbox to Node 12
 OpenNoneT300176 Make Termbox SSR and CSR match exactly
 ResolvedLucas_Werkmeister_WMDET301324 Uncaught Error: No Termbox root element found! on (Test) Wikidata mobile history pages
 OpenNoneT297381 [TECH] Wikibase CI broken: test:mwlibs can’t find MediaWiki core Vue version - investigate and fix
 ResolvedCatropeT294470 Make ContentTranslation work with the Vue 3 migration build
 ResolvedCatropeT294471 Make GlobalWatchlist work with the Vue 3 migration build
 ResolvedSimoneThisDotT294472 Make MachineVision work with the Vue 3 migration build
 ResolvedCatropeT294473 Make NearbyPages work with the Vue 3 migration build
 ResolvedCatropeT294475 Make QuickSurveys work with the Vue 3 migration build
 ResolvedCatropeT294476 Make Vector work with the Vue 3 migration build
 ResolvedJdforrester-WMFT294477 Make WikiLambda work with the Vue 3 migration build
 DeclinedNoneT295106 Update WVUI for Vue 3 compatibility
 ResolvedCatropeT284707 Treat @vue/composition-api as a peer dependency
 ResolvedegardnerT289020 Migrate all extension/skin code to Vue 3
 ResolvedSimoneThisDotT297227 Migrate the WikiLambda extension's Vue code to initiate using `createMwApp()` so we can use Vuex 4, and fixing migration warnings from Vue 3
 ResolvedNoneT304534 [EPIC] Make Wikibase work with Vue 3 (non-migration build)
 ResolvedMichaelT321096 [Spike] Figure out tasks for Lexeme Vue 3 migration
 ResolvedMichaelT321595 Migrate filters in WikibaseLexeme Vue templates to something Vue 3 compatible
 ResolvedMichaelT321909 Decide on what needs to be updated in php-vuejs-templating to migrate the filter in Lexeme
 ResolvedMichaelT321911 Extend php library to support both new and old syntax
 ResolvedLucas_Werkmeister_WMDET321912 Make use of new library in Lexeme (and vendor)
 ResolvedLucas_Werkmeister_WMDET321913 Migrate filter syntax in our templates
 ResolvedLucas_Werkmeister_WMDET321914 Clean up library
 ResolvedMichaelT321670 Migrate `:language.sync="language"` in WikibaseLexeme Vue templates to `v-model:` syntax
 ResolvedMichaelT321672 Migrate existing `v-model` sytax in WikibaseLexeme Vue templates to Vue 3
 ResolvedMichaelT298797 Make Wikidata Bridge work with pure Vue 3
 ResolvedSimoneThisDotT305133 [M] Update application to Vue 3 Mode
 ResolvedegardnerT336821 Migrate MediaSearch to Codex
 ResolvedegardnerT336954 TextInput: Emit a "clear" event when the clear button is clicked
 ResolvedegardnerT337429 TextInput: Add public blur() method
 ResolvedegardnerT337442 Don't output ARIA attributes with "false" values in component markup
 ResolvedngkountasT338829 Migrate ContentTranslation to Vue 3
 ResolvedSgsT338830 Migrate GrowthExperiments to Vue 3
 ResolvedUrbanecm_WMFT340104 Clean mentor dashboard warnings
 DeclinedNoneT338831 Migrate MachineVision to Vue 3
 ResolvedCatropeT338838 Migrate NearbyPages to Vue 3
 ResolvedCatropeT338839 Migrate QuickSurveys to Vue 3
 ResolvedCatropeT338840 Migrate ReadingLists to Vue 3
 ResolvedSBissonT338841 Migrate Wikistories to Vue 3
 ResolvedCatropeT339048 Migrate WikiLove to Vue 3
 ResolvedCatropeT339049 Migrate SearchVue extension to Vue 3
 ResolvedCatropeT339965 Migrate WikiLambda extension to Vue 3
 ResolvedNoneT289089 Prepare code using Vuex for migration from Vuex 3 to Vuex 4
 ResolvedegardnerT289102 Upgrade Vuex to version 4
 ResolvedegardnerT289103 Migrate all extension code using Vuex to Vuex 4
 ResolvedegardnerT289104 Remove compatibility code for Vue 2 and Vuex 3
 ResolvedJdforrester-WMFT270783 Migrate WikiLambda Vue code to Vue3
 ResolvedegardnerT251974 Prepare Vue 2 to Vue 3 migration
 ResolvedEdtadrosT297421 Search results are not clickable
 ResolvedSimoneThisDotT301520 Drop our dependency on Vue Router so we can migrate to Vue3 more easily
 In ProgressNoneT289105 Remove compatConfig from Vue settings
 ResolvedlwatsonT354544 Remove compatConfig from DST hosted extensions
 OpenNoneT355239 [CLIENT] [LEX] Remove compatConfig from Wikidata-related codebases
 OpenUniversal_OmegaT355339 Remove compatConfig from Skin:Cosmos
 ResolvedMPGuy2824T355384 PageTriage: Remove compatConfig from Vue settings
 OpenNoneT357420 Remove compatConfig from settings in SearchVue
 OpenNoneT357421 Remove compatConfig from settings in MediaSearch
 ResolvedJdforrester-WMFT302129 Migrate all CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 ResolvedCatropeT302130 Migrate WikiLambda's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 ResolvedSimoneThisDotT297722 Testing: Update MediaSearch front-end unit tests to Vue 3
 Resolved• AdesojiThisDotT300106 Upgrade Vuetest-util and make 1 test pass
 ResolvedSimoneThisDotT300107 Upgrade all vue test for vuex store
 ResolvedSimoneThisDotT300108 Update all "components/base" unit test to use the new version of vue test util
 ResolvedSimoneThisDotT300109 Update all "components" unit test to use the new version of vue test util
 ResolvedSimoneThisDotT300110 Update all "mixins" unit test to use the new version of vue test util
 ResolvedSimoneThisDotT300111 Update all "results" unit test to use the new version of vue test util
 ResolvedSimoneThisDotT302134 [L] Migrate MachineVision's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 ResolvedJdlrobsonT300573 Upgrade Vue.js development version in web team extensions / skins
 ResolvedJdlrobsonT302136 Migrate QuickSurveys's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 ResolvedJdlrobsonT302137 Migrate Vector's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 InvalidNoneT308742 Design Spike: Building QuickSurveys in Codex
 ResolvedegardnerT302831 Develop guidelines for migrating Vue test suites to V3
 DeclinedNoneT303063 Migrate WVUI code and test suite to Vue 3 compatibility mode
 ResolvedVolker_ET310240 Remove Vue version of GlobalWatchlist with its WVUI dependency
 ResolvedNoneT302135 Migrate NearbyPages's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 ResolvedNoneT314602 Migrate Wikibase's CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode
 ResolvedCatropeT313358 Write guidelines for working with the Vue 3 migration build that teams can reference
 DeclinedBUG REPORTNoneT323492 When running in Vue compat mode, CdxTextInput does not emit correct model update event when its input is set in Jest tests.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
sbassett closed subtask T257734: Security Readiness Review For Vue version 3 as Resolved.Dec 3 2021, 9:56 PM
• STH added a project: Foundational Technology Requests.Dec 3 2021, 10:07 PM
Catrope closed subtask T289019: Test Vue 3 migration build with extensions/skins using Vue as Resolved.Dec 7 2021, 6:41 PM
Catrope updated the task description. (Show Details)
Catrope reopened subtask T289019: Test Vue 3 migration build with extensions/skins using Vue as Open.Dec 7 2021, 9:55 PM
Catrope closed subtask T289019: Test Vue 3 migration build with extensions/skins using Vue as Resolved.Dec 8 2021, 8:41 PM
Catrope updated the task description. (Show Details)
DAbad moved this task from Backlog to Work In Progress on the Foundational Technology Requests board.Dec 8 2021, 9:26 PM
sbassett changed the status of subtask T288768: Security Readiness Review For Vuex 4 (upgrade from Vuex 3) from Open to In Progress.Dec 8 2021, 9:54 PM
Catrope updated the task description. (Show Details)Dec 16 2021, 10:00 PM
Catrope closed subtask T289089: Prepare code using Vuex for migration from Vuex 3 to Vuex 4 as Resolved.Dec 16 2021, 10:19 PM
Catrope updated the task description. (Show Details)
• STH updated the task description. (Show Details)Dec 17 2021, 4:05 PM
• STH changed the task status from Open to In Progress.Dec 23 2021, 7:39 PM
• STH triaged this task as High priority.
• STH updated the task description. (Show Details)Jan 6 2022, 2:41 PM
sbassett closed subtask T288768: Security Readiness Review For Vuex 4 (upgrade from Vuex 3) as Resolved.Jan 11 2022, 8:01 PM
Jdforrester-WMF mentioned this in T251974: Prepare Vue 2 to Vue 3 migration.Jan 19 2022, 9:06 PM
• santhosh mentioned this in T299622: Migrate Section translation to Vue 3.Jan 20 2022, 6:42 AM
eamedina subscribed.Jan 24 2022, 8:54 PM
egardner mentioned this in T289208: Develop and document a proposal for when to use Vue/Codex.Jan 24 2022, 11:49 PM
• STH moved this task from Patches for Code Review (let's try to clear this out) to Vue.js Migration on the Design-Systems-team-20200324-20220422 board.Jan 31 2022, 6:55 PM
egardner closed subtask T251974: Prepare Vue 2 to Vue 3 migration as Resolved.Feb 15 2022, 10:15 PM
egardner closed subtask T289102: Upgrade Vuex to version 4 as Resolved.Feb 15 2022, 10:20 PM
• STH mentioned this in T298268: <Core Technology> Organize Process for Browser Degradation Requests.Feb 18 2022, 7:27 PM
• STH removed a project: Foundational Technology Requests.Feb 22 2022, 9:16 PM
• STH mentioned this in T302350: <Core Technology> Upgrade MediaWiki to Vue 3.Feb 22 2022, 9:21 PM
Aklapper added a parent task: T302350: <Core Technology> Upgrade MediaWiki to Vue 3.Mar 1 2022, 12:28 PM
• STH mentioned this in T303325: IE11 User and Traffic Analysis.Mar 8 2022, 8:03 PM
• STH mentioned this in T279421: Update Vue and Codex documentation for WMF staff and community developers.Apr 12 2022, 7:50 PM
Aklapper added a project: Design-System-Team.Apr 25 2022, 11:31 AM

Adding Design-System-Team because Design-Systems-team-20200324-20220422 got archived though this open task has no other active project tags associated, so it cannot be found on boards.

ldelench_wmf subscribed.Apr 25 2022, 2:08 PM

Thank you for catching this, @Aklapper !

• STH changed the task status from In Progress to Stalled.Apr 30 2022, 5:37 PM
• STH moved this task from Inbox to Foundational Technology Backlog on the Design-System-Team board.

Teams such as WMDE have requested advance notice to plan this in to an upcoming quarter. We can target the July-September quarter to complete this and should begin outreach to affected teams in May/June.

• STH changed the status of subtask T289105: Remove compatConfig from Vue settings from Open to Stalled.Apr 30 2022, 5:53 PM
• STH lowered the priority of this task from High to Medium.May 1 2022, 1:20 PM
Catrope updated the task description. (Show Details)May 19 2022, 6:16 PM
• STH removed a project: Design-Systems-team-20200324-20220422.May 20 2022, 2:40 PM
• STH added a subscriber: NBaca-WMF.
• STH added a project: Foundational Technology Requests.May 20 2022, 2:42 PM
• STH updated the task description. (Show Details)
• STH moved this task from Work In Progress to Parking Lot (Reviewed but Not Prioritized) on the Foundational Technology Requests board.
• STH merged a task: T302350: <Core Technology> Upgrade MediaWiki to Vue 3.
• STH added a subscriber: DAbad.
• STH renamed this task from [Epic] Migrate from Vue 2 to Vue 3 to <Core Technology> Upgrade MediaWiki projects from Vue 2 to Vue 3.May 20 2022, 2:47 PM
• STH updated the task description. (Show Details)
Michael subscribed.May 21 2022, 1:15 PM
egardner mentioned this in T314082: Design System Infrastructure Capabilities Scoping.Jul 28 2022, 7:49 PM
Aklapper added a subtask: T302129: Migrate all CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode.Aug 3 2022, 8:16 AM
ldelench_wmf moved this task from Foundational Technology Backlog to Backlog on the Design-System-Team board.Sep 16 2022, 6:13 PM
Catrope added a subtask: T313358: Write guidelines for working with the Vue 3 migration build that teams can reference.Oct 18 2022, 5:17 AM
Catrope closed subtask T313358: Write guidelines for working with the Vue 3 migration build that teams can reference as Resolved.
ldelench_wmf renamed this task from <Core Technology> Upgrade MediaWiki projects from Vue 2 to Vue 3 to [EPIC] <Core Technology> Upgrade MediaWiki projects from Vue 2 to Vue 3.Nov 17 2022, 11:25 PM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.
Jdforrester-WMF closed subtask T302129: Migrate all CLI testing of Vue code (jest etc.) from Vue 2 to Vue 3 in compatibility mode as Resolved.Nov 28 2022, 4:47 PM
egardner closed subtask T289103: Migrate all extension code using Vuex to Vuex 4 as Resolved.Dec 20 2022, 10:18 PM
ldelench_wmf updated the task description. (Show Details)Feb 9 2023, 6:07 PM
ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap).Feb 13 2023, 10:43 PM
CCiufo-WMF moved this task from Backlog to Needs Refinement on the Design-System-Team board.May 30 2023, 4:13 PM
egardner claimed this task.May 31 2023, 6:34 PM
egardner updated the task description. (Show Details)
egardner moved this task from Needs Refinement to Design-System-Sprint on the Design-System-Team board.
egardner edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.
Restricted Application raised the priority of this task from Medium to High. · View Herald TranscriptMay 31 2023, 6:35 PM
egardner moved this task from Committed to Blocked ⛔ on the Design-System-Team (Design-System-Sprint) board.May 31 2023, 6:36 PM

This task is in progress again, but we can consider it "blocked" until T289020: Migrate all extension/skin code to Vue 3 is complete.

egardner changed the status of subtask T289020: Migrate all extension/skin code to Vue 3 from Open to In Progress.May 31 2023, 6:37 PM
egardner edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).Jun 5 2023, 4:48 PM
egardner moved this task from Inbox to Up Next on the Design-System-Team board.
CCiufo-WMF moved this task from Up Next to Design-System-Product-Roadmap on the Design-System-Team board.Jun 6 2023, 9:20 PM
CCiufo-WMF edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.
egardner mentioned this in T337320: [Spike] Investigate A/B test results of Growth Experiments impact module.Jun 16 2023, 11:35 PM
CCiufo-WMF moved this task from Now to Next on the Design-System-Team (Design-System-Product-Roadmap) board.Aug 15 2023, 9:01 PM
CCiufo-WMF added a subtask: T323492: When running in Vue compat mode, CdxTextInput does not emit correct model update event when its input is set in Jest tests..Sep 4 2023, 7:52 PM
Jdforrester-WMF closed subtask T289020: Migrate all extension/skin code to Vue 3 as Resolved.Nov 21 2023, 8:20 PM
Jdforrester-WMF updated the task description. (Show Details)
egardner added a comment.Nov 28 2023, 9:00 PM

I did a quick search for Vue.configureCompat calls across our codebases. Unlike some of the other compat code artifacts, this line will cause JS to error out once we remove the migration build, since that method will no longer exist on the Vue object. We will need to ensure all traces of this are removed from any code that is still in production before we flip the switch.

Here are the places that still include this code as of Tuesday Nov 28:

  • The Extension:VueTest (this is a legacy example repo maintained by DST; we've talked about replacing this with the more modern CodexExample; perhaps it's time to archive this repo?) – this is not deployed in production anywhere
  • Extension:MachineVision – this has also been officially un-deployed, right?
  • Extension:FileImporter – who maintains this?
  • CodexExample Extension – this lives in GitLab and is not picked up by CodeSearch. I will update this shortly.
CodeReviewBot added a project: Patch-For-Review.Nov 28 2023, 9:03 PM

egardner opened https://gitlab.wikimedia.org/repos/design-systems/CodexExample/-/merge_requests/9

Remove Vue.configureCompat call

Catrope added a comment.Nov 28 2023, 9:10 PM

All of these configureCompat calls have already been wrapped in if statements, so they should be safe. See e.g. https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VueTest/+/968789 . We should remove these after the migration is complete, but for now I think it makes the most sense to keep them as conditional calls.

CodeReviewBot added a comment.Nov 30 2023, 9:28 PM

catrope merged https://gitlab.wikimedia.org/repos/design-systems/CodexExample/-/merge_requests/9

Remove Vue.configureCompat call

Maintenance_bot removed a project: Patch-For-Review.Nov 30 2023, 9:30 PM
CCiufo-WMF moved this task from Next to Now on the Design-System-Team (Design-System-Product-Roadmap) board.Dec 5 2023, 2:53 PM
egardner changed the task status from Stalled to In Progress.Dec 7 2023, 5:46 PM
Volker_E closed subtask T289104: Remove compatibility code for Vue 2 and Vuex 3 as Resolved.Dec 21 2023, 11:56 PM
CCiufo-WMF updated the task description. (Show Details)Dec 22 2023, 3:47 PM
CCiufo-WMF removed egardner as the assignee of this task.Jan 16 2024, 2:12 PM
CCiufo-WMF changed the status of subtask T289105: Remove compatConfig from Vue settings from Stalled to In Progress.Jan 22 2024, 2:13 PM
CCiufo-WMF moved this task from Design-System-Product-Roadmap to Following on the Design-System-Team board.Jan 30 2024, 7:53 PM
CCiufo-WMF edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap).
Catrope closed subtask T323492: When running in Vue compat mode, CdxTextInput does not emit correct model update event when its input is set in Jest tests. as Declined.Mon, Mar 25, 5:50 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL