Contrib.social

[META] Where possible, refactor existing jQuery uses to vanillaJS to reduce jQuery footprint

Open on Drupal.org →
Created on 21 September 2021, over 3 years ago
Updated 31 August 2024, 5 months ago

Problem/Motivation

This is the next step that began with the new jQuery-checking lint rules added in #3191023: Add eslint rules to check for jQuery usage → . These rules were added to core/.eslintrc.jquery.json. In this issue, we added a set of JS linting rules that check for various uses of Jquery. Currently, the majority of these rules are disabled. We plan to create issues for each of these disabled rules, where that specific rule is enabled, and in doing so exposes that specific use of jQuery.

Proposed resolution

Remove where possible, do not copy jQuery source

We are not going to copy the source code of jQuery or implement a similar function into Drupal if it can't be done natively. It might be an option in the future but we're not there yet. If replacing a method means rewriting a part of jQuery or adding a global "utility" function, it is not worth it at this time. jQuery isn't broken and we can always try to use a custom built version of jQuery.

The goal is - wherever possible - refactor these jQuery uses to Vanilla (native) JavaScript so Drupal core has less of an overall dependency on jQuery. While it may not be possible to fully eliminate jQuery, reducing the ways it is used will make maintainability far easier.

If the replacement is hard to read

It's a little subjective but when the vanilla JS is getting too much in the way of understanding the code, it's not worth it. We either need to wait for browsers to be better or re-architect the script instead of trying to replace small pieces of it.

eslint configuration

In the child issues where eslint is configured to look for a specific type of jQuery use - that type of jQuery use will effectively be forbidden in Drupal core from that point forward. For example, once eslint checks for "jquery/no-css" (by changing "jquery/no-css" : 0 to , "jquery/no-css" : 2 Drupal CI tests will no longer allow uses of jQuery's css() function in core.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component
Javascript  →

Last updated about 4 hours ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 11 months ago →
    🇫🇷France nod_ Lille

    Since this is picking up again, going to post some more guidelines.

    Remove where possible, do not copy jQuery source

    We are not going to copy the source code of jQuery or implement a similar function into Drupal if it can't be done natively. It might be an option in the future but we're not there yet. If replacing a method means rewriting a part of jQuery or adding a global "utility" function, it is not worth it at this time. jQuery isn't broken and we can always try to use a custom built version of jQuery

    If the replacement is hard to read

    It's a little subjective but when the vanilla JS is getting too much in the way of understanding the code, it's not worth it. We either need to wait for browsers to be better or re-architect the script instead of trying to replace small pieces of it.

  • Comment 10 months ago →
    🇮🇳India ahsannazir
  • Comment 10 months ago →
    🇺🇸United States smustgrave

    Closed 📌 Refactor (if feasible) uses of the jQuery wrap functions to use vanillaJS Closed: won't fix as won't fix. Moving credit from that ticket to here.

    Do wonder what others thoughts are on

    $('.ui-dialog-off-canvas') to $('.ui-dialog-off-canvas')[0]

    To me that reads worse but will defer to the community, there are a number of issues in review like that.

  • Comment 10 months ago →
    🇺🇸United States pcate

    Do wonder what others thoughts are on
    $('.ui-dialog-off-canvas') to $('.ui-dialog-off-canvas')[0]
    To me that reads worse but will defer to the community, there are a number of issues in review like that.

    An alternative would be using the .first method: $('.ui-dialog-off-canvas').first() or using array destructuring: const [dialog] = $('.ui-dialog-off-canvas')

  • Comment 10 months ago →
    🇺🇸United States smustgrave

    The array destructuring looks a little better to me. but will lean on javascript and frontend people to decide that. About 7-8 tickets in review that contain a change like that

  • Comment 6 months ago →
    🇫🇷France nod_ Lille

    I'm going to try and refocus the jQuery removal work and to do that I need to take a few decisions. I'm going to close a few issues that are most likely to introduce regressions and concentrate on the bigger topics.

    The issues I'll be closing risk introducing problems with contrib and/or introduce too much extra code that looks similar to jQuery. jQuery can be handy, even elegant in some cases and the replacement will be harder to maintain.

    I'm porting credit from closed issues to 📌 Credit for work on the reduce jQuery issues Active because some of those issues have significant work behind them

  • Comment 5 months ago →
    🇳🇿New Zealand quietone

    Moved the approach in #18 to the issue summary.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024