Jquery Blog

Syndicate content
New Wave Javascript
Updated: 46 min 30 sec ago

jQuery 4.0.0 BETA!

Tue, 02/06/2024 - 18:43

jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal.

Many of the breaking changes are ones the team has wanted to make for years, but couldn’t in a patch or minor release. We’ve trimmed legacy code, 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 the beta 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.

Goodbye IE<11

jQuery 4.0 drops support for IE 10 and older. Some may be asking why we didn’t remove support for IE 11. We plan to remove support in stages, and the next step will be released in jQuery 5.0. For now, we’ll start by removing code specifically supporting IE versions older than 11, giving us a size reduction of -867 gzipped bytes in one PR!

We also dropped support for other very old browsers, including Edge Legacy, iOS <11, Firefox <65, and Android Browser. No changes should be required on your end. If you need to support any of these browsers, simply stick with jQuery 3.x.

Deprecated APIs removed

These functions have been deprecated for several versions. It’s time to remove them now that we’ve reached a major release. These functions were either always meant to be internal or ones that now have native equivalents in all supported browsers. The removed functions are:

push, sort, and splice removed

The jQuery prototype has long had Array methods that did not behave like any other jQuery methods and were always meant for internal-use only. These methods are push, sort, and splice. We switched our uses of these methods to Array functions instead of the jQuery prototype. For example, $elems.push( elem ) became [].push.call( $elems, elem ). We’re mentioning it here in case there are any plugins out there that may have relied on these methods.

focusin and focosout event order

For a long time, browsers did not agree on the order of focus and blur events, which includes focusin, focusout, focus, and blur. Finally, the latest versions of all browsers that jQuery 4.0 supports have converged on a common event order. Unfortunately, it differs from the consistent order that jQuery had chosen years ago, which makes this a breaking change. At least everyone is the on the same page now!

jQuery’s order for all four events in previous versions was:

1. focusout 2. blur 3. focusin 4. focus

Starting with jQuery 4.0, we no longer override native behavior. This means that all browsers except IE will follow the current W3C specification, which is:

1. blur 2. focusout 3. focus 4. focusin

For those that are curious, the W3C specification previously defined a different order:

1. focusout 2. focusin 3. blur 4. focus

But, few thought that intuitive and the spec was changed in 2023 to match what browsers have already implemented. Ironically, the only browser to ever follow the old spec was Internet Explorer.

FormData support

jQuery.ajax has added support for binary data, including FormData. Previously, binary data was not a known data type and was converted to a string. That behavior could be disabled by disabling data conversion and handling the data manually, but we decided to make this work automatically. This is technically a breaking change, but should be closer to expected behavior.

Automatic JSONP promotion removed

Previously, jQuery.ajax with dataType: "json" with a provided callback would be converted to a JSONP request. Today, the preferred way to interact with a cross-domain backend is with CORS, which works in all browsers that jQuery 4.0 supports. This should help avoid unexpected behavior in case a developer is unaware that code can be executed from a remote domain with JSONP.

jQuery source migrated to ES modules

It was a special day when the jQuery source on the main branch was migrated from AMD to ES modules. The jQuery source has always been published with jQuery releases on npm and GitHub, but could not be imported directly as modules without RequireJS, which was jQuery’s build tool of choice. We have since switched to Rollup for packaging jQuery and we do run all tests on the ES modules separately.

Trusted Types and CSP

jQuery 4.0 adds support for Trusted Types, ensuring that HTML wrapped in TrustedHTML can be used as input to jQuery manipulation methods in a way that doesn’t violate the require-trusted-types-for Content Security Policy directive.

Along with this, while some AJAX requests were already using <script> tags to maintain attributes such as crossdomain, we have since switched most asynchronous script requests to use <script> tags to avoid any CSP errors caused by using inline scripts. There are still a few cases where XHR is used for asynchronous script requests, such as when the "headers" option is passed (use scriptAttrs instead!), but we now use a <script> tag whenever possible.

Updated slim build

The slim build has gotten even smaller in jQuery 4.0.0 with the removal of Deferreds and Callbacks (now below 20k bytes gzipped!). Deferreds have long-supported the Promises A+ standard, so native Promises can be used instead in most cases and they are available in all of jQuery’s supported browsers except IE11. Deferreds do have some extra features that native Promises do not support, but most usage can be migrated to Promise methods. If you need to support IE11, it’s best to use the main build or add a polyfill for native Promises.

Download

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

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

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

You can also get this release from npm:

npm install jquery@4.0.0-beta

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.slim.js

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

These updates are already available as the current versions on npm and Bower. 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 Alex, Ahmed S. El-Afifi, fecore1, Dallas Fraser, Richard Gibson, Michał Gołębiowski-Owczarek, Pierre Grimaud, Gabriela Gutierrez, Jonathan, Necmettin Karakaya, Anders Kaseorg, Wonseop Kim, Simon Legner, Shashanka Nataraj, Pat O’Callaghan, Christian Oliff, Dimitri Papadopoulos Orfanos, Wonhyoung Park, Bruno PIERRE, Baoshuo Ren, Beatriz Rezener, Sean Robinson, Ed Sanders, Timo Tijhof, Tom, Christian Wenz, ygj6 and the whole jQuery team.

We’re on Mastodon!

jQuery now has its very own Mastodon account. We will be cross posting to both Twitter and Mastodon from now on. 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

Ajax
  • Don’t treat array data as binary (992a1911)
  • Allow `processData: true` even for binary data (ce264e07)
  • Support binary data (including FormData) (a7ed9a7b)
  • Support `headers` for script transport even when cross-domain (#5142, 6d136443)
  • Support `null` as success functions in `jQuery.get` (#4989, 74978b7e)
  • Don’t auto-execute scripts unless dataType provided (#4822, 025da4dd)
  • Make responseJSON work for erroneous same-domain JSONP requests (68b4ec59)
  • Execute JSONP error script responses (#4771, a1e619b0)
  • Avoid CSP errors in the script transport for async requests (#3969, 07a8e4a1)
  • Drop the json to jsonp auto-promotion logic (#1799, #3376, e7b3bc48)
  • Overwrite s.contentType with content-type header value, if any (#4119, 7fb90a6b)
  • Deprecate AJAX event aliases, inline event/alias into deprecated (23d53928)
  • Do not execute scripts for unsuccessful HTTP responses (#4250, 50871a5a)
  • Simplify jQuery.ajaxSettings.xhr (#1967, abdc89ac)
Attributes
  • Shave off a couple of bytes (b40a4807)
  • Don’t stringify attributes in the setter (#4948, 4250b628)
  • Drop the `toggleClass(boolean|undefined)` signature (#3388, a4421101)
  • Refactor val(): don’t strip carriage return, isolate IE workarounds (ff281991)
  • Don’t set the type attr hook at all outside of IE (9e66fe9a)
build
  • set up periodic code scanning analysis (39c5778c)
Build
  • migrate grunt authors to a custom script (af79c999)
  • Bump follow-redirects from 1.15.1 to 1.15.4 (56139394)
  • Bump actions/setup-node and github/codeql-action (99151d7a)
  • Reformat GitHub workflow Yaml files (c98597ea)
  • Bump @babel/traverse & multiple actions (fb0cc272)
  • Don’t run CI push workflows for dependabot branches (635cb152)
  • Update ESLint-related packages, fix linting errors (f47c6a83)
  • Run pretest before test:* npm scripts (1ad66aeb)
  • sort branches in compare_size; last run last (a7fa303f)
  • run pretest in jenkins script (cb763072)
  • fix inconsistent builds in Node 20 (7ef9099d)
  • add commit SHAs and last runs to comparisons (09972bcc)
  • add new factory files to dist eslint (79223841)
  • Bump qs, socket.io-parser, socket.io & json5 (b923047d)
  • migrate most grunt tasks off of grunt (2bdecf8b)
  • Bump actions/checkout, actions/setup-node & github/codeql-action (42e50f8c)
  • Update mailmap entry for Krinkle (699bcd39)
  • replace CRLF with LF during minify (48cc402a)
  • Add `exports` to package.json, export slim & esm builds (#4592, 8be4c0e4)
  • Switch form Terser to SWC for JS minification (#5286) (#5285, e2421875)
  • Make sure `*.cjs` & `*.mjs` files use UNIX line endings as well (198b41c8)
  • switch preferred email for timmywil (2b6b5e0a)
  • Bump github/codeql-action & actions/checkout (4a13266e)
  • Drop individual AMD modules (5701957b)
  • Reference GitHub Actions by commit SHAs (#5266, 784b9ba6)
  • Switch the minifier from UglifyJS to Terser (27303c6b)
  • Make the `eslint:dev` task not lint the `dist/` folder (44906a83)
  • Test on Node.js 20, stop testing on Node.js 14 & 19 (6616acff)
  • Only install Playwright dependencies when needed (e77bd9d6)
  • Bump actions/setup-node from 3.5.1 to 3.6.0 (7e7bd062)
  • Run GitHub Action browser tests on Playwright WebKit (b02a257f)
  • Migrate middleware-mockserver to modern JS (ce90a484)
  • remove stale Insight package from custom builds (c66d4700)
  • Limit permissions for GitHub workflows (c909d6b1)
  • Test on Node.js 18 & 19, stop testing on Node 12 (f62d8e21)
  • Bump actions/setup-node from 3.5.0 to 3.5.1 (0208224b)
  • Update Grunt from 1.4.1 to 1.5.3 (aa231cd2)
  • Bump actions/setup-node from 3.4.1 to 3.5.0 (25400750)
  • Update GitHub Actions (52f452b2)
  • Add dependabot.yml config (GitHub Actions) (3f8bb2a4)
  • Test on Node 17, update Grunt & `karma-*` packages (2525cffc)
  • Separate the install step from running tests in GitHub Actions (eef97250)
  • remove travis.yml and travis mentions from core (#4983) (5f4d449a)
  • Migrate CI to GitHub Actions (e23190e6)
  • Update ESLint & eslint-plugin-import, fixing the build (9735edd5)
  • Test on Node.js 16 instead of 15 (0f623fdc)
  • Take core-js-bundle from the external directory as well (345cd22e)
  • Restore the external directory (a684e6ba)
  • Rename master to main across the repository (8ae477a4)
  • Test on Node.js 15 (6984d174)
  • Explicitly exclude the queue module from the slim build (a503c691)
  • Make the import/no-unused-modules ESLint rule work in WebStorm (8612018d)
  • Append .eslintignore paths to grunt eslint paths (a22b43ba)
  • Use the US spelling of “favor” (fa0058af)
  • Fix commitplease husky config (#4735, 3a1b338a)
  • Update dependencies (b5028669)
  • Event: Make sure all source modules’ exports are used (#4648) (40c3abd0)
  • Update eslint-config-jquery, fix linting violations (ef4d6ca6)
  • Followups after introducing ES modules compiled via Rollup (55cd3a44)
  • Correct code indentations based on jQuery Style Guide (3d62d570)
  • Reduce the slim build header comment & jQuery.fn.jquery (812b4a1a)
  • Move ESLint max-len disable-directive to dist/.eslintrc.json (34296ec5)
  • Test on Node.js 14, stop testing on Node.js 8 & 13 (88eb22e0)
  • Enable reportUnusedDisableDirectives in ESLint (46f9810b)
  • Resolve Travis config warnings (5b94a4f8)
  • Enable ESLint one-var rule for var declarations in browser code (4a7fc854)
  • Add Christian Oliff to .mailmap & AUTHORS.txt (721744a9)
  • Lint the minified jQuery file as well – a Gruntfile fix (#3075, 338f1fc7)
  • Lint the minified jQuery file as well (#3075, 89a18de6)
  • Add intuitive names to Travis jobs (e1fab109)
  • Make dev mode work in Karma again, serve source files from disk (437f389a)
  • Tests: Fix custom build tests, verify on Travis (0f780ba7)
  • Create a `grunt custom:slim` alias for the Slim build (#4578) (9b9ed469)
  • Make Karma work in ES modules mode (341c6d1b)
  • Auto-convert sources to AMD (f37c2e51)
  • Fix the Windows build (#4548, 9fd2fa53)
  • Require extensions for ES6 imports, prevent import cycles (44ac8c85)
  • Fix the import path to serialize.js from ajax.js (07532014)
  • Run tests on Travis only on browsers defined in the config (bcbcdd2b)
  • Run tests on Firefox ESR as well (2d5ad6d2)
  • Run tests on Node.js 13 in addition to 8, 10 & 12 (830976e6)
  • Run tests on Travis on FirefoxHeadless as well (584835e6)
  • Require strict mode in Node.js scripts via ESLint (bbad821c)
  • Support jquery-release –dry-run flag (d7d0b52b)
  • Stop copying src/core.js to dist on release (#4489, 9a4d9806)
  • Remove the external directory, read from node_modules directly (d7e64190)
  • ESLint: forbid unused function parameters (438b1a3e)
  • Fix the regex parsing AMD var-modules (#4389) (9ec09c3b)
  • Fix AMD dependencies in curCSS (b220f6df)
  • Test on Node.js 12, stop testing on Node.js 6 & 11 (b8d47128)
  • Fix unresolved jQuery reference in finalPropName (#4358, 87403058)
  • Update Sizzle from 2.3.3 to 2.3.4 (#1756, #4170, #4249, 0b2c36ad)
  • Update the master version to 4.0.0-pre (c4f2fa2f)
  • Update Sinon from 2.3.7 to 7.3.1, other updates (fea7a2a3)
Core
  • Add more info about named exports (5f869590)
  • Simplify code post browser support reduction (93ca49e6)
  • Move the factory to separate exports (46f6e3da)
  • Use named exports in `src/` (#5262, f75daab0)
  • Fix regression in jQuery.text() on HTMLDocument objects (#5264, a75d6b52)
  • Selector: Move jQuery.contains from the selector to the core module (024d8719)
  • Drop the root parameter of jQuery.fn.init (d2436df3)
  • Don’t rely on splice being present on input (9c6f64c7)
  • Manipulation: Add basic TrustedHTML support (#4409, de5398a6)
  • Report browser errors in parseXML (#4784, 89697325)
  • Make jQuery.isXMLDoc accept falsy input (#4782, fd421097)
  • Drop support for Edge Legacy (i.e. non-Chromium Microsoft Edge) (#4568, e35fb62d)
  • Fire iframe script in its context, add doc param in globalEval (#4518, 4592595b)
  • Exclude callbacks & deferred modules in the slim build as well (fbc44f52)
  • Migrate from AMD to ES modules
Categories: Development

eXTReMe Tracker