Page MenuHomePhabricator

WVUI: demo code for using WVUI in user JS or gadgets
Closed, DeclinedPublic

Description

In the long run, WVUI should be a great replacement for OOUI in gadgets for making simple and easily-reused code.

A demonstration workflow for setting up a "Hello World" script would be a good first step to starting to introduce it.

I imagine such a script would simply pop up the most basic dialog (once it exists as a component) and allow to dismiss, thus keeping the focus on how to set up WVUI for the gadget environment as opposed to actually using WVUI's features/components (for which the documentation would presumably be the same as using WVUI in core JS?)

Event Timeline

Things the demo should show:

  • Loading vue and wvui
  • Creating a Vue "app" and mounting onto a given DOM element
  • Loading components from RL modules (probably covered by the wvui load)
  • Loading components from other user scripts
  • A simple UI which updates, e.g. a counter on a button click

Any more complete UI and concepts should be in separate examples.

I just expanded the functionality of https://meta.wikimedia.org/wiki/User:DannyS712/VueDemo.js to allow live testing of a custom component - you specify a template and the code for the component, and they are displayed directly (i.e. no props passed in or anything) with access to WVUI components, and using ace code editor. You can try it at https://meta.wikimedia.org/wiki/Special:BlankPage/VueDemo - does this address part of the desired functionality?