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-merge, which targets the jQuery merge function.

Steps to reproduce

Proposed resolution

Remaining tasks

  • In core/.eslintrc.jquery.json Change "jquery/no-merge": 0, to "jquery/no-merge": 2, to enable eslint checks for uses of jQuery merge(). 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 merge() to use Vanilla (native) JavaScript instead.

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3238863

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

hooroomoo created an issue. See original summary.

hooroomoo’s picture

Issue summary: View changes

larowlan’s picture

Status: Active » Reviewed & tested by the community

Looks good to me 🎉

nod_’s picture

RTBC +1 it's real arrays, not jquery objects :)

larowlan’s picture

Status: Reviewed & tested by the community » Needs review

Moving back to NR so I can be eligible to commit this.

nod_’s picture

Status: Needs review » Reviewed & tested by the community
larowlan’s picture

Just one question on the MR

nod_’s picture

Removed the extra code, handling that in #3238936: The testbot does not run ESLint on all files when core/.eslintrc* is changed to simplify the rest of the merge requests.

lauriii made their first commit to this issue’s fork.

  • lauriii committed b99ec61 on 9.3.x authored by hooroomoo
    Issue #3238863 by hooroomoo: Refactor (if feasible) uses of the jQuery...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Looks good! Thank you all!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.