jQuery 4.0.0 a ajuns la release final: ce se schimbă după aproape 10 ani

Pe 14 ianuarie 2006, John Resig prezenta pentru prima dată jQuery la BarCamp, în New York. La 20 de ani distanță, echipa jQuery a publicat release-ul final jQuery 4.0.0, după un ciclu lung de dezvoltare și mai multe pre-release-uri. Este primul major release în aproape 10 ani și, inevitabil, aduce și breaking changes – dar obiectivul declarat rămâne același: pentru majoritatea proiectelor, upgrade-ul ar trebui să fie posibil cu modificări minime.

În jQuery 4.0.0 se simte clar o curățenie de „bagaj istoric”: cod legacy tăiat, API-uri deprecate eliminate, parametri interni care ajunseseră (neoficial) în public scoși din semnături, plus renunțarea la unele comportamente „magice” care complicau inutil lucrurile.

Pentru tranziție există două resurse oficiale importante: upgrade guide la https://jquery.com/upgrade-guide/4.0/ și release-ul pentru jQuery Migrate plugin la https://github.com/jquery/jquery-migrate/. Dacă găsești probleme după upgrade, raportarea se face în tracker-ul de issues: https://github.com/jquery/jquery/issues.

Cum îl instalezi: CDN și npm (inclusiv varianta slim)

jQuery 4.0.0 este disponibil pe CDN-ul oficial și în npm. Pentru CDN, ai link direct către build-urile standard:

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

În npm îl instalezi cu:

npm install jquery@4.0.0

npm install jquery@4.0.0

Slim build: mai mic și mai „modern” ca filosofie

Pe lângă build-ul complet, există și un slim build pentru cazurile în care nu ai nevoie de ajax sau preferi librării dedicate pentru request-uri și pentru situații în care animațiile pot fi rezolvate simplu cu CSS + manipulare de clase. În jQuery 4.0.0, slim build devine și mai mic deoarece au fost eliminate Deferreds și Callbacks (ajungând la ~19.5k bytes gzipped).

Deferreds suportau de mult standardul Promises A+, iar în browserele suportate (cu excepția IE11) există Promises native, deci în majoritatea proiectelor poți migra către Promise și metodele aferente. Deferreds au și capabilități suplimentare față de Promises native, dar pentru cea mai mare parte din use-case-uri migrarea e fezabilă.

Dacă trebuie să suporți IE11, recomandarea este să rămâi pe build-ul complet sau să adaugi un polyfill pentru Promises.

Fișierele slim sunt disponibile și pe CDN:

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

Conform anunțului, aceste update-uri sunt deja disponibile ca versiuni curente în npm și Bower. Pentru restul CDN-urilor publice, distribuția poate dura câteva zile (nu ține de echipa jQuery), iar pentru pornire rapidă e preferabil CDN-ul oficial: https://jquery.com/download/.

Breaking changes majore și modernizări importante în jQuery 4.0.0

1) Suport IE <11 eliminat (și alte browsere foarte vechi)

jQuery 4.0 renunță la suportul pentru Internet Explorer 10 și mai vechi. O întrebare firească este: de ce nu dispare și IE11? Planul este o eliminare în etape, iar următorul pas este anunțat pentru jQuery 5.0 (menționat în PR: https://github.com/jquery/jquery/pull/5077). În 4.0, focusul este pe eliminarea codului dedicat strict versiunilor IE mai vechi de 11.

În plus, au fost eliminate și alte compatibilități cu browsere foarte vechi, inclusiv:

• Edge Legacy (versiunea non-Chromium)
• iOS mai vechi decât ultimele 3 versiuni
• Firefox mai vechi decât ultimele 2 versiuni (cu excepția Firefox ESR)
• Android Browser

Conform echipei, în mod normal nu ar trebui să fie nevoie de schimbări în codul tău doar din cauza acestei reduceri de suport. Totuși, dacă ai cerințe de compatibilitate pentru oricare dintre aceste browsere, recomandarea este să rămâi pe jQuery 3.x.

2) Trusted Types și Content Security Policy (CSP)

jQuery 4.0 adaugă suport pentru Trusted Types, astfel încât HTML împachetat în TrustedHTML să poată fi folosit ca input în metodele de manipulare DOM din jQuery fără să încalce directiva CSP require-trusted-types-for.

În paralel, pentru a evita erori CSP asociate cu scripturi inline, echipa a schimbat comportamentul pentru încărcarea asincronă de scripturi: dacă anterior unele request-uri AJAX foloseau deja tag-uri <script> (ca să păstreze atribute precum crossdomain), acum majoritatea request-urilor asincrone de tip script sunt făcute prin inserarea de <script> tags (detalii în PR: https://github.com/jquery/jquery/pull/4763).

Există totuși situații în care se folosește în continuare XHR pentru request-uri asincrone de script – de exemplu când este trecută opțiunea "headers" (cu nota explicită: folosește scriptAttrs în loc). Dar regula generală în 4.0 este: folosim <script> când se poate.

3) Sursa jQuery migrată de la AMD la ES modules

Unul dintre cele mai importante upgrade-uri „structurale” este migrarea sursei de pe branch-ul main de la AMD la ES modules (PR: https://github.com/jquery/jquery/pull/4541). Sursa a fost publicată de mult pe npm și GitHub, dar importul direct ca module era complicat fără RequireJS, care fusese și build tool-ul preferat.

În jQuery 4.x, procesul de packaging trece la Rollup, iar testele sunt rulate separat și pentru varianta ES modules. Rezultatul: jQuery devine mai compatibil cu toolchain-uri moderne, cu fluxuri actuale de development și chiar cu utilizarea directă în browser prin <script type=module>.

4) API-uri deprecate eliminate (în sfârșit)

O majoritate de breaking changes vin din eliminarea unor funcții care erau marcate ca deprecated de mai multe versiuni. Unele erau gândite să rămână doar interne, altele au echivalente native în toate browserele suportate acum de jQuery 4.0.

Lista funcțiilor eliminate include:

• jQuery.isArray
• jQuery.parseJSON
• jQuery.trim
• jQuery.type
• jQuery.now
• jQuery.isNumeric
• jQuery.isFunction
• jQuery.isWindow
• jQuery.camelCase
• jQuery.nodeName
• jQuery.cssNumber
• jQuery.cssProps
• jQuery.fx.interval

În locul lor, se recomandă echivalentele native precum Array.isArray(), JSON.parse(), String.prototype.trim() și Date.now().

Efectul combinat dintre eliminarea API-urilor deprecate și tăierea codului pentru IE vechi a dus la o reducere de dimensiune de peste 3k bytes gzipped.

5) Metode interne scoase din prototype: push, sort, splice

Pe jQuery.prototype existau de mult niște metode de tip Array (push, sort, splice) care nu se comportau ca metodele jQuery obișnuite și erau destinate strict uzului intern. În 4.0 au fost eliminate.

Dacă (din greșeală sau intenționat) le foloseai în cod, exemplul oferit este foarte clar: în loc de $elems.push( elem ), folosești apelul explicit pe Array:

[].push.call( $elems, elem );

[].push.call( $elems, elem );

6) Ordinea evenimentelor de focus/blur urmează acum specificația W3C

Istoric, browserele nu au fost de acord asupra ordinii evenimentelor de focus și blur (focusin, focusout, focus, blur). În cele din urmă, versiunile moderne ale browserelor suportate de jQuery 4.0 au convergent către o ordine comună, dar aceasta diferă de ordinea consistentă pe care jQuery o impusese cu ani în urmă – deci da, este un breaking change.

Începând cu jQuery 4.0, biblioteca nu mai suprascrie comportamentul nativ. Asta înseamnă că toate browserele (în afară de IE) urmează specificația W3C curentă, în această ordine:

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

În versiunile anterioare, ordinea jQuery era: focusout, blur, focusin, focus. Un detaliu interesant: singurul browser care a urmat vechiul W3C spec (înainte de update-ul din 2023) a fost Internet Explorer.

Ce e nou pe zona de securitate și request-uri: note din changelog (Ajax)

Pe lângă headline-urile de mai sus, changelog-ul 4.0.0 are o serie de ajustări relevante, mai ales în $.ajax și transportul de scripturi:

• Array-urile din data nu mai sunt tratate ca binary (commit: 992a1911)
• processData: true e permis chiar și pentru binary data (ce264e07)
• Suport pentru binary data (inclusiv FormData) (a7ed9a7b)
• Suport pentru headers în script transport chiar și cross-domain (#5142, 6d136443)
• null acceptat ca success function în jQuery.get (#4989, 74978b7e)
• Scripturile nu mai sunt auto-executate dacă nu specifici dataType (#4822, 025da4dd)
• responseJSON funcționează pentru request-uri JSONP same-domain eronate (68b4ec59)
• Executarea răspunsurilor de eroare JSONP care sunt script (#4771, a1e619b0)
• Evitarea erorilor CSP în script transport pentru request-uri async (#3969, 07a8e4a1)
• Eliminarea logicii de auto-promovare json -> jsonp (#1799, #3376, e7b3bc48)
• Suprascrierea s.contentType cu header-ul content-type dacă există (#4119, 7fb90a6b)
• Deprecarea alias-urilor de evenimente AJAX; mutarea inline în zona de deprecated (23d53928)
• Nu se execută scripturi pentru răspunsuri HTTP nereușite (#4250, 50871a5a)
• Simplificarea jQuery.ajaxSettings.xhr (#1967, abdc89ac)

Alte modificări punctuale care pot conta în proiecte mari

Attributes

• .attr( name, false ) elimină atributul pentru toate atributele non-ARIA (#5388, 063831b6)
• Optimizări mici de dimensiune (b40a4807)
• Setter-ul nu mai face stringify automat pentru atribute (#4948, 4250b628)
• Eliminat semnătura toggleClass(boolean|undefined) (#3388, a4421101)
• val() refactorizat: nu mai elimină carriage return, iar workaround-urile IE sunt izolate (ff281991)
• Hook-ul pentru atributul type nu mai este setat în afara IE (9e66fe9a)

CSS

• Fix pentru dimensiunile elementelor <col> din tabele (#5628, eca2a564)
• Eliminarea cache-ului în finalPropName (640d5825)
• Teste reparate + suport pentru teste sub CSS Zoom (#5489, 071f6dba)
• Fix pentru reliableTrDimensions când iframe-urile sunt inițial ascunse (b1e66a5f)
• Selector: aliniere cu 3.x, eliminat wrapper-ul extern selector.js (53cf7244)
• reliableTrDimensions funcționează și cu Bootstrap CSS (#5270, 65b85031)
• offsetHeight( true ) etc. includ marginile negative (#3982, bce13b72)
• Valori whitespace-only pentru CSS variables returnează undefined (#5120, 7eb00196)
• Nu se mai face trim pe custom property undefined (#5105, ed306c02)
• addClass( array ): valori falsy sunt ignorate (compress) (#4998, a338b407)
• Justificare și păstrare rtrim pe valori CSS (655c0ed5)
• Trim pentru whitespace în jurul CSS Custom Properties (#4926, efadfe99)
• În slim build sunt incluse metodele show, hide și toggle (297d18dd)
• Eliminat opacity CSS hook (865469f5)
• Workaround pentru getComputedStyle problematic pe table rows în IE/Edge (#4490, 26415e08)
• Nu se mai adaugă automat px la proprietăți, cu câteva excepții (#2795, 00a9c2e5)

Core

• Eliminate workaround-uri obsolete, update la comentariile de suport (e2fe97b7)
• $.parseHTML trece de la document.implementation la DOMParser (0e123509)
• Fix exports pentru bundlers, compatibilitate ESM & CommonJS (#5416, 60f11b58)
• Mai multe detalii despre named exports (5f869590)
• Cod simplificat după reducerea suportului de browsere (93ca49e6)
• Factory mutat în exports separate (46f6e3da)
• Named exports în src/ (#5262, f75daab0)
• Fix regresie în jQuery.text() pe obiecte HTMLDocument (#5264, a75d6b52)
• jQuery.contains mutat din selector în core (024d8719)
• Eliminat parametrul root din jQuery.fn.init (d2436df3)
• Nu se mai bazează pe existența lui splice pe input (9c6f64c7)
• Manipulation: suport de bază TrustedHTML (#4409, de5398a6)
• Raportarea erorilor browserului în parseXML (#4784, 89697325)
• jQuery.isXMLDoc acceptă input falsy (#4782, fd421097)
• Eliminat suportul pentru Edge Legacy (#4568, e35fb62d)
• Iframe script rulează în contextul lui; globalEval primește param doc (#4518, 4592595b)
• Excluderea modulelor callbacks & deferred și din slim build (fbc44f52)
• Migrarea AMD -> ES modules (d0ce00cd)
• Folosește Array.prototype.flat unde e suportat (#4320, 9df4f1de)
• Elimină copii private de push, sort, splice din prototype (b59107f5)
• Introduce .even() & .odd() ca înlocuitor pentru pseudo :even & :odd (78420d42)
• Deprecarea jQuery.trim (înainte de eliminare) (#4363, 5ea59460)
• Elimină IE-specific support tests, se bazează pe document.documentMode (#4386, 3527a384)
• Elimină suport IE <11, iOS <11, Firefox <65, Android Browser & PhantomJS (#3950, #4299, cf84696f)
• Elimină API-urile deprecate jQuery (#4056, 58f0c00b)

Data

• Refactor pentru reducerea dimensiunii (805cdb43)
• Event/Manipulation: prevenirea coliziunilor cu Object.prototype (#3256, 9d76c0b1)
• Separă implementările camelCase pentru data & css/effects (#3355, 8fae2120)

Deferred

• getStackHook redenumit în getErrorHook (#5201, 258ca1ec)
• jQuery.Deferred.exceptionHook respectă source maps (#3179, 0b9c5037)
• Rename master -> primary (a32cf632)

Deprecated

• .hover() definit folosind metode non-deprecate (fd6ffc5e)
• Elimină jQuery.trim (0b676ae1)
• Fix pentru ordinea parametrilor AMD (f810080e)

Dimensions

• Fallback offset în Firefox pentru dimensiuni TR nesigure (#4529, 3bbbc111)

Effect / Effects

• Fix pentru un conditional inutil în .stop() (#4374, 110802c7)
• Elimină jQuery.fx.interval (6c2c7362)

Event

• Folosește .preventDefault() în beforeunload (7c123dec)
• Robustețe crescută pentru un inner native event în leverageNative (#5459, 527fb3dc)
• Evită coliziuni între jQuery.event.special și Object.prototype (bcaeb000)
• Simplifică verificarea pentru saved data în leverageNative (dfe212d5)
• trigger(focus/blur/click) funcționează cu native handlers (#5015, 6ad3651d)
• Simulează focus/blur în IE via focusin/focusout (#4856, #4859, #4950, ce60d318)
• Fix: trigger focus nu se rupe după .on(focus).off(focus) (#4867, e539bac7)
• Fix: re-trigger focus nu refocus-ează elementul original (#4382, dbcffb39)
• Nu mai face crash dacă un element e eliminat pe blur (#4417, 5c2d0870)
• Elimină shim-ul pentru event.which (#3235, 1a5fff4c)
• Elimină jQuery.event.global (18db8717)
• Atașează events doar la obiecte care acceptă data (pe bune) (#4397, d5c505e3)
• Nu mai shimmuiește focusin/focusout (#4300, 8a741376)
• Previne duplicate dummy handlers în leverageNative (eb6c0a7c)
• Fix pentru multiple async focus events (#4350, ddfa8376)

Manipulation

• jQuery.cleanData nu mai sare elemente în timpul cleanup (#5214, 3cad5c43)
• Generalizează un test pentru suport IE (88690ebf)
• Suport pentru $el.html(selfRemovingScript) (#5378 / #5377, 937923d9)
• Extract domManip într-un fișier separat (ee6e8740)
• Nu mai elimină HTML comments din scripts (#4904, 2f8f39e4)
• Respectă atributul crossorigin pe script în DOM manipulation (#4542, 15ae3614)
• Evită concatenarea de stringuri în buildFragment (9c98e4e8)
• jQuery.htmlPrefilter devine identity function (90fed4b4)
• Selector: folosește utilitarul nodeName unde e posibil pentru a salva dimensiune (4504fc3d)

Offset

• Crește search depth când găsește „real” offset parent (556eaf4a)

Selector

• Elimină workaround pentru :has; teste pe iPhone & iPad (65e35450)
• Depreciază corect jQuery.expr[ ":" ]/jQuery.expr.filters (329661fd)
• selector.js depinde de attributes/attr.js (#5379, e06ff088)
• Elimină dependențe selector.js din diverse module (e8b7db4b)
• Re-expune jQuery.find.{tokenize,select,compile,setDocument} (#5259, 338de359)
• Nu mai depinde de CSS.supports( "selector(...)" ) (#5194, 68aa2ef7)
• Backport logică de context de selecție către selector-native (#5185, 2e644e84)
• Selector lists funcționează din nou cu qSA (#5177, 09d988b7)
• Metoda chainable uniqueSort (#5166, 5266f23c)
• Re-introduce selector-native.js (4c1171f2)
• Fix DOM manip în template contents (#5147, 3299236c)
• Elimină suport pentru legacy pseudos; testează custom pseudos (8c7da22c)
• Folosește :has din jQuery dacă CSS.supports(selector(...)) e non-compliant (#5098, d153c375)
• Elimină workaround-ul pentru a:enabled în Chrome <=77 (c1ee33ad)
• Fix: empty attribute selectors funcționează din nou în IE (#4435, 05184cc4)
• Compară documente shallow în uniqueSort (#4441, 15750b0a)
• Test pentru aruncare pe selectori invalizi post-virgulă (6eee5f7f)
• Selectorii cu leading combinators folosesc din nou qSA (ed66d5a2)
• Comparări shallow pentru a evita crash-uri IE/Edge (#4441, aa6344ba)
• Reduce dimensiunea, simplifică setDocument (29a9544a)
• Folosește pseudo-clasa :scope unde e posibil (#4453, df6a7f7f)
• Readuce shortcut-ul querySelectorAll (cef4b731)
• Inline Sizzle în selector module (47835965)
• Port Sizzle tests la jQuery (79b74e04)

Support

• Se asigură că display e setat la block pentru support div (#4832, 09f25436)

Traversing

• Fix contents() pe <object> cu copii în IE (ccbd6b93)
• Fix contents() pe <object> cu copii (#4384, 4d865d96)

Moment aniversar: 20 de ani de jQuery

Lansarea 4.0.0 vine și cu o notă de „reuniune”: echipa menționează că mulți contributori s-au întâlnit în Dallas pentru un reunion, iar John Resig a intrat chiar și prin Zoom. Postarea despre release a fost publicată în timp ce erau împreună.

Changelog complet și resurse utile

Pentru lista completă de schimbări, compararea oficială este aici: Full changelog: 4.0.0 – https://github.com/jquery/jquery/compare/3.7.1…4.0.0.

Dacă faci upgrade într-un proiect existent, începe cu ghidul oficial (https://jquery.com/upgrade-guide/4.0/) și rulează jQuery Migrate (https://github.com/jquery/jquery-migrate/) ca să prinzi rapid API-urile eliminate sau comportamentele care s-au schimbat.