APIs removed in jQuery 4 and their replacements

pages/presence.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What this jQuery has</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
  <script src="presence.js"></script>
</body>
</html>

pages/presence.js

// presence.js: which of the APIs that jQuery 4 removed this page's jQuery still has.
(function ($) {
  var UTILITIES = ['trim', 'isArray', 'isFunction', 'isNumeric', 'isWindow', 'camelCase', 'nodeName', 'type', 'now',
    'parseJSON', 'unique', 'cssNumber', 'cssProps'];
  var METHODS = ['push', 'sort', 'splice'];
  var gone = UTILITIES.filter(function (name) { return !(name in $); }).map(function (name) { return '$.' + name; });
  gone = gone.concat(METHODS.filter(function (name) { return !(name in $.fn); }).map(function (name) { return '.' + name + '()'; }));
  if (!$.fx || $.fx.interval === undefined) gone.push('$.fx.interval');
  if ($.event.global === undefined) gone.push('$.event.global');
  ['Deferred', 'Callbacks'].forEach(function (name) { if (!(name in $)) gone.push('$.' + name); });
  if (!('queue' in $.fn)) gone.push('.queue()');
  console.log('jQuery ' + $.fn.jquery + ': ' + gone.length + ' gone');
  console.log('  ' + (gone.join(', ') || 'none'));
  console.log('  still there: $.uniqueSort ' + ('uniqueSort' in $) + ', $.proxy ' + ('proxy' in $) +
    ', $.holdReady ' + ('holdReady' in $) + ', .bind() ' + ('bind' in $.fn) + ', .hover() ' + ('hover' in $.fn));
})(jQuery);

pages/isnumeric.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What counts as numeric</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="isnumeric.js"></script>
</body>
</html>

pages/isnumeric.js

// isnumeric.js: 16 values through jQuery 3.7.1's $.isNumeric and four replacements, side by side.
(function ($) {
  var VALUES = ['42', '-3.5', ' 12 ', '1e5', '0x1A', '0123', '12px', '', '   ', 'Infinity',
    '1234567890123456789012345', 7, NaN, null, true, [3]];
  // The test the upgrade guide names, a looser one, the closest match to $.isNumeric, and a test for one kind of value.
  var TESTS = {
    'Number.isFinite(v)': function (v) { return Number.isFinite(v); },
    'Number.isFinite(Number(v))': function (v) { return Number.isFinite(Number(v)); },
    'numeric(v)': function (v) {
      return (typeof v === 'number' || typeof v === 'string') && String(v).trim() !== '' && Number.isFinite(Number(v));
    },
    '/^[0-9]+$/': function (v) { return typeof v === 'string' && /^[0-9]+$/.test(v); },
  };
  var names = Object.keys(TESTS);
  var show = function (v) { return typeof v === 'string' ? JSON.stringify(v) : Array.isArray(v) ? '[' + v + ']' : String(v); };
  var mark = function (b) { return b ? 'yes' : 'no'; };
  var same = names.map(function () { return 0; });
  console.log(['value', '$.isNumeric'].concat(names).join(' | '));
  VALUES.forEach(function (v) {
    var old = $.isNumeric(v);
    var row = names.map(function (name, i) {
      var r = TESTS[name](v);
      if (r === old) same[i] += 1;
      return mark(r);
    });
    console.log([show(v), mark(old)].concat(row).join(' | '));
  });
  console.log(['same as $.isNumeric', VALUES.length + ' of ' + VALUES.length].concat(same.map(function (n) { return n + ' of ' + VALUES.length; })).join(' | '));
})(jQuery);

pages/type.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What $.type said</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="type.js"></script>
</body>
</html>

pages/type.js

// type.js: what jQuery 3.7.1's $.type, typeof and Object.prototype.toString say about 15 values, then the replacements
// of $.isWindow and $.camelCase next to the functions they replace.
(function ($) {
  var VALUES = [
    ['null', null], ['undefined', undefined], ['true', true], ['3', 3], ['NaN', NaN], ["'text'", 'text'], ['10n', BigInt(10)],
    ['function () {}', function () {}], ['async function () {}', async function () {}], ['[1, 2]', [1, 2]], ['{}', {}],
    ['new Date(0)', new Date(0)], ['/re/', /re/], ["new String('a')", new String('a')], ['new Map()', new Map()],
  ];
  VALUES.forEach(function (pair) {
    var v = pair[1];
    console.log(pair[0] + ': $.type ' + $.type(v) + ', typeof ' + typeof v + ', toString ' + Object.prototype.toString.call(v));
  });
  var isWindow = function (obj) { return obj != null && obj === obj.window; };
  console.log('isWindow: window ' + $.isWindow(window) + '/' + isWindow(window) + ', document ' + $.isWindow(document) + '/' + isWindow(document) + ', null ' + $.isWindow(null) + '/' + isWindow(null));
  var camelCase = function (name) {
    return name.replace(/^-ms-/, 'ms-').replace(/-([a-z])/g, function (_, letter) { return letter.toUpperCase(); });
  };
  ['font-size', 'border-top-width', '-webkit-transform', '-ms-transform', 'data-delivery-slot'].forEach(function (name) {
    console.log('camelCase ' + name + ': ' + $.camelCase(name) + ' / ' + camelCase(name));
  });
})(jQuery);

pages/collections.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cart</title>
</head>
<body>
  <table id="cart">
    <tr id="total"><td>Total</td><td class="p">400</td></tr>
    <tr class="item" id="tea"><td>Tea</td><td class="p">120</td></tr>
    <tr class="item" id="rice"><td>Rice</td><td class="p">80</td></tr>
    <tr class="item" id="oil"><td>Oil</td><td class="p">200</td></tr>
  </table>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
  <script src="collections.js"></script>
</body>
</html>

pages/collections.js

// collections.js: the cart's rows through push(), sort() and splice(), where the jQuery has them, and through the
// replacements that work on every release.
(function ($) {
  var ids = function ($set) { return $set.map(function () { return this.id; }).get().join(', '); };
  var price = function (row) { return Number($(row).find('.p').text()); };
  var total = document.getElementById('total');
  var tryIt = function (label, call) {
    try { console.log(label + ': ' + call()); } catch (error) { console.log(label + ': ' + error.name + ': ' + error.message); }
  };
  console.log('jQuery ' + $.fn.jquery);
  tryIt('  rows.push(total)', function () { var rows = $('#cart tr.item'); rows.push(total); return ids(rows); });
  tryIt('  rows.add(total)', function () { var rows = $('#cart tr.item'); var more = rows.add(total); return ids(more) + ' (rows still ' + ids(rows) + ')'; });
  tryIt('  [].push.call(rows, total)', function () { var rows = $('#cart tr.item'); [].push.call(rows, total); return ids(rows); });
  tryIt('  rows.sort(byPrice)', function () { return ids($('#cart tr.item').sort(function (a, b) { return price(a) - price(b); })); });
  tryIt('  $(rows.toArray().sort(byPrice))', function () { return ids($($('#cart tr.item').toArray().sort(function (a, b) { return price(a) - price(b); }))); });
  tryIt('  rows.splice(1, 1)', function () { var rows = $('#cart tr.item'); rows.splice(1, 1); return ids(rows); });
  tryIt('  rows.not(rows.eq(1))', function () { var rows = $('#cart tr.item'); return ids(rows.not(rows.eq(1))); });
})(jQuery);

check/utils-old.js

/* global jQuery */
// utils-old.js: a theme's helpers, written on jQuery's utilities.
var shopUtils = (function ($) {
  return {
    cleanCode: function (s) { return $.trim(s).toUpperCase(); },
    isQty: function (v) { return $.isNumeric(v) && v > 0; },
    asList: function (v) { return $.isArray(v) ? v : [v]; },
    read: function (json) { return $.parseJSON(json); },
    kind: function (v) { return $.type(v); },
    isFn: function (f) { return $.isFunction(f); },
    stamp: function () { return $.now(); },
    isWin: function (o) { return $.isWindow(o); },
    prop: function (name) { return $.camelCase(name); },
    tagIs: function (el, name) { return $.nodeName(el, name); },
    uniq: function (els) { return $.unique(els); },
  };
})(jQuery);

check/utils-new.js

/* global jQuery */
// utils-new.js: the same helpers, with the replacements of this lesson.
var shopUtils = (function ($) {
  var TYPES = {
    '[object Array]': 'array', '[object Date]': 'date', '[object RegExp]': 'regexp', '[object Error]': 'error',
    '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Symbol]': 'symbol',
  };
  return {
    cleanCode: function (s) { return String(s == null ? '' : s).trim().toUpperCase(); },
    isQty: function (v) {
      return (typeof v === 'number' || typeof v === 'string') && String(v).trim() !== '' && Number.isFinite(Number(v)) && Number(v) > 0;
    },
    asList: function (v) { return Array.isArray(v) ? v : [v]; },
    read: function (json) { return JSON.parse(json); },
    kind: function (v) {
      if (v == null) return String(v);
      if (typeof v === 'function') return 'function';
      if (typeof v !== 'object') return typeof v;
      return TYPES[Object.prototype.toString.call(v)] || 'object';
    },
    isFn: function (f) { return typeof f === 'function'; },
    stamp: function () { return Date.now(); },
    isWin: function (o) { return o != null && o === o.window; },
    prop: function (name) {
      return name.replace(/^-ms-/, 'ms-').replace(/-([a-z])/g, function (_, letter) { return letter.toUpperCase(); });
    },
    tagIs: function (el, name) { return el.nodeName.toLowerCase() === name.toLowerCase(); },
    uniq: function (els) { return $.uniqueSort(els); },
  };
})(jQuery);

check/test.js

// test.js: runs every helper of shopUtils on the same inputs and logs the results, so two runs can be compared line
// by line.
(function (u) {
  var log = function (label, value) { console.log(label + ' -> ' + JSON.stringify(value)); };
  log('cleanCode(" save10 ")', u.cleanCode(' save10 '));
  log('cleanCode(null)', u.cleanCode(null));
  ['2', ' 3 ', '', 'two', '0x10', 0].forEach(function (v) { log('isQty(' + JSON.stringify(v) + ')', u.isQty(v)); });
  log('asList("tea")', u.asList('tea'));
  log('read("[1,2]")', u.read('[1,2]'));
  [null, [1], new Date(0), /x/, new Error('e'), 'a', 1, true, {}, function () {}].forEach(function (v, i) {
    log('kind(value ' + i + ')', u.kind(v));
  });
  log('isFn(alert)', u.isFn(window.alert));
  log('typeof stamp()', typeof u.stamp());
  log('isWin(window)', u.isWin(window));
  log('isWin(document)', u.isWin(document));
  log('prop("-ms-transform")', u.prop('-ms-transform'));
  log('prop("font-size")', u.prop('font-size'));
  log('tagIs(body, "BODY")', u.tagIs(document.body, 'BODY'));
  log('uniq length', u.uniq([document.body, document.head, document.body]).length);
})(shopUtils);

check/tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": false,
    "target": "es2022",
    "lib": ["es2022", "dom"],
    "types": ["jquery"]
  },
  "files": ["utils-old.js"]
}