How to fix legacy code with jQuery 4?
jQuery 4.0 is available.
So, let's don't f*** around with cu** comments "nobody uses jQuery anymore". Well, I do ... so stfu and here we go ...!
jQuery 4 - what happened?
jQuery 4 has three ambitious goals:
- ๐ง No more ES5/IE legacy
- ๐ง No duplicate standard code
- ๐ง Smaller core API
Migrate
As mentioned on jquery.com - this is your upgrade guide on version 4.
But if you have a larger project like one of mine, using third party plugins (e. g. datepicker) time is not endless.
Recommendation
- ๐ Use my Shim and stabilize your project running jQuery 4
- ๐ Check in parallel:
- Which third-party providers are still being maintained?
- Which ones can be replaced?
- Which ones need to be patched?
So, I made a short script checking your stuff while using it โ and report it to console.
This is my jquery-legacy-compat.js. Copy it, new file in your IDE and save as js. :)
/*!
* ============================================================
* jQuery 4 Legacy Utility Compatibility Shim (with warnings)
*
* โ ๏ธ TEMPORARY WORKAROUND โ ๏ธ
*
* This file exists because third-party plugins still rely on
* removed jQuery utility helpers (jQuery <= 3.x).
*
* Every legacy call will emit a console warning
* (once per function).
*
* Remove this file when all legacy plugins are gone.
* ============================================================
*/
(function ($) {
'use strict';
const WARN = true; // set false to silence warnings
const warned = Object.create(null);
function warnOnce(name) {
if (WARN && !warned[name] && console && console.warn) {
warned[name] = true;
console.warn(`[jQuery 4 legacy] ${name}() was called by third-party code`);
}
}
// --- String helpers ---
if (!$.trim) {
$.trim = function (str) {
warnOnce('$.trim');
return str == null ? '' : String(str).trim();
};
}
if (!$.parseJSON) {
$.parseJSON = function (str) {
warnOnce('$.parseJSON');
return JSON.parse(str);
};
}
// --- Type checks ---
if (!$.isArray) {
$.isArray = function (obj) {
warnOnce('$.isArray');
return Array.isArray(obj);
};
}
if (!$.isFunction) {
$.isFunction = function (obj) {
warnOnce('$.isFunction');
return typeof obj === 'function';
};
}
if (!$.isNumeric) {
$.isNumeric = function (n) {
warnOnce('$.isNumeric');
return Number.isFinite(+n);
};
}
if (!$.isWindow) {
$.isWindow = function (obj) {
warnOnce('$.isWindow');
return obj != null && obj === obj.window;
};
}
if (!$.isEmptyObject) {
$.isEmptyObject = function (obj) {
warnOnce('$.isEmptyObject');
return obj && Object.keys(obj).length === 0;
};
}
// --- Plain object ---
if (!$.isPlainObject) {
$.isPlainObject = function (obj) {
warnOnce('$.isPlainObject');
if (!obj || Object.prototype.toString.call(obj) !== '[object Object]') {
return false;
}
const proto = Object.getPrototypeOf(obj);
return proto === null || proto === Object.prototype;
};
}
// --- $.type legacy ---
if (!$.type) {
$.type = function (obj) {
warnOnce('$.type');
if (obj == null) {
return String(obj);
}
if (Array.isArray(obj)) {
return 'array';
}
return typeof obj;
};
}
})(jQuery);
Important โ how to use?
You see? Right after jQuery 4 is the placement of my Shim โ after that your other stuff follows.
<script src="jquery-4.0.0.js"></script>
<script src="jquery-legacy-compat.js"></script>
<script src="third-party-plugins.js"></script>
Press F12 in your browser to open up the console ... and see your legacy stuff you have to update.
Conclusion
- โ Project runs with jQuery 4
- โ Third-party providers remain unaffected
- โ Your code remains modern
- โ Simply delete the file in 6โ12 months
- โ And everyone knows WHY it was there
Acknowledgements
My thanks go, of course, to John Resig, who presented our beloved jQuery at BarCamp in New York City on January 14, 2006. A big thank you to the jQuery team today โ still building my beloved JavaScript library.
Don't forget this ...
Yeah, I know ... "Everything on the internet has to be free." But if this post elicited an โAhhh, of course!โ from you, then you're welcome to repay me with a coffee โ I promise to drink it responsibly.