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.jsonChange"jquery/no-parents": 0,to"jquery/no-parents": 2,to enable eslint checks for uses of jQueryparent(). With this change, you'll be able to see uses of the undesirable jQuery feature by runningyarn lint:core-js-passingfrom thecoredirectory - Add the following lines to
core/scripts/dev/commit-code-check.shso 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 removeAdd 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
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
Comment #9
ahsannazir commentedComment #10
ahsannazir commentedComment #11
feuerwagenI'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.
Comment #12
ahsannazir commentedYes got it. I have used closest() with the intention that it works without jquery.
Comment #13
feuerwagenSorry about the noise than and apologies – I wasn't aware that this method exists in vanillaJs with identical functionality than the one in jQuery.
Comment #14
omkar-pd commented@ahsannazir, The target branch should be 11.x.
Comment #21
ahsannazir commentedComment #22
smustgrave commentedLeft some small comments.
Will want sub maintainer sign off before merging.
Comment #23
ahsannazir commentedComment #24
nod_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.
Comment #25
nod_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-descriptionComment #26
ahsannazir commentedComment #28
smustgrave commentedFeedback appears to be addressed
@nod_ can we remove the submaintainer tag?
Pushed up a super nitpicky change to remove a space.
Comment #29
nod_Comment #30
nod_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
Comment #31
ahsannazir commentedComment #32
nod_Thanks! a few tiny changes and we should be good to go :)
Comment #33
nod_I want to see what testbot says about a change in ajax.js
Comment #34
ahsannazir commentedComment #35
smustgrave commentedGoing 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.
Comment #36
nod_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
Comment #40
nod_Committed 8ac73be and pushed to 11.x. Thanks!
Comment #42
ahmad khader commentedThis 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;