Page MenuHomePhabricator

Configure ESLint and stylelint for Vue.js search development ahead of it being done for all repos
Closed, ResolvedPublic5 Estimated Story Points

Description

This task encompasses the work to automatically detect common pitfalls and style inconsistencies in Vue.js components. This functionality is not yet available in eslint-config-wikimedia so this task may require upstream changes to add an initial eslint-plugin-vue or collaboration with WMDE, which is using eslint-config-wikimedia-typescript for their TypeScript Vue.js work (see T249304#6032440).

jQuery

MobileFrontend components are inseparable from jQuery. Its usage has encouraged building features in a way that is both verbose and challenging to reason about, and discourages composition. In some cases, the results of our best devs have been nearly incoherent. Additionally, the outputs of the API often return more API-specific types that imply further usage such that any interaction compounds. All of this and large jQuery runtime dependencies. For these reasons, new usages of jQuery should be the exception rather than a rule. Further, jQuery usage from within components should be totally forbidden to avoid the shortcomings of previous frameworks. If we don't make this change, we will miss severall important rationales given for migrating frameworks (see T225453).

eslint-config-wikimedia provides a eslint-plugin-no-jquery to minimize jQuery but this task posits a bolder approach for all new JavaScript written: no jQuery at all which seems more practical than ever given the Vue.js baseline.

Globals dependencies

The default for components is no dependencies needed until proven otherwise. Implicit global dependencies in general, such as mw, OO, $ should be intensely scrutinized to take the most minimal subset possible for shared components. These implicit global dependencies massively bloat the overall shared component library footprint which limits its relevance, shareability, and development abilties outside of the MediaWiki ecosystem. This was a major shortcoming of alternative frameworks considered and a requirement identified in T225572. Great pains should be taken to write components as plainly as possible and to avoid the classic dependencies and their pitfalls that are now well known.

Prototype exploration

Patch

Acceptance criteria

  • If Vector is used, eslint-config-wikimedia is configured for Vue.js linting (likely just adding an extends). If a new project is started, an eslint-config-wikimedia dev dependency and configuration is added with Vue.js linting enabled.
  • All components are linted.
  • ESLint and stylelint is configured to forbid all jQuery interactions.
  • Adding any jQuery anywhere else causes npm t to fail.
  • The wiki is updated to clarify that jQuery and other traditionally implicit MediaWiki dependencies cannot be a dependency of components as a design goal. These dependencies may currently be available on every page load but they will never not be if they're embedded in the components. -- See https://www.mediawiki.org/wiki/Vue.js#Guidelines.
  • Lint dist to ensure only ES5 sources are shipped. E.g., see Popups. -- See https://github.com/wikimedia/wvui/blob/master/dist/.eslintrc.json.

Open questions

  • Are these Wikimedia-specific rules applicable for the project if it's built outside of ResourceLoader? Many rules assume RL usage so it may make sense to use the Vue plugin directly instead depending on how the project is built.

Event Timeline

Niedzielski added a subscriber: Catrope.

Thanks for looking out, @Jdforrester-WMF! I've linked to the discussion in the task description. I'm going to remove @Catrope from the assignee on this since this is specific to the usage for Desktop Improvements and needs further discussion (in particular, T249051 and T249350) to know what the requirements are. I've just started tasking this stuff out in earnest yesterday and it's kind of draft-y still. I'll be following up in #front-end once I have a few more tasks up.

Niedzielski renamed this task from Configure ESLint for Vue.js development to Configure ESLint for Vue.js search development.Apr 5 2020, 4:23 PM

IIRC WMDE is using Vue.js for Wikibase, they might have some experience to share :)

Thanks @hashar!

+@WMDE-leszek, @Pablo-WMDE, this task pertains to linting for the new Vue.js search experience in the Desktop Improvements Project (also called Desktop Referesh). It's a subtask of T244392, which gives more context, and probably has some overlap with your work. Please note that although this task exists, we haven't had a chance to start discussing it yet.

WMDE's vue linting in wikibase sub-products can be summarized as plugin:vue/strongly-recommended. There are two minor intentional aberrations (based on what our subjective taste demanded) which have yet to be consolidated into a dedicated standard.

In this context it might be worth noting that we did create a dedicated repo for a mediawiki-inspired standard for TypeScript projects however. We tried to find rules in the spirit of what we witness in other languages.

For both we'd be happy to find a home upstream (cf. eslint-config-wikimedia) even if it meant adjusting (speaking for myself in this case only!).
Historically there was no precedence of use of neither vue nor TypeScript in core so we refrained from prematurely creating pull requests for addition of style standards.

I forgot to mention: Thank you for reaching out. It means a lot!

Thanks for looking out, @Jdforrester-WMF! I've linked to the discussion in the task description. I'm going to remove @Catrope from the assignee on this since this is specific to the usage for Desktop Improvements and needs further discussion (in particular, T249051 and T249350) to know what the requirements are. I've just started tasking this stuff out in earnest yesterday and it's kind of draft-y still. I'll be following up in #front-end once I have a few more tasks up.

Oh, right. I'll adjust the title to make it clearer, then.

Jdforrester-WMF renamed this task from Configure ESLint for Vue.js search development to Configure ESLint for Vue.js search development ahead of it being done for all repos.Apr 6 2020, 4:51 PM

eslint-plugin-no-jquery is a fork of eslint-plugin-jquery, it's not a wrapper.

eslint-config-wikimedia now automatically lints Vue files, starting with version 0.15.2 released on April 15.

eslint-config-wikimedia now automatically lints Vue files, starting with version 0.15.2 released on April 15.

… and pretty much all repos have now been moved over to 0.15.3: http://libraryupgrader2.wmflabs.org/library/npm/eslint-config-wikimedia

Niedzielski renamed this task from Configure ESLint for Vue.js search development ahead of it being done for all repos to Configure ESLint and stylelint for Vue.js search development ahead of it being done for all repos.May 21 2020, 7:51 PM
Niedzielski updated the task description. (Show Details)

I believe this is no longer needed.

@Jdforrester-WMF, we don't have any linter config yet still so this task is still relevant.

ovasileva set the point value for this task to 5.Jun 23 2020, 5:30 PM
Anribolon updated the task description. (Show Details)