jQuery 4.0.0 je vani: 20 godina nakon prvog BarCamp demoa stiže najveći rez u gotovo desetljeću

Prije točno 20 godina (14. siječnja 2006.) John Resig je na BarCampu u New Yorku prvi put predstavio jQuery. Danas, nakon dugog ciklusa razvoja i više pre-release izdanja, ekipa je objavila finalni jQuery 4.0.0. Ovo je prvi major release u skoro 10 godina, donosi hrpu modernizacija, ali i nekoliko breaking changeova – dovoljno da upgrade nije “samo bump verzije”, ali (po najavi) za većinu projekata ipak prolazi uz minimalne dorade.

U pozadini je logika jasna: stvari koje su se godinama odgađale jer nisu mogle u patch/minor release (rezanje legacy koda, uklanjanje deprecated API-ja, izbacivanje internih parametara koji nikad nisu bili dokumentirani, i ukidanje nekih “magijskih” ponašanja koja su bila prekomplicirana) napokon su došle na red.

Gdje je dostupno i kako ga povući

Release je dostupan na službenom jQuery CDN-u i kroz npm. Treći CDN-ovi će ga vjerojatno uskoro preuzeti, ali njihove rokove jQuery tim ne kontrolira pa je realno očekivati kratko kašnjenje.

CDN linkovi (full build)

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

npm

npm install jquery@4.0.0

npm install jquery@4.0.0

Najveće promjene u jQuery 4.0.0 (što će te stvarno dotaći)

1) Izbačena podrška za IE<11 (IE10 i stariji)

jQuery 4.0 formalno ukida podršku za IE 10 i starije. Često pitanje je: zašto ne i IE11? Najava je da će to ići u fazama, a sljedeći korak (ukidanje IE11) je planiran za jQuery 5.0 (referenca: https://github.com/jquery/jquery/pull/5077). U 4.0 se konkretno reže kod koji je ciljano podržavao IE verzije starije od 11.

Osim toga, ukinuta je podrška i za druge vrlo stare browsere: Edge Legacy, iOS verzije starije od zadnje 3, Firefox stariji od zadnje 2 verzije (osim Firefox ESR-a), te Android Browser. Po poruci iz releasea, promjene na tvojoj strani ne bi trebale biti potrebne – osim ako stvarno moraš podržavati navedene browsere. U tom slučaju ostani na jQuery 3.x.

2) Trusted Types i CSP: manje glavobolje u zaključanim okruženjima

jQuery 4.0 uvodi podršku za Trusted Types (mehanizam u browserima koji pomaže spriječiti XSS kroz kontrolu “opasnih” sinkova). Konkretno: HTML umotan u TrustedHTML (MDN: https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) može se koristiti kao input za jQuery metode manipulacije DOM-om bez kršenja CSP direktive require-trusted-types-for.

Paralelno s tim, tim je promijenio način na koji se rade async script requestovi kako bi se izbjegli CSP problemi: iako su neki AJAX requestovi već koristili <script> tagove radi atributa poput crossdomain, sada su uglavnom prebacili async script učitavanje na <script> tagove (PR: https://github.com/jquery/jquery/pull/4763) kako bi se izbjegle CSP greške povezane s inline scriptovima.

I dalje postoje slučajevi gdje se za async script request koristi XHR – primjerice kada je proslijeđena opcija "headers" (napomena iz releasea: umjesto toga koristi scriptAttrs). Ali kad god je moguće, jQuery sada bira <script> element.

3) Izvorni kod migriran na ES modules (zbogom AMD/RequireJS era)

Jedan od najbitnijih strateških poteza je migracija jQuery sourcea na main branchu s AMD (objašnjenje: https://requirejs.org/docs/whyamd.html) na ES modules (PR: https://github.com/jquery/jquery/pull/4541). jQuery source je godinama bio objavljivan na npm-u i GitHubu, ali ga se nije moglo direktno importati kao module bez RequireJS-a jer je RequireJS bio glavni build alat.

Sada je packaging prebačen na Rollup (https://rollupjs.org/introduction/), testovi se vrte i nad ES modules varijantom, a rezultat je bolja kompatibilnost s modernim bundlerima, workflowima i browserima – uključujući korištenje kroz <script type=module>.

4) Uklonjeni deprecated API-ji (prebaci se na native ekvivalente)

jQuery 4.0 uklanja funkcije koje su već više verzija bile deprecated – dio njih je ionako bio zamišljen kao interni, a dio je danas pokriven native API-jima u svim podržanim browserima. Uklonjeno je sljedeće:

• 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

U praksi, većinu toga zamijeniš native ekvivalentima poput Array.isArray(), JSON.parse(), String.prototype.trim() i Date.now().

Kombinacija rezanja deprecated API-ja i uklanjanja IE<11 koda donijela je i konkretan dobitak: preko 3kB manje (gzipped).

5) Izbačene interne Array metode s jQuery prototipa (push, sort, splice)

jQuery prototip je dugo nosio neke Array metode koje nisu bile “jQuery-like” i bile su namijenjene internom korištenju: push, sort i splice. U 4.0 su uklonjene s prototipa.

Ako si ih (svjesno ili slučajno) koristio, primjer iz releasea: umjesto $elems.push( elem ) koristi:

// jQuery 4.x: push nije na jQuery prototipu
[].push.call( $elems, elem );

// jQuery 4.x: push nije na jQuery prototipu
[].push.call( $elems, elem );

6) Redoslijed focus/blur eventova sada prati W3C specifikaciju

Ovo je jedan od suptilnijih, ali realno breaking detalja. Godinama browseri nisu bili usuglašeni oko redoslijeda focus/blur eventova (focusin, focusout, focus, blur). S novijim verzijama svih browsera koje jQuery 4.0 podržava, konačno je došlo do konvergencije – ali na redoslijed koji se razlikuje od onoga što je jQuery godinama “nametao” radi konzistentnosti.

Od jQuery 4.0 jQuery više ne overridea native ponašanje. To znači da će svi browseri osim IE-a pratiti aktualnu W3C specifikaciju, odnosno redoslijed:

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

U prijašnjim verzijama jQuery je imao redoslijed: focusout, blur, focusin, focus. Zanimljiv detalj iz najave: jedini browser koji je ikad pratio stari W3C spec (prije updatea iz 2023.) bio je Internet Explorer.

7) Slim build je još tanji: bez Deferreds i Callbacks

Slim build u jQuery 4.0.0 postaje još manji jer su iz njega uklonjeni Deferreds i Callbacks. Novi slim build je oko 19.5kB gzipped. Budući da Deferreds već dugo podržavaju Promises A+ standard (https://promisesaplus.com/), u većini slučajeva možeš prijeći na native Promise.

Važna nijansa: Deferreds imaju i neke dodatne mogućnosti koje native Promises nemaju, ali “većina” tipične upotrebe može se prebaciti na Promise metode. Native Promises su dostupne u svim browserima koje jQuery podržava osim IE11. Ako moraš podržavati IE11, preporuka je koristiti main build ili dodati polyfill za native Promises.

Slim build: linkovi i kada ga ima smisla uzeti

Slim build je i dalje ideja “uzmi samo što trebaš”: ponekad ti ne treba AJAX (ili ga radiš kroz posebnu biblioteku), animacije možeš riješiti CSS-om i manipulacijom classova, a kad imaš native Promises (svugdje osim IE11), Deferreds/Callbacks često postanu višak. Razlika u veličini je oko 8kB gzipped u odnosu na regularni build.

CDN linkovi (slim build)

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

Ove nadogradnje su već dostupne kao trenutne verzije na npm-u i Boweru. Pregled svih načina instalacije ostaje na https://jquery.com/download/. Javnim CDN-ovima kopije stižu “danas” (po najavi), ali treba im dati par dana da objave fileove – ako želiš odmah, koristi službeni CDN.

Changelog: kompletna usporedba i što je sve dotaknuto

Ako želiš proći sve commitove i promjene, puni changelog je ovdje: 4.0.0 (usporedba 3.7.1 → 4.0.0): https://github.com/jquery/jquery/compare/3.7.1…4.0.0

Ajax (sažetak stavki iz changeloga)

• Don’t treat array data as binary (commit 992a1911)
• Allow processData: true even for binary data (commit ce264e07)
• Support binary data (including FormData) (commit a7ed9a7b)
• Support headers for script transport even when cross-domain (#5142, commit 6d136443)
• Support null as success functions in jQuery.get (#4989, commit 74978b7e)
• Don’t auto-execute scripts unless dataType provided (#4822, commit 025da4dd)
• Make responseJSON work for erroneous same-domain JSONP requests (commit 68b4ec59)
• Execute JSONP error script responses (#4771, commit a1e619b0)
• Avoid CSP errors in the script transport for async requests (#3969, commit 07a8e4a1)
• Drop the json to jsonp auto-promotion logic (#1799, #3376, commit e7b3bc48)
• Overwrite s.contentType with content-type header value, if any (#4119, commit 7fb90a6b)
• Deprecate AJAX event aliases, inline event/alias into deprecated (commit 23d53928)
• Do not execute scripts for unsuccessful HTTP responses (#4250, commit 50871a5a)
• Simplify jQuery.ajaxSettings.xhr (#1967, commit abdc89ac)

Attributes

• Make .attr( name, false ) remove for all non-ARIA attrs (#5388, commit 063831b6)
• Shave off a couple of bytes (commit b40a4807)
• Don’t stringify attributes in the setter (#4948, commit 4250b628)
• Drop the toggleClass(boolean|undefined) signature (#3388, commit a4421101)
• Refactor val(): don’t strip carriage return, isolate IE workarounds (commit ff281991)
• Don’t set the type attr hook at all outside of IE (commit 9e66fe9a)

CSS

• Fix dimensions of table <col> elements (#5628, commit eca2a564)
• Drop the cache in finalPropName (commit 640d5825)
• Tests: Fix tests & support tests under CSS Zoom (#5489, commit 071f6dba)
• Fix reliableTrDimensions support test for initially hidden iframes (commit b1e66a5f)
• Selector: Align with 3.x, remove the outer selector.js wrapper (commit 53cf7244)
• Make the reliableTrDimensions support test work with Bootstrap CSS (#5270, commit 65b85031)
• Make offsetHeight( true ), etc. include negative margins (#3982, commit bce13b72)
• Return undefined for whitespace-only CSS variable values (#5120, commit 7eb00196)
• Don’t trim whitespace of undefined custom property (#5105, commit ed306c02)
• Skip falsy values in addClass( array ), compress code (#4998, commit a338b407)
• Justify use of rtrim on CSS property values (commit 655c0ed5)
• Trim whitespace surrounding CSS Custom Properties values (#4926, commit efadfe99)
• Include show, hide & toggle methods in the jQuery slim build (commit 297d18dd)
• Remove the opacity CSS hook (commit 865469f5)
• Workaround buggy getComputedStyle on table rows in IE/Edge (#4490, commit 26415e08)
• Don’t automatically add “px” to properties with a few exceptions (#2795, commit 00a9c2e5)

Core

• Remove obsolete workarounds, update support comments (commit e2fe97b7)
• Switch $.parseHTML from document.implementation to DOMParser (commit 0e123509)
• Fix the exports setup to make bundlers work with ESM & CommonJS (#5416, commit 60f11b58)
• Add more info about named exports (commit 5f869590)
• Simplify code post browser support reduction (commit 93ca49e6)
• Move the factory to separate exports (commit 46f6e3da)
• Use named exports in src/ (#5262, commit f75daab0)
• Fix regression in jQuery.text() on HTMLDocument objects (#5264, commit a75d6b52)
• Selector: Move jQuery.contains from the selector to the core module (commit 024d8719)
• Drop the root parameter of jQuery.fn.init (commit d2436df3)
• Don’t rely on splice being present on input (commit 9c6f64c7)
• Manipulation: Add basic TrustedHTML support (#4409, commit de5398a6)
• Report browser errors in parseXML (#4784, commit 89697325)
• Make jQuery.isXMLDoc accept falsy input (#4782, commit fd421097)
• Drop support for Edge Legacy (i.e. non-Chromium Microsoft Edge) (#4568, commit e35fb62d)
• Fire iframe script in its context, add doc param in globalEval (#4518, commit 4592595b)
• Exclude callbacks & deferred modules in the slim build as well (commit fbc44f52)
• Migrate from AMD to ES modules (commit d0ce00cd)
• Use Array.prototype.flat where supported (#4320, commit 9df4f1de)
• Remove private copies of push, sort & splice from the jQuery prototype (commit b59107f5)
• Implement .even() & .odd() to replace POS :even & :odd (commit 78420d42)
• Deprecate jQuery.trim (#4363, commit 5ea59460)
• Remove IE-specific support tests, rely on document.documentMode (#4386, commit 3527a384)
• Drop support for IE <11, iOS <11, Firefox <65, Android Browser & PhantomJS (#3950, #4299, commit cf84696f)
• Remove deprecated jQuery APIs (#4056, commit 58f0c00b)

Data

• Refactor to reduce size (commit 805cdb43)
• Event:Manipulation: Prevent collisions with Object.prototype (#3256, commit 9d76c0b1)
• Separate data & css/effects camelCase implementations (#3355, commit 8fae2120)

Deferred

• Rename getStackHook to getErrorHook (#5201, commit 258ca1ec)
• Respect source maps in jQuery.Deferred.exceptionHook (#3179, commit 0b9c5037)
• Rename master to primary (commit a32cf632)

Deprecated

• Define .hover() using non-deprecated methods (commit fd6ffc5e)
• Remove jQuery.trim (commit 0b676ae1)
• Fix AMD parameter order (commit f810080e)

Dimensions

• Add offset prop fallback to FF for unreliable TR dimensions (#4529, commit 3bbbc111)

Docs (izvadak promjena)

• Fix some minor issues in comments (commit e4d4dd81)
• update herodevs link in README (#5695, commit 093e63f9)
• Align CONTRIBUTING.md with 3.x-stable (commit d9281061)
• Update CONTRIBUTING.md (commit 4ef25b0d)
• add version support section to README (commit cbc2bc1f)
• Update remaining HTTP URLs to HTTPS (commit 7cdd8374)
• Fix module links in the package README (commit ace646f6)
• update watch task in CONTRIBUTING.md (commit 77d6ad71)
• Fix typos found by codespell (commit 620870a1)
• remove stale gitter badge from readme (commit 67cb1af7)
• Remove the “Grunt build” section from the PR template (commit 988a5684)
• Remove stale badge from README (commit bcd9c2bc)
• Update the README of the published package (commit edccabf1)
• Remove git.io from a GitHub Actions comment (commit 016872ff)
• Update webpack website in README (commit 01819bc3)
• add link to patchwelcome and help wanted issues (commit 924b7ce8)
• add link to preview the new CLAs (commit 683ceb8f)
• Fix incorrect trac-NUMBER references (commit eb9ceb2f)
• remove expired links from old jquery source (#4997, commit ed066ac7)
• Remove links to Web Archive from source (#4981, commit e24f2dcf)
• Replace #NUMBER Trac issue references with trac-NUMBER (commit 5d5ea015)
• Update the URL to the latest jQuery build in CONTRIBUTING.md (commit 9bdb16cd)
• Remove the CLA checkbox in the pull request template (commit e1248931)
• update irc to Libera and fix LAMP dead link (commit 175db73e)
• Update Frequently Reported Issues in the GitHub issue template (commit 7a6fae6a)
• Change JS Foundation mentions to OpenJS Foundation (commit 11611967)
• add SECURITY.md, show security email address (commit 2ffe54ca)
• Fix typos (commit 1a7332ce)
• Update the link to the jsdom repository (commit a62309e0)
• Use https for hyperlinks in README (commit 73415da2)
• Remove a mention of the event/alias.js module from README (commit 3edfa1bc)
• Update links to EdgeHTML issues to go through Web Archive (commit 1dad1185)
• direct users to GitHub docs for cloning the repo (commit f1c16de2)
• Change OS X to macOS in README (commit 5a3e0664)
• Update most URLs to HTTPS (commit f09d9210)
• Convert link to Homebrew from HTTP to HTTPS (commit e0022f23)

Effect / Effects

• Fix a unnecessary conditional statement in .stop() (#4374, commit 110802c7)
• Remove jQuery.fx.interval (commit 6c2c7362)

Event

• Use .preventDefault() in beforeunload (commit 7c123dec)
• Increase robustness of an inner native event in leverageNative (#5459, commit 527fb3dc)
• Avoid collisions between jQuery.event.special & Object.prototype (commit bcaeb000)
• Simplify the check for saved data in leverageNative (commit dfe212d5)
• Make trigger(focus/blur/click) work with native handlers (#5015, commit 6ad3651d)
• Simulate focus/blur in IE via focusin/focusout (#4856, #4859, #4950, commit ce60d318)
• Don’t break focus triggering after .on(focus).off(focus) (#4867, commit e539bac7)
• Make focus re-triggering not focus the original element back (#4382, commit dbcffb39)
• Don’t crash if an element is removed on blur (#4417, commit 5c2d0870)
• Remove the event.which shim (#3235, commit 1a5fff4c)
• remove jQuery.event.global (commit 18db8717)
• Only attach events to objects that accept data – for real (#4397, commit d5c505e3)
• Stop shimming focusin & focusout events (#4300, commit 8a741376)
• Prevent leverageNative from registering duplicate dummy handlers (commit eb6c0a7c)
• Fix handling of multiple async focus events (#4350, commit ddfa8376)

Manipulation

• Make jQuery.cleanData not skip elements during cleanup (#5214, commit 3cad5c43)
• Generalize a test to support IE (commit 88690ebf)
• Support $el.html(selfRemovingScript) (#5378, #5377, commit 937923d9)
• Extract domManip to a separate file (commit ee6e8740)
• Don’t remove HTML comments from scripts (#4904, commit 2f8f39e4)
• Respect script crossorigin attribute in DOM manipulation (#4542, commit 15ae3614)
• Avoid concatenating strings in buildFragment (commit 9c98e4e8)
• Make jQuery.htmlPrefilter an identity function (commit 90fed4b4)
• Selector: Use the nodeName util where possible to save size (commit 4504fc3d)

Offset

• Increase search depth when finding the ‘real’ offset parent (commit 556eaf4a)

Release (izvadak)

• 4.0.0 (commit 4f2fae08)
• remove dist files from main branch (commit c838cfb5)
• 4.0.0-rc.2 (commit 97525193)
• Update AUTHORS.txt (commit c128d5d8)
• Fix release issues uncovered during the 4.0.0-rc.1 release (commit a5b0c431)
• remove dist files from main branch (commit 9d06c6dd)
• 4.0.0-rc.1 (commit 586182f3)
• Run npm publish in the post-release phase (commit ff1f0eaa)
• Only run browserless tests during the release (commit fb5ab0f5)
• Temporarily disable running tests on release (commit 3f79644b)
• publish tmp/release/dist folder when releasing (#5658, commit a865212d)
• correct build date in verification; other improvements (commit 53ad94f3)
• remove dist files from main branch (commit be048a02)
• 4.0.0-beta.2 (commit 51fffe9f)
• ensure builds have the proper version (commit 3e612aee)
• set preReleaseBase in config file (commit 1fa8df5d)
• fix running pre/post release scripts in windows (commit 5518b2da)
• update AUTHORS.txt (commit 862e7a18)
• migrate release process to release-it (jquery/jquery-release#114, commit 2646a8b0)
• add factory files to release distribution (#5411, commit 1a324b07)
• use buildDefaultFiles directly and pass version (commit b507c864)
• copy dist-module folder as well (commit 63767650)
• only published versioned files to cdn (commit 3a0ca684)
• remove scripts and dev deps from dist package.json (commit 7eac932d)
• update build command in Release.generateArtifacts (commit 3b963a21)
• add support for md5 sums in windows (commit f088c366)
• remove the need to install grunt globally (commit b2bbaa36)
• upgrade release dependencies (commit 967af732)
• Remove an unused chalk dependency (commit bfb6897c)
• Use an in-repository dist README fixture (commit 358b769a)
• Update AUTHORS.txt (commit 1b74660f)
• update AUTHORS.txt (commit cf9fe0f6)

Selector

• Remove the workaround for :has; test both on iPhone & iPad (commit 65e35450)
• Properly deprecate jQuery.expr[ ":" ]/jQuery.expr.filters (commit 329661fd)
• Make selector.js module depend on attributes/attr.js (#5379, commit e06ff088)
• Eliminate selector.js depenencies from various modules (commit e8b7db4b)
• Re-expose jQuery.find.{tokenize,select,compile,setDocument} (#5259, commit 338de359)
• Stop relying on CSS.supports( “selector(…)” ) (#5194, commit 68aa2ef7)
• Backport jQuery selection context logic to selector-native (#5185, commit 2e644e84)
• Make selector lists work with qSA again (#5177, commit 09d988b7)
• Implement the uniqueSort chainable method (#5166, commit 5266f23c)
• Re-introduce selector-native.js (commit 4c1171f2)
• Manipulation: Fix DOM manip within template contents (#5147, commit 3299236c)
• Drop support for legacy pseudos, test custom pseudos (commit 8c7da22c)
• Use jQuery :has if CSS.supports(selector(...)) non-compliant (#5098, commit d153c375)
• Remove the “a:enabled” workaround for Chrome <=77 (commit c1ee33ad)
• Make empty attribute selectors work in IE again (#4435, commit 05184cc4)
• Use shallow document comparisons in uniqueSort (#4441, commit 15750b0a)
• Add a test for throwing on post-comma invalid selectors (commit 6eee5f7f)
• Make selectors with leading combinators use qSA again (commit ed66d5a2)
• Use shallow document comparisons to avoid IE/Edge crashes (#4441, commit aa6344ba)
• reduce size, simplify setDocument (commit 29a9544a)
• Leverage the :scope pseudo-class where possible (#4453, commit df6a7f7f)
• Bring back querySelectorAll shortcut usage (commit cef4b731)
• Inline Sizzle into the selector module (commit 47835965)
• Port Sizzle tests to jQuery (commit 79b74e04)

Support

• ensure display is set to block for the support div (#4832, commit 09f25436)

Traversing

• Fix contents() on <object>s with children in IE (commit ccbd6b93)
• Fix contents() on <object>s with children (#4384, commit 4d865d96)

Fotka s jQuery 20th reuniona

Praktičan plan za upgrade (bez dramatiziranja)

1. Prođi službeni upgrade vodič: https://jquery.com/upgrade-guide/4.0/
2. Uključi jQuery Migrate plugin (ako imaš veći legacy kod ili puno pluginova): https://github.com/jquery/jquery-migrate/
3. Ako ti je i dalje potreban IE10/Edge Legacy/Android Browser ili jako stari iOS/Firefox: ostani na jQuery 3.x
4. Ako ciljaš strogi CSP: testiraj flow s async script requestovima i Trusted Types okruženjem
5. Ako si koristio $elems.push/sort/splice: prebaci na [].push.call(...) i ekvivalente
6. Ako imaš custom logiku na focus/blur eventovima (npr. validacija forma, wizard UI): ponovno provjeri očekivani redoslijed eventova (W3C redoslijed u 4.0)
7. Ako koristiš slim build: potvrdi da ti ne trebaju Deferreds/Callbacks; ako moraš podržavati IE11, uzmi main build ili Promise polyfill

Zaključak

jQuery 4.0.0 je “odrastao” release: reže ozbiljan dio povijesnog tereta (IE<11 i deprecated API-ji), uvodi moderniji modulni model (ES modules + Rollup) i ciljano popravlja kompatibilnost sa sigurnosnim politikama (Trusted Types, CSP). Breaking changeovi postoje, ali su očekivani za major verziju - i iskreno, većina ih pogađa samo projekte s legacy zahtjevima ili specifičnim edge-caseovima u eventovima i internim metodama.