Page MenuHomePhabricator
Create Task
Maniphest T340460

Allow .vue files to be used in Gadgets
Closed, ResolvedPublicFeature
Actions

Description

ResourceLoader currently does not allow .vue files to be used in on-wiki modules (only .js, .css and .json) files. We want to allow .vue files, but we don't want to allow Less (via <style lang="less">) in these, only CSS. This is because we decided not to make Less available in user-authored modules in T56864#6153179, for fear that arbitrary user-authored Less code could take arbitrarily long to execute.

Because all the code for .vue file handling is currently in FileModule, some of it will need to be moved to Module, while preserving the ability of FileModule to allow Less to be used and the ability of WikiModule to forbid it.

  • Add a content model for .vue pages, with the same special treatment as .js pages
  • Move (most) .vue handling code from FileModule to Module
  • Allow .vue pages to be used in WikiModule
  • Do not allow Less to be used in WikiModule (but continue to allow it in FileModule)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Support .vue files in packaged gadgetsmediawiki/extensions/Gadgetsmaster+18 -5
Syntax highlight pages with Vue content modelmediawiki/extensions/SyntaxHighlight_GeSHimaster+1 -0
Support Vue content model in CodeEditormediawiki/extensions/CodeEditormaster+3 -0
Add content model for Vue and support loading via ResourceLoadermediawiki/coremaster+333 -54
[WIP] Support loading .vue pages in the MediaWiki namespacemediawiki/coremaster+301 -12
Customize query in gerrit

Related Objects
Search...

Event Timeline

Catrope created this task.Jun 26 2023, 4:28 PM
Restricted Application added a project: Performance-Team. · View Herald TranscriptJun 26 2023, 4:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
gerritbot added a comment.Jun 26 2023, 4:29 PM

Change 907557 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/extensions/Gadgets@master] [WIP] Support .vue files in packaged gadgets

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

gerritbot added a project: Patch-For-Review.Jun 26 2023, 4:29 PM

Change 907556 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] [WIP] Support loading .vue pages in the MediaWiki namespace

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

Catrope mentioned this in T313945: [EPIC] Enable gadget and user-script developers to use Vue and Codex.Jun 26 2023, 4:29 PM
Izno subscribed.Jun 26 2023, 5:20 PM

This is because we decided not to make Less available in user-authored modules in T56864#6153179, for fear that arbitrary user-authored Less code could take arbitrarily long to execute.

Is this not also a concern for Vue, which must be transpiled to Javascript?

Catrope mentioned this in T330349: [Spike] Determine the extent to which the Gadgets extension supports .vue files.Jun 26 2023, 5:40 PM
Tacsipacsi subscribed.Jun 26 2023, 10:26 PM
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Jun 27 2023, 12:39 PM
Izno changed the subtype of this task from "Task" to "Feature Request".Jul 24 2023, 3:15 PM
Michael subscribed.Jul 26 2023, 7:56 PM
Krinkle edited projects, added MediaWiki-Platform-Team (Radar); removed Performance-Team.Aug 17 2023, 1:27 PM
Krinkle moved this task from Inbox to External on the MediaWiki-ResourceLoader board.Aug 21 2023, 4:30 PM
Jdlrobson moved this task from Backlog to Architecture on the MediaWiki-extensions-Gadgets board.Sep 8 2023, 9:41 PM
SD0001 mentioned this in T353174: Specify all source pages in a single array in gadget definitions.Dec 11 2023, 5:15 PM
Pppery edited projects, added Patch-Needs-Improvement; removed Patch-For-Review.Dec 27 2023, 8:06 PM
SD0001 subscribed.Mar 18 2024, 1:01 PM

Upstream, Ace just last month added support for syntax highlighting vue (https://github.com/ajaxorg/ace/pull/5483).

For syntax highlighting in action=view mode though, Pygments doesn't yet support it. But they appear to be open to contribution - https://github.com/pygments/pygments/issues/2111

Jdforrester-WMF subscribed.Mar 18 2024, 1:19 PM
In T340460#9637739, @SD0001 wrote:

Upstream, Ace just last month added support for syntax highlighting vue (https://github.com/ajaxorg/ace/pull/5483).

Brilliant; I just made an Ace update last week for T342387 that includes this feature; it will go out this week, but isn't wired up (compare https://en.wikipedia.beta.wmflabs.org/wiki/User:Foo/Bar.js?action=edit which loads CodeEditor vs. https://en.wikipedia.beta.wmflabs.org/wiki/User:Foo/Bar.vue?action=edit which loads your wikitext editor, so there's a little more work needed to support nice editing of .vue on-wiki pages (the first checklist point in this task's list).

Daimona subscribed.Apr 21 2024, 8:27 AM
Sophivorus awarded a token.May 9 2024, 1:35 PM
Sophivorus subscribed.
• MusikAnimal subscribed.Aug 30 2024, 7:20 PM

I wanted to note T373711: Add support for Scribunto, JavaScript, CSS, JSON and Vue to CodeMirror 6 which I hope to have tackled by MW 1.44, if not sooner. This is not a proposal to replace CodeEditor/Ace (yet), but CodeMirror does already has support for Vue. So I guess keep that in mind in your decision making.

Related but not for this task: Gerrit is already using CodeMirror 6, so it could be updated to use the Vue package which as you may have noticed currently lacks syntax highlighting.

• MusikAnimal mentioned this in T373711: Add support for Scribunto, JavaScript, CSS, JSON and Vue to CodeMirror 6.Aug 30 2024, 9:04 PM
gerritbot added a comment.Dec 24 2024, 11:51 AM

Change #1106559 had a related patch set uploaded (by SD0001; author: SD0001):

[mediawiki/extensions/CodeEditor@master] Support Vue content model in CodeEditor

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

gerritbot added a project: Patch-For-Review.Dec 24 2024, 11:51 AM
Restricted Application removed a project: Patch-Needs-Improvement. · View Herald TranscriptDec 24 2024, 11:51 AM
gerritbot added a comment.Dec 24 2024, 6:12 PM

Change #1106565 had a related patch set uploaded (by SD0001; author: SD0001):

[mediawiki/core@master] Support loading .vue pages in the MediaWiki namespace

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

PatchDemoBot added a comment.Dec 24 2024, 7:21 PM

Test wiki created on Patch demo by SD0001 using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/4d7176ce92/w/

SD0001 added a subscriber: Diskdance.Dec 25 2024, 6:50 AM

I've dusted off the old patches for Vue support. They are ready for review now. The patchdemo wiki shows the "Hello <name>" gadget running.

Also, @Diskdance has raised a PR for Vue support in Pygments for the syntax highlighting in action=view mode.

SD0001 claimed this task.Dec 27 2024, 7:20 PM
SD0001 moved this task from External to Inbox on the MediaWiki-ResourceLoader board.

Changing workboard as this involves changes to core ResourceLoader.

Gustmd7410 subscribed.Jan 1 2025, 6:31 PM
gerritbot added a comment.Jan 2 2025, 2:46 PM

Change #907556 abandoned by Catrope:

[mediawiki/core@master] [WIP] Support loading .vue pages in the MediaWiki namespace

Reason:

Development continues at https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1106565

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

SD0001 added a comment.Jan 6 2025, 6:07 PM
In T340460#10423068, @SD0001 wrote:

Also, @Diskdance has raised a PR for Vue support in Pygments for the syntax highlighting in action=view mode.

The PR is merged (thanks @Diskdance!) and Vue support is available in Pygments 2.19.0 (T383018).

Escargot_rouge subscribed.Jan 7 2025, 8:30 PM
SD0001 mentioned this in T383248: Support Codex code splitting in gadgets.Jan 11 2025, 12:18 AM
Novem_Linguae subscribed.Jan 31 2025, 6:20 AM
jhsoby subscribed.Feb 17 2025, 6:33 PM
egardner mentioned this in T375220: [EPIC] Develop a set of shared MediaWiki-specific Codex components in MW Core.Feb 24 2025, 7:11 PM
TheDJ subscribed.Mar 12 2025, 9:07 AM
Tacsipacsi mentioned this in T389737: Codex feasibility study for Cat-a-lot.Mar 25 2025, 1:18 PM
PatchDemoBot added a comment.May 16 2025, 7:26 PM

Test wiki on Patch demo by SD0001 using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/4d7176ce92/w/

SD0001 added a comment.EditedJul 16 2025, 6:53 PM

Notes for testing the patches:

  1. Checkout https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1106565 and https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Gadgets/+/1108823
  2. Add to MediaWiki:Gadgets-definition:
* codextest [ResourceLoader | package | default | dependencies=vue,@wikimedia/codex | codexIcons=cdxIconTrash, cdxBazinga ] | codextest.js | codextest-main.vue | codextest-ChangeNameDialog.vue
  1. Create MediaWiki:Gadget-codextest.js with content from https://6d31ea4a6c.catalyst.wmcloud.org/wiki/MediaWiki:Gadget-codextest.js
  2. Create MediaWiki:Gadget-codextest-main.vue with content from https://6d31ea4a6c.catalyst.wmcloud.org/wiki/MediaWiki:Gadget-codextest-main.vue
  3. Create MediaWiki:Gadget-codextest-ChangeNameDialog.vue with content from https://6d31ea4a6c.catalyst.wmcloud.org/wiki/MediaWiki:Gadget-codextest-ChangeNameDialog.vue
  4. Now, Hello (name unknown)! appears near the top of every page, like at https://6d31ea4a6c.catalyst.wmcloud.org/wiki/Main_Page. Name can be set using the button.
• MusikAnimal added a project: User-notice.Jul 21 2025, 9:06 PM

+User-notice for next weeks train

• MusikAnimal awarded a token.Jul 21 2025, 9:06 PM
gerritbot added a comment.Jul 21 2025, 9:22 PM

Change #1106565 merged by jenkins-bot:

[mediawiki/core@master] Add content model for Vue and support loading via ResourceLoader

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

gerritbot added a comment.Jul 21 2025, 9:46 PM

Change #1106559 merged by jenkins-bot:

[mediawiki/extensions/CodeEditor@master] Support Vue content model in CodeEditor

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

ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.11; 2025-07-22).Jul 21 2025, 10:01 PM
SD0001 mentioned this in T383018: New upstream release for Pygments (2.19.2).Jul 22 2025, 8:04 AM
gerritbot added a comment.Jul 23 2025, 10:13 AM

Change #1172005 had a related patch set uploaded (by SD0001; author: SD0001):

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Syntax highlight pages with Vue content model

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

gerritbot added a comment.Jul 23 2025, 1:21 PM

Change #1172005 merged by jenkins-bot:

[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Syntax highlight pages with Vue content model

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

ReleaseTaggerBot edited projects, added MW-1.45-notes (1.45.0-wmf.12; 2025-07-29); removed MW-1.45-notes (1.45.0-wmf.11; 2025-07-22).Jul 23 2025, 2:00 PM
gerritbot added a comment.Jul 24 2025, 2:02 PM

Change #907557 merged by jenkins-bot:

[mediawiki/extensions/Gadgets@master] Support .vue files in packaged gadgets

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

SD0001 closed this task as Resolved.Jul 24 2025, 2:50 PM
Quiddity subscribed.Jul 24 2025, 6:56 PM

For Tech News, please could someone suggest wording for the entry? I'm not sure what aspects are most useful to highlight, nor what to link to (documentation?). I imagine something like this, but need guidance on details and link(s):

Gadget and userscript developers can now use .vue files in their tools. This enables [...?....]. There is [[LINK? | documentation about this feature]].

Quiddity moved this task from To Triage to Announce in next Tech/News on the User-notice board.Jul 24 2025, 6:56 PM
Quiddity added a comment.Jul 24 2025, 6:59 PM

Also, Timing-wise, will this be available on Monday (when we deliver Tech News), or "later this week"[with the deployment train]? -- If the latter, then you/we may want to postpone mentioning it in Tech News for a week, so that it is already live (and tested!) when folks read about it and they can immediately start using it. Please advise on that, too. Thanks!

Tacsipacsi added a comment.Jul 24 2025, 10:47 PM

Timing: parts of this are already available (one can create .vue pages), but it will become really functional “later this week”, when gadget support arrives (that part was merged today).

For the entry, more details:

Gadgets can now include .vue files. This makes it easier to develop modern user interfaces using Vue.js, in particular using Codex, the official design system of Wikimedia. Codex icons are now also available. T340460 T311099

The documentation on mediawiki.org has been updated, I don’t know if it needs to be linked (the exact syntax is described there but is out of scope for the Tech News entry).

Quiddity moved this task from Announce in next Tech/News to In current Tech/News draft on the User-notice board.Jul 31 2025, 9:50 PM
A_smart_kitten added a project: Vue.js.Aug 5 2025, 8:47 AM
Quiddity moved this task from In current Tech/News draft to Already announced/Archive on the User-notice board.Aug 7 2025, 7:44 PM
A_smart_kitten mentioned this in T401885: create the interface message for content-model-vue.Aug 14 2025, 11:46 AM
SD0001 mentioned this in T401158: Enable redirects for Vue components.Aug 14 2025, 6:42 PM
Ammarpad awarded a token.Aug 18 2025, 10:44 AM
Maintenance_bot edited projects, added User-notice-archive; removed User-notice.Aug 28 2025, 11:31 AM
SD0001 closed subtask T407962: .vue pages are missing from API list=gadgets output as Resolved.Oct 23 2025, 5:44 AM
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 · Credits