Contrib.social

Refactor (if feasible) uses of the jQuery trim function to use vanillaJS

Open on Drupal.org →
Created on 24 September 2021, about 3 years ago
Updated 11 September 2023, over 1 year 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-trim, which targets the jQuery trim function.

Steps to reproduce

Proposed resolution

Remaining tasks

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

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Fixed

Version

9.3

Component
Javascript  →

Last updated 16 minutes ago

Created by

🇺🇸United States hooroomoo

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 over 1 year ago →
    🇨🇦Canada joseph.olstad

    I'm still seeing this regression in D10.0.10
    🐛 Regression fix for (if feasible) uses of the jQuery trim function to use vanillaJS Fixed

  • Comment over 1 year ago →
    🇨🇦Canada joseph.olstad

    ok I have the steps to reproduce the regression introduced by the commit made in comment #11, it can be reproduced with core alone.

    in your content type, allow the "Provide a menu link" option provided by the core menu_ui module.

    When editing content that does not have the checkbox checked for "Provide a menu link" the callback is not a valid callback, it is "Not in menu"

    The "Not in menu" functionality comes from the core menu_ui module.

    The regression is in core, only need core to reproduce, it's not even caused by contrib.

    Patch 18 works →

    the $.trim() function in jQuery does more than the ES6 trim() function and it's encapsulated by jQuery.

    Basically the es6 trim function is not as good as the jQuery $.trim() function.

    I've spent a significant amount of time investigating ways to get this working with es6 without jQuery however the approach by jQuery is radically different because the trim function takes a parameter of item we want to trim.

    Not only is the approach more sophisticated with jQuery (different) it also trims more than just whitespace, it also trims tab and newline characters whereas the es6 trim function only handles whitespace.

    any chained functions I tried just didn't seem to cut the mustard. The encapsulated approach by jQuery is more advanced and I haven't had a chance to figure it out.

  • Comment over 1 year ago →
    🇨🇦Canada joseph.olstad
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024