Problem/Motivation

jQuery UI is supported again, unfork it and close all head-scratching related issues. The patch includes the few file changes from the 1.13 release: https://jqueryui.com/upgrade-guide/1.13/#files-amp-directory-structure

Proposed resolution

Get the unminified source from https://www.npmjs.com/package/jquery-ui and keep the existing minification step we currently have to build the production files used by Drupal.

The unminified source code is kept in core to allow easy audit during library updates.

During the minification step, a map file is created to allow easier debugging.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Previously jQuery UI was an emeritus (unsupported) project. However, it recently began receiving support again. Therefore, Drupal core has replaced its fork of jQuery UI with jQuery UI itself, to make it easier to keep it up to date. Additionally, core's jQuery UI package dependencies have been updated to jQuery UI 1.13.1. The unminified source code is kept in core to allow easy audit during future library updates.

Issue fork drupal-3265652

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

nod_ created an issue. See original summary.

nod_’s picture

Status: Active » Needs review
StatusFileSize
new344.91 KB

All right here is a patch that use the vendor-update system to copy the source files to the assets/vendor/jquery-ui directory. essentially unforking the code.

This also takes care of updating the libraries.yml version whenever we update the jquery ui package.

nod_’s picture

Issue summary: View changes
+++ b/core/scripts/js/assets.js
@@ -180,6 +180,58 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
+    // Add the jQuery UI source file, after the vendor-update command
+    // the `yarn build:jqueryui` command needs to be run manually.
+    {
+      pack: 'jquery-ui',
+      folder: 'jquery.ui',
+      files: [
+        'themes/base/autocomplete.css',
+        'themes/base/button.css',
+        'themes/base/checkboxradio.css',
+        'themes/base/controlgroup.css',
+        'themes/base/core.css',
+        'themes/base/dialog.css',
+        'themes/base/draggable.css',
+        'themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png',
+        'themes/base/images/ui-icons_444444_256x240.png',
+        'themes/base/images/ui-icons_555555_256x240.png',
+        'themes/base/images/ui-icons_777620_256x240.png',
+        'themes/base/images/ui-icons_777777_256x240.png',
+        'themes/base/images/ui-icons_cc0000_256x240.png',
+        'themes/base/images/ui-icons_ffffff_256x240.png',
+        'themes/base/menu.css',
+        'themes/base/resizable.css',
+        'themes/base/theme.css',
+        'ui/data.js',
+        'ui/disable-selection.js',
+        'ui/focusable.js',
+        'ui/form-reset-mixin.js',
+        'ui/form.js',
+        'ui/ie.js',
+        'ui/jquery-patch.js',
+        'ui/keycode.js',
+        'ui/labels.js',
+        'ui/plugin.js',
+        'ui/position.js',
+        'ui/safe-active-element.js',
+        'ui/safe-blur.js',
+        'ui/scroll-parent.js',
+        'ui/tabbable.js',
+        'ui/unique-id.js',
+        'ui/version.js',
+        'ui/widget.js',
+        'ui/widgets/autocomplete.js',
+        'ui/widgets/button.js',
+        'ui/widgets/checkboxradio.js',
+        'ui/widgets/controlgroup.js',
+        'ui/widgets/dialog.js',
+        'ui/widgets/draggable.js',
+        'ui/widgets/menu.js',
+        'ui/widgets/mouse.js',
+        'ui/widgets/resizable.js'
+      ],

This is where the magic happens.

xjm’s picture

Cool, I guess #3241514: Update jquery ui to 1.13.1 can be closed as duplicate?

lauriii’s picture

Thank you @nod_! Can we remove build:jqueryui command?

nod_’s picture

kinda different scope I'd say. Ideally we do this one after the other.

I want to remove the copy/paste of the source file so we keep only the minified versions of the JS files in the vendor/assets/jquery.ui folder

nod_’s picture

Sorry crosspost my reply was to xjm. Yes removing that was the plan

lauriii’s picture

#6: Not sure it makes sense to do #3241514: Update jquery ui to 1.13.1 separately since it's a complex issue to review since it's a lot of updates for our forked code without test coverage. We also can't do a version of this that would use 1.12.1 because we have changed the forked code to fix security vulnerabilities fixed by 1.13.0.

xjm’s picture

lauriii’s picture

I want to remove the copy/paste of the source file so we keep only the minified versions of the JS files in the vendor/assets/jquery.ui folder

If we remove the source files, is there a way for us to get source maps?

Status: Needs review » Needs work

The last submitted patch, 2: core-jqueryui-unfork-3265652-2.patch, failed testing. View results

wim leers’s picture

  1. +++ b/core/scripts/js/assets.js
    @@ -180,6 +180,58 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
    +    // Add the jQuery UI source file, after the vendor-update command
    +    // the `yarn build:jqueryui` command needs to be run manually.
    

    Not sure what this means exactly … and seems like there's a word missing or something like that in this comment, making it hard to parse? 🤓

  2. +++ b/core/scripts/js/assets.js
    @@ -225,8 +277,6 @@ const assetsFolder = `${coreFolder}/assets/vendor`;
    -  // Use sequential processing to avoid corrupting the contents of the
    -  // concatenated CKEditor 5 translation files.
    

    Out of scope (and unintentional) change?

nod_’s picture

removing the comment was on purpose, it's not accurate anymore we don't aggregate the translations files :)

So here i'm using jquery 1.12.1 (unpatched!) to avoid having a huge diff in the patch.

Made some significant refactor to the vendor-update code, we can now define a callback that transforms a file content and file name during the copying. I don't want to add anymore features to this vendor-update thing because at some point it makes more sense to just use webpack or something.

This patch should be green. I'll add a few more patches with interdiffs to eventually remove all unminified files from the jquery.ui asset folder, adding a sourcemap to the files, removing the build:jqueryui command and commit checks.

nod_’s picture

StatusFileSize
new55.53 KB

nod_’s picture

Status: Needs work » Needs review

was faster than expected. Latest code is 1.13.1 version with the build step removed, sourcemap info inlined, using vendor-upgrade

wim leers’s picture

removing the comment was on purpose, it's not accurate anymore we don't aggregate the translations files :)

But that's not being changed here, in this issue, right? Let's move that to a separate Minor issue with a simple patch that can be committed to all 3 branches swiftly and painlessly? :)

xjm’s picture

I think if we can review the source maps when they are and define a process for that, that will work.

@nod_ brought up today whether it is safe to remove the non-minified source files in a minor release. It's a somewhat disruptive change from a core contribution process, but I think it is safe in a minor because the sources are internal API. Folks should be using the libraries as the API, and even if they were referencing files, they would be using the minified ones.

I'll get other opinions on this but I think it's minor-safe. (I haven't actually reviewed the diff, just thinking about it at a high level.)

xjm’s picture

nod_’s picture

I would think that all the code review would happen on the jquery-ui repo/release notes. We don't review the changes to the source files in our repo for most of our other assets such as ckeditor*, js-cookie, pooperjs, shepherd, sortable, tabbable, etc.

xjm’s picture

@nod_, mainly it is about built assets. We are building our own assets for jQuery UI because they don't ship the individual libraries independently. That's still the case, right? So it's valuable to be able to do reviews of readable versions of the diffs from a security perspective.

nod_’s picture

Updated the code so that we have the source file, the minified file and a separate sourcemap to avoid bloating the minified file.

lauriii’s picture

Would it be possible to update the issue summary on what is the proposed solution? I see that the source files were added back to the MR but I don't understand why do we need those on top of the source maps.

nod_’s picture

That was after a discussion with xjm. We don't have the source file for poperjs, etc. because they don't ship an unminified production version in their package. We have the unminified source for jquery, backbone, jquery form, jquery once, once. I guess the only other that jscookie and underscore would be libs we could also add the unminified source since they're available.

From what I understood, we're keeping the source for audit purposes during updates when we can, which is a different concern than having a map file available for debugging. Map files are not very suited for code audits during updates.

nod_’s picture

nod_’s picture

added a change notice

lauriii’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs frontend framework manager review

Epic work here @nod_! I think the overall approach is sound and the changes to the build tools look good ✨

Moving to RTBC but we still need a draft release note at least for the jQuery UI version update before we can 🛳.

gábor hojtsy’s picture

Issue summary: View changes
Issue tags: -Needs release note

Added this release note snippet to the issue summary, feel free to tweak as needed.

Previously jQuery UI was an emeritus (unsupported) project, however, it recently became supported again. Therefore Drupal core replaced our fork of jQuery UI with jQuery UI itself, to make it easier to keep it up to date. Drupal 9 now (again) depends on jQuery UI 1.12.1. The unminified source code is kept in core to allow easy audit during future library updates.

nod_’s picture

Issue summary: View changes

Thanks! just corrected the version number, it's 1.13.1

gábor hojtsy’s picture

Ah, correct, I was looking at the patch not the MR, sorry.

xjm’s picture

Test failure looks like a 500 error from chromedriver which could have been the testbot dying, so requeuing.

xjm’s picture

Hiding the patches for IS clarity.

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

bnjmnm’s picture

StatusFileSize
new534.09 KB
new543.58 KB

  • bnjmnm committed 974c42a on 9.4.x
    Issue #3265652 by nod_, xjm, lauriii, Wim Leers, Gábor Hojtsy: Unfork...

  • bnjmnm committed b07c6d7 on 10.0.x
    Issue #3265652 by nod_, xjm, lauriii, Wim Leers, Gábor Hojtsy: Unfork...

  • bnjmnm committed 3717bfb on 9.3.x
    Issue #3265652 by nod_, xjm, lauriii, Wim Leers, Gábor Hojtsy: Unfork...
bnjmnm’s picture

Version: 10.0.x-dev » 9.3.x-dev
Issue summary: View changes
Status: Reviewed & tested by the community » Fixed

Aside from being a clever way to add jQuery UI, this also includes refactoring that makes the vendor-update process easier to understand and maintain. My manual review included confirming source maps work properly and there are no load order conflicts resulting from the changes in jQuery UI 1.13.1.

Added to 10.0.x, 9.4.x. Ported to 9.3.x since the jQuery UI 1.13.1 update is needed, and the modifications to the vendor-update process is not disruptive.

Status: Fixed » Closed (fixed)

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

xjm’s picture

Issue summary: View changes
Issue tags: +10.0.0 release notes
xjm’s picture

xjm’s picture

Issue tags: -9.4.0 release notes

We can actually skip the 9.4 notes since 9.3.10 shipped before 9.4.0-alpha1.