jQuery 4.0.0 je venku: největší major release za téměř dekádu (a co ti může rozbít)

Jestli máš ve firmě stále kus UI postavený na jQuery (ať už přímo, nebo přes pluginy a starší admin šablony), jQuery 4.0.0 je release, který stojí za pozornost. Je to první major verze po téměř 10 letech a přichází po několika pre-release kolech – zároveň jde o vydání k 20. výročí jQuery (poprvé představeno 14. ledna 2006 na BarCampu v New Yorku).

jQuery tým tentokrát využil major release přesně k tomu, k čemu má sloužit: vyházet historické berličky, odstranit dávno deprecated API, pročistit „magic“ chování a zmodernizovat interní architekturu. Výsledkem je knihovna, která je čistší, menší a lépe zapadá do dnešních build chainů i bezpečnostních politik pro web. Zároveň ale platí, že upgrade může narazit na breaking changes – takže než přepneš z 3.x, je dobré vědět, kam se dívat.

Než upgraduješ: k čemu slouží upgrade guide a jQuery Migrate

Tým počítá s tím, že většina projektů přejde z jQuery 3.x na 4.0.0 s minimem změn, ale protože jde o major release, některé věci se už opravit „na pozadí“ nedají. Pro přechod jsou připravené dvě klíčové pomůcky:

• Oficiální upgrade guide pro 4.0: https://jquery.com/upgrade-guide/4.0/
• Nová verze jQuery Migrate pluginu: https://github.com/jquery/jquery-migrate/

Pokud během migrace narazíš na bug nebo regresi, issues se řeší na GitHubu: https://github.com/jquery/jquery/issues.

Konec podpory IE < 11 (a další hodně staré prohlížeče)

jQuery 4.0 zahazuje podporu pro Internet Explorer 10 a starší. Častá otázka je „proč ne rovnou IE 11“ – podle oznámení chtějí jít postupně a další krok má přijít až v jQuery 5.0 (viz plánovaný krok v PR: https://github.com/jquery/jquery/pull/5077). V rámci 4.0 tedy mizí kód, který byl specificky kvůli IE verzím před 11.

Kromě toho jQuery 4.0 ukončuje podporu pro další historické prohlížeče. Konkrétně už necílí na:

• Edge Legacy (původní EdgeHTML, ne Chromium Edge)
• iOS verze starší než poslední 3
• Firefox verze starší než poslední 2 (výjimkou je Firefox ESR)
• Android Browser

Podle release notes by to pro většinu aplikací nemělo znamenat změny v kódu – jen se zjednodušila interní implementace a testy. Pokud ale z nějakého důvodu pořád potřebuješ tyhle prohlížeče podporovat, doporučení je zůstat na jQuery 3.x.

Trusted Types a přísnější CSP: jQuery se přizpůsobuje moderní bezpečnosti

Moderní webové aplikace čím dál častěji jedou na striktním Content Security Policy (CSP). jQuery 4.0 proto přidává podporu pro Trusted Types – tedy mechanismus, který pomáhá bránit XSS tím, že citlivé „sink“ operace přijímají jen hodnoty typů jako TrustedHTML (MDN: https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). Z pohledu praxe to znamená, že HTML zabalené v TrustedHTML můžeš předat do jQuery manipulačních metod způsobem, který neporuší direktivu require-trusted-types-for.

S CSP souvisí ještě jedna důležitá změna kolem načítání skriptů přes AJAX transport. Část requestů už historicky používala <script> tagy kvůli atributům jako crossdomain. Teď jQuery přeplo většinu asynchronních script requestů na <script> tagy (změna popsaná v PR: https://github.com/jquery/jquery/pull/4763), aby se minimalizovaly CSP chyby, které vznikají při používání inline skriptů.

Zdrojáky jQuery přešly z AMD na ES modules

Jedna z největších interních modernizací: kód v branchi main byl převeden z AMD (Asynchronous Module Definition; typicky RequireJS) na ES modules. Praktický dopad je velký hlavně pro build nástroje a moderní workflow – jQuery zdroj byl sice vždy publikovaný na npm i GitHubu, ale bez RequireJS nešel rozumně importovat jako modul. To se teď mění.

Součástí změny je i přechod balení na Rollup (https://rollupjs.org/introduction/). Testy se navíc spouštějí i nad ES modules variantou. Výsledek: jQuery je kompatibilnější s dnešními bundlery i s nativním načítáním přes <script type=module>.

Odstraněná deprecated API: co zmizelo a čím to nahradit

V jQuery 4.0 šly pryč funkce, které byly označené jako deprecated už několik verzí. Část z nich byla vždycky spíš interní, část dnes nahrazují standardní nativní API v prohlížečích, které jQuery 4.0 ještě podporuje. Seznam odstraněných položek je dlouhý a je dobré ho projít, pokud máš starší codebase nebo pluginy:

• 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áhrady jsou typicky přímočaře nativní: Array.isArray(), JSON.parse(), String.prototype.trim() nebo Date.now().

Tahle čistka spolu s odstraněním IE<11 kompatibility přinesla i konkrétní zmenšení distribuce – více než 3 kB (gzipped).

Pryč s interními Array metodami na jQuery prototype: push, sort, splice

jQuery objekt se dlouho choval „trochu jako pole“, ale měl na prototypu některé Array metody, které se nechovaly jako ostatní jQuery metody a byly určené jen pro interní použití: push, sort a splice. V jQuery 4.0 byly odstraněné z prototypu.

Pokud jsi je (byť omylem) používal v aplikaci nebo pluginu, musíš přepsat volání na čisté Array prototypy. Release notes uvádějí přímo tento ekvivalent:

// Předtím (v některých projektech):
// $elems.push(elem)

// Teď:
[].push.call($elems, elem);

// Předtím (v některých projektech):
// $elems.push(elem)

// Teď:
[].push.call($elems, elem);

Breaking change, který umí zabolet: pořadí focus/blur eventů se řídí W3C

Tohle je jedna z těch změn, které jsou nenápadné, ale když máš komplexní formuláře, validace a „focus management“, umí to být zrádné. Historicky se prohlížeče neshodly na pořadí eventů kolem focus a blur: focusin, focusout, focus, blur. jQuery kdysi sjednotilo pořadí „po svém“ a přepisovalo nativní chování.

Jenže moderní prohlížeče podporované jQuery 4.0 se konečně shodly – ale na pořadí, které se liší od historické volby jQuery. Od jQuery 4.0 se proto nativní chování už nepřepisuje. Všechny prohlížeče kromě IE budou následovat aktuální W3C specifikaci:

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

V jQuery 3.x a starších bylo pořadí: focusout, blur, focusin, focus. Zajímavý detail z release notes: jediný prohlížeč, který dlouhodobě odpovídal staré verzi W3C specifikace (před aktualizací v roce 2023), byl Internet Explorer.

Slim build je ještě štíhlejší: bez Deferreds a Callbacks

jQuery 4.0 aktualizuje i tzv. slim build. Ten je teď ještě menší – zhruba 19,5 kB gzipped. Největší změna: ve slim verzi jsou odstraněné moduly Deferreds a Callbacks.

Deferreds měly dlouho kompatibilitu se standardem Promises/A+ (https://promisesaplus.com/), takže v praxi můžeš ve většině případů přejít na nativní Promise. Na tohle dnes mají podporu všechny prohlížeče, které jQuery 4.0 cílí – s výjimkou IE 11.

Deferreds sice umí některé věci navíc oproti nativním Promise, ale běžné použití jde obvykle migrovat na Promise metody. Pokud potřebuješ podporovat IE11, dává smysl zůstat u „main“ buildu, nebo doplnit polyfill pro nativní Promise.

Poznámka k efektům: i slim build v jQuery 4.0 zahrnuje metody show, hide a toggle.

Jak jQuery 4.0.0 stáhnout: CDN, npm a slim soubory

jQuery 4.0.0 je k dispozici přes oficiální jQuery CDN i přes npm. Ostatní veřejné CDN ji podle oznámení obvykle převezmou se zpožděním (jejich release schedule jQuery tým nekontroluje), takže pro rychlý start je nejjistější oficiální CDN.

CDN odkazy (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

Slim build (CDN odkazy)

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

Aktuální způsoby distribuce jsou dostupné i přes npm a Bower. Přehled všech variant a doporučení je na https://jquery.com/download/.

Vybrané změny v 4.0.0 changelogu (orientačně podle modulů)

Kompletní diff mezi 3.7.1 a 4.0.0 je tady: https://github.com/jquery/jquery/compare/3.7.1…4.0.0. Níže je přehled změn, které stojí za vypíchnutí, zejména pokud maintenuješ pluginy nebo knihovnu používáš netradičními způsoby.

Ajax

• Změna práce s binárními daty: netvářit se, že array data jsou binární; zároveň povolit processData: true i pro binární data; podpora binárních dat včetně FormData.
• Podpora headers pro script transport i když je cross-domain (#5142) – zároveň platí doporučení preferovat scriptAttrs pro atributy u <script> tagu.
• null jako success callback v jQuery.get (#4989).
• Skripty se automaticky nespouští, pokud není uvedený dataType (#4822).
• responseJSON funguje i pro chybové same-domain JSONP požadavky; navíc se vykonávají JSONP error script responses (#4771).
• Omezení CSP chyb v script transportu pro async requesty (#3969).
• Zahození auto-promote logiky json → jsonp (#1799, #3376).
• Pokud odpověď pošle content-type header, přepíše se s.contentType jeho hodnotou (#4119).
• AJAX event aliasy jsou deprecated (alias/inline eventy jsou řešené přes deprecated vrstvu).
• Skripty se nespouští při neúspěšných HTTP odpovědích (#4250).
• Zjednodušení jQuery.ajaxSettings.xhr (#1967).

Attributes a třídy

• .attr(name, false) nově odstraňuje atribut pro všechny ne-ARIA atributy (#5388).
• Setter pro atributy už atributy „naslepo“ nestringifikuje (#4948).
• Zrušení signatury toggleClass(boolean|undefined) (#3388).
• val() refaktor: neodstraňuje carriage return a IE workarounds jsou izolované.
• Mimo IE se už vůbec nenasazuje hook na type atribut.

CSS

• Opravy rozměrů pro table <col> elementy (#5628).
• Uklízení cache ve finalPropName.
• Testy opravené a běh testů i pod CSS Zoom (#5489).
• Vylepšení support testů pro rozměry table rows (včetně případů se skrytými iframe a kompatibility s Bootstrap CSS).
• offsetHeight(true) a podobné výpočty zahrnují i negativní margins (#3982).
• U CSS Custom Properties: whitespace-only hodnoty vrací undefined (#5120), neřeže se whitespace u undefined custom property (#5105), trim okolo hodnot je upravený (#4926).
• addClass(array) ignoruje falsy hodnoty (#4998).
• Slim build zahrnuje show/hide/toggle.
• Odstranění opacity CSS hooku.
• Workaround pro buggy getComputedStyle na table rows v IE/Edge (#4490).
• jQuery už automaticky nepřidává px k vlastnostem až na pár výjimek (#2795).

Core (jádro) a modulární exporty

• $.parseHTML přeplo interně z document.implementation na DOMParser.
• Úpravy exportů pro lepší kompatibilitu bundlerů s ESM & CommonJS (#5416), včetně doplnění informací o named exports.
• Odstranění root parametru z jQuery.fn.init.
• TrustedHTML podpora v manipulaci (#4409).
• parseXML reportuje browser chyby (#4784).
• jQuery.isXMLDoc akceptuje i falsy input (#4782).
• Oficiální drop Edge Legacy podpory (#4568) a další zjednodušení po zúžení browser supportu.
• Použití Array.prototype.flat tam, kde je podporované (#4320).
• Odstranění privátních kopií push, sort, splice z prototypu (souvisí s breaking change výše).
• Nové chainable metody .even() a .odd() jako náhrada za poziční selektory :even a :odd.
• V rámci přechodu na 4.0 proběhla migrace z AMD na ES modules (a oddělené testování).
• Drop IE-specific support testů a spoleh na document.documentMode (#4386).
• Celkový drop IE<11, iOS<11, Firefox<65, Android Browser & PhantomJS (#3950, #4299).
• Odstranění deprecated jQuery API (#4056).

Eventy

• beforeunload používá .preventDefault().
• Zvýšení robustnosti v leverageNative (včetně zjednodušení a prevence duplicit).
• trigger(focus/blur/click) lépe spolupracuje s nativními handlery (#5015).
• Změny kolem focus/blur: simulace v IE přes focusin/focusout (#4856, #4859, #4950) a hlavně přechod na nativní pořadí podle W3C (breaking change popsaný výše).
• Odstranění shim pro event.which (#3235).
• Odstranění jQuery.event.global.
• Eventy se attachují jen na objekty, které reálně akceptují data (#4397).
• Ukončení shimování focusin & focusout eventů (#4300).

Selector

• Odstranění workaroundu pro :has (testy na iPhone i iPad).
• Správné deprecate jQuery.expr[":"] / jQuery.expr.filters.
• Re-expose části jQuery.find API: {tokenize, select, compile, setDocument} (#5259).
• Změny v implementaci kolem CSS.supports("selector(...)") (#5194) a práce se selection contextem (#5185).
• uniqueSort je nově chainable metoda (#5166).
• Re-introduce selector-native.js.
• Podpora :scope pseudo-class tam, kde to jde (#4453).
• Inline Sizzle do selector modulu a port Sizzle testů přímo do jQuery.

Effects

• Odstranění jQuery.fx.interval (souvisí i s odstraněním deprecated API).
• Drobné opravy v .stop() (#4374).

Release atmosféra: 20 let jQuery a setkání týmu

K 20. výročí se část lidí z komunity a týmu sešla na reunionu v Dallasu a John Resig se připojil aspoň přes Zoom. Samotný release post vznikal v době, kdy byli společně.

Shrnutí: co si odnést, pokud maintenuješ starší frontendy

• jQuery 4.0.0 je velký úklid: pryč deprecated API a legacy kód pro hodně staré prohlížeče.
• Konec podpory IE<11 je realita; IE11 má být řešený až dalším major krokem (jQuery 5.0).
• Bezpečnostně důležité: Trusted Types + úpravy script transportu kvůli CSP.
• Interně velká změna: přechod zdrojáků na ES modules, balení přes Rollup.
• Pozor na breaking změnu v pořadí focus/blur eventů (W3C order).
• Slim build je menší a bez Deferreds/Callbacks; pro IE11 raději full build nebo polyfill na Promise.
• Před upgradem použij upgrade guide a jQuery Migrate plugin; případné problémy hlásit na GitHub issues.