Second Beta of jQuery 4.0.0

Posted on by

Last February, we released the first beta of jQuery 4.0.0. We’re now ready to release a second, and we expect a release candidate to come soon™. This release comes with a major rewrite to jQuery’s testing infrastructure, which removed all deprecated or under-supported dependencies. But the main change that warranted a second beta was a fix to the exports field for bundlers. More on that and other changes below.

Many of the breaking changes in jQuery 4.0.0 are ones the team has wanted to make for years, but couldn’t in a patch or minor release. We’ve trimmed legacy code (including removing support for IE before version 11), removed some previously-deprecated APIs, removed some internal-only parameters to public functions that were never documented, and dropped support for some “magic” behaviors that were overly complicated.

We will publish a comprehensive upgrade guide before final release, to outline the removed code and how to migrate. The jQuery Migrate plugin will also be ready to assist. For now, please try out this release and let us know if you encounter any issues.

As usual, the release is available on our CDN and the npm package manager. Third party CDNs will not be hosting this beta release, but will host the 4.0.0 final release later. Here are some highlights for jQuery 4.0.0 beta.2.

CommonJS + ESM: Strange Bedfellows

There are many different ways to include jQuery in a project. Supporting all of them can be difficult, especially when the environment supports both CommonJS and ESM modules. We wanted to support all of the ways jQuery might be included, whether using a named export or the default export. Also, we wanted to ensure jQuery was only ever included once, even when jQuery was both imported using ESM and required using CommonJS in the same environment or bundle. We think we’ve worked out a solution that supports Node.js and bundlers like rollup, webpack, and parcel. More details can be found in the PR. Also, we created a wiki page to explain how the exports property in jQuery’s package.json will work in 4.0.

Boolean Attributes: To Be Or …

The HTML spec defines boolean attributes that often correlate with boolean properties. If the attribute is missing, it correlates with the false property value, if it’s present – the true property value. The only valid values for boolean content attributes are empty string or the full attribute name (e.g. checked="checked").

jQuery has historically tried to be helpful here and treated boolean attributes in a special way in the .attr() API:

  1. For the getter, as long as the attribute was present, it was returning the
    attribute name lowercased, ignoring the value.
  2. For the setter, it was removing the attribute when false was passed;
    otherwise, it was ignoring the passed value and set the attribute –
    interestingly, in jQuery >=3 not lowercased anymore.

The problem is the spec occasionally converts boolean attributes into ones with additional attribute values with special behavior – one such example is the new "until-found" value for the hidden attribute. Our setter normalization meant passing those values was impossible with .attr() (.prop() was unaffected). Also, new boolean attributes were introduced occasionally and jQuery could not easily add them to the list without incurring breaking changes.

This patch removes any special handling of boolean attributes – the getter returns the value as-is and the setter sets the provided value, with one exception. To maintain backwards compatibility, this patch makes the false boolean value trigger attribute removal for ALL non-ARIA attributes. For example, .attr( "checked", false ) will continue to remove the checked attribute, which is the only way the corresponding property will be set to false. ARIA attributes are exempt from the rule since many of them recognize the string "false" as a valid value with semantics different than the attribute missing. To remove an ARIA attribute, use .removeAttr() or pass null as the value to .attr().

Position of Elements In Tables

jQuery 4.0.0-beta.2 also fixes some inconsistent behavior when finding the position of elements within tables. The offset parent on which the position was based could change depending on whether the element’s position style was static or relative.

<div id="container" style="position: relative;">
    <table>
        <tr>
            <td>
                <span id="static"></span>
                <span id="relative" style="position: relative;"></span>
            </td>
        </tr>
    </table>
</div>

Previously, $('#static').position() was returning the position relative to the containing <td> element, while $('#relative').position() was returning the position relative to #container.

Now, both elements return their position relative to #container.

Download

You can get the files from the jQuery CDN, or link to them directly:

https://code.jquery.com/jquery-4.0.0-beta.2.js

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

You can also get this release from npm:

npm install jquery@4.0.0-beta.2

Slim build

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for web animations. Finally, all of jQuery’s supported browsers (except for IE11) now have support for native Promises across the board, so Deferreds and Callbacks are no longer needed in most cases. Along with the regular version of jQuery that includes everything, we’ve released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 8k gzipped bytes smaller than the regular version. These files are also available in the npm package and on the CDN:

https://code.jquery.com/jquery-4.0.0-beta.2.slim.js

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

These updates are already available as the current versions on npm. Information on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their copies today, please give them a few days to post the files. If you’re anxious to get a quick start, use the files on our CDN until they have a chance to update.

Thanks

Thank you to all of you who participated in this release by submitting patches, reporting bugs, or testing, including Michał Gołębiowski-Owczarek, J.Son, Liam James and the whole jQuery team.

We’re on Mastodon!

jQuery has a Mastodon account! We now post releases and other updates to both X and Mastodon. Also, you may be interested in following some of our team members that have Mastodon accounts.

jQuery: https://social.lfx.dev/@jquery

mgol: https://hachyderm.io/@mgol

timmywil: https://hachyderm.io/@timmywil

Changelog

Full changelog: 4.0.0-beta.2

Attributes

  • Make .attr( name, false ) remove for all non-ARIA attrs (#5388, 063831b6)

Build

  • Bump the github-actions group with 2 updates (3a98ef91)
  • upgrade dependencies; fix bundler tests on windows (cb8ab6cc)
  • improve specificity of eslint config; add ecma versions (74970524)
  • Bump the github-actions group with 2 updates (46b9e480)
  • Group dependabot PRs updating GitHub Actions (3cac1465)
  • Bump actions/cache, actions/checkout & github/codeql-action (df1df950)
  • Bump express from 4.18.3 to 4.19.2 (691c0aee)
  • make compare size cache readable for manual edits (783c9d69)
  • fix size comparison for slim files when the branch is dirty (8a3a74c4)
  • migrate more uses of fs.promises; use node: protocol (ae7f6139)
  • Bump github/codeql-action from 3.24.0 to 3.24.6 (ae67ace6)
  • Bump actions/cache from 4.0.0 to 4.0.1 (68f772e0)
  • drop support for Node 10 (5aa7ed88)
  • add GitHub Actions workflow to update Filestash (0293d3e3)
  • update jenkins script to only build (c21c6f4d)
  • Bump actions/cache & github/codeql-action (#5402) (bf11739f)

CSS

  • Tests: Fix tests & support tests under CSS Zoom (#5489, 071f6dba)

Core

  • Fix the exports setup to make bundlers work with ESM & CommonJS (#5416, 60f11b58)

Docs

  • Update remaining HTTP URLs to HTTPS (7cdd8374)

Event

  • Increase robustness of an inner native event in leverageNative (#5459, 527fb3dc)

Offset

  • Increase search depth when finding the 'real' offset parent (556eaf4a)

Release

Tests

  • remove unnecessary scroll feature test (ea31e4d5)
  • Align :has selector tests with 3.x-stable (f2d9fde5)
  • revert concurrency group change (fa73e2f1)
  • include github ref in concurrency group (5880e027)
  • Make the beforeunload event tests work regardless of extensions (399a78ee)
  • share queue/browser handling for all worker types (284b082e)
  • improve diffing for values of different types (b9d333ac)
  • show any and all actual/expected values (f80e78ef)
  • add diffing to test reporter (44fb7fa2)
  • add actual and expected messages to test reporter (1e84908b)
  • fix worker restarts for failed browser acknowledgements (fedffe74)
  • add –hard-retries option to test runner (822362e6)
  • fix cleanup in cases where server doesn't stop (0754d596)
  • fix flakey message logs; ignore delete worker failures (02d23478)
  • reuse browser workers in BrowserStack tests (#5428) (95a4c94b)
  • Use allowlist instead of whitelist (2b97b6bb)
  • migrate testing infrastructure to minimal dependencies (dfc693ea)
  • Fix Karma tests on Node.js 20 (d478a1c0)