Svelte 5 i Angular 2024

Svelte 5 Runes — nowy model reaktywności?

Svelte 5 (2024-10): przepisane wnętrze. Runes = nowe prymitywy reaktywności. Zastępują reaktywność Svelte 4. Bardziej explicite. Rune $state: let count = $state(0). Zamiast: let count = 0. Reaktywne śledzenie. Działa w .svelte i .svelte.ts. Rune $derived: const doubled = $derived(count * 2). Zamiast: $: doubled = count * 2. Memoizowany. Odświeżany gdy zależności się zmieniają. $derived.by: const complex = $derived.by(() => { return items.filter(i => i.active).length }). Dla złożonych obliczeń. Rune $effect: $effect(() => { console.log('count changed:', count) }). Zamiast: $: { ... }. Cleanup: $effect(() => { const sub = subscribe(). return () => sub.unsubscribe() }). $effect.pre: przed DOM update. Rune $props: let {name, age = 18}: {name: string, age?: number} = $props(). Zamiast: export let name. TypeScript-friendly. Rest props: let {class: className, ...rest} = $props(). Rune $bindable: let {value = $bindable()}: {value: number} = $props(). Dwukierunkowe z rodzicem. Rune $inspect: $inspect(count) — log zmian w dev. Kiedy reactivity: Svelte 5 track per-field. Nie cały obiekt. let user = $state({name: '', email: ''}). user.name = 'Jan' — reaktywne.

Svelte 5 — Snippets, Events i migracja ze Svelte 4?

Snippets (Svelte 5): jak slots ale potężniejsze. Reużywalne fragmenty HTML. {#snippet item(data)} li {data.name} /li {/snippet}. Wywołanie: {@render item(myData)}. Props snippet: let {item}: {item: Snippet string} = $props(). {@render item('Hello')}. Zastępuje sloty: slot name='header' -> Snippet. Events (Svelte 5): brak createEventDispatcher. HTML event attributes: button onclick={handleClick}. Niższy poziom niż on:click. Spread events: div {...rest}. Event delegation zmienione. Migracja Svelte 4 -> 5: export let prop -> let {prop} = $props(). let count = 0 + reactywność -> let count = $state(0). $: derived -> const derived = $derived(). $: effect -> $effect(() => {}). on:click -> onclick. createEventDispatcher -> callback props. Narzędzie migracji: npx sv migrate svelte-5-runes. Automatyczna migracja. Nie 100% — sprawdź ręcznie. Svelte 5 mode: Svelte 4 i 5 syntax razem (na razie). Stopniowa migracja. Legacy mode: opcjonalnie włącz. SvelteKit 2 + Svelte 5: kompatybilne. Bez zmian konfiguracji. Vite 6 wbudowany. TypeScript: Svelte 5 ma lepszy TS support. Runes auto-typed. Props z generics. Snippets typed. Wydajność: Svelte 5 szybszy od 4. Mniej kodu generowanego. Fine-grained updates.

Angular 18/19 — Signals stable, deferrable views i nowy control flow?

Angular 18 (2024-05): Signals API stabilne. Zoneless (experimental). Angular 19 (2024-11): further improvements. Signals (stable od Angular 17): import {signal, computed, effect} from '@angular/core'. counter = signal(0). doubled = computed(() => this.counter() * 2). increment() { this.counter.update(c => c + 1) }. effect(() => { console.log('counter:', this.counter()) }). Signal Inputs (Angular 17.1): @Input() jest zastąpiony. name = input('default'). name = input.required(). id = input(0, {transform: numberAttribute}). Signal Outputs (Angular 17.3): clicked = output(). clicked = output EventEmitter-free. Model inputs: model = model('value'). Two-way binding. Nowy Control Flow (stable Angular 17): @if (isLoggedIn) { UserProfile / } @else { Login / }. @for (item of items; track item.id) { ItemComponent [item]='item' / } @empty { div Brak danych /div }. @switch (status) { @case ('active') { ... } @default { ... } }. Deferrable Views: @defer (on viewport) { HeavyComponent / } @placeholder { div Ładowanie... /div } @loading (minimum 500ms) { Spinner / } @error { ErrorComp / }. Triggers: on idle, on timer(2s), on interaction, on hover. Zoneless (Angular 18+): bez Zone.js. Lepsza wydajność. Manual change detection. provideExperimentalZonelessChangeDetection().

Angular 19 — Resource API, linkedSignal i standalone domyślnie?

Angular 19 (2024-11): standalone domyślnie. Nie NgModule. Resource API (experimental): import {resource} from '@angular/core'. userResource = resource({request: () => this.userId(), loader: async ({request: id}) => { return await fetch('/api/user/' + id).then(r => r.json()) }}). userResource.value() — Signal z danymi. userResource.status() — 'idle'|'loading'|'resolved'|'error'. userResource.reload() — refetch. Jak TanStack Query ale wbudowane. httpResource (experimental): import {httpResource} from '@angular/common/http'. users = httpResource('/api/users'). Automatyczny fetch + Signal. linkedSignal (Angular 19): const source = signal(0). const linked = linkedSignal(() => source() * 2). Podobny do computed ale mutowalny. Można ustawić. Różni się od computed. Lazy routing signals: Angular 19 router signals. toSignal(router.events). Signal-based forms (planowane): FormField z signal. Nie reaktywne forms NG. Hydration improvements: deferred hydration. Incremental. Lepsze niż Angular 17. Standalone: od Angular 19 scaffold generuje standalone. NgModule nadal działa. Nie jest usunięty. ng generate component: --standalone domyślnie. Angular 18 SSR: Angular Universal wbudowany. Hydration stable. @angular/ssr zamiast separate package. angular.json: prerender: true. provideClientHydration().

SvelteKit 2 — routing, load functions i adaptery 2024?

SvelteKit 2 (2024-01): stabilny. Vite 5 wbudowany. Svelte 5 kompatybilny. Routing: src/routes/ struktura. +page.svelte — strona. +layout.svelte — layout. +page.server.ts — server-only load. +page.ts — universal load. +error.svelte — error boundary. Load functions: export async function load({params, fetch, cookies, locals, setHeaders}): Promise PageData { const data = await fetch('/api/data').then(r => r.json()). return {data} }. Server load: cookies, locals (auth). Nie wysyłany do klienta (secret). Universal load: client + server. Bez cookies. Actions: export const actions: Actions = {default: async ({request, cookies}) => { const data = await request.formData(). return {success: true} }}. Form: form method='POST' use:enhance. Progressive enhancement. Adapter pattern: @sveltejs/adapter-vercel. @sveltejs/adapter-cloudflare. @sveltejs/adapter-node. @sveltejs/adapter-static. adapter-auto — wykrywa automatycznie. Hooks: src/hooks.server.ts. handle({event, resolve}). handleFetch. handleError. Auth: Lucia Auth + SvelteKit. Better Auth. Auth.js (authjs). Preloading: data-sveltekit-preload-data='hover'. Prefetch na hover. Szybsza nawigacja. deploy: npm run build. Output: .svelte-kit/output. Adapter zmienia format. Vitest wbudowany: vitest.config.ts.

Wyślij zapytanie