{"id":13213,"date":"2022-12-16T13:27:10","date_gmt":"2022-12-16T12:27:10","guid":{"rendered":"https:\/\/vived.io\/?p=13213"},"modified":"2022-12-16T13:27:12","modified_gmt":"2022-12-16T12:27:12","slug":"sveltekit-1","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/sveltekit-1\/","title":{"rendered":"SvelteKit 1.0 | Frontend Weekly vol. 107"},"content":{"rendered":"\n<h2 id=\"1-sveltekit-1-0\" data-num=1>1. SvelteKit 1.0<\/h2>\n\n\n\n<p>Jest rok 2016 i Rich Harris jest jednym z programist\u00f3w New York Times. Jednym z jego obowi\u0105zk\u00f3w jest przygotowywanie interaktywnych wizualizacji danych na potrzeby publikowanych w sieci artyku\u0142\u00f3w. Ze wzgl\u0119du na brak lepszych alternatyw, Rich decyduje si\u0119 stworzy\u0107 w\u0142asny framework &#8211; Reactive.js. Jego jedyn\u0105 bol\u0105czk\u0105 jest gigantyczna paczka JavaScript wysy\u0142ana do klienta. W trakcie jednego z lokalnych meet up\u00f3w Rich wys\u0142uchuje prezentacji na temat kompilator\u00f3w. Ta inspiruje go do tego stopnia, \u017ce ca\u0142y weekend \u015bwi\u0105t dzi\u0119kczynienia po\u015bwi\u0119ca na intensywny hackathon. W ostatni wiecz\u00f3r weekendu do sieci trafia Svelte 1.0 &#8211; w pe\u0142ni kompilowany framework JavaScript, wysy\u0142aj\u0105cy do klienta minimalne ilo\u015bci JavaScript.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jece.jpeg\" alt=\"\" class=\"wp-image-13231\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jece.jpeg 640w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jece-300x225.jpeg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption>Ja regularnie pojawiam si\u0119 na meet.js Krak\u00f3w &#8211; je\u015bli chcecie si\u0119 ze mn\u0105 napi\u0107 piwka to gor\u0105co zapraszam<\/figcaption><\/figure><\/div>\n\n\n<p>Svelte szybko podbija serca deweloper\u00f3w. W State of JS 2021 Svelte po raz drugi z rz\u0119du w kategorii \u201cUsage\u201d zajmuje czwarte miejsce. Spogl\u0105daj\u0105c na kategori\u0119 \u201cRetention\u201d i \u201cInterest\u201d nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce Svelte ma to \u201cco\u015b\u201d co kochaj\u0105 deweloperzy. W kategoriach tych od trzech lat Svelte zajmuje jedno z pierwszych dw\u00f3ch miejsc. Wci\u0105\u017c czekamy na wyniki State of JS 2022, ale stawiam dolary przeciwko orzechom, \u017ce Svelte powt\u00f3rzy sw\u00f3j wynik tak\u017ce i w tym roku.<\/p>\n\n\n\n<p>Dzi\u015b nie b\u0119dziemy jednak m\u00f3wi\u0107 o samym Svelte, a projekcie kt\u00f3rym zajmowa\u0142 Richa Harris przez ostatnie miesi\u0105ce. W minionym tygodniu wreszcie ukaza\u0142a si\u0119 pierwsza stabilna wersja SvelteKit &#8211; frameworku do renderowania Svelte po stronie serwera. Je\u015bli do tej pory nie mieli\u015bcie z Svelte styczno\u015bci, to <s>powinni\u015bcie zostawi\u0107 ten artyku\u0142 i zaj\u0105\u0107 si\u0119 nauk\u0105 tego wspania\u0142ego frameworku<\/s> jego funkcjonalno\u015bci postaram si\u0119 opisa\u0107 w spos\u00f3b mo\u017cliwie najbardziej przyst\u0119pny dla przeci\u0119tnego Frontend Developera.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" title=\"Svelte Origins: A JavaScript Documentary\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/kMlkCYL9qo0?start=412&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><figcaption>Je\u015bli szykacie dobrego filmu na d\u0142ugie zimowe wieczory, to zdecydowanie polecam dokument o Svelte. Znajdziecie w nim mas\u0119 ciekawych historii jak ta z pierwszego akapitu<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Routing oparty o struktur\u0119 plik\u00f3w<\/h3>\n\n\n\n<p>Podobnie jak Remix, Next.js czy Nuxt, tak i SvelteKit zdecydowa\u0142 si\u0119 oprze\u0107 routing o struktur\u0119 katalog\u00f3w. Od pocz\u0105tku m\u00f3wimy tutaj o pe\u0142nym pakiecie mo\u017cliwo\u015bci, bo obs\u0142ugiwane s\u0105 parametry (<code>[slug]<\/code>), opcjonalne fragmenty (<code>[[optional]]<\/code>), dopasowywanie fragment\u00f3w o dowolnej d\u0142ugo\u015bci (<code>[...rest]<\/code>), a nawet mo\u017cliwo\u015b\u0107 walidacji typ\u00f3w danych w \u015bcie\u017cce za pomoc\u0105 spersonalizowanych matcher\u00f3w (<code>[id=integer]<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-plaintext\">src\/routes\n\u251c blog\n\u2502 \u251c [[author]]       \ud83d\udc48 Optional parameter\n\u2502 \u2502 \u251c [slug]         \ud83d\udc48 Dynamic slug\n\u2502 \u2502 \u2502 \u251c +page.svelte \ud83d\udc48 This will match both \/blog\/tomasz-borowicz\/angular-15 \n\u2502                                        and \/blog\/angular-15\n\u251c cites\n\u2502 \u251c [id=integer]    \ud83d\udc48 Type validator (note: this requires creating ParamMatcher)\n\u2502 \u2502 \u251c +page.svelte  \ud83d\udc48 This will match both \/cites\/125\n\u2502                                   but not \/cites\/f8b0fc3e-6421-4722-b420\n\u251c snippets\n\u2502 \u251c [...filePath]   \ud83d\udc48 Rest parameters\n\u2502 \u2502 \u251c +page.svelte  \ud83d\udc48 This will match both \/snippets\/javascript\/hoisting\/index.js\n\u2502                                       and \/snippets\/index.js<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Strona w SvelteKit<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-62.jpeg\" alt=\"\" class=\"wp-image-13227\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-62.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-62-300x300.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-62-150x150.jpeg 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Na ka\u017cd\u0105 stron\u0119 w SvelteKit sk\u0142adaj\u0105 si\u0119 dwa pliki: <code>+page.js<\/code> oraz <code>+page.svelte<\/code>. Do tego pierwszego trafi\u0107 powinna funkcja <code>load()<\/code>, kt\u00f3ra odpowiedzialna b\u0119dzie za \u0142adowanie danych potrzebnych do wyrenderowania strony. Do tego drugiego powinien natomiast trafi\u0107 komponent Svelte, kt\u00f3ry odpowiednio przekszta\u0142ci otrzymane dane do HTMLa.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/blog\/[id]\/+page.ts\nimport type { getBlogPostById } from &#039;$lib\/rest.ts&#039;;\nimport type { PageLoad } from &#039;.\/$types&#039;;\n \nexport const load = (async  ({ params }) =&gt; {\n  return  await getBlogPostById(params.id);\n}) satisfies PageLoad; \/\/ \ud83d\udc48 Note how SvelteKit uses brand new satisfies operator here<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/blog\/[id]\/+page.svelte\n&lt;script lang=&quot;ts&quot;&gt;\n  import type { PageData } from &#039;.\/$types&#039;;\n  export let data: PageData;\n&lt;\/script&gt;\n\n&lt;h1&gt;{data.post.title}&lt;\/h1&gt;\n&lt;div&gt;{data.post.content}&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>W domy\u015blnym trybie, SvelteKit wyrenderuje pierwsz\u0105 stron\u0119 na serwerze, a nast\u0119pnie przeka\u017ce renderowanie do klienta. Mo\u017cemy jednak zmodyfikowa\u0107 to zachowanie zmieniaj\u0105c rozszerzenie pliku na <code>server.js<\/code>\/<code>server.svelte<\/code>. W takiej sytuacji SvelteKit zadba o to, \u017ceby taki kod zawsze wykonywany by\u0142 po stronie serwera. To z kolei daje nam mo\u017cliwo\u015b\u0107 prostego odnoszenia si\u0119 do serwerowych API.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/blog\/[id]\/+page.server.ts\nimport * as db from &#039;$lib\/server\/database&#039;;\nimport type { PageLoad } from &#039;.\/$types&#039;;\n \nexport const load = (async ({ params }) =&gt; {\n  return  await db.getPostById(params.id); \/\/ \ud83d\udc48 Note you can acces server API here\n}) satisfies PageLoad; <\/code><\/pre>\n\n\n\n<p>Za pomoc\u0105 kilki zmiennych eksportowanych z komponentu mo\u017cemy te\u017c sterowa\u0107 strategi\u0105 renderowania <\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ src\/routes\/about\/+page.svelte\n&lt;script lang=&quot;ts&quot;&gt;\n   export const prerender = true \/\/ render at build time\n   export const ssr = false \/\/ disable server rendering\n   export const csr = false \/\/ disable JavaScript hydration\n&lt;\/script&gt;\n\n&lt;h1&gt;About&lt;\/h1&gt;\n&lt;p&gt;This is a very cool blog of a very cool company&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Layout i obs\u0142uga b\u0142\u0119d\u00f3w<\/h3>\n\n\n\n<p>SvelteKit ju\u017c w pierwszej wersji posiada funkcjonalno\u015bci na kt\u00f3re w innych frameworkach czekali\u015bmy nawet do wersji 13 (tak, na Ciebie patrz\u0119 Next.js \ud83d\ude08). Mowa tu oczywi\u015bcie o layouts i errors, kt\u00f3re osadzamy na dowolnym poziomie struktury katalog\u00f3w w plikach <code>+layout.svelte<\/code> i <code>+error.svelte<\/code>. Co wa\u017cne, podobnie jak w przypadku samych stron, tak i tutaj mo\u017cemy zapewni\u0107, \u017ce dany kod b\u0119dzie wykonywany tylko po stronie serwera odpowiednio modyfikuj\u0105c rozszerzenie pliku.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/blog\/+layout.svelte\n&lt;script lang=&quot;ts&quot;&gt;\n  import type { LayoutData } from &#039;.\/$types&#039;;\n\n  export let tabs = [ \/*...*\/];\n&lt;\/script&gt;\n\n&lt;h1&gt;Settings&lt;\/h1&gt;\n\n&lt;div class=&quot;submenu&quot;&gt;\n  {#each tabs as tab}\n    &lt;a href=&quot;{tab.href}&quot;&gt;{tab.title}&lt;\/a&gt;\n  {\/each}\n&lt;\/div&gt;\n\n&lt;slot&gt;&lt;\/slot&gt; \/\/ \ud83d\udc48 All the pages in \/blog will be rendered in place of this slot<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/blog\/+error.svelte\n&lt;script&gt;\n  import { page } from &#039;$app\/stores&#039;;\n&lt;\/script&gt;\n\n&lt;h1&gt;{$page.status}: {$page.error.message}&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Obs\u0142uga formularzy<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"431\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jdpz.jpeg\" alt=\"\" class=\"wp-image-13225\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jdpz.jpeg 579w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jdpz-300x223.jpeg 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/figure><\/div>\n\n\n<p>SvelteKit oferuje te\u017c bardzo oryginalne (czyt. skopiowane od Remix) rozwi\u0105zanie je\u015bli chodzi o obs\u0142ug\u0119 formularzy. W pliku <code>+page.js<\/code> opr\u00f3cz funkcji <code>load()<\/code>, mo\u017cemy umie\u015bci\u0107 r\u00f3wnie\u017c obiekt <code>actions()<\/code>. B\u0119dzie on odpowiedzialny za przetwarzanie wype\u0142nionych formularzy.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/login\/+page.ts\nimport type { PageServerLoad, Actions } from &#039;.\/$types&#039;;\n \nexport const load = (async ({ cookies }) =&gt; {\n  const user = await db.getUserFromSession(cookies.get(&#039;sessionid&#039;));\n  return { user };\n}) satisfies PageServerLoad;\n \nexport const actions: Actions = {\n  login: async ({ cookies, request }) =&gt; {\n    const data = await request.formData();\n    const email = data.get(&#039;email&#039;);\n    const password = data.get(&#039;password&#039;);\n \n    const user = await db.getUser(email);\n    cookies.set(&#039;sessionid&#039;, await db.createSession(user));\n \n    return { success: true };\n  }\n};<\/code><\/pre>\n\n\n\n<p>Nast\u0119pnie w pliku <code>page.svelte<\/code> mo\u017cemy doda\u0107 do formularza prametr <code>action<\/code>. W efekcie nasza aplikacja w momencie zaakceptowania formularza b\u0119dzie wysy\u0142a\u0107 zapytanie typu POST na serwer, gdzie wywo\u0142ywana b\u0119dzie opowiednia metoda z obiekty <code>actions<\/code>. Co w tym wyj\u0105tkowego? Ot\u00f3\u017c dzi\u0119ki zastosowaniu natywnych mechanizm\u00f3w przegl\u0105darki, taki formularz b\u0119dzie w pe\u0142ni funkcjonalny nawet po wy\u0142\u0105czeniu przez u\u017cytkownika JavaScript!<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/login\/+page.svelte\n&lt;script lang=&quot;ts&quot;&gt;\n  import type { PageData, ActionData } from &#039;.\/$types&#039;;\n\n  export let form: ActionData;\n&lt;\/script&gt;\n\n&lt;form method=&quot;POST&quot; action=&quot;?\/login&quot;&gt;\n  &lt;label&gt;\n    Email\n    &lt;input name=&quot;email&quot; type=&quot;email&quot;&gt;\n  &lt;\/label&gt;\n  &lt;label&gt;\n    Password\n    &lt;input name=&quot;password&quot; type=&quot;password&quot;&gt;\n  &lt;\/label&gt;\n  &lt;button&gt;Log in&lt;\/button&gt;\n\t&lt;button formaction=&quot;?\/register&quot;&gt;Register&lt;\/button&gt;\n&lt;\/form&gt;\n\n{#if form?.success}\n  &lt;p&gt;Successfully logged in! Welcome back, {data.user.name}&lt;\/p&gt;\n{\/if}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Backend for Frontend<\/h3>\n\n\n\n<p>Skoro SvelteKit obs\u0142uguje zapytania POST przy okazji obs\u0142ugi formularzy, to dlaczego nie mia\u0142by obs\u0142ugiwa\u0107 r\u00f3wnie\u017c innych zapyta\u0144? Podobne pytanie zadali sobie tw\u00f3rcy frameworka i w efekcie w SvelteKit mo\u017cemy definiowa\u0107 w\u0142asne RESTowe endpointy<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/api\/random-number\/+server.ts\n\nimport { error } from &#039;@sveltejs\/kit&#039;;\nimport { random } from &#039;lodash\/es&#039;;\nimport type { RequestHandler } from &#039;.\/$types&#039;;\n\n\/\/ You can call this endpoit with PATCH \/api\/random-number?min=5&amp;max=8\nexport const PATCH = (({ url }) =&gt; {\n  const value = random(url.searchParams.get(&#039;min&#039;), url.searchParams.get(&#039;min&#039;), true);\n  return new Response(String(value));\n}) satisfies RequestHandler;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-63.jpeg\" alt=\"\" class=\"wp-image-13229\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-63.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-63-300x300.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-63-150x150.jpeg 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Preloading&nbsp;<\/h3>\n\n\n\n<p>Jednym z bardzo popularnych wzorc\u00f3w optymalizuj\u0105cych czas \u0142adowania JavaScript jest \u0142adowanie tylko kodu potrzebnego do wyrenderowania obecnej strony. Niestety odbywa si\u0119 to kosztem do\u0142adowywania kolejnych plik\u00f3w w momencie kiedy u\u017cytkownik chce przej\u015b\u0107 na inn\u0105 stron\u0119. W takiej sytuacji u\u017cytkownik zapewne do\u015bwiadczy lekkiego chrupni\u0119cia. I w takiej sytuacji SvelteKit oferuje lekarstwo. Anotuj\u0105c odpowiednio element <code>&lt;a&gt;<\/code> Svelte rozpocznie \u0142adowanie potrzebnego kodu i danych ju\u017c w momencie kiedy kursor u\u017cytkownika zacznie zmierza\u0107 w jego kierunku.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;a data-sveltekit-preload-data=&quot;hover&quot; href=&quot;\/page-A&quot;&gt;\n  This page code will load when cursor hovers over the link\n&lt;\/a&gt;\n\n&lt;a data-sveltekit-preload-data=&quot;viewport&quot; href=&quot;\/page-B&quot;&gt;\n  This page code will load when the link enters the viewport\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Deployment SvelteKit<\/h3>\n\n\n\n<p>Rich Harris ju\u017c od d\u0142u\u017cszego czasu jest pe\u0142noetatowym pracownikiem Vercela &#8211; firmy rozwijaj\u0105cej Next.js i zarabiaj\u0105cej g\u0142\u00f3wnie na swojej chmurze. Nie dziwi wi\u0119c, \u017ce SvelteKit 1.0 ju\u017c od dnia zero mo\u017cna jednym klikni\u0119ciem deploy\u2019owa\u0107 na chmur\u0119 Vercela. Na szcz\u0119\u015bcie nie jest to vendor lock in jak ten znany z Next.js i SvelteKit bez wi\u0119kszych problem\u00f3w hostowa\u0107 mo\u017cecie na dowolnej chmurze obs\u0142uguj\u0105cej Node.js<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/svelte.dev\/blog\/announcing-sveltekit-1.0\">https:\/\/svelte.dev\/blog\/announcing-sveltekit-1.0<\/a><\/p>\n\n\n\n<h2 id=\"2-vite-4-0\" data-num=2>2. Vite 4.0<\/h2>\n\n\n\n<p>Vite jest jedn\u0105 z najszybciej wschodz\u0105cych gwiazd naszej frontendowej spo\u0142eczno\u015bci. Pocz\u0105tkowo by\u0142 on narz\u0119dziem dedykowanym do budowania aplikacji napisanych we Vue. Rewolucja nadesz\u0142a dopiero wraz z opublikowaniem Vite 2.0, kiedy to sta\u0142 si\u0119 on narz\u0119dziem framework-agnostic. Szybko\u015b\u0107 narz\u0119dzia robi\u0142a wra\u017cenie, wi\u0119c nic dziwnego, \u017ce z czasem zacz\u0119\u0142a kusi\u0107 coraz wi\u0119cej React deweloper\u00f3w i nie tylko. Vite sta\u0142 si\u0119 tak popularny, \u017ce bardzo szybko skanalizowa\u0142 w\u0142a\u015bciwie ca\u0142\u0105 swoj\u0105 konkurencj\u0119 (RIP Snowplow).&nbsp;<\/p>\n\n\n\n<p>W minionym tygodniu opublikowany zosta\u0142 Vite 4.0. Jest to o tyle zaskakuj\u0105ce, \u017ce niespe\u0142na p\u00f3\u0142 roku temu ukaza\u0142 si\u0119 Vite 3.0. Pami\u0119tajcie jednak, \u017ce Vite przestrzega semantic versioning. W tym wypadku du\u017cy numerek jest zwi\u0105zany przede wszystkim z braking changes, a nie nowymi funkcjonalno\u015bciami. \u0179r\u00f3d\u0142em breaking changes jest przede wszystkim przesiadka z Rollup 2.0 na Rollup 3.0.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"666\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-64.jpeg\" alt=\"\" class=\"wp-image-13233\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-64.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-64-225x300.jpeg 225w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>We wst\u0119pie do tej sekcji napisa\u0142em, \u017ce Vite skanalizowa\u0142 ca\u0142\u0105 swoj\u0105 konkurencj\u0119. W tym roku pojawi\u0142 si\u0119 jednak nowy pretendent do korony &#8211; Turbopack (napisany w Rust przez by\u0142ego tw\u00f3rc\u0119 Webpack). Na razie znajduje si\u0119 on we wczesnej alfie i jak donosz\u0105 pierwsi \u015bmia\u0142kowie z Twitter nie dzia\u0142a jeszcze najlepiej. Nie przeszkodzi\u0142o to jednak tw\u00f3rcom pochwali\u0107 si\u0119, \u017ce dzia\u0142a on prawie 4x szybciej ni\u017c Vite. Evan You (tw\u00f3rca Vue i Vite) szybko zacz\u0105\u0142 przygl\u0105da\u0107 si\u0119 tym liczbom. Jak si\u0119 okaza\u0142o wi\u0119kszo\u015b\u0107 z tej przewagi wynika\u0142a z zastosowania SWC zamiast Babela i lekkiego przypudrowania wynik\u00f3w. Kurz po \u201caferze wydajno\u015bciowej\u201d troch\u0119 ju\u017c opad\u0142, a Vite 4.0 dodaje wsparcie dla SWC. Jestem ciekaw jak teraz prezentuje si\u0119 zestawienie Vite i Turbopack.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"756\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-65.jpeg\" alt=\"\" class=\"wp-image-13237\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-65.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-65-198x300.jpeg 198w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Najwi\u0119cej komentarzy na Reddicie pod postem og\u0142aszaj\u0105cym Vite 4.0 dotyczy\u0142o zabawy w rozpoznawanie logo na jednej z grafik w po\u015bcie. Ja te\u017c zapraszam Was do tej zabawy &#8211; ile projekt\u00f3w na poni\u017cszej grafice jeste\u015bcie w stanie rozpozna\u0107?&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-1024x513.png\" alt=\"\" class=\"wp-image-13235\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-1024x513.png 1024w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-300x150.png 300w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-768x384.png 768w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-1536x769.png 1536w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-2048x1025.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>M\u00f3j wynik to 31\/50 \ud83c\udfc6<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/vitejs.dev\/blog\/announcing-vite4.html\">https:\/\/vitejs.dev\/blog\/announcing-vite4.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Svelte to framework, kt\u00f3ry od lat w\u0142ada sercami deweloper\u00f3w. W tym tygodniu ukaza\u0142 si\u0119 SvelteKit &#8211; przygotowywane od d\u0142u\u017cszego czasu renderowanie po stronie Servera dla Svelte. Je\u015bli jeste\u015bcie ciekawi jak SvelteKit zamierza powalczy\u0107 z Next.js i Nuxt to zapraszamy do kolejnej edycji naszego przegl\u0105du. <\/p>\n","protected":false},"author":12,"featured_media":13243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273,1],"tags":[490,296],"class_list":["post-13213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","category-no-category","tag-svelte-pl","tag-vite-pl"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png","feature_image_blog":{"ID":13245,"id":13245,"title":"pexels-nina-uhlikova-725255","filename":"pexels-nina-uhlikova-725255.jpg","filesize":200252,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255.jpg","link":"https:\/\/vived.io\/pl\/sveltekit-1\/pexels-nina-uhlikova-725255\/","alt":"","author":"12","description":"","caption":"","name":"pexels-nina-uhlikova-725255","status":"inherit","uploaded_to":13213,"date":"2022-12-16 12:23:18","modified":"2022-12-16 12:23:18","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1280,"height":960,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255-300x225.jpg","medium-width":300,"medium-height":225,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255-768x576.jpg","medium_large-width":768,"medium_large-height":576,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255-1024x768.jpg","large-width":1024,"large-height":768,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255.jpg","1536x1536-width":1280,"1536x1536-height":960,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255.jpg","2048x2048-width":1280,"2048x2048-height":960,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":225,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":300,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-nina-uhlikova-725255.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":450}},"estimated_reading_time":"10"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SvelteKit 1.0 | Frontend Weekly vol. 107 - 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\/sveltekit-1\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SvelteKit 1.0 | Frontend Weekly vol. 107 - Vived\" \/>\n<meta property=\"og:description\" content=\"Svelte to framework, kt\u00f3ry od lat w\u0142ada sercami deweloper\u00f3w. W tym tygodniu ukaza\u0142 si\u0119 SvelteKit - przygotowywane od d\u0142u\u017cszego czasu renderowanie po stronie Servera dla Svelte. Je\u015bli jeste\u015bcie ciekawi jak SvelteKit zamierza powalczy\u0107 z Next.js i Nuxt to zapraszamy do kolejnej edycji naszego przegl\u0105du.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/sveltekit-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-16T12:27:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-16T12:27:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\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<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"SvelteKit 1.0 | Frontend Weekly vol. 107\",\"datePublished\":\"2022-12-16T12:27:10+00:00\",\"dateModified\":\"2022-12-16T12:27:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/\"},\"wordCount\":1292,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png\",\"keywords\":[\"Svelte\",\"vite\"],\"articleSection\":[\"Frontend\",\"No category\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/\",\"url\":\"https:\/\/vived.io\/pl\/sveltekit-1\/\",\"name\":\"SvelteKit 1.0 | Frontend Weekly vol. 107 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png\",\"datePublished\":\"2022-12-16T12:27:10+00:00\",\"dateModified\":\"2022-12-16T12:27:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/sveltekit-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/sveltekit-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SvelteKit 1.0 | Frontend Weekly vol. 107\"}]},{\"@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":"SvelteKit 1.0 | Frontend Weekly vol. 107 - 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\/sveltekit-1\/","og_locale":"pl_PL","og_type":"article","og_title":"SvelteKit 1.0 | Frontend Weekly vol. 107 - Vived","og_description":"Svelte to framework, kt\u00f3ry od lat w\u0142ada sercami deweloper\u00f3w. W tym tygodniu ukaza\u0142 si\u0119 SvelteKit - przygotowywane od d\u0142u\u017cszego czasu renderowanie po stronie Servera dla Svelte. Je\u015bli jeste\u015bcie ciekawi jak SvelteKit zamierza powalczy\u0107 z Next.js i Nuxt to zapraszamy do kolejnej edycji naszego przegl\u0105du.","og_url":"https:\/\/vived.io\/pl\/sveltekit-1\/","og_site_name":"Vived","article_published_time":"2022-12-16T12:27:10+00:00","article_modified_time":"2022-12-16T12:27:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/sveltekit-1\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"SvelteKit 1.0 | Frontend Weekly vol. 107","datePublished":"2022-12-16T12:27:10+00:00","dateModified":"2022-12-16T12:27:12+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/sveltekit-1\/"},"wordCount":1292,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png","keywords":["Svelte","vite"],"articleSection":["Frontend","No category"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/sveltekit-1\/","url":"https:\/\/vived.io\/pl\/sveltekit-1\/","name":"SvelteKit 1.0 | Frontend Weekly vol. 107 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png","datePublished":"2022-12-16T12:27:10+00:00","dateModified":"2022-12-16T12:27:12+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/sveltekit-1\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-2.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/sveltekit-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"SvelteKit 1.0 | Frontend Weekly vol. 107"}]},{"@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. SvelteKit 1.0<\/h2>\n","innerContent":["\n<h2>1. SvelteKit 1.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jest rok 2016 i Rich Harris jest jednym z programist\u00f3w New York Times. Jednym z jego obowi\u0105zk\u00f3w jest przygotowywanie interaktywnych wizualizacji danych na potrzeby publikowanych w sieci artyku\u0142\u00f3w. Ze wzgl\u0119du na brak lepszych alternatyw, Rich decyduje si\u0119 stworzy\u0107 w\u0142asny framework - Reactive.js. Jego jedyn\u0105 bol\u0105czk\u0105 jest gigantyczna paczka JavaScript wysy\u0142ana do klienta. W trakcie jednego z lokalnych meet up\u00f3w Rich wys\u0142uchuje prezentacji na temat kompilator\u00f3w. Ta inspiruje go do tego stopnia, \u017ce ca\u0142y weekend \u015bwi\u0105t dzi\u0119kczynienia po\u015bwi\u0119ca na intensywny hackathon. W ostatni wiecz\u00f3r weekendu do sieci trafia Svelte 1.0 - w pe\u0142ni kompilowany framework JavaScript, wysy\u0142aj\u0105cy do klienta minimalne ilo\u015bci JavaScript.<\/p>\n","innerContent":["\n<p>Jest rok 2016 i Rich Harris jest jednym z programist\u00f3w New York Times. Jednym z jego obowi\u0105zk\u00f3w jest przygotowywanie interaktywnych wizualizacji danych na potrzeby publikowanych w sieci artyku\u0142\u00f3w. Ze wzgl\u0119du na brak lepszych alternatyw, Rich decyduje si\u0119 stworzy\u0107 w\u0142asny framework - Reactive.js. Jego jedyn\u0105 bol\u0105czk\u0105 jest gigantyczna paczka JavaScript wysy\u0142ana do klienta. W trakcie jednego z lokalnych meet up\u00f3w Rich wys\u0142uchuje prezentacji na temat kompilator\u00f3w. Ta inspiruje go do tego stopnia, \u017ce ca\u0142y weekend \u015bwi\u0105t dzi\u0119kczynienia po\u015bwi\u0119ca na intensywny hackathon. W ostatni wiecz\u00f3r weekendu do sieci trafia Svelte 1.0 - w pe\u0142ni kompilowany framework JavaScript, wysy\u0142aj\u0105cy do klienta minimalne ilo\u015bci JavaScript.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13231,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jece.jpeg\" alt=\"\" class=\"wp-image-13231\"\/><figcaption>Ja regularnie pojawiam si\u0119 na meet.js Krak\u00f3w - je\u015bli chcecie si\u0119 ze mn\u0105 napi\u0107 piwka to gor\u0105co zapraszam<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jece.jpeg\" alt=\"\" class=\"wp-image-13231\"\/><figcaption>Ja regularnie pojawiam si\u0119 na meet.js Krak\u00f3w - je\u015bli chcecie si\u0119 ze mn\u0105 napi\u0107 piwka to gor\u0105co zapraszam<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Svelte szybko podbija serca deweloper\u00f3w. W State of JS 2021 Svelte po raz drugi z rz\u0119du w kategorii \u201cUsage\u201d zajmuje czwarte miejsce. Spogl\u0105daj\u0105c na kategori\u0119 \u201cRetention\u201d i \u201cInterest\u201d nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce Svelte ma to \u201cco\u015b\u201d co kochaj\u0105 deweloperzy. W kategoriach tych od trzech lat Svelte zajmuje jedno z pierwszych dw\u00f3ch miejsc. Wci\u0105\u017c czekamy na wyniki State of JS 2022, ale stawiam dolary przeciwko orzechom, \u017ce Svelte powt\u00f3rzy sw\u00f3j wynik tak\u017ce i w tym roku.<\/p>\n","innerContent":["\n<p>Svelte szybko podbija serca deweloper\u00f3w. W State of JS 2021 Svelte po raz drugi z rz\u0119du w kategorii \u201cUsage\u201d zajmuje czwarte miejsce. Spogl\u0105daj\u0105c na kategori\u0119 \u201cRetention\u201d i \u201cInterest\u201d nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce Svelte ma to \u201cco\u015b\u201d co kochaj\u0105 deweloperzy. W kategoriach tych od trzech lat Svelte zajmuje jedno z pierwszych dw\u00f3ch miejsc. Wci\u0105\u017c czekamy na wyniki State of JS 2022, ale stawiam dolary przeciwko orzechom, \u017ce Svelte powt\u00f3rzy sw\u00f3j wynik tak\u017ce i w tym roku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Dzi\u015b nie b\u0119dziemy jednak m\u00f3wi\u0107 o samym Svelte, a projekcie kt\u00f3rym zajmowa\u0142 Richa Harris przez ostatnie miesi\u0105ce. W minionym tygodniu wreszcie ukaza\u0142a si\u0119 pierwsza stabilna wersja SvelteKit - frameworku do renderowania Svelte po stronie serwera. Je\u015bli do tej pory nie mieli\u015bcie z Svelte styczno\u015bci, to <s>powinni\u015bcie zostawi\u0107 ten artyku\u0142 i zaj\u0105\u0107 si\u0119 nauk\u0105 tego wspania\u0142ego frameworku<\/s> jego funkcjonalno\u015bci postaram si\u0119 opisa\u0107 w spos\u00f3b mo\u017cliwie najbardziej przyst\u0119pny dla przeci\u0119tnego Frontend Developera.<\/p>\n","innerContent":["\n<p>Dzi\u015b nie b\u0119dziemy jednak m\u00f3wi\u0107 o samym Svelte, a projekcie kt\u00f3rym zajmowa\u0142 Richa Harris przez ostatnie miesi\u0105ce. W minionym tygodniu wreszcie ukaza\u0142a si\u0119 pierwsza stabilna wersja SvelteKit - frameworku do renderowania Svelte po stronie serwera. Je\u015bli do tej pory nie mieli\u015bcie z Svelte styczno\u015bci, to <s>powinni\u015bcie zostawi\u0107 ten artyku\u0142 i zaj\u0105\u0107 si\u0119 nauk\u0105 tego wspania\u0142ego frameworku<\/s> jego funkcjonalno\u015bci postaram si\u0119 opisa\u0107 w spos\u00f3b mo\u017cliwie najbardziej przyst\u0119pny dla przeci\u0119tnego Frontend Developera.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/www.youtube.com\/watch?v=kMlkCYL9qo0&t=412s","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=kMlkCYL9qo0&amp;t=412s\n<\/div><figcaption>Je\u015bli szykacie dobrego filmu na d\u0142ugie zimowe wieczory, to zdecydowanie polecam dokument o Svelte. Znajdziecie w nim mas\u0119 ciekawych historii jak ta z pierwszego akapitu<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=kMlkCYL9qo0&amp;t=412s\n<\/div><figcaption>Je\u015bli szykacie dobrego filmu na d\u0142ugie zimowe wieczory, to zdecydowanie polecam dokument o Svelte. Znajdziecie w nim mas\u0119 ciekawych historii jak ta z pierwszego akapitu<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Routing oparty o struktur\u0119 plik\u00f3w<\/h3>\n","innerContent":["\n<h3>Routing oparty o struktur\u0119 plik\u00f3w<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Podobnie jak Remix, Next.js czy Nuxt, tak i SvelteKit zdecydowa\u0142 si\u0119 oprze\u0107 routing o struktur\u0119 katalog\u00f3w. Od pocz\u0105tku m\u00f3wimy tutaj o pe\u0142nym pakiecie mo\u017cliwo\u015bci, bo obs\u0142ugiwane s\u0105 parametry (<code>[slug]<\/code>), opcjonalne fragmenty (<code>[[optional]]<\/code>), dopasowywanie fragment\u00f3w o dowolnej d\u0142ugo\u015bci (<code>[...rest]<\/code>), a nawet mo\u017cliwo\u015b\u0107 walidacji typ\u00f3w danych w \u015bcie\u017cce za pomoc\u0105 spersonalizowanych matcher\u00f3w (<code>[id=integer]<\/code>).<\/p>\n","innerContent":["\n<p>Podobnie jak Remix, Next.js czy Nuxt, tak i SvelteKit zdecydowa\u0142 si\u0119 oprze\u0107 routing o struktur\u0119 katalog\u00f3w. Od pocz\u0105tku m\u00f3wimy tutaj o pe\u0142nym pakiecie mo\u017cliwo\u015bci, bo obs\u0142ugiwane s\u0105 parametry (<code>[slug]<\/code>), opcjonalne fragmenty (<code>[[optional]]<\/code>), dopasowywanie fragment\u00f3w o dowolnej d\u0142ugo\u015bci (<code>[...rest]<\/code>), a nawet mo\u017cliwo\u015b\u0107 walidacji typ\u00f3w danych w \u015bcie\u017cce za pomoc\u0105 spersonalizowanych matcher\u00f3w (<code>[id=integer]<\/code>).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"plaintext"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-plaintext\">src\/routes\n\u251c blog\n\u2502 \u251c [[author]]       \ud83d\udc48 Optional parameter\n\u2502 \u2502 \u251c [slug]         \ud83d\udc48 Dynamic slug\n\u2502 \u2502 \u2502 \u251c +page.svelte \ud83d\udc48 This will match both \/blog\/tomasz-borowicz\/angular-15 \n\u2502                                        and \/blog\/angular-15\n\u251c cites\n\u2502 \u251c [id=integer]    \ud83d\udc48 Type validator (note: this requires creating ParamMatcher)\n\u2502 \u2502 \u251c +page.svelte  \ud83d\udc48 This will match both \/cites\/125\n\u2502                                   but not \/cites\/f8b0fc3e-6421-4722-b420\n\u251c snippets\n\u2502 \u251c [...filePath]   \ud83d\udc48 Rest parameters\n\u2502 \u2502 \u251c +page.svelte  \ud83d\udc48 This will match both \/snippets\/javascript\/hoisting\/index.js\n\u2502                                       and \/snippets\/index.js<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-plaintext\">src\/routes\n\u251c blog\n\u2502 \u251c [[author]]       \ud83d\udc48 Optional parameter\n\u2502 \u2502 \u251c [slug]         \ud83d\udc48 Dynamic slug\n\u2502 \u2502 \u2502 \u251c +page.svelte \ud83d\udc48 This will match both \/blog\/tomasz-borowicz\/angular-15 \n\u2502                                        and \/blog\/angular-15\n\u251c cites\n\u2502 \u251c [id=integer]    \ud83d\udc48 Type validator (note: this requires creating ParamMatcher)\n\u2502 \u2502 \u251c +page.svelte  \ud83d\udc48 This will match both \/cites\/125\n\u2502                                   but not \/cites\/f8b0fc3e-6421-4722-b420\n\u251c snippets\n\u2502 \u251c [...filePath]   \ud83d\udc48 Rest parameters\n\u2502 \u2502 \u251c +page.svelte  \ud83d\udc48 This will match both \/snippets\/javascript\/hoisting\/index.js\n\u2502                                       and \/snippets\/index.js<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Strona w SvelteKit<\/h3>\n","innerContent":["\n<h3>Strona w SvelteKit<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13227,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-62.jpeg\" alt=\"\" class=\"wp-image-13227\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-62.jpeg\" alt=\"\" class=\"wp-image-13227\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na ka\u017cd\u0105 stron\u0119 w SvelteKit sk\u0142adaj\u0105 si\u0119 dwa pliki: <code>+page.js<\/code> oraz <code>+page.svelte<\/code>. Do tego pierwszego trafi\u0107 powinna funkcja <code>load()<\/code>, kt\u00f3ra odpowiedzialna b\u0119dzie za \u0142adowanie danych potrzebnych do wyrenderowania strony. Do tego drugiego powinien natomiast trafi\u0107 komponent Svelte, kt\u00f3ry odpowiednio przekszta\u0142ci otrzymane dane do HTMLa.<\/p>\n","innerContent":["\n<p>Na ka\u017cd\u0105 stron\u0119 w SvelteKit sk\u0142adaj\u0105 si\u0119 dwa pliki: <code>+page.js<\/code> oraz <code>+page.svelte<\/code>. Do tego pierwszego trafi\u0107 powinna funkcja <code>load()<\/code>, kt\u00f3ra odpowiedzialna b\u0119dzie za \u0142adowanie danych potrzebnych do wyrenderowania strony. Do tego drugiego powinien natomiast trafi\u0107 komponent Svelte, kt\u00f3ry odpowiednio przekszta\u0142ci otrzymane dane do HTMLa.<\/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\">\/\/ src\/routes\/blog\/[id]\/+page.ts\nimport type { getBlogPostById } from '$lib\/rest.ts';\nimport type { PageLoad } from '.\/$types';\n \nexport const load = (async  ({ params }) => {\n  return  await getBlogPostById(params.id);\n}) satisfies PageLoad; \/\/ \ud83d\udc48 Note how SvelteKit uses brand new satisfies operator here<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/blog\/[id]\/+page.ts\nimport type { getBlogPostById } from '$lib\/rest.ts';\nimport type { PageLoad } from '.\/$types';\n \nexport const load = (async  ({ params }) => {\n  return  await getBlogPostById(params.id);\n}) satisfies PageLoad; \/\/ \ud83d\udc48 Note how SvelteKit uses brand new satisfies operator here<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/blog\/[id]\/+page.svelte\n&lt;script lang=\"ts\">\n  import type { PageData } from '.\/$types';\n  export let data: PageData;\n&lt;\/script>\n\n&lt;h1>{data.post.title}&lt;\/h1>\n&lt;div>{data.post.content}&lt;\/div><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/blog\/[id]\/+page.svelte\n&lt;script lang=\"ts\">\n  import type { PageData } from '.\/$types';\n  export let data: PageData;\n&lt;\/script>\n\n&lt;h1>{data.post.title}&lt;\/h1>\n&lt;div>{data.post.content}&lt;\/div><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W domy\u015blnym trybie, SvelteKit wyrenderuje pierwsz\u0105 stron\u0119 na serwerze, a nast\u0119pnie przeka\u017ce renderowanie do klienta. Mo\u017cemy jednak zmodyfikowa\u0107 to zachowanie zmieniaj\u0105c rozszerzenie pliku na <code>server.js<\/code>\/<code>server.svelte<\/code>. W takiej sytuacji SvelteKit zadba o to, \u017ceby taki kod zawsze wykonywany by\u0142 po stronie serwera. To z kolei daje nam mo\u017cliwo\u015b\u0107 prostego odnoszenia si\u0119 do serwerowych API.<\/p>\n","innerContent":["\n<p>W domy\u015blnym trybie, SvelteKit wyrenderuje pierwsz\u0105 stron\u0119 na serwerze, a nast\u0119pnie przeka\u017ce renderowanie do klienta. Mo\u017cemy jednak zmodyfikowa\u0107 to zachowanie zmieniaj\u0105c rozszerzenie pliku na <code>server.js<\/code>\/<code>server.svelte<\/code>. W takiej sytuacji SvelteKit zadba o to, \u017ceby taki kod zawsze wykonywany by\u0142 po stronie serwera. To z kolei daje nam mo\u017cliwo\u015b\u0107 prostego odnoszenia si\u0119 do serwerowych API.<\/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\">\/\/ src\/routes\/blog\/[id]\/+page.server.ts\nimport * as db from '$lib\/server\/database';\nimport type { PageLoad } from '.\/$types';\n \nexport const load = (async ({ params }) => {\n  return  await db.getPostById(params.id); \/\/ \ud83d\udc48 Note you can acces server API here\n}) satisfies PageLoad; <\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/blog\/[id]\/+page.server.ts\nimport * as db from '$lib\/server\/database';\nimport type { PageLoad } from '.\/$types';\n \nexport const load = (async ({ params }) => {\n  return  await db.getPostById(params.id); \/\/ \ud83d\udc48 Note you can acces server API here\n}) satisfies PageLoad; <\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Za pomoc\u0105 kilki zmiennych eksportowanych z komponentu mo\u017cemy te\u017c sterowa\u0107 strategi\u0105 renderowania <\/p>\n","innerContent":["\n<p>Za pomoc\u0105 kilki zmiennych eksportowanych z komponentu mo\u017cemy te\u017c sterowa\u0107 strategi\u0105 renderowania <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":[],"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ src\/routes\/about\/+page.svelte\n&lt;script lang=\"ts\">\n   export const prerender = true \/\/ render at build time\n   export const ssr = false \/\/ disable server rendering\n   export const csr = false \/\/ disable JavaScript hydration\n&lt;\/script>\n\n&lt;h1>About&lt;\/h1>\n&lt;p>This is a very cool blog of a very cool company&lt;\/p><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ src\/routes\/about\/+page.svelte\n&lt;script lang=\"ts\">\n   export const prerender = true \/\/ render at build time\n   export const ssr = false \/\/ disable server rendering\n   export const csr = false \/\/ disable JavaScript hydration\n&lt;\/script>\n\n&lt;h1>About&lt;\/h1>\n&lt;p>This is a very cool blog of a very cool company&lt;\/p><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Layout i obs\u0142uga b\u0142\u0119d\u00f3w<\/h3>\n","innerContent":["\n<h3>Layout i obs\u0142uga b\u0142\u0119d\u00f3w<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>SvelteKit ju\u017c w pierwszej wersji posiada funkcjonalno\u015bci na kt\u00f3re w innych frameworkach czekali\u015bmy nawet do wersji 13 (tak, na Ciebie patrz\u0119 Next.js \ud83d\ude08). Mowa tu oczywi\u015bcie o layouts i errors, kt\u00f3re osadzamy na dowolnym poziomie struktury katalog\u00f3w w plikach <code>+layout.svelte<\/code> i <code>+error.svelte<\/code>. Co wa\u017cne, podobnie jak w przypadku samych stron, tak i tutaj mo\u017cemy zapewni\u0107, \u017ce dany kod b\u0119dzie wykonywany tylko po stronie serwera odpowiednio modyfikuj\u0105c rozszerzenie pliku.<\/p>\n","innerContent":["\n<p>SvelteKit ju\u017c w pierwszej wersji posiada funkcjonalno\u015bci na kt\u00f3re w innych frameworkach czekali\u015bmy nawet do wersji 13 (tak, na Ciebie patrz\u0119 Next.js \ud83d\ude08). Mowa tu oczywi\u015bcie o layouts i errors, kt\u00f3re osadzamy na dowolnym poziomie struktury katalog\u00f3w w plikach <code>+layout.svelte<\/code> i <code>+error.svelte<\/code>. Co wa\u017cne, podobnie jak w przypadku samych stron, tak i tutaj mo\u017cemy zapewni\u0107, \u017ce dany kod b\u0119dzie wykonywany tylko po stronie serwera odpowiednio modyfikuj\u0105c rozszerzenie pliku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/blog\/+layout.svelte\n&lt;script lang=\"ts\">\n  import type { LayoutData } from '.\/$types';\n\n  export let tabs = [ \/*...*\/];\n&lt;\/script>\n\n&lt;h1>Settings&lt;\/h1>\n\n&lt;div class=\"submenu\">\n  {#each tabs as tab}\n    &lt;a href=\"{tab.href}\">{tab.title}&lt;\/a>\n  {\/each}\n&lt;\/div>\n\n&lt;slot>&lt;\/slot> \/\/ \ud83d\udc48 All the pages in \/blog will be rendered in place of this slot<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/blog\/+layout.svelte\n&lt;script lang=\"ts\">\n  import type { LayoutData } from '.\/$types';\n\n  export let tabs = [ \/*...*\/];\n&lt;\/script>\n\n&lt;h1>Settings&lt;\/h1>\n\n&lt;div class=\"submenu\">\n  {#each tabs as tab}\n    &lt;a href=\"{tab.href}\">{tab.title}&lt;\/a>\n  {\/each}\n&lt;\/div>\n\n&lt;slot>&lt;\/slot> \/\/ \ud83d\udc48 All the pages in \/blog will be rendered in place of this slot<\/code><\/pre>\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\">\/\/ src\/routes\/blog\/+error.svelte\n&lt;script>\n  import { page } from '$app\/stores';\n&lt;\/script>\n\n&lt;h1>{$page.status}: {$page.error.message}&lt;\/h1><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/blog\/+error.svelte\n&lt;script>\n  import { page } from '$app\/stores';\n&lt;\/script>\n\n&lt;h1>{$page.status}: {$page.error.message}&lt;\/h1><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Obs\u0142uga formularzy<\/h3>\n","innerContent":["\n<h3>Obs\u0142uga formularzy<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13225,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jdpz.jpeg\" alt=\"\" class=\"wp-image-13225\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/74jdpz.jpeg\" alt=\"\" class=\"wp-image-13225\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>SvelteKit oferuje te\u017c bardzo oryginalne (czyt. skopiowane od Remix) rozwi\u0105zanie je\u015bli chodzi o obs\u0142ug\u0119 formularzy. W pliku <code>+page.js<\/code> opr\u00f3cz funkcji <code>load()<\/code>, mo\u017cemy umie\u015bci\u0107 r\u00f3wnie\u017c obiekt <code>actions()<\/code>. B\u0119dzie on odpowiedzialny za przetwarzanie wype\u0142nionych formularzy.&nbsp;<\/p>\n","innerContent":["\n<p>SvelteKit oferuje te\u017c bardzo oryginalne (czyt. skopiowane od Remix) rozwi\u0105zanie je\u015bli chodzi o obs\u0142ug\u0119 formularzy. W pliku <code>+page.js<\/code> opr\u00f3cz funkcji <code>load()<\/code>, mo\u017cemy umie\u015bci\u0107 r\u00f3wnie\u017c obiekt <code>actions()<\/code>. B\u0119dzie on odpowiedzialny za przetwarzanie wype\u0142nionych formularzy.&nbsp;<\/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\">\/\/ src\/routes\/login\/+page.ts\nimport type { PageServerLoad, Actions } from '.\/$types';\n \nexport const load = (async ({ cookies }) => {\n  const user = await db.getUserFromSession(cookies.get('sessionid'));\n  return { user };\n}) satisfies PageServerLoad;\n \nexport const actions: Actions = {\n  login: async ({ cookies, request }) => {\n    const data = await request.formData();\n    const email = data.get('email');\n    const password = data.get('password');\n \n    const user = await db.getUser(email);\n    cookies.set('sessionid', await db.createSession(user));\n \n    return { success: true };\n  }\n};<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/login\/+page.ts\nimport type { PageServerLoad, Actions } from '.\/$types';\n \nexport const load = (async ({ cookies }) => {\n  const user = await db.getUserFromSession(cookies.get('sessionid'));\n  return { user };\n}) satisfies PageServerLoad;\n \nexport const actions: Actions = {\n  login: async ({ cookies, request }) => {\n    const data = await request.formData();\n    const email = data.get('email');\n    const password = data.get('password');\n \n    const user = await db.getUser(email);\n    cookies.set('sessionid', await db.createSession(user));\n \n    return { success: true };\n  }\n};<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nast\u0119pnie w pliku <code>page.svelte<\/code> mo\u017cemy doda\u0107 do formularza prametr <code>action<\/code>. W efekcie nasza aplikacja w momencie zaakceptowania formularza b\u0119dzie wysy\u0142a\u0107 zapytanie typu POST na serwer, gdzie wywo\u0142ywana b\u0119dzie opowiednia metoda z obiekty <code>actions<\/code>. Co w tym wyj\u0105tkowego? Ot\u00f3\u017c dzi\u0119ki zastosowaniu natywnych mechanizm\u00f3w przegl\u0105darki, taki formularz b\u0119dzie w pe\u0142ni funkcjonalny nawet po wy\u0142\u0105czeniu przez u\u017cytkownika JavaScript!<\/p>\n","innerContent":["\n<p>Nast\u0119pnie w pliku <code>page.svelte<\/code> mo\u017cemy doda\u0107 do formularza prametr <code>action<\/code>. W efekcie nasza aplikacja w momencie zaakceptowania formularza b\u0119dzie wysy\u0142a\u0107 zapytanie typu POST na serwer, gdzie wywo\u0142ywana b\u0119dzie opowiednia metoda z obiekty <code>actions<\/code>. Co w tym wyj\u0105tkowego? Ot\u00f3\u017c dzi\u0119ki zastosowaniu natywnych mechanizm\u00f3w przegl\u0105darki, taki formularz b\u0119dzie w pe\u0142ni funkcjonalny nawet po wy\u0142\u0105czeniu przez u\u017cytkownika JavaScript!<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/login\/+page.svelte\n&lt;script lang=\"ts\">\n  import type { PageData, ActionData } from '.\/$types';\n\n  export let form: ActionData;\n&lt;\/script>\n\n&lt;form method=\"POST\" action=\"?\/login\">\n  &lt;label>\n    Email\n    &lt;input name=\"email\" type=\"email\">\n  &lt;\/label>\n  &lt;label>\n    Password\n    &lt;input name=\"password\" type=\"password\">\n  &lt;\/label>\n  &lt;button>Log in&lt;\/button>\n\t&lt;button formaction=\"?\/register\">Register&lt;\/button>\n&lt;\/form>\n\n{#if form?.success}\n  &lt;p>Successfully logged in! Welcome back, {data.user.name}&lt;\/p>\n{\/if}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">\/\/ src\/routes\/login\/+page.svelte\n&lt;script lang=\"ts\">\n  import type { PageData, ActionData } from '.\/$types';\n\n  export let form: ActionData;\n&lt;\/script>\n\n&lt;form method=\"POST\" action=\"?\/login\">\n  &lt;label>\n    Email\n    &lt;input name=\"email\" type=\"email\">\n  &lt;\/label>\n  &lt;label>\n    Password\n    &lt;input name=\"password\" type=\"password\">\n  &lt;\/label>\n  &lt;button>Log in&lt;\/button>\n\t&lt;button formaction=\"?\/register\">Register&lt;\/button>\n&lt;\/form>\n\n{#if form?.success}\n  &lt;p>Successfully logged in! Welcome back, {data.user.name}&lt;\/p>\n{\/if}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Backend for Frontend<\/h3>\n","innerContent":["\n<h3>Backend for Frontend<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Skoro SvelteKit obs\u0142uguje zapytania POST przy okazji obs\u0142ugi formularzy, to dlaczego nie mia\u0142by obs\u0142ugiwa\u0107 r\u00f3wnie\u017c innych zapyta\u0144? Podobne pytanie zadali sobie tw\u00f3rcy frameworka i w efekcie w SvelteKit mo\u017cemy definiowa\u0107 w\u0142asne RESTowe endpointy<\/p>\n","innerContent":["\n<p>Skoro SvelteKit obs\u0142uguje zapytania POST przy okazji obs\u0142ugi formularzy, to dlaczego nie mia\u0142by obs\u0142ugiwa\u0107 r\u00f3wnie\u017c innych zapyta\u0144? Podobne pytanie zadali sobie tw\u00f3rcy frameworka i w efekcie w SvelteKit mo\u017cemy definiowa\u0107 w\u0142asne RESTowe endpointy<\/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\">\/\/ src\/routes\/api\/random-number\/+server.ts\n\nimport { error } from '@sveltejs\/kit';\nimport { random } from 'lodash\/es';\nimport type { RequestHandler } from '.\/$types';\n\n\/\/ You can call this endpoit with PATCH \/api\/random-number?min=5&amp;max=8\nexport const PATCH = (({ url }) => {\n  const value = random(url.searchParams.get('min'), url.searchParams.get('min'), true);\n  return new Response(String(value));\n}) satisfies RequestHandler;<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ src\/routes\/api\/random-number\/+server.ts\n\nimport { error } from '@sveltejs\/kit';\nimport { random } from 'lodash\/es';\nimport type { RequestHandler } from '.\/$types';\n\n\/\/ You can call this endpoit with PATCH \/api\/random-number?min=5&amp;max=8\nexport const PATCH = (({ url }) => {\n  const value = random(url.searchParams.get('min'), url.searchParams.get('min'), true);\n  return new Response(String(value));\n}) satisfies RequestHandler;<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13229,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-63.jpeg\" alt=\"\" class=\"wp-image-13229\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-63.jpeg\" alt=\"\" class=\"wp-image-13229\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Preloading&nbsp;<\/h3>\n","innerContent":["\n<h3>Preloading&nbsp;<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jednym z bardzo popularnych wzorc\u00f3w optymalizuj\u0105cych czas \u0142adowania JavaScript jest \u0142adowanie tylko kodu potrzebnego do wyrenderowania obecnej strony. Niestety odbywa si\u0119 to kosztem do\u0142adowywania kolejnych plik\u00f3w w momencie kiedy u\u017cytkownik chce przej\u015b\u0107 na inn\u0105 stron\u0119. W takiej sytuacji u\u017cytkownik zapewne do\u015bwiadczy lekkiego chrupni\u0119cia. I w takiej sytuacji SvelteKit oferuje lekarstwo. Anotuj\u0105c odpowiednio element <code>&lt;a&gt;<\/code> Svelte rozpocznie \u0142adowanie potrzebnego kodu i danych ju\u017c w momencie kiedy kursor u\u017cytkownika zacznie zmierza\u0107 w jego kierunku.<\/p>\n","innerContent":["\n<p>Jednym z bardzo popularnych wzorc\u00f3w optymalizuj\u0105cych czas \u0142adowania JavaScript jest \u0142adowanie tylko kodu potrzebnego do wyrenderowania obecnej strony. Niestety odbywa si\u0119 to kosztem do\u0142adowywania kolejnych plik\u00f3w w momencie kiedy u\u017cytkownik chce przej\u015b\u0107 na inn\u0105 stron\u0119. W takiej sytuacji u\u017cytkownik zapewne do\u015bwiadczy lekkiego chrupni\u0119cia. I w takiej sytuacji SvelteKit oferuje lekarstwo. Anotuj\u0105c odpowiednio element <code>&lt;a&gt;<\/code> Svelte rozpocznie \u0142adowanie potrzebnego kodu i danych ju\u017c w momencie kiedy kursor u\u017cytkownika zacznie zmierza\u0107 w jego kierunku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;a data-sveltekit-preload-data=\"hover\" href=\"\/page-A\">\n  This page code will load when cursor hovers over the link\n&lt;\/a>\n\n&lt;a data-sveltekit-preload-data=\"viewport\" href=\"\/page-B\">\n  This page code will load when the link enters the viewport\n&lt;\/a><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">&lt;a data-sveltekit-preload-data=\"hover\" href=\"\/page-A\">\n  This page code will load when cursor hovers over the link\n&lt;\/a>\n\n&lt;a data-sveltekit-preload-data=\"viewport\" href=\"\/page-B\">\n  This page code will load when the link enters the viewport\n&lt;\/a><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Deployment SvelteKit<\/h3>\n","innerContent":["\n<h3>Deployment SvelteKit<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Rich Harris ju\u017c od d\u0142u\u017cszego czasu jest pe\u0142noetatowym pracownikiem Vercela - firmy rozwijaj\u0105cej Next.js i zarabiaj\u0105cej g\u0142\u00f3wnie na swojej chmurze. Nie dziwi wi\u0119c, \u017ce SvelteKit 1.0 ju\u017c od dnia zero mo\u017cna jednym klikni\u0119ciem deploy\u2019owa\u0107 na chmur\u0119 Vercela. Na szcz\u0119\u015bcie nie jest to vendor lock in jak ten znany z Next.js i SvelteKit bez wi\u0119kszych problem\u00f3w hostowa\u0107 mo\u017cecie na dowolnej chmurze obs\u0142uguj\u0105cej Node.js<\/p>\n","innerContent":["\n<p>Rich Harris ju\u017c od d\u0142u\u017cszego czasu jest pe\u0142noetatowym pracownikiem Vercela - firmy rozwijaj\u0105cej Next.js i zarabiaj\u0105cej g\u0142\u00f3wnie na swojej chmurze. Nie dziwi wi\u0119c, \u017ce SvelteKit 1.0 ju\u017c od dnia zero mo\u017cna jednym klikni\u0119ciem deploy\u2019owa\u0107 na chmur\u0119 Vercela. Na szcz\u0119\u015bcie nie jest to vendor lock in jak ten znany z Next.js i SvelteKit bez wi\u0119kszych problem\u00f3w hostowa\u0107 mo\u017cecie na dowolnej chmurze obs\u0142uguj\u0105cej Node.js<\/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:\/\/svelte.dev\/blog\/announcing-sveltekit-1.0\">https:\/\/svelte.dev\/blog\/announcing-sveltekit-1.0<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/svelte.dev\/blog\/announcing-sveltekit-1.0\">https:\/\/svelte.dev\/blog\/announcing-sveltekit-1.0<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Vite 4.0<\/h2>\n","innerContent":["\n<h2>2. Vite 4.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vite jest jedn\u0105 z najszybciej wschodz\u0105cych gwiazd naszej frontendowej spo\u0142eczno\u015bci. Pocz\u0105tkowo by\u0142 on narz\u0119dziem dedykowanym do budowania aplikacji napisanych we Vue. Rewolucja nadesz\u0142a dopiero wraz z opublikowaniem Vite 2.0, kiedy to sta\u0142 si\u0119 on narz\u0119dziem framework-agnostic. Szybko\u015b\u0107 narz\u0119dzia robi\u0142a wra\u017cenie, wi\u0119c nic dziwnego, \u017ce z czasem zacz\u0119\u0142a kusi\u0107 coraz wi\u0119cej React deweloper\u00f3w i nie tylko. Vite sta\u0142 si\u0119 tak popularny, \u017ce bardzo szybko skanalizowa\u0142 w\u0142a\u015bciwie ca\u0142\u0105 swoj\u0105 konkurencj\u0119 (RIP Snowplow).&nbsp;<\/p>\n","innerContent":["\n<p>Vite jest jedn\u0105 z najszybciej wschodz\u0105cych gwiazd naszej frontendowej spo\u0142eczno\u015bci. Pocz\u0105tkowo by\u0142 on narz\u0119dziem dedykowanym do budowania aplikacji napisanych we Vue. Rewolucja nadesz\u0142a dopiero wraz z opublikowaniem Vite 2.0, kiedy to sta\u0142 si\u0119 on narz\u0119dziem framework-agnostic. Szybko\u015b\u0107 narz\u0119dzia robi\u0142a wra\u017cenie, wi\u0119c nic dziwnego, \u017ce z czasem zacz\u0119\u0142a kusi\u0107 coraz wi\u0119cej React deweloper\u00f3w i nie tylko. Vite sta\u0142 si\u0119 tak popularny, \u017ce bardzo szybko skanalizowa\u0142 w\u0142a\u015bciwie ca\u0142\u0105 swoj\u0105 konkurencj\u0119 (RIP Snowplow).&nbsp;<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W minionym tygodniu opublikowany zosta\u0142 Vite 4.0. Jest to o tyle zaskakuj\u0105ce, \u017ce niespe\u0142na p\u00f3\u0142 roku temu ukaza\u0142 si\u0119 Vite 3.0. Pami\u0119tajcie jednak, \u017ce Vite przestrzega semantic versioning. W tym wypadku du\u017cy numerek jest zwi\u0105zany przede wszystkim z braking changes, a nie nowymi funkcjonalno\u015bciami. \u0179r\u00f3d\u0142em breaking changes jest przede wszystkim przesiadka z Rollup 2.0 na Rollup 3.0.<\/p>\n","innerContent":["\n<p>W minionym tygodniu opublikowany zosta\u0142 Vite 4.0. Jest to o tyle zaskakuj\u0105ce, \u017ce niespe\u0142na p\u00f3\u0142 roku temu ukaza\u0142 si\u0119 Vite 3.0. Pami\u0119tajcie jednak, \u017ce Vite przestrzega semantic versioning. W tym wypadku du\u017cy numerek jest zwi\u0105zany przede wszystkim z braking changes, a nie nowymi funkcjonalno\u015bciami. \u0179r\u00f3d\u0142em breaking changes jest przede wszystkim przesiadka z Rollup 2.0 na Rollup 3.0.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13233,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-64.jpeg\" alt=\"\" class=\"wp-image-13233\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-64.jpeg\" alt=\"\" class=\"wp-image-13233\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>We wst\u0119pie do tej sekcji napisa\u0142em, \u017ce Vite skanalizowa\u0142 ca\u0142\u0105 swoj\u0105 konkurencj\u0119. W tym roku pojawi\u0142 si\u0119 jednak nowy pretendent do korony - Turbopack (napisany w Rust przez by\u0142ego tw\u00f3rc\u0119 Webpack). Na razie znajduje si\u0119 on we wczesnej alfie i jak donosz\u0105 pierwsi \u015bmia\u0142kowie z Twitter nie dzia\u0142a jeszcze najlepiej. Nie przeszkodzi\u0142o to jednak tw\u00f3rcom pochwali\u0107 si\u0119, \u017ce dzia\u0142a on prawie 4x szybciej ni\u017c Vite. Evan You (tw\u00f3rca Vue i Vite) szybko zacz\u0105\u0142 przygl\u0105da\u0107 si\u0119 tym liczbom. Jak si\u0119 okaza\u0142o wi\u0119kszo\u015b\u0107 z tej przewagi wynika\u0142a z zastosowania SWC zamiast Babela i lekkiego przypudrowania wynik\u00f3w. Kurz po \u201caferze wydajno\u015bciowej\u201d troch\u0119 ju\u017c opad\u0142, a Vite 4.0 dodaje wsparcie dla SWC. Jestem ciekaw jak teraz prezentuje si\u0119 zestawienie Vite i Turbopack.<\/p>\n","innerContent":["\n<p>We wst\u0119pie do tej sekcji napisa\u0142em, \u017ce Vite skanalizowa\u0142 ca\u0142\u0105 swoj\u0105 konkurencj\u0119. W tym roku pojawi\u0142 si\u0119 jednak nowy pretendent do korony - Turbopack (napisany w Rust przez by\u0142ego tw\u00f3rc\u0119 Webpack). Na razie znajduje si\u0119 on we wczesnej alfie i jak donosz\u0105 pierwsi \u015bmia\u0142kowie z Twitter nie dzia\u0142a jeszcze najlepiej. Nie przeszkodzi\u0142o to jednak tw\u00f3rcom pochwali\u0107 si\u0119, \u017ce dzia\u0142a on prawie 4x szybciej ni\u017c Vite. Evan You (tw\u00f3rca Vue i Vite) szybko zacz\u0105\u0142 przygl\u0105da\u0107 si\u0119 tym liczbom. Jak si\u0119 okaza\u0142o wi\u0119kszo\u015b\u0107 z tej przewagi wynika\u0142a z zastosowania SWC zamiast Babela i lekkiego przypudrowania wynik\u00f3w. Kurz po \u201caferze wydajno\u015bciowej\u201d troch\u0119 ju\u017c opad\u0142, a Vite 4.0 dodaje wsparcie dla SWC. Jestem ciekaw jak teraz prezentuje si\u0119 zestawienie Vite i Turbopack.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13237,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-65.jpeg\" alt=\"\" class=\"wp-image-13237\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-65.jpeg\" alt=\"\" class=\"wp-image-13237\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Najwi\u0119cej komentarzy na Reddicie pod postem og\u0142aszaj\u0105cym Vite 4.0 dotyczy\u0142o zabawy w rozpoznawanie logo na jednej z grafik w po\u015bcie. Ja te\u017c zapraszam Was do tej zabawy - ile projekt\u00f3w na poni\u017cszej grafice jeste\u015bcie w stanie rozpozna\u0107?&nbsp;<\/p>\n","innerContent":["\n<p>Najwi\u0119cej komentarzy na Reddicie pod postem og\u0142aszaj\u0105cym Vite 4.0 dotyczy\u0142o zabawy w rozpoznawanie logo na jednej z grafik w po\u015bcie. Ja te\u017c zapraszam Was do tej zabawy - ile projekt\u00f3w na poni\u017cszej grafice jeste\u015bcie w stanie rozpozna\u0107?&nbsp;<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"id":13235,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-1024x513.png\" alt=\"\" class=\"wp-image-13235\"\/><figcaption>M\u00f3j wynik to 31\/50 \ud83c\udfc6<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/ecosystem-vite4-1024x513.png\" alt=\"\" class=\"wp-image-13235\"\/><figcaption>M\u00f3j wynik to 31\/50 \ud83c\udfc6<\/figcaption><\/figure>\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:\/\/vitejs.dev\/blog\/announcing-vite4.html\">https:\/\/vitejs.dev\/blog\/announcing-vite4.html<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/vitejs.dev\/blog\/announcing-vite4.html\">https:\/\/vitejs.dev\/blog\/announcing-vite4.html<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13213","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=13213"}],"version-history":[{"count":21,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13213\/revisions"}],"predecessor-version":[{"id":13252,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13213\/revisions\/13252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/13243"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=13213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=13213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=13213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}