Refactor (if feasible) uses of the jQuery each function to use Vanilla/native

Created on 30 September 2021, over 3 years ago
Updated 14 August 2024, 5 months ago

Problem/Motivation

As mentioned in the parent issue #3238306: [META] Where possible, refactor existing jQuery uses to vanillaJS to reduce jQuery footprint , we are working towards reducing our jQuery footprint. One of the ways to accomplish this is to reduce the number of jQuery features used in Drupal core. We have added eslint rules that identify specific features and fail tests when those features are in use.

There are (or will be) individual issues for each jQuery-use eslint rule. This one is specific to jquery/no-each, which targets the jQuery each function.

Steps to reproduce

Proposed resolution

Remaining tasks

  • In core/.eslintrc.jquery.json Change "jquery/no-each": 0, to "jquery/no-each": 2, to enable eslint checks for uses of jQuery .each(). With this change, you'll be able to see uses of the undesirable jQuery feature by running yarn lint:core-js-passing from the core directory
  • Add the following lines to core/scripts/dev/commit-code-check.sh so the DrupalCI testing script can catch this jQuery usage on all files, not just those which have changed
    # @todo Remove the next chunk of lines before committing. This script only lints
    #  JavaScript files that have changed, so we add this to check all files for
    #  jQuery-specific lint errors.
    cd "$TOP_LEVEL/core"
    node ./node_modules/eslint/bin/eslint.js --quiet --config=.eslintrc.passing.json .
    
    CORRECTJQS=$?
    if [ "$CORRECTJQS" -ne "0" ]; then
      # No need to write any output the node command will do this for us.
      printf "${red}FAILURE ${reset}: unsupported jQuery usage. See errors above."
      STATUS=1
      FINAL_STATUS=1
    fi
    cd $TOP_LEVEL
    # @todo end lines to remove

    Add the block about 10 lines before the end of the file, just before if [[ "$FINAL_STATUS" == "1" ]] && [[ "$DRUPALCI" == "1" ]]; then, then remove it once all the jQuery uses have been refactored.

  • If it's determined to be feasible, refactor those uses of jQuery .each() to use Vanilla (native) JavaScript instead.

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Closed: won't fix

Version

11.0 🔥

Component
Javascript 

Last updated about 5 hours ago

Created by

🇺🇸United States Theresa.Grannum Boston

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

Merge Requests

Comments & Activities

Not all content is available!

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

  • First commit to issue fork.
  • Merge request !5896refactor jquery each → (Open) created by omkar-pd
  • Pipeline finished with Canceled
    about 1 year ago
    Total: 42s
    #66271
  • Pipeline finished with Failed
    about 1 year ago
    Total: 1465s
    #66272
  • Pipeline finished with Success
    about 1 year ago
    Total: 642s
    #66301
  • Pipeline finished with Failed
    about 1 year ago
    Total: 496s
    #66337
  • Pipeline finished with Failed
    about 1 year ago
    Total: 2972s
    #66681
  • Pipeline finished with Failed
    about 1 year ago
    Total: 184s
    #66813
  • Pipeline finished with Success
    about 1 year ago
    Total: 646s
    #66821
  • Pipeline finished with Success
    about 1 year ago
    Total: 633s
    #66887
  • Status changed to Needs review about 1 year ago
  • 🇮🇳India omkar-pd

    Needs Review.

  • Status changed to Needs work about 1 year ago
  • 🇺🇸United States smustgrave

    Left some comments.

  • Pipeline finished with Canceled
    about 1 year ago
    Total: 17s
    #68360
  • Pipeline finished with Failed
    about 1 year ago
    Total: 228s
    #68361
  • Pipeline finished with Failed
    about 1 year ago
    Total: 163s
    #68362
  • Pipeline finished with Success
    about 1 year ago
    Total: 584s
    #68364
  • Status changed to Needs review about 1 year ago
  • 🇮🇳India omkar-pd

    Addressed feedback.

  • Status changed to RTBC about 1 year ago
  • 🇺🇸United States smustgrave

    Feedback appears to have been addressed.

  • Status changed to Needs work about 1 year ago
  • 🇫🇷France nod_ Lille

    few more things

  • Pipeline finished with Success
    about 1 year ago
    Total: 621s
    #69374
  • Pipeline finished with Failed
    about 1 year ago
    Total: 535s
    #69380
  • Pipeline finished with Failed
    about 1 year ago
    Total: 620s
    #69383
  • Pipeline finished with Failed
    about 1 year ago
    Total: 479s
    #69391
  • Pipeline finished with Success
    about 1 year ago
    #69422
  • Status changed to Needs review about 1 year ago
  • 🇮🇳India omkar-pd

    Addressed feedback.

  • Pipeline finished with Success
    about 1 year ago
    #69439
  • Status changed to RTBC about 1 year ago
  • 🇺🇸United States smustgrave

    Believe all feedback has been addressed.

  • Status changed to Needs work 12 months ago
  • The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • Pipeline finished with Success
    12 months ago
    Total: 1001s
    #84612
  • Status changed to Needs review 12 months ago
  • 🇮🇳India omkar-pd

    Resolved Conflicts.

  • Status changed to Needs work 11 months ago
  • 🇺🇸United States smustgrave

    Still appears to be open threads from _nod

  • Status changed to Needs review 11 months ago
  • 🇮🇳India omkar-pd

    All the threads are resolved.

  • Status changed to Needs work 11 months ago
  • 🇫🇷France nod_ Lille

    The comments were not addressed. A bunch of 'index' parameters needs to be removed, I found a couple more this time too.

  • 🇮🇳India omkar-pd

    Will work on the feedback.

  • Pipeline finished with Success
    11 months ago
    Total: 484s
    #105546
  • Status changed to Needs review 11 months ago
  • 🇮🇳India omkar-pd

    Addressed Feedback.

  • Status changed to RTBC 10 months ago
  • 🇺🇸United States smustgrave

    Will lean on @nod_ previous review. But appears threads have been addressed

  • Assigned to nod_
  • 🇫🇷France nod_ Lille

    I'll take care of the review/commit on this one

  • Status changed to Needs work 10 months ago
  • The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • Status changed to Needs review 10 months ago
  • Pipeline finished with Success
    10 months ago
    Total: 627s
    #137039
  • 🇮🇪Ireland markconroy

    This merge request seems to rely heavily on using .toArray(), but I don't think that is supported in Firefox or Safari.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global...
    https://caniuse.com/?search=toArray

    I just want to check that our build tools have something in place to transpile this to FF/Safari-compatible code?

    Besides that, we'll done, this is a very large piece of work.

  • 🇫🇷France nod_ Lille

    That's this toArray :) https://api.jquery.com/toArray/ goes back to something like IE8 probably

  • 🇺🇸United States smustgrave

    smustgrave changed the visibility of the branch 11.x to hidden.

  • Pipeline finished with Success
    9 months ago
    Total: 962s
    #151283
  • 🇺🇸United States smustgrave

    Rebased to make sure no random failures popped up.

    Will leave with @nod_ for review.

  • Status changed to Needs work 9 months ago
  • The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • 🇺🇸United States bnjmnm Ann Arbor, MI

    There's usage in states.js that isn't being caught by eslint but should also be changed. Perhaps in other files as well - can't hurt to grep a bit to find out.

  • First commit to issue fork.
  • Pipeline finished with Success
    7 months ago
    Total: 567s
    #203423
  • Status changed to Needs review 7 months ago
  • 🇺🇸United States smustgrave

    Should the other toArray() changes in the MR be updated?

  • Status changed to Needs work 7 months ago
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Should the other toArray() changes in the MR be updated?

    Yes. They should all be refactored, not just the instance specifically called out in the MR.

  • Status changed to Needs review 7 months ago
  • Updated the leftover uses of toArray to get().How did i miss those :).

  • Pipeline finished with Success
    7 months ago
    Total: 509s
    #210333
  • Status changed to RTBC 7 months ago
  • 🇺🇸United States smustgrave

    No worries! Rest of toArray() have been replaced.

  • Status changed to Needs work 7 months ago
  • 🇫🇷France nod_ Lille

    Thanks for keeping up with this massive MR :)

    Few more comments and we should be good to go.

  • Assigned to utkarsh_33
  • Pipeline finished with Canceled
    7 months ago
    Total: 125s
    #212600
  • Pipeline finished with Failed
    7 months ago
    Total: 696s
    #212601
  • Pipeline finished with Failed
    7 months ago
    Total: 628s
    #212616
  • Issue was unassigned.
  • All the test that are failing on Gitlab CI are passing on my local.

  • Pipeline finished with Success
    7 months ago
    Total: 597s
    #212634
  • Status changed to Needs review 7 months ago
  • Status changed to RTBC 6 months ago
  • 🇺🇸United States smustgrave

    Believe additional feedback from @nod_ has been addressed.

  • Status changed to Postponed: needs info 6 months ago
  • 🇫🇷France nod_ Lille

    Found more bugs. At this point I'm not convinced the .each() method is worth replacing given the size of this MR and all the things that it could break.

    I pinged @bnjmnm so that he could give his opinion on it

  • Status changed to Closed: won't fix 5 months ago
  • 🇫🇷France nod_ Lille

    First of all thank you all for the hard work on this one, I've had to push a number of patches like this and I know how hard it is to keep up.

    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 this issue for a few reasons:

    • This MR is big, it impact a very big number of subsystems and make the code more brittle. jQuery is good at dealing with undefined elements, empty sets and so on, the DOM isn't. We already had regressions from a previous patch with undefined elements
    • The MR is too big to review and make sure there are no regressions (even with the tests we already have), it would create unstability that we don't have to endure
    • Every time I review this MR, I find a new bug

    I ported the credits to 📌 Credit for work on the reduce jQuery issues Active , which I will mark as fixed as soon as I go through all the others impacted jQuery issues.

Production build 0.71.5 2024