{"id":10049,"date":"2021-11-18T17:45:04","date_gmt":"2021-11-18T16:45:04","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/"},"modified":"2022-09-19T13:16:35","modified_gmt":"2022-09-19T11:16:35","slug":"frontend-thursday-vol-64-typescript-4-5-beta-react-18","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/","title":{"rendered":"Frontend Thursday vol. 64 – TypeScript 4.5, Beta React 18"},"content":{"rendered":"\n

1. Typescript 4.5<\/h2>\n\n\n\n

Zgodnie z planem, w tym tygodniu TypeScript 4.5 opu\u015bci\u0142 bet\u0119 i otrzyma\u0142 stabiln\u0105 wersj\u0119. Co wyj\u0105tkowe wersja stabilna r\u00f3\u017cni si\u0119 troch\u0119 od wersji beta, bo porzucona zosta\u0142a funkcjonalno\u015b\u0107 wsparcia ECMAScript Modules w node.js. Jak przyznaj\u0105 tw\u00f3rcy decyzja zosta\u0142a podj\u0119ta przede wszystkim ze wzgl\u0119du na feedback u\u017cytkownik\u00f3w – zaproponowane rozwi\u0105zanie by\u0142o nieczytelne i wprowadza\u0142o jeszcze wi\u0119cej zamieszania do i tak zawi\u0142ego ju\u017c ekosystemu pakiet\u00f3w w JavaScript. Nie trac\u0105c wi\u0119cej czasu na to co nie trafi\u0142o do nowego TypeScripta, przyjrzymy si\u0119 temu co do niego trafi\u0142o.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

W \u015bwie\u017co wypieczonej wersji j\u0119zyka od Microsoftu znajdziemy nowy utility type Awaited. Jego zadaniem jest sp\u0142aszczenie wszystkich struktur opartych o Promise i PromiseLike. Je\u015bli na co dzie\u0144 nie modelujecie skomplikowanych struktur danych to r\u00f3wnie\u017c na nim skorzystacie, bo Promise.all oraz Promise.race b\u0119d\u0105 wykorzystywa\u0107 go w swoich deklaracjach.<\/p>\n\n\n\n

\/\/ A = string\ntype A = Awaited<Promise<string>>;\n\n\/\/ B = number\ntype B = Awaited<Promise<Promise<number>>>;\n\n\/\/ C = boolean | number\ntype C = Awaited<boolean | Promise<number>>;\n\ndeclare function MaybePromise<T>(value: T): T | Promise<T> | PromiseLike<T>;\n\nasync function doSomething(): Promise<[number, number]> {\n    const result = await Promise.all([\n        MaybePromise(100),\n        MaybePromise(200)\n    ]);\n\n    \/\/ in Typescript 4.4 this caused following error:\n    \/\/    [number | Promise<100>, number | Promise<200>]\n    \/\/\n    \/\/ is not assignable to type\n    \/\/\n    \/\/    [number, number]\n    return result;\n}<\/code><\/pre>\n\n\n\n
Do TypeScript 4.5 wersji trafi\u0142o te\u017c wsparcie dla dw\u00f3ch ECMAScript proposals. Pierwszy z nich to sprawdzanie obecno\u015bci prywatnych p\u00f3l w klasach, a drugi to import assertions pozwalaj\u0105cy na import obiektu z pliku json.<\/p>\n\n\n\n
import obj from ".\/something.json" assert { type: "json" }; \/\/ <- this is new!\n\nclass Person {\n    #name: string;\n    constructor(name: string) {\n        this.#name = name;\n    }\n\n    equals(other: unknown) {\n        return other &&\n            typeof other === "object" &&\n            #name in other && \/\/ <- this is new!\n            this.#name === other.#name;\n    }\n}<\/code><\/pre>\n\n\n\n
Interesuj\u0105co wygl\u0105da te\u017c optymalizacja rekurencji ogonowej, przy wyliczaniu typ\u00f3w. Nie wiem ilu z Was rzeczywi\u015bcie skorzysta z tej optymalizacji, ale to zdecydowanie ciekawostka, kt\u00f3r\u0105 mo\u017cecie zab\u0142ysn\u0105\u0107 na najbli\u017cszej kawie.<\/p>\n\n\n\n
type TrimLeft<T extends string> =\n    T extends ` ${infer Rest}` ? TrimLeft<Rest> : T;\n\n\/\/ TestA = "hello" | "world"\ntype TestA = TrimLeft<"   hello" | " world">;\n\n\/\/ in Typescript 4.4 this caused following error:\n\/\/ error: Type instantiation is excessively deep and possibly infinite.\n\/\/ in Typescript 4.5\n\/\/ TestB = "oops"\ntype TestB = TrimLeft<"                                                oops">;\n<\/code><\/pre>\n\n\n\n
Oczywi\u015bcie zmian i nowo\u015bci jest wi\u0119cej, a ja tradycyjnie ju\u017c po wi\u0119cej odsy\u0142am Was do notatki od Microsoftu, kt\u00f3r\u0105 znajdziecie w \u017ar\u00f3d\u0142ach.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/<\/a><\/p>\n\n\n\n
2. Beta React 18<\/h2>\n\n\n\n
O pojawieniu si\u0119 alfy React 18 min\u0119\u0142o ju\u017c ponad p\u00f3\u0142 roku. Dzi\u015b mam przyjemno\u015b\u0107 poinformowa\u0107 Was, \u017ce React 18 zosta\u0142 wypromowany do wersji beta! Jak mo\u017cemy dowiedzie\u0107 si\u0119 z Issue na githubie, obecna wersja jest feature complete, a wi\u0119c do pe\u0142nego wydania nie pojawi\u0105 si\u0119 ju\u017c nowe funkcjonalno\u015bci. Jak poinformowa\u0142 na twitterze Andrew Clark, pe\u0142nej wersji mo\u017cemy si\u0119 spodziewa\u0107 najwcze\u015bniej pod koniec stycznia 2022 roku. Wszystko zale\u017cy od feedbacku wersji beta i tego jak szybko uda si\u0119 przygotowa\u0107 dokumentacj\u0119, kt\u00f3ra na ten moment jest w totalnej rozsypce.<\/p>\n\n\n\n
Tym razem nowo\u015bci z wersji alfa przetrwa\u0142y, wi\u0119c je\u015bli jeszcze o nich nie czytali\u015bcie to zapraszam was do 41 edycji naszego przegl\u0105du<\/a>, w kt\u00f3rej przygl\u0105dali\u015bmy si\u0119 im dok\u0142adniej. W notatce towarzysz\u0105cej pojawieniu si\u0119 bety React 18 wyr\u00f3\u017cnione zosta\u0142y trzy nowe funkcjonalno\u015bci. Zacznijmy od hooka `useId`, kt\u00f3ry generuje unikalne ID i gwarantuje sp\u00f3jno\u015b\u0107 pomi\u0119dzy serwerem i klientem. Jest to szczeg\u00f3lnie istotne ze wzgl\u0119du na zmiany w api streamingu, kt\u00f3re sprawiaj\u0105, \u017ce rozwi\u0105zania oparte na kolejno\u015bci wywo\u0142ania znane z r\u00f3\u017cnych zewn\u0119trznych bibliotek przestan\u0105 dzia\u0142a\u0107.<\/p>\n\n\n\n
function Checkbox() {\n  const id = useId();\n  return (\n    <>\n      <label htmlFor={id}>Do you like React?<\/label>\n      <input type="checkbox" name="react" id={id} \/>\n    <\/>\n  );\n);<\/code><\/pre>\n\n\n\n
Kolejny nowy hook to `useMutableSource`, kt\u00f3ry dostali\u015bmy umo\u017cliwia bezpieczne i efektywne odczytywanie stanu z zewn\u0119trznych \u017ar\u00f3de\u0142 w trybie wsp\u00f3\u0142bie\u017cnym. Na pierwszy rzut oka API wygl\u0105da troch\u0119 pokr\u0119tnie, bo wymaga podania a\u017c trzech z\u0142o\u017conych argument\u00f3w, ale je\u015bli przyjrze\u0107 mu si\u0119 bli\u017cej to okazuje si\u0119, \u017ce nie taki diabe\u0142 straszny jak go maluj\u0105. No i pami\u0119tajcie, \u017ce biblioteki do zarz\u0105dzania stanem prawdopodobnie opakuj\u0105 swoje hooki w taki spos\u00f3b, \u017ce nowy hook b\u0119dzie dla Was niewidoczny.<\/p>\n\n\n\n
\/\/ May be created in module scope, like context:\nconst locationSource = createMutableSource(\n  window,\n  \/\/ Although not the typical "version", the href attribute is stable,\n  \/\/ and will change whenever part of the Location changes,\n  \/\/ so it's safe to use as a version.\n  () => window.location.href\n);\n\n\/\/ Because this method doesn't require access to props,\n\/\/ it can be declared in module scope to be shared between components.\nconst getSnapshot = window => window.location.pathname;\n\n\/\/ This method can subscribe to root level change events,\n\/\/ or more snapshot-specific events.\n\/\/\n\/\/ Because this method doesn't require access to props,\n\/\/ it can be declared in module scope to be shared between components.\nconst subscribe = (window, callback) => {\n  window.addEventListener("popstate", callback);\n  return () => window.removeEventListener("popstate", callback);\n};\n\nfunction Example() {\n  const pathName = useMutableSource(locationSource, getSnapshot, subscribe);\n\n  \/\/ ...\n}<\/code><\/pre>\n\n\n\n
Ostatnia wyr\u00f3\u017cniona funkcjonalno\u015b\u0107 to przewodnik do aktualizacji, dla tw\u00f3rc\u00f3w bibliotek CSS-in-JS. Zmiany ponownie wymuszone s\u0105 przez zmiany w api streamingu, co nieuchronnie prowadzi do pytania, czy tw\u00f3rcy bibliotek zaktualizuj\u0105 si\u0119 na czas? Bior\u0105c pod uwag\u0119 jak d\u0142ugo dost\u0119pna jest alfa i jak d\u0142ugo potrwa beta mo\u017cemy liczy\u0107 na to, \u017ce tak w\u0142a\u015bnie b\u0119dzie.\u00a0<\/p>\n\n\n\n
\"\"
Ja zastanawiam si\u0119 czy biblioteki Reacta b\u0119d\u0105 gotowe na aktualizacj\u0119, a tymczasem Angularowy Tooling przechodzi przez apokalips\u0119 po wydaniu Angulara 13
(Mem kradzony z: https:\/\/bit.ly\/3ntRXO8<\/a>)<\/figcaption><\/figure><\/div>\n\n\n\n
Na zako\u0144czenie jeszcze kr\u00f3tkie przemy\u015blenia zainspirowane dyskusj\u0105 na Hacker Newsach. Zauwa\u017cyli\u015bcie, \u017ce klasowe w\u0142a\u015bciwie ca\u0142kowicie znikn\u0119\u0142y z radaru ludzi odpowiedzialnych za Reacta? Z boku wygl\u0105da to troch\u0119 tak, jakby React Hooks i Functional Components sta\u0142y si\u0119 rozwi\u0105zaniem kanonicznym, a klasowe komponenty rozwi\u0105zaniem legacy wspieranym tylko dla kompatybilno\u015bci wstecznej. To z kolei w prosty spos\u00f3b prowadzi do pytania: czy klasowe komponenty w najbli\u017cszych latach ca\u0142kowicie znikn\u0105 z Reacta? Je\u015bli macie jakie\u015b zdanie na ten temat to zapraszamy do dyskusji na naszym facebooku!<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/github.com\/reactwg\/react-18\/discussions\/112<\/a>
https:\/\/github.com\/reactwg\/react-18\/discussions\/86<\/a>
https:\/\/github.com\/reactwg\/react-18\/discussions\/111<\/a>
https:\/\/github.com\/reactwg\/react-18\/discussions\/110<\/a><\/p>\n\n\n\n
3. Tw\u00f3rca Svelte zatrudniony przez Vercel<\/h2>\n\n\n\n
Je\u015bli kompletnie nie kojarzycie Svelte, chocia\u017cby z nazwy, to musieli\u015bcie przez ostatni rok tkwi\u0107 w ca\u0142kowitym odci\u0119ciu od \u015bwiata. Framework ten w rankingu wykorzystania wed\u0142ug raportu State of JS 2020 uplasowa\u0142 si\u0119 na mocnym czwartym miejscu, w rankingu satysfakcji przeskoczy\u0142 nawet Reacta i zgarn\u0105\u0142 pierwsze miejsce<\/p>\n\n\n\n
Vercel to natomiast firma stoj\u0105ca za Next.js, kt\u00f3ra jest jedn\u0105 z startupowych gwiazd ostatnich lat. Na przestrzeni ostatnich lat zgromadzili oni ponad 150 milion\u00f3w dolar\u00f3w kapita\u0142u od inwestor\u00f3w i obecnie s\u0105 wyceniani na ponad miliard dolar\u00f3w. My\u015bl\u0119, \u017ce gdyby Vercel nie przetar\u0142 szlak\u00f3w to nie mieliby\u015bmy teraz takich firm jak Rome Inc. czy Deno Company.<\/p>\n\n\n\n
Co wyjdzie z po\u0142\u0105czenia obydwu projekt\u00f3w? Vercel twierdzi, \u017ce jest to ich inwestycja w Open Source i niejako oddanie spo\u0142eczno\u015bci tego co jej si\u0119 nale\u017cy. Jak zaznacza firma w wpisie na swoim blogu, nie b\u0119dzie ona wp\u0142ywa\u0107 na rozw\u00f3j frameworku i nadal pozostaje on w r\u0119kach Richa Harisa. My\u015bl\u0119, \u017ce jest to pewien milestone dla Svelte i z przyjemno\u015bci\u0105 b\u0119d\u0119 przygl\u0105da\u0142 si\u0119 temu, w kt\u00f3r\u0105 stron\u0119 potocz\u0105 si\u0119 losy tego uwielbianego przez deweloper\u00f3w rozwi\u0105zania.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/vercel.com\/blog\/vercel-welcomes-rich-harris-creator-of-svelte<\/a><\/p>\n\n\n\n
4. Push Notyfikacje zmierzaj\u0105 do mobilnego Safari?<\/h2>\n\n\n\n
Na razie nic jeszcze nie wiadomo oficjalnie, ale cz\u0119\u015b\u0107 funkcjonalno\u015bci niezb\u0119dnych do pojawienia si\u0119 Push Notyfikacji w Safari trafi\u0142a za odpowiedni\u0105 feature flag\u0119. Nadziej\u0119 daje r\u00f3wnie\u017c wzmo\u017cona aktywno\u015b\u0107 od bugiem na trackerze WebKita, dotycz\u0105cym braku tej funkcjonalno\u015bci. Dop\u00f3ki nie otrzymamy oficjalnych informacji nie mo\u017cemy by\u0107 niczego pewni, ale ca\u0142y webowy \u015bwiat trzyma kciuki, za Apple w pe\u0142ni wspieraj\u0105cym PWA. Je\u015bli Apple ostatnio zapowiedzia\u0142a sprzeda\u017c cz\u0119\u015bci zamiennych do swoich urz\u0105dze\u0144, to mo\u017ce i wsparcie dla Push Notyfikacji jest mo\u017cliwe?<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/twitter.com\/firt\/status\/1460782824773107713?fbclid=IwAR1ZaLhTaK0Nw3-FXh8lLZjjbNObSAg7U-eJ3Ue57QkuNSDrBMS1g5ChOPw<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
W minionym tygodniu naprawd\u0119 du\u017co si\u0119 dzia\u0142o! Wydany zosta\u0142 TypeScript 4.5, React 18 trafi\u0142 do bety, a tw\u00f3rca Svelte znalaz\u0142 zatrudnienie w Vercelu. \u0141apcie gor\u0105c\u0105 herbatk\u0119 \ud83e\uded6 i zapraszamy do lektury \ud83d\uddde<\/p>\n","protected":false},"author":12,"featured_media":7752,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"7","feature_image_visible":false},"yoast_head":"\nFrontend Thursday vol. 64 - TypeScript 4.5, Beta React 18 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 64 - TypeScript 4.5, Beta React 18 - Vived\" \/>\n<meta property=\"og:description\" content=\"W minionym tygodniu naprawd\u0119 du\u017co si\u0119 dzia\u0142o! Wydany zosta\u0142 TypeScript 4.5, React 18 trafi\u0142 do bety, a tw\u00f3rca Svelte znalaz\u0142 zatrudnienie w Vercelu. \u0141apcie gor\u0105c\u0105 herbatk\u0119 \ud83e\uded6 i zapraszamy do lektury \ud83d\uddde\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-18T16:45:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-18-at-17.42.59.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3358\" \/>\n\t<meta property=\"og:image:height\" content=\"1758\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-18-at-17.42.59-1.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 64 – TypeScript 4.5, Beta React 18\",\"datePublished\":\"2021-11-18T16:45:04+00:00\",\"dateModified\":\"2022-09-19T11:16:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\"},\"wordCount\":1134,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\",\"name\":\"Frontend Thursday vol. 64 - TypeScript 4.5, Beta React 18 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"datePublished\":\"2021-11-18T16:45:04+00:00\",\"dateModified\":\"2022-09-19T11:16:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"width\":2000,\"height\":1210},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 64 – TypeScript 4.5, Beta React 18\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 64 - TypeScript 4.5, Beta React 18 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 64 - TypeScript 4.5, Beta React 18 - Vived","og_description":"W minionym tygodniu naprawd\u0119 du\u017co si\u0119 dzia\u0142o! Wydany zosta\u0142 TypeScript 4.5, React 18 trafi\u0142 do bety, a tw\u00f3rca Svelte znalaz\u0142 zatrudnienie w Vercelu. \u0141apcie gor\u0105c\u0105 herbatk\u0119 \ud83e\uded6 i zapraszamy do lektury \ud83d\uddde","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/","og_site_name":"Vived","article_published_time":"2021-11-18T16:45:04+00:00","article_modified_time":"2022-09-19T11:16:35+00:00","og_image":[{"width":3358,"height":1758,"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-18-at-17.42.59.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/Screenshot-2021-11-18-at-17.42.59-1.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 64 – TypeScript 4.5, Beta React 18","datePublished":"2021-11-18T16:45:04+00:00","dateModified":"2022-09-19T11:16:35+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/"},"wordCount":1134,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/","name":"Frontend Thursday vol. 64 - TypeScript 4.5, Beta React 18 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","datePublished":"2021-11-18T16:45:04+00:00","dateModified":"2022-09-19T11:16:35+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","width":2000,"height":1210},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-64-typescript-4-5-beta-react-18\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 64 – TypeScript 4.5, Beta React 18"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Typescript 4.5<\/h2>\n","innerContent":["\n<h2>1. Typescript 4.5<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zgodnie z planem, w tym tygodniu TypeScript 4.5 opu\u015bci\u0142 bet\u0119 i otrzyma\u0142 stabiln\u0105 wersj\u0119. Co wyj\u0105tkowe wersja stabilna r\u00f3\u017cni si\u0119 troch\u0119 od wersji beta, bo porzucona zosta\u0142a funkcjonalno\u015b\u0107 wsparcia ECMAScript Modules w node.js. Jak przyznaj\u0105 tw\u00f3rcy decyzja zosta\u0142a podj\u0119ta przede wszystkim ze wzgl\u0119du na feedback u\u017cytkownik\u00f3w - zaproponowane rozwi\u0105zanie by\u0142o nieczytelne i wprowadza\u0142o jeszcze wi\u0119cej zamieszania do i tak zawi\u0142ego ju\u017c ekosystemu pakiet\u00f3w w JavaScript. Nie trac\u0105c wi\u0119cej czasu na to co nie trafi\u0142o do nowego TypeScripta, przyjrzymy si\u0119 temu co do niego trafi\u0142o.<\/p>\n","innerContent":["\n<p>Zgodnie z planem, w tym tygodniu TypeScript 4.5 opu\u015bci\u0142 bet\u0119 i otrzyma\u0142 stabiln\u0105 wersj\u0119. Co wyj\u0105tkowe wersja stabilna r\u00f3\u017cni si\u0119 troch\u0119 od wersji beta, bo porzucona zosta\u0142a funkcjonalno\u015b\u0107 wsparcia ECMAScript Modules w node.js. Jak przyznaj\u0105 tw\u00f3rcy decyzja zosta\u0142a podj\u0119ta przede wszystkim ze wzgl\u0119du na feedback u\u017cytkownik\u00f3w - zaproponowane rozwi\u0105zanie by\u0142o nieczytelne i wprowadza\u0142o jeszcze wi\u0119cej zamieszania do i tak zawi\u0142ego ju\u017c ekosystemu pakiet\u00f3w w JavaScript. Nie trac\u0105c wi\u0119cej czasu na to co nie trafi\u0142o do nowego TypeScripta, przyjrzymy si\u0119 temu co do niego trafi\u0142o.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3188,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5unome.jpeg\" alt=\"\" class=\"wp-image-3188\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5unome.jpeg\" alt=\"\" class=\"wp-image-3188\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W \u015bwie\u017co wypieczonej wersji j\u0119zyka od Microsoftu znajdziemy nowy utility type Awaited. Jego zadaniem jest sp\u0142aszczenie wszystkich struktur opartych o Promise i PromiseLike. Je\u015bli na co dzie\u0144 nie modelujecie skomplikowanych struktur danych to r\u00f3wnie\u017c na nim skorzystacie, bo Promise.all oraz Promise.race b\u0119d\u0105 wykorzystywa\u0107 go w swoich deklaracjach.<\/p>\n","innerContent":["\n<p>W \u015bwie\u017co wypieczonej wersji j\u0119zyka od Microsoftu znajdziemy nowy utility type Awaited. Jego zadaniem jest sp\u0142aszczenie wszystkich struktur opartych o Promise i PromiseLike. Je\u015bli na co dzie\u0144 nie modelujecie skomplikowanych struktur danych to r\u00f3wnie\u017c na nim skorzystacie, bo Promise.all oraz Promise.race b\u0119d\u0105 wykorzystywa\u0107 go w swoich deklaracjach.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ A = string\ntype A = Awaited<Promise<string>>;\n\n\/\/ B = number\ntype B = Awaited<Promise<Promise<number>>>;\n\n\/\/ C = boolean | number\ntype C = Awaited<boolean | Promise<number>>;\n\ndeclare function MaybePromise<T>(value: T): T | Promise<T> | PromiseLike<T>;\n\nasync function doSomething(): Promise<[number, number]> {\n    const result = await Promise.all([\n        MaybePromise(100),\n        MaybePromise(200)\n    ]);\n\n    \/\/ in Typescript 4.4 this caused following error:\n    \/\/    [number | Promise<100>, number | Promise<200>]\n    \/\/\n    \/\/ is not assignable to type\n    \/\/\n    \/\/    [number, number]\n    return result;\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ A = string\ntype A = Awaited<Promise<string>>;\n\n\/\/ B = number\ntype B = Awaited<Promise<Promise<number>>>;\n\n\/\/ C = boolean | number\ntype C = Awaited<boolean | Promise<number>>;\n\ndeclare function MaybePromise<T>(value: T): T | Promise<T> | PromiseLike<T>;\n\nasync function doSomething(): Promise<[number, number]> {\n    const result = await Promise.all([\n        MaybePromise(100),\n        MaybePromise(200)\n    ]);\n\n    \/\/ in Typescript 4.4 this caused following error:\n    \/\/    [number | Promise<100>, number | Promise<200>]\n    \/\/\n    \/\/ is not assignable to type\n    \/\/\n    \/\/    [number, number]\n    return result;\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do TypeScript 4.5 wersji trafi\u0142o te\u017c wsparcie dla dw\u00f3ch ECMAScript proposals. Pierwszy z nich to sprawdzanie obecno\u015bci prywatnych p\u00f3l w klasach, a drugi to import assertions pozwalaj\u0105cy na import obiektu z pliku json.<\/p>\n","innerContent":["\n<p>Do TypeScript 4.5 wersji trafi\u0142o te\u017c wsparcie dla dw\u00f3ch ECMAScript proposals. Pierwszy z nich to sprawdzanie obecno\u015bci prywatnych p\u00f3l w klasach, a drugi to import assertions pozwalaj\u0105cy na import obiektu z pliku json.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import obj from \".\/something.json\" assert { type: \"json\" }; \/\/ <- this is new!\n\nclass Person {\n    #name: string;\n    constructor(name: string) {\n        this.#name = name;\n    }\n\n    equals(other: unknown) {\n        return other &&\n            typeof other === \"object\" &&\n            #name in other && \/\/ <- this is new!\n            this.#name === other.#name;\n    }\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import obj from \".\/something.json\" assert { type: \"json\" }; \/\/ <- this is new!\n\nclass Person {\n    #name: string;\n    constructor(name: string) {\n        this.#name = name;\n    }\n\n    equals(other: unknown) {\n        return other &&\n            typeof other === \"object\" &&\n            #name in other && \/\/ <- this is new!\n            this.#name === other.#name;\n    }\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Interesuj\u0105co wygl\u0105da te\u017c optymalizacja rekurencji ogonowej, przy wyliczaniu typ\u00f3w. Nie wiem ilu z Was rzeczywi\u015bcie skorzysta z tej optymalizacji, ale to zdecydowanie ciekawostka, kt\u00f3r\u0105 mo\u017cecie zab\u0142ysn\u0105\u0107 na najbli\u017cszej kawie.<\/p>\n","innerContent":["\n<p>Interesuj\u0105co wygl\u0105da te\u017c optymalizacja rekurencji ogonowej, przy wyliczaniu typ\u00f3w. Nie wiem ilu z Was rzeczywi\u015bcie skorzysta z tej optymalizacji, ale to zdecydowanie ciekawostka, kt\u00f3r\u0105 mo\u017cecie zab\u0142ysn\u0105\u0107 na najbli\u017cszej kawie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">type TrimLeft<T extends string> =\n    T extends ` ${infer Rest}` ? TrimLeft<Rest> : T;\n\n\/\/ TestA = \"hello\" | \"world\"\ntype TestA = TrimLeft<\"   hello\" | \" world\">;\n\n\/\/ in Typescript 4.4 this caused following error:\n\/\/ error: Type instantiation is excessively deep and possibly infinite.\n\/\/ in Typescript 4.5\n\/\/ TestB = \"oops\"\ntype TestB = TrimLeft<\"                                                oops\">;\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">type TrimLeft<T extends string> =\n    T extends ` ${infer Rest}` ? TrimLeft<Rest> : T;\n\n\/\/ TestA = \"hello\" | \"world\"\ntype TestA = TrimLeft<\"   hello\" | \" world\">;\n\n\/\/ in Typescript 4.4 this caused following error:\n\/\/ error: Type instantiation is excessively deep and possibly infinite.\n\/\/ in Typescript 4.5\n\/\/ TestB = \"oops\"\ntype TestB = TrimLeft<\"                                                oops\">;\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Oczywi\u015bcie zmian i nowo\u015bci jest wi\u0119cej, a ja tradycyjnie ju\u017c po wi\u0119cej odsy\u0142am Was do notatki od Microsoftu, kt\u00f3r\u0105 znajdziecie w \u017ar\u00f3d\u0142ach.<\/p>\n","innerContent":["\n<p>Oczywi\u015bcie zmian i nowo\u015bci jest wi\u0119cej, a ja tradycyjnie ju\u017c po wi\u0119cej odsy\u0142am Was do notatki od Microsoftu, kt\u00f3r\u0105 znajdziecie w \u017ar\u00f3d\u0142ach.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/\">https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-4-5\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Beta React 18<\/h2>\n","innerContent":["\n<h2>2. Beta React 18<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>O pojawieniu si\u0119 alfy React 18 min\u0119\u0142o ju\u017c ponad p\u00f3\u0142 roku. Dzi\u015b mam przyjemno\u015b\u0107 poinformowa\u0107 Was, \u017ce React 18 zosta\u0142 wypromowany do wersji beta! Jak mo\u017cemy dowiedzie\u0107 si\u0119 z Issue na githubie, obecna wersja jest feature complete, a wi\u0119c do pe\u0142nego wydania nie pojawi\u0105 si\u0119 ju\u017c nowe funkcjonalno\u015bci. Jak poinformowa\u0142 na twitterze Andrew Clark, pe\u0142nej wersji mo\u017cemy si\u0119 spodziewa\u0107 najwcze\u015bniej pod koniec stycznia 2022 roku. Wszystko zale\u017cy od feedbacku wersji beta i tego jak szybko uda si\u0119 przygotowa\u0107 dokumentacj\u0119, kt\u00f3ra na ten moment jest w totalnej rozsypce.<\/p>\n","innerContent":["\n<p>O pojawieniu si\u0119 alfy React 18 min\u0119\u0142o ju\u017c ponad p\u00f3\u0142 roku. Dzi\u015b mam przyjemno\u015b\u0107 poinformowa\u0107 Was, \u017ce React 18 zosta\u0142 wypromowany do wersji beta! Jak mo\u017cemy dowiedzie\u0107 si\u0119 z Issue na githubie, obecna wersja jest feature complete, a wi\u0119c do pe\u0142nego wydania nie pojawi\u0105 si\u0119 ju\u017c nowe funkcjonalno\u015bci. Jak poinformowa\u0142 na twitterze Andrew Clark, pe\u0142nej wersji mo\u017cemy si\u0119 spodziewa\u0107 najwcze\u015bniej pod koniec stycznia 2022 roku. Wszystko zale\u017cy od feedbacku wersji beta i tego jak szybko uda si\u0119 przygotowa\u0107 dokumentacj\u0119, kt\u00f3ra na ten moment jest w totalnej rozsypce.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Tym razem nowo\u015bci z wersji alfa przetrwa\u0142y, wi\u0119c je\u015bli jeszcze o nich nie czytali\u015bcie to zapraszam was do <a href=\"https:\/\/vived.io\/frontend-thursday-vol-41\/\">41 edycji naszego przegl\u0105du<\/a>, w kt\u00f3rej przygl\u0105dali\u015bmy si\u0119 im dok\u0142adniej. W notatce towarzysz\u0105cej pojawieniu si\u0119 bety React 18 wyr\u00f3\u017cnione zosta\u0142y trzy nowe funkcjonalno\u015bci. Zacznijmy od hooka `useId`, kt\u00f3ry generuje unikalne ID i gwarantuje sp\u00f3jno\u015b\u0107 pomi\u0119dzy serwerem i klientem. Jest to szczeg\u00f3lnie istotne ze wzgl\u0119du na zmiany w api streamingu, kt\u00f3re sprawiaj\u0105, \u017ce rozwi\u0105zania oparte na kolejno\u015bci wywo\u0142ania znane z r\u00f3\u017cnych zewn\u0119trznych bibliotek przestan\u0105 dzia\u0142a\u0107.<\/p>\n","innerContent":["\n<p>Tym razem nowo\u015bci z wersji alfa przetrwa\u0142y, wi\u0119c je\u015bli jeszcze o nich nie czytali\u015bcie to zapraszam was do <a href=\"https:\/\/vived.io\/frontend-thursday-vol-41\/\">41 edycji naszego przegl\u0105du<\/a>, w kt\u00f3rej przygl\u0105dali\u015bmy si\u0119 im dok\u0142adniej. W notatce towarzysz\u0105cej pojawieniu si\u0119 bety React 18 wyr\u00f3\u017cnione zosta\u0142y trzy nowe funkcjonalno\u015bci. Zacznijmy od hooka `useId`, kt\u00f3ry generuje unikalne ID i gwarantuje sp\u00f3jno\u015b\u0107 pomi\u0119dzy serwerem i klientem. Jest to szczeg\u00f3lnie istotne ze wzgl\u0119du na zmiany w api streamingu, kt\u00f3re sprawiaj\u0105, \u017ce rozwi\u0105zania oparte na kolejno\u015bci wywo\u0142ania znane z r\u00f3\u017cnych zewn\u0119trznych bibliotek przestan\u0105 dzia\u0142a\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">function Checkbox() {\n  const id = useId();\n  return (\n    <>\n      <label htmlFor={id}>Do you like React?<\/label>\n      <input type=\"checkbox\" name=\"react\" id={id} \/>\n    <\/>\n  );\n);<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">function Checkbox() {\n  const id = useId();\n  return (\n    <>\n      <label htmlFor={id}>Do you like React?<\/label>\n      <input type=\"checkbox\" name=\"react\" id={id} \/>\n    <\/>\n  );\n);<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejny nowy hook to `useMutableSource`, kt\u00f3ry dostali\u015bmy umo\u017cliwia bezpieczne i efektywne odczytywanie stanu z zewn\u0119trznych \u017ar\u00f3de\u0142 w trybie wsp\u00f3\u0142bie\u017cnym. Na pierwszy rzut oka API wygl\u0105da troch\u0119 pokr\u0119tnie, bo wymaga podania a\u017c trzech z\u0142o\u017conych argument\u00f3w, ale je\u015bli przyjrze\u0107 mu si\u0119 bli\u017cej to okazuje si\u0119, \u017ce nie taki diabe\u0142 straszny jak go maluj\u0105. No i pami\u0119tajcie, \u017ce biblioteki do zarz\u0105dzania stanem prawdopodobnie opakuj\u0105 swoje hooki w taki spos\u00f3b, \u017ce nowy hook b\u0119dzie dla Was niewidoczny.<\/p>\n","innerContent":["\n<p>Kolejny nowy hook to `useMutableSource`, kt\u00f3ry dostali\u015bmy umo\u017cliwia bezpieczne i efektywne odczytywanie stanu z zewn\u0119trznych \u017ar\u00f3de\u0142 w trybie wsp\u00f3\u0142bie\u017cnym. Na pierwszy rzut oka API wygl\u0105da troch\u0119 pokr\u0119tnie, bo wymaga podania a\u017c trzech z\u0142o\u017conych argument\u00f3w, ale je\u015bli przyjrze\u0107 mu si\u0119 bli\u017cej to okazuje si\u0119, \u017ce nie taki diabe\u0142 straszny jak go maluj\u0105. No i pami\u0119tajcie, \u017ce biblioteki do zarz\u0105dzania stanem prawdopodobnie opakuj\u0105 swoje hooki w taki spos\u00f3b, \u017ce nowy hook b\u0119dzie dla Was niewidoczny.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ May be created in module scope, like context:\nconst locationSource = createMutableSource(\n  window,\n  \/\/ Although not the typical \"version\", the href attribute is stable,\n  \/\/ and will change whenever part of the Location changes,\n  \/\/ so it's safe to use as a version.\n  () => window.location.href\n);\n\n\/\/ Because this method doesn't require access to props,\n\/\/ it can be declared in module scope to be shared between components.\nconst getSnapshot = window => window.location.pathname;\n\n\/\/ This method can subscribe to root level change events,\n\/\/ or more snapshot-specific events.\n\/\/\n\/\/ Because this method doesn't require access to props,\n\/\/ it can be declared in module scope to be shared between components.\nconst subscribe = (window, callback) => {\n  window.addEventListener(\"popstate\", callback);\n  return () => window.removeEventListener(\"popstate\", callback);\n};\n\nfunction Example() {\n  const pathName = useMutableSource(locationSource, getSnapshot, subscribe);\n\n  \/\/ ...\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ May be created in module scope, like context:\nconst locationSource = createMutableSource(\n  window,\n  \/\/ Although not the typical \"version\", the href attribute is stable,\n  \/\/ and will change whenever part of the Location changes,\n  \/\/ so it's safe to use as a version.\n  () => window.location.href\n);\n\n\/\/ Because this method doesn't require access to props,\n\/\/ it can be declared in module scope to be shared between components.\nconst getSnapshot = window => window.location.pathname;\n\n\/\/ This method can subscribe to root level change events,\n\/\/ or more snapshot-specific events.\n\/\/\n\/\/ Because this method doesn't require access to props,\n\/\/ it can be declared in module scope to be shared between components.\nconst subscribe = (window, callback) => {\n  window.addEventListener(\"popstate\", callback);\n  return () => window.removeEventListener(\"popstate\", callback);\n};\n\nfunction Example() {\n  const pathName = useMutableSource(locationSource, getSnapshot, subscribe);\n\n  \/\/ ...\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ostatnia wyr\u00f3\u017cniona funkcjonalno\u015b\u0107 to przewodnik do aktualizacji, dla tw\u00f3rc\u00f3w bibliotek CSS-in-JS. Zmiany ponownie wymuszone s\u0105 przez zmiany w api streamingu, co nieuchronnie prowadzi do pytania, czy tw\u00f3rcy bibliotek zaktualizuj\u0105 si\u0119 na czas? Bior\u0105c pod uwag\u0119 jak d\u0142ugo dost\u0119pna jest alfa i jak d\u0142ugo potrwa beta mo\u017cemy liczy\u0107 na to, \u017ce tak w\u0142a\u015bnie b\u0119dzie.\u00a0<\/p>\n","innerContent":["\n<p>Ostatnia wyr\u00f3\u017cniona funkcjonalno\u015b\u0107 to przewodnik do aktualizacji, dla tw\u00f3rc\u00f3w bibliotek CSS-in-JS. Zmiany ponownie wymuszone s\u0105 przez zmiany w api streamingu, co nieuchronnie prowadzi do pytania, czy tw\u00f3rcy bibliotek zaktualizuj\u0105 si\u0119 na czas? Bior\u0105c pod uwag\u0119 jak d\u0142ugo dost\u0119pna jest alfa i jak d\u0142ugo potrwa beta mo\u017cemy liczy\u0107 na to, \u017ce tak w\u0142a\u015bnie b\u0119dzie.\u00a0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3191,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/FEapdeGXoAUnvFO.jpeg\" alt=\"\" class=\"wp-image-3191\"\/><figcaption>Ja zastanawiam si\u0119 czy biblioteki Reacta b\u0119d\u0105 gotowe na aktualizacj\u0119, a tymczasem Angularowy Tooling przechodzi przez apokalips\u0119 po wydaniu Angulara 13<br>(Mem kradzony z: <a href=\"https:\/\/bit.ly\/3ntRXO8\">https:\/\/bit.ly\/3ntRXO8<\/a>)<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/FEapdeGXoAUnvFO.jpeg\" alt=\"\" class=\"wp-image-3191\"\/><figcaption>Ja zastanawiam si\u0119 czy biblioteki Reacta b\u0119d\u0105 gotowe na aktualizacj\u0119, a tymczasem Angularowy Tooling przechodzi przez apokalips\u0119 po wydaniu Angulara 13<br>(Mem kradzony z: <a href=\"https:\/\/bit.ly\/3ntRXO8\">https:\/\/bit.ly\/3ntRXO8<\/a>)<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na zako\u0144czenie jeszcze kr\u00f3tkie przemy\u015blenia zainspirowane dyskusj\u0105 na Hacker Newsach. Zauwa\u017cyli\u015bcie, \u017ce klasowe w\u0142a\u015bciwie ca\u0142kowicie znikn\u0119\u0142y z radaru ludzi odpowiedzialnych za Reacta? Z boku wygl\u0105da to troch\u0119 tak, jakby React Hooks i Functional Components sta\u0142y si\u0119 rozwi\u0105zaniem kanonicznym, a klasowe komponenty rozwi\u0105zaniem legacy wspieranym tylko dla kompatybilno\u015bci wstecznej. To z kolei w prosty spos\u00f3b prowadzi do pytania: czy klasowe komponenty w najbli\u017cszych latach ca\u0142kowicie znikn\u0105 z Reacta? Je\u015bli macie jakie\u015b zdanie na ten temat to zapraszamy do dyskusji na naszym facebooku!<\/p>\n","innerContent":["\n<p>Na zako\u0144czenie jeszcze kr\u00f3tkie przemy\u015blenia zainspirowane dyskusj\u0105 na Hacker Newsach. Zauwa\u017cyli\u015bcie, \u017ce klasowe w\u0142a\u015bciwie ca\u0142kowicie znikn\u0119\u0142y z radaru ludzi odpowiedzialnych za Reacta? Z boku wygl\u0105da to troch\u0119 tak, jakby React Hooks i Functional Components sta\u0142y si\u0119 rozwi\u0105zaniem kanonicznym, a klasowe komponenty rozwi\u0105zaniem legacy wspieranym tylko dla kompatybilno\u015bci wstecznej. To z kolei w prosty spos\u00f3b prowadzi do pytania: czy klasowe komponenty w najbli\u017cszych latach ca\u0142kowicie znikn\u0105 z Reacta? Je\u015bli macie jakie\u015b zdanie na ten temat to zapraszamy do dyskusji na naszym facebooku!<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3192,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5um8xv.jpeg\" alt=\"\" class=\"wp-image-3192\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/5um8xv.jpeg\" alt=\"\" class=\"wp-image-3192\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/112\">https:\/\/github.com\/reactwg\/react-18\/discussions\/112<\/a><br><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/86\">https:\/\/github.com\/reactwg\/react-18\/discussions\/86<\/a><br><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/111\">https:\/\/github.com\/reactwg\/react-18\/discussions\/111<\/a><br><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/110\">https:\/\/github.com\/reactwg\/react-18\/discussions\/110<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/112\">https:\/\/github.com\/reactwg\/react-18\/discussions\/112<\/a><br><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/86\">https:\/\/github.com\/reactwg\/react-18\/discussions\/86<\/a><br><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/111\">https:\/\/github.com\/reactwg\/react-18\/discussions\/111<\/a><br><a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/110\">https:\/\/github.com\/reactwg\/react-18\/discussions\/110<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Tw\u00f3rca Svelte zatrudniony przez Vercel<\/h2>\n","innerContent":["\n<h2>3. Tw\u00f3rca Svelte zatrudniony przez Vercel<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli kompletnie nie kojarzycie Svelte, chocia\u017cby z nazwy, to musieli\u015bcie przez ostatni rok tkwi\u0107 w ca\u0142kowitym odci\u0119ciu od \u015bwiata. Framework ten w rankingu wykorzystania wed\u0142ug raportu State of JS 2020 uplasowa\u0142 si\u0119 na mocnym czwartym miejscu, w rankingu satysfakcji przeskoczy\u0142 nawet Reacta i zgarn\u0105\u0142 pierwsze miejsce<\/p>\n","innerContent":["\n<p>Je\u015bli kompletnie nie kojarzycie Svelte, chocia\u017cby z nazwy, to musieli\u015bcie przez ostatni rok tkwi\u0107 w ca\u0142kowitym odci\u0119ciu od \u015bwiata. Framework ten w rankingu wykorzystania wed\u0142ug raportu State of JS 2020 uplasowa\u0142 si\u0119 na mocnym czwartym miejscu, w rankingu satysfakcji przeskoczy\u0142 nawet Reacta i zgarn\u0105\u0142 pierwsze miejsce<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vercel to natomiast firma stoj\u0105ca za Next.js, kt\u00f3ra jest jedn\u0105 z startupowych gwiazd ostatnich lat. Na przestrzeni ostatnich lat zgromadzili oni ponad 150 milion\u00f3w dolar\u00f3w kapita\u0142u od inwestor\u00f3w i obecnie s\u0105 wyceniani na ponad miliard dolar\u00f3w. My\u015bl\u0119, \u017ce gdyby Vercel nie przetar\u0142 szlak\u00f3w to nie mieliby\u015bmy teraz takich firm jak Rome Inc. czy Deno Company.<\/p>\n","innerContent":["\n<p>Vercel to natomiast firma stoj\u0105ca za Next.js, kt\u00f3ra jest jedn\u0105 z startupowych gwiazd ostatnich lat. Na przestrzeni ostatnich lat zgromadzili oni ponad 150 milion\u00f3w dolar\u00f3w kapita\u0142u od inwestor\u00f3w i obecnie s\u0105 wyceniani na ponad miliard dolar\u00f3w. My\u015bl\u0119, \u017ce gdyby Vercel nie przetar\u0142 szlak\u00f3w to nie mieliby\u015bmy teraz takich firm jak Rome Inc. czy Deno Company.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Co wyjdzie z po\u0142\u0105czenia obydwu projekt\u00f3w? Vercel twierdzi, \u017ce jest to ich inwestycja w Open Source i niejako oddanie spo\u0142eczno\u015bci tego co jej si\u0119 nale\u017cy. Jak zaznacza firma w wpisie na swoim blogu, nie b\u0119dzie ona wp\u0142ywa\u0107 na rozw\u00f3j frameworku i nadal pozostaje on w r\u0119kach Richa Harisa. My\u015bl\u0119, \u017ce jest to pewien milestone dla Svelte i z przyjemno\u015bci\u0105 b\u0119d\u0119 przygl\u0105da\u0142 si\u0119 temu, w kt\u00f3r\u0105 stron\u0119 potocz\u0105 si\u0119 losy tego uwielbianego przez deweloper\u00f3w rozwi\u0105zania.<\/p>\n","innerContent":["\n<p>Co wyjdzie z po\u0142\u0105czenia obydwu projekt\u00f3w? Vercel twierdzi, \u017ce jest to ich inwestycja w Open Source i niejako oddanie spo\u0142eczno\u015bci tego co jej si\u0119 nale\u017cy. Jak zaznacza firma w wpisie na swoim blogu, nie b\u0119dzie ona wp\u0142ywa\u0107 na rozw\u00f3j frameworku i nadal pozostaje on w r\u0119kach Richa Harisa. My\u015bl\u0119, \u017ce jest to pewien milestone dla Svelte i z przyjemno\u015bci\u0105 b\u0119d\u0119 przygl\u0105da\u0142 si\u0119 temu, w kt\u00f3r\u0105 stron\u0119 potocz\u0105 si\u0119 losy tego uwielbianego przez deweloper\u00f3w rozwi\u0105zania.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/vercel.com\/blog\/vercel-welcomes-rich-harris-creator-of-svelte\">https:\/\/vercel.com\/blog\/vercel-welcomes-rich-harris-creator-of-svelte<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/vercel.com\/blog\/vercel-welcomes-rich-harris-creator-of-svelte\">https:\/\/vercel.com\/blog\/vercel-welcomes-rich-harris-creator-of-svelte<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>4. Push Notyfikacje zmierzaj\u0105 do mobilnego Safari?<\/h2>\n","innerContent":["\n<h2>4. Push Notyfikacje zmierzaj\u0105 do mobilnego Safari?<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na razie nic jeszcze nie wiadomo oficjalnie, ale cz\u0119\u015b\u0107 funkcjonalno\u015bci niezb\u0119dnych do pojawienia si\u0119 Push Notyfikacji w Safari trafi\u0142a za odpowiedni\u0105 feature flag\u0119. Nadziej\u0119 daje r\u00f3wnie\u017c wzmo\u017cona aktywno\u015b\u0107 od bugiem na trackerze WebKita, dotycz\u0105cym braku tej funkcjonalno\u015bci. Dop\u00f3ki nie otrzymamy oficjalnych informacji nie mo\u017cemy by\u0107 niczego pewni, ale ca\u0142y webowy \u015bwiat trzyma kciuki, za Apple w pe\u0142ni wspieraj\u0105cym PWA. Je\u015bli Apple ostatnio zapowiedzia\u0142a sprzeda\u017c cz\u0119\u015bci zamiennych do swoich urz\u0105dze\u0144, to mo\u017ce i wsparcie dla Push Notyfikacji jest mo\u017cliwe?<\/p>\n","innerContent":["\n<p>Na razie nic jeszcze nie wiadomo oficjalnie, ale cz\u0119\u015b\u0107 funkcjonalno\u015bci niezb\u0119dnych do pojawienia si\u0119 Push Notyfikacji w Safari trafi\u0142a za odpowiedni\u0105 feature flag\u0119. Nadziej\u0119 daje r\u00f3wnie\u017c wzmo\u017cona aktywno\u015b\u0107 od bugiem na trackerze WebKita, dotycz\u0105cym braku tej funkcjonalno\u015bci. Dop\u00f3ki nie otrzymamy oficjalnych informacji nie mo\u017cemy by\u0107 niczego pewni, ale ca\u0142y webowy \u015bwiat trzyma kciuki, za Apple w pe\u0142ni wspieraj\u0105cym PWA. Je\u015bli Apple ostatnio zapowiedzia\u0142a sprzeda\u017c cz\u0119\u015bci zamiennych do swoich urz\u0105dze\u0144, to mo\u017ce i wsparcie dla Push Notyfikacji jest mo\u017cliwe?<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3190,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/download-1.jpeg\" alt=\"\" class=\"wp-image-3190\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/11\/download-1.jpeg\" alt=\"\" class=\"wp-image-3190\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/twitter.com\/firt\/status\/1460782824773107713?fbclid=IwAR1ZaLhTaK0Nw3-FXh8lLZjjbNObSAg7U-eJ3Ue57QkuNSDrBMS1g5ChOPw\">https:\/\/twitter.com\/firt\/status\/1460782824773107713?fbclid=IwAR1ZaLhTaK0Nw3-FXh8lLZjjbNObSAg7U-eJ3Ue57QkuNSDrBMS1g5ChOPw<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/twitter.com\/firt\/status\/1460782824773107713?fbclid=IwAR1ZaLhTaK0Nw3-FXh8lLZjjbNObSAg7U-eJ3Ue57QkuNSDrBMS1g5ChOPw\">https:\/\/twitter.com\/firt\/status\/1460782824773107713?fbclid=IwAR1ZaLhTaK0Nw3-FXh8lLZjjbNObSAg7U-eJ3Ue57QkuNSDrBMS1g5ChOPw<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=10049"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10049\/revisions"}],"predecessor-version":[{"id":10613,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10049\/revisions\/10613"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7752"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}