[11.x] Update to jQuery 4.0.x beta

Postponing until the beta becomes available. It is not yet on https://github.com/jquery/jquery/tags

https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/

Updated issue summary including update instructions from the beta post.

Downloaded and copied the following files over the existing equivalents. They aren't actually linked on the download page, so lucky the URLs are predictable, at least once I realised it wasn't beta1.

https://code.jquery.com/jquery-4.0.0-beta.min.js
https://code.jquery.com/jquery-4.0.0-beta.js
https://code.jquery.com/jquery-4.0.0-beta.min.map

Updated core.libraries.yml

Did nothing else, I might be missing an obvious step, we'll find out.

I didn't add the jquery-migrate plugin because the update instructions seem confident that projects that have already updated to 3.5.0 or higher (we're on 3.7) won't need it and we should find out whether that's true for core or not.

We'll need figure out whether we'd want to add the migrate plugin for contrib/custom or not, whether in the core library or via an extra jquery_migrate module in core or contrib.

If this passes automated tests, we should tag this for manual testing and try to test some js-heavy UIs - ckeditor5 with the media library, menu or taxonomy drag and drop, views, layout builder, contextual links etc.

If those all work, then I think we should run the beta in 11.x HEAD (requires branching 10.3.x) so we've got the greatest chance of hitting any edge cases and to make it easier for contrib to start testing. We could even do that without resolving the migrate plugin question initially.

We should maybe add a comment to not confuse this issue with 🌱 [meta] Replace JQuery with vanilla Javascript in core Active . I assume this issue here is to support latest jQuery version as long as jQuery is still a core dependency but we should add a note. Maybe I am mistaken here so I wait for agreement before editing.

Real fails on

https://git.drupalcode.org/project/drupal/-/jobs/765398

https://git.drupalcode.org/project/drupal/-/jobs/765399

https://git.drupalcode.org/project/drupal/-/jobs/765412

e.g.

TypeError: $.isArray is not a function
    at states.Dependent.verifyConstraints
(http://localhost/subdirectory/core/misc/states.js?v=11.0-dev:307:13)

This should give us something to work with :)

I think we should split each error, or type of error, off to its own issue, they should all be committable to 10.3, then we can just keep rebasing/rerunning here until green unless we hit something bad.

+1 to splitting issues for the issues and to committing this early to 11.x

Opened 📌 [jQuery 4] TypeError: $.isArray is not a function at states.Dependent.verifyConstraints Needs review which seems hopefully trivial even to my non-JavaScript brain.

Also opened 📌 [jQuery 4] jquery-form is unmaintained and not jQuery 4 compatible, fork it into core Fixed which is not going to be as trivial because it's in a library.

Rebased after 📌 [jQuery 4] TypeError: $.isArray is not a function at states.Dependent.verifyConstraints Needs review was committed.

We do have a whole thing for third party js deps so we don't have to copy/paste manually:

$ yarn add -D jquery@4.0.0-beta
$ yarn vendor-update

I'll get the code in the right place and update the version in core.libraries.yml

We do have a whole thing for third party js deps so we don't have to copy/paste manually:

Absolutely right and thank you @nod_
(Weirdly at least for me, this knowledge is somehow only popping up in my brain when doing the "upgrade JS dependencies"-issues just before a new major/minor release.)

We should have done this straight away, but at least the MR does it now.

Combining 📌 [jQuery 4] position.js uses deprecated function $.isWindow() Needs review and 📌 [jQuery 4] jquery-form is unmaintained and not jQuery 4 compatible, fork it into core Fixed with the update from here, all tests are green: https://git.drupalcode.org/project/drupal/-/pipelines/91662

📌 [jQuery 4] jquery-form is unmaintained and not jQuery 4 compatible, fork it into core Fixed gives us a green test run for functional javascript, but it looks like there's still some nightwatch failures too, haven't looked those at all yet.

📌 Removal :tabbable usage in dialog.js Fixed might be the nightwatch failure.

[# https://www.drupal.org/project/drupal/issues/3296098] →

Rebased the original branch here but getting unexplained CSS linting errors. So I redid the jQuery update steps posted above (not my original manual ones) in a new branch just in case it was a problem with the rebase.

catch → changed the visibility of the branch 3411839-update-to-jquery4 to hidden.

The new MR is passing, not sure what the difference is since the diff is the same.

I had to remove the dialog :tabbable shim integration test, the deprecation message is no longer fired, presumably this is because we updated dialog in the blocking issue and now with jQuery 4 that code isn't executed. Maybe someone else understands that test better than me and I've got it wrong, but also we've now unblocked 📌 Deprecate jquery.tabbable.shim Active so should just go ahead there. There's still coverage, just not via dialog any more.

Looking at the performance test failures, but also it looks like 📌 Nightwatch tests fail with "unsupported pseudo: tabbable" after jQuery 4 update Postponed is still a problem so unpostponed that one.

@catch i think you can remove
core/tests/Drupal/Nightwatch/Tests/tabbableShimTest.js
at all.
it tests old tabbable jquery,

@finnsky we still have:

tabbable.jquery.shim:
  version: VERSION
  js:
    misc/jquery.tabbable.shim.js: {}
  dependencies:
    - core/drupal
    - core/tabbable
    - core/jquery

in core - isn't it the test coverage for that?

📌 Deprecate jquery.tabbable.shim Active has been open for a long time, but was blocked on 📌 Removal :tabbable usage in dialog.js Fixed .

I personally think to enable jQuery 4 testing for contrib, we should indeed remove the nightwatch coverage and sort out anything else later - it could mean going ahead and deprecating the tabbable shim in 10.3.0 for removal in 11.x and removing it from 11.x anyway. But would be good to get thoughts from FEFMs whether that's an acceptable approach.

I might do that to get a green MR here since the diff is pretty small.

MR up on 📌 Deprecate jquery.tabbable.shim Active .

this should use the vendor-upgrade script to pull jQuery 4

Re #33 yeah I didn't the first time because I didn't know it existed, but now I do (and it's very nice).

📌 Deprecate jquery.tabbable.shim Active is RTBC and tests are green here (with those changes applied).

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.

@nod_ asked in the #needs-review-queue-initative channel.

So seems that all child issues for this have been merged already into 11.x

Applied the MR and tried to do as suggested and go to heavy JS pages

On a standard install of 11.x for all test

1. Created a basic page
2. Tested all the buttons of the Full HTML formatter
3. Tested uploading an image

Enabled Media Library
1. Enabled the media button
2. Verified I could embed media just fine

Drag n drop
1. Went to the block layout to test this
2. Reordered some default blocks to different regions without issue

Enabled layout builder
1. Enabled for article content type
2. Moved around blocks
3. Added custom blocks
no issues

For 11.x believe this is good to go.

Gonna needs work now that 📌 Set budgets rather than exact numbers of asset size assertions Downport landed...

Rebase looks good, thanks for lowering the budgets!

nod_ → closed merge request !7550

Committed f45c7bd and pushed to 11.x. Thanks!

awesome :)

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