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

Steps to reproduce

Proposed resolution

Remaining tasks

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

User interface changes

API changes

Data model changes

Release notes snippet

Issue fork drupal-3238868

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:

Comments

hooroomoo created an issue. See original summary.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ahsannazir’s picture

Assigned: Unassigned » ahsannazir
Status: Active » Needs work
ahsannazir’s picture

Assigned: ahsannazir » Unassigned
Status: Needs work » Needs review
feuerwagen’s picture

Status: Needs review » Needs work

I'm pretty sure the issue title doesn't mean „replace uses of the jQuery parents function with another jQuery function“ – these issues are targeted to replace jQuery with vanillaJS.

ahsannazir’s picture

Yes got it. I have used closest() with the intention that it works without jquery.

feuerwagen’s picture

Status: Needs work » Needs review

Sorry about the noise than and apologies – I wasn't aware that this method exists in vanillaJs with identical functionality than the one in jQuery.

omkar-pd’s picture

Status: Needs review » Needs work

@ahsannazir, The target branch should be 11.x.

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

ahsannazir changed the visibility of the branch 3238868-refactor-parents to hidden.

ahsannazir’s picture

Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs subsystem maintainer review

Left some small comments.

Will want sub maintainer sign off before merging.

ahsannazir’s picture

Status: Needs work » Needs review
nod_’s picture

Status: Needs review » Needs work

If we need a 10/20 lines method to replace a jquery call, it's not worth the effort. Let's keep them, and add an eslint ignore.

nod_’s picture

Actually we might be able to replicate the parents() functionality with css :has() in some cases:

document.querySelectorAll('*:has(#edit-description)'); would give all the parents of #edit-description

ahsannazir’s picture

Status: Needs work » Needs review

smustgrave changed the visibility of the branch 3238868-refactor-if-feasible to hidden.

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Feedback appears to be addressed

@nod_ can we remove the submaintainer tag?

Pushed up a super nitpicky change to remove a space.

nod_’s picture

nod_’s picture

Status: Reviewed & tested by the community » Needs work

There are 4 exceptions and 3 legitimate replacements so let's not call this removing the use of parents.

I'll take the 3 replacements but let's keep the jquery rule as-is and remove the eslint ignore comments

ahsannazir’s picture

Status: Needs work » Needs review
nod_’s picture

Status: Needs review » Needs work

Thanks! a few tiny changes and we should be good to go :)

nod_’s picture

I want to see what testbot says about a change in ajax.js

ahsannazir’s picture

Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Going to lean on @nod_ numerous reviews on this one. Tried to fix an out of scope change for removing a space that's what that commit was.

nod_’s picture

Title: Refactor (if feasible) uses of the jQuery parents function to use vanillaJS » Refactor some uses of the jQuery parents function to use vanillaJS

Retitle for commit, opened #3442704: Refactor (if feasible) uses of the jQuery parents function to use vanillaJS to address the other uses of parents and change the eslint config

  • nod_ committed 8ac73be3 on 11.x
    Issue #3238868 by ahsannazir, smustgrave: Refactor some uses of the...

  • nod_ committed a6a7fdba on 10.3.x
    Issue #3238868 by ahsannazir, smustgrave: Refactor some uses of the...

nod_’s picture

Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed 8ac73be and pushed to 11.x. Thanks!

Status: Fixed » Closed (fixed)

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

ahmad khader’s picture

This issue appears to break the settings tray, causing contextual links to disappear. please review
https://www.drupal.org/project/drupal/issues/3458067 Unable to find closestSettingsTray;