SvelteKit

Ar trebui să creezi o pagină de rută numită +page.svelte ca punct principal de intrare al aplicației tale SvelteKit. Codul tău Svelte ar trebui să fie verificat folosind ESLint cu configurația recomandată pentru Svelte.

Fișier de intrare

Acest șablon urmează sistemul de rutare bazat pe fișiere al SvelteKit. Fișierele soluției sunt:

• src/routes/+page.svelte — componenta de pagină pentru ruta rădăcină.
• svelte.config.js — configurația SvelteKit care conectează adaptorul auto și vitePreprocess (preîncărcat, doar în citire).

Rutele suplimentare urmează același model: adaugă dosare imbricate sub src/routes/ și adaugă un +page.svelte (și opțional +layout.svelte, +page.server.js etc.) pentru fiecare rută.

Versiune

Rulează pe Node.js v22.0.0 cu Svelte 5.

Limbi suportate

Javascript

Cadru de testare

Vitest

Memento-uri speciale și detalii de implementare

• Testele folosesc @testing-library/svelte pentru a monta componentele și a face aserțiuni pe rezultatul randat.
• Fișierele specifice SvelteKit încep toate cu +: +page.svelte (UI), +page.js / +page.server.js (încărcarea datelor), +layout.svelte (aspect partajat), +server.js (puncte terminale API).
• Acest șablon rulează pe Svelte 5. Poți folosi noile rune ($state, $derived, $effect) sau sintaxa reactivă clasică — ambele sunt suportate.

Exemplu cu Svelte Testing Library:

import { render, screen } from '@testing-library/svelte';
import Page from './src/routes/+page.svelte';

describe('Page', () => {
  test("renders 'Hello, World!'", () => {
    render(Page);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Biblioteci incluse

• @sveltejs/kit
• @sveltejs/adapter-auto
• @sveltejs/vite-plugin-svelte
• svelte
• vite
• @testing-library/jest-dom
• @testing-library/svelte
• @testing-library/user-event
• jsdom
• vitest

Cum se depanează

Depanarea codului SvelteKit este similară cu depanarea Svelte/JavaScript. Folosește console.log() în interiorul componentelor, funcțiilor de încărcare sau hook-urilor pentru a inspecta valorile la rulare. Reține că +page.server.js și +server.js rulează pe server (jurnalele merg în terminal), în timp ce +page.svelte rulează în ambele locuri — mai întâi pe server în timpul SSR, poi în browser după hidratare.

Pași pentru depanare folosind jurnalele din consolă (Console Logs)

1. Identifică zona cu probleme: Localizează componenta, funcția de încărcare sau punctul terminal pe care îl suspectezi că nu funcționează corect.

2. Introdu instrucțiuni console.log(): Adaugă apeluri de jurnalizare înainte și după codul suspect. Jurnalele din +page.svelte în timpul SSR apar în terminal; jurnalele de după hidratare (manipulatori de evenimente, $effect) apar în consola browserului.

3. Verifică rezultatul testelor (Results Output)

4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona Preview pentru a verifica ieșirea din consolă sau deschide consola browserului.

5. Analizează rezultatul: Compară jurnalele cu interfața de utilizator randată pentru a depista stările învechite, fluxul incorect de date sau lipsa reactivității.

Iată un exemplu despre cum să folosești console.log() pentru depanare în SvelteKit:

<script>
  let count = 0;

  function handleClick() {
    console.log('clicked, current count:', count); // Log button click
    count += 1;
  }

  $: console.log('Reactive log, count is now:', count);
</script>

<button on:click={handleClick}>Count: {count}</button>