Migration to jQuery 3.5.x

Magento and jQuery
Sergii Ivashchenko

© 2021 Adobe. All Rights Reserved. Adobe Confidential.
Current jQuery version 1.12.4
(May 20, 2016)
Latest jQuery version 3.6.0
(March 2, 2021)
Goal

Process
Prepare codebase Update JS libraries Update jQuery and plugins
2.4-develop branch

What’s new
 Performance improvements
 Bug fixes

Promises/A+ support for Deferreds
$.ajax("/status")
.done(function(data) {
dd();
// console shows: ”dd is not a function"
// no further code executes in this function
})
.fail(function(arg) {
// this code does not execute since the exception
was not caught
});
$.ajax("/status")
.then(function(data) {
dd();
// console shows "jQuery.Deferred exception:
dd is not a function"
// no further code executes in this function
})
.catch(function(error) {
// this code executes after the error above
// error is an Error object, ”dd is not a
function"
});

New signature for jQuery.get() AND jQuery.post()
$.post({
url: '/foo’,
data: bar
})
$.post('/foo', bar)

for...of loops can be used on jQuery collections
var elems =
$(".someclass");
$.each(function(i, elem) {
});
var elems =
$(".someclass");
for ( let elem of elems ) {
}

New method jQuery.escapeSelector()
$( "#id.with.dots" ) $( "#" + $.escapeSelector( “id.with.dots" ) )

jQuery.readyException
$(function() {
throw new Error('boom!')
});
jQuery.ready.then(function() {
throw new Error('boom');
}).fail(function(error) {
throw error;
});
jQuery.readyException = function(error) {
throw error;
};

The .addClass(), .removeClass(), and .toggleClass() methods now
accept an array of classes.
$( ”#id" ).addClass( "selected highlight" );
$( ”#id" ).addClass( [
"selected”,
“highlight”
]);

Other features
 SVG documents support class operations
 Added support for custom CSS properties
 Added support for <template> elements to the .contents() method
 Locking a Callback prevents only future list execution
 jQuery.ready promise is formally supported
 Animations now use requestAnimationFrame
 nonce and nomodule support

jQuery.ajax() Promises/A+ compliance
$.ajax( "example.php" )
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "complete" );
});
$.ajax( "example.php" )
.success(function() {
alert( "success" );
})
.error(function() {
alert( "error" );
})
.complete(function() {
alert( "complete" );
});

jQuery.htmlPrefilter
 jQuery( "<div/><span/>" );
 Previous behavior can be restored using jQuery Migrate 3.2.0 or newer
 jQuery.UNSAFE_restoreLegacyHtmlPrefilter();
<div></div>
<span></span>
<div>
<span></span>
</div>
jQuery 3.5
Previously

Self-closing tags
 <area />
 <base />
 <br />
 <col />
 <embed />
 <hr />
 <img />
 <input />
 <link />
 <meta />
 <param />
 <source />
 <track />
 <wbr />

.data() names containing dashes
var $div = $("<div />");
$div.data("click-count", 3);
var allData = $div.data();
allData.clickCount; // 3
allData["click-count"]; // undefined

jQuery.ajax() does not remove hash from URL
$.ajax( ”host.com#someparameters" )

Select multiple value with nothing selected returns an empty array
$(”#select-multiple").val(); // previously null,
now []

Behavior of :hidden and :visible
 An element is considered visible even if height and/or width of zero

Cross-domain script requests
 dataType: "script" option has to be specified for jQuery.ajax() or jQuery.get()
 jQuery.getScript() is not affected

Return values on empty sets are undefined
 Dimensional methods: .width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(),
and .outerHeight()
 Offset methods: .offsetTop() and .offsetLeft()
jQuery().height() // undefined instead of null

Removed functions and properties
 .andSelf()
 jQuery.event.props
 jQuery.event.fixHooks
 .context and .selector
 .load(), .unload() and .error()
 .size()

Other BIC
 Dropped IE 6–8 support
 jQuery runs in Strict Mode
 document-ready handlers are now asynchronous
 .width(), .height(), .css("width"), and .css("height") can return non-integer values
 .outerWidth() or .outerHeight() on window includes scrollbar width/height
 jQuery.param() no longer converts %20 to a plus sign
 jQuery("#") throws a syntax error
 .wrapAll(function) only calls the function once
 .removeAttr() no longer sets properties to false

Deprecations
 .toggleClass()
 jQuery.unique()
 jQuery.parseJSON()
 .ready()
 .bind()
 .delegate()
 jQuery.holdReady
 jQuery.nodeName
 .on("ready", fn)
 jQuery.now
 jQuery.isWindow
 jQuery.camelCase
 jQuery.proxy
 jQuery.type
 jQuery.isNumeric
 jQuery.isFunction
 Event aliases
 jQuery.isArray
 :first, :last, :eq, :even, :odd, :lt, :gt, and :nth
 jQuery.expr[":"] and jQuery.expr.filters

How to prepare
 jQuery Migrate and repo documentation
 Upgrade Guides https://jquery.com/upgrade-guide/
 Release blog posts http://blog.jquery.com/
 jQuery API documentation -> Deprecated -> “Removed” label
Watch 2.4-develop branch and stay tuned for our updates!

Migration to jQuery 3.5.x

More Related Content

What's hot

Similar to Migration to jQuery 3.5.x

More from StanislavIdolov

Recently uploaded

Migration to jQuery 3.5.x