MediaWiki

Front-end standards group/2020-06-24

< Front-end standards group

Attending: Itamar Givon, Lucas Werkmeister, Jakob Warkotsch, Tonina Zhelyazkova, Joe Walsh, Ed Sanders, Eric Gardner, Stephen Niedzielski,  Jan Drewniak, Volker Eckl, Anri Bolon, Roan Kattouw, Anne Tomasevich, Sarai Sánchez

Action & Code

edit

New quests

edit
  • Self-closing tags rewrite needed and shorthand syntax: [RK]
  • Using RemexHtml gerrit:598133 instead of PHP's HTML Parser – In practice, this change means:
    • Before: self-closing tags like <slot /> or <mw-button icon="trash" destructive /> work
    • After: self-closing tags break, so instead you have to write <slot></slot> and <mw-button icon="trash" destructive></mw-button>
    • Before: shorthand syntax doesn't work, so you have to write <mw-button v-bind:disabled="buttonDisabled" v-on:click="onButtonClick">
    • After: shorthand syntax works, so you can write <mw-button :disabled="buttonDisabled" @click="onButtonClick">
    • Putting it together: we used to write <mw-button v-on:click="buttonDisabled" />, now we will write <mw-button @click="buttonDisabled"></mw-button>
    • There are lint rules to enforce this: https://github.com/wikimedia/eslint-config-wikimedia/pull/298 – people should update their eslint config versions to benefit from new rules
    • When writing a Vue component, write // @vue/component above your module.exports = { ... statement to get linting
    • ES: […] Generally one should avoid eslint warnings; to make warnings into errors, you'd have to add max-warnings=0 which some do
    • Have a look at the test fixtures to see what is considered valid/invalid: https://github.com/wikimedia/eslint-config-wikimedia/tree/master/test/fixtures
  • Lil discussion about general rules how to write Vue yet, with some early decisions and orientation on  default Vue guidelines. Future plan: Manual:Coding conventions/Vue.js alongside eslint-config-wikimedia
    • Folks seem generally happy with short-hand syntax for now
  • Newly started OOUI component migration path outline Vue.js/OOUI migration guide [SN]
    • ES: Clarify “Avoid inheritance”. OOUI Mixins (f.e. ButtonElement) are useful not to repeat yourself
    • EG: Vue doesn't really follow an inheritance paradigm. Vue mixins has private state too
    • Some discussion about when to keep components in individual projects and when to contribute them to the library; some considerations:
      • don’t want to slow down project development
      • don’t want to slow down library development
      • early library development gives others more opportunity to give feedback on the components before they solidify
      • using the library in production brings additional responsibilities for library development
      • proposal: start a first pull request for one component soon!
      • Phab ticket per component
    • Action: Create Phabricator tasks to keep track of features that new components are still missing compared to OOUI (when they’re not in scope for the initial PR)
  • Eslint works, stylelint doesn't
  • WMDE is building a separate component library specific to Wikibase. Design is mostly aligned with WMF design, process for technical alignment is still in progress. Experience: When different feature teams contribute to the same library without consulting UX, it leads to a lot of confusion and components that cannot be used because they don't comply to design.
  • Action: Involvement in exemplatory component PR discussion for WVUI
Retrieved from "https://www.mediawiki.org/w/index.php?title=Front-end_standards_group/2020-06-24&oldid=3978605"