SvelteKit (TypeScript)

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 (linted) folosind ESLint cu configurația recomandată pentru Svelte și TypeScript.

Fișier de intrare

Acest șablon urmează sistemul de rutare bazat pe fișiere (filesystem routing) din SvelteKit. Fișierele soluției sunt:

• src/routes/+page.svelte — componenta de pagină pentru ruta rădăcină. Folosește <script lang="ts"> pentru a activa TypeScript în interiorul componentei.
• svelte.config.js — configurația SvelteKit care conectează adaptorul auto și vitePreprocess (preîncărcat, doar pentru citire).

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

Versiune

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

Limbi suportate

TypeScript

Framework de testare

Vitest

Mențiuni 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.ts / +page.server.ts (încărcarea datelor), +layout.svelte (layout comun), +server.ts (endpoint-uri API).
• Acest șablon rulează pe Svelte 5. Poți folosi noile rune ($state, $derived, $effect) sau sintaxa reactivă clasică — ambele sunt suportate.
• Marchează blocurile <script> cu lang="ts" pentru a activa verificarea tipurilor și pentru a folosi adnotări de tip în interiorul componentei.

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
• typescript
• vitest

Cum se face depanarea

Depanarea SvelteKit cu TypeScript este similară cu depanarea Svelte/TypeScript. 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.ts și +server.ts rulează pe server (jurnalele merg în terminal), în timp ce +page.svelte rulează în ambele părți — mai întâi pe server în timpul SSR, apoi în browser după hidratare.

Pași pentru depanare folosind jurnalele din consolă

1. Identifică zona cu probleme: Localizează componenta, funcția de încărcare sau endpoint-ul pe care îl suspectezi de un comportament incorect.

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 (handlere de evenimente, $effect) apar în consola browserului.

3. Verifică rezultatul testelor (Results Output)

4. Folosește pictograma de depanare din zona Preview: Fă clic pe pictograma de depanare din zona Preview pentru a verifica rezultatul consolei, sau deschide consola browserului tău.

5. Analizează rezultatul: Compară jurnalele cu interfața grafică randată pentru a depista stările învechite, fluxul incorect de date sau reactivitatea lipsă.

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

<script lang="ts">
  let count: number = 0;

  function handleClick(): void {
    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>