Description

Problem:

The current wikibase.wbui2025 directory structure does not follow Vue.js 3 best practices and has several issues:

Flat directory structure: All components, utilities, and assets are mixed in a single directory.
Verbose file naming: Files use the pattern wikibase.wbui2025.[COMPONENT_NAME].[vue/less/js] which is redundant and hard to read.
Poor organization: Related files (components, styles, utilities) are not grouped logically.
Inconsistent with modern Vue.js practices: Missing proper folder structure for components, styles, etc.

Current structure

Proposed structure:

Refactor the directory structure to follow Vue.js 3 best practices with proper organization and clean file naming:

File naming changes examples:

Current name	New name
`wikibase.wbui2025.addStatementButton.vue`	`components/addStatementButton.vue`
`wikibase.wbui2025.editStatement.vue`	`components/editStatement.vue`
`wikibase.wbui2025.editStatementGroup.vue`	`components/editStatementGroup.vue`
`wikibase.wbui2025.qualifiers.less`	`components/qualifiers.less`
`tests/jest/wikibase.wbui2025.addQualifier.spec.js`	`tests/jest/components/addQualifier.spec.js`

Acceptance criteria:

File names no longer contain the wikibase.wbui2025. prefix but the names inside the components should not be changed.
The components directory will be created and to have all the .vue and .less files in that folder as a flat hierarchy.
All import paths are updated and working.
The refactoring should be done in two phases (two patches), one for file renames, and one for the new directories restructuring.
ResourceLoader module registration is updated.
The Jest tests in tests/jest should also be reflected to the new structure and should not include the prefix in the filenames.
All existing tests pass.
No functionality is broken and no new functionality should be added within this refactoring.
Documentation file should be created that reflects the current structure.

Notes:

This refactoring should be done carefully to avoid breaking the existing functionality.
The directories api and store will remain unchanged.
Consider adding other directories of different types in case we need them (ike helpers/constants ... etc.).
If we have one file (like utils.js, it is better to not make it inside a directory utils, we add the directory if there are more files).
Entry files like lib.js and entityViewInit.js will stay in the root directory wikibase.wbui.2025 as they are now.
Related refactoring: Let wbui2025 server-side rendering serve <style>s of .vue files to no-JS clients (T409827)

	Subject	Author	Repo	Branch	Lines +/-
	Restructuring the components	Mahmoud-abdelsattar	mediawiki/extensions/Wikibase	master	+189 -189
	Removing the wikibase.wbui2025 prefix	Mahmoud-abdelsattar	mediawiki/extensions/Wikibase	master	+114 -114

Event Timeline

mahmoud.abdelsattar.wmde created this task.Sep 29 2025, 11:58 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 29 2025, 11:58 AM

WMDE-leszek subscribed.Oct 1 2025, 11:57 AM

karapayneWMDE moved this task from Incoming to MEX Incoming column on the Wikidata-Omega board.Oct 21 2025, 8:52 AM

karapayneWMDE moved this task from MEX Incoming column to Ready for Task Time (Story Writing) on the Wikidata-Omega board.Oct 22 2025, 12:17 PM

Story writing notes: @mahmoud.abdelsattar.wmde will create a meeting and share resources to discuss approaches to the new architecture to come to a team agreement

💬 Discussion Summary: Vue.js directory structure refactor proposal

In the MatterMost channel "Wikidata - Omega", we’ve discussed the proposed restructuring of the extensions/Wikibase/repo/resources/wikibase.wbui2025 directory in the thread.
The goal is to improve scalability, maintainability, and readability of the Vue.js codebase as the project (MEX) grows.

Summary of discussed points

✅ The proposal

Introduce a standardized, nested folder structure following Vue 3 ecosystem and community best practices.
Remove redundant prefixes like wikibase.wbui2025. from file names.
Organize files by feature/domain boundaries (e.g., statements, properties, qualifiers) to reduce cognitive load and improve onboarding.
Align with Vue.js conventions to make the codebase easier to navigate for both current and new developers.
Benefits highlighted:
- Industry standardization: Familiar to most Vue developers.
- Scalability: Easier to extend and maintain as components increase.
- Maintainability: Logical grouping improves discoverability and reduces refactor cost later.
- Team collaboration: Consistent structure helps onboarding and code ownership.
- Future-proofing: Aligns with modern Vue architecture recommendations.

💡 Team's feedback

Arthur: Prefers to avoid over-engineering at this stage, as the current component count is low (~12–13). Supports renaming files and cleaning up naming, but finds creating many subdirectories premature until the structure proves necessary. Shared resources (e.g., Vue School: Large Scale Vue.js Structure).
Lucas: Agrees on simplifying naming but supports keeping a flatter structure until the project scales further.
Halima: Finds the flat structure confusing and supports restructuring to reduce technical debt and improve navigation.

Resources

Next Steps

Decide as a team in the ticket or follow up via a short meeting the best directory structure.
Decide if we should do the refactoring in one big patch, or as we go.

mahmoud.abdelsattar.wmde updated the task description. (Show Details)Nov 11 2025, 2:18 PM

mahmoud.abdelsattar.wmde moved this task from Ready for Task Time (Story Writing) to The Backlog on the Wikidata-Omega board.

mahmoud.abdelsattar.wmde updated the task description. (Show Details)Nov 11 2025, 2:23 PM

mahmoud.abdelsattar.wmde updated the task description. (Show Details)Nov 11 2025, 3:26 PM

mahmoud.abdelsattar.wmde claimed this task.Nov 12 2025, 7:48 AM

mahmoud.abdelsattar.wmde moved this task from The Backlog to The Board on the Wikidata-Omega board.

mahmoud.abdelsattar.wmde edited projects, added: Wikidata-Omega (The Board); removed: Wikidata-Omega.

mahmoud.abdelsattar.wmde moved this task from new to the board to In Development on the Wikidata-Omega (The Board) board.

mahmoud.abdelsattar.wmde updated the task description. (Show Details)Nov 12 2025, 11:19 AM

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

[mediawiki/extensions/Wikibase@master] Removing the wikibase.wbui2025 prefix

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

gerritbot added a project: Patch-For-Review.Nov 12 2025, 2:54 PM

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

[mediawiki/extensions/Wikibase@master] Restructuring the components

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

🔄 Development Handover Summary

NOTE: 🟢 Move from "In Development" > "Ready for Peer Review"

📋 Overview

Restructure wikibase.wbui2025 to proper Vue 3 architecture.
Refactor the directory structure with proper organization and clean file naming.

✅ Work Completed

File names no longer contain the wikibase.wbui2025. prefix but the names inside the components should not be changed.
The components directory will be created and to have all the .vue and .less files in that folder as a flat hierarchy.
All import paths are updated and working.
The refactoring should be done in two phases (two patches), one for file renames, and one for the new directories restructuring.
ResourceLoader module registration is updated.
The Jest tests in tests/jest should also be reflected to the new structure and should not include the prefix in the filenames.
All existing tests pass.
No functionality is broken and no new functionality should be added within this refactoring.