SolidJS (TypeScript)

Ar trebui să creezi o componentă funcțională numită App ca punct principal de intrare al aplicației tale SolidJS. Codul tău SolidJS ar trebui să fie verificat folosind ESLint cu configurația recomandată pentru SolidJS și TypeScript.

Fișierul de pornire

Fișierul componentei este App.tsx. Fișierul main.tsx (preîncărcat, doar în citire) montează componenta ta App în pagină folosind solid-js/web:

import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root') as HTMLElement);

Versiune

Rulează pe Node.js v20.0.0

Limbi acceptate

TypeScript

Framework de testare

Vitest

Mențiuni speciale și detalii de implementare

• Testele sunt scrise cu @solidjs/testing-library, care împachetează componentele SolidJS pentru o redare favorabilă aserțiunilor.
• render acceptă o funcție care returnează JSX (() => <App />) — acest lucru corespunde modului în care SolidJS montează componentele și oferă testului aceeași rădăcină reactivă pe care ar avea-o aplicația reală.
• Folosește primitivele SolidJS (createSignal, createEffect, createMemo) în locul hook-urilor în stil React — acestea par similare, dar se comportă diferit (reactivitate fină, fără re-randări). Tipizează semnalele în mod explicit atunci când tipul dedus nu este suficient de precis: createSignal<User | null>(null).

Exemplu cu @solidjs/testing-library:

import { render, screen } from '@solidjs/testing-library';
import App from './App';

describe('App', () => {
  test("says 'Hello, World!'", () => {
    render(() => <App />);
    const node = screen.queryByText('Hello, World!');
    expect(node).toBeInTheDocument();
  });
});

Biblioteci incluse

• solid-js
• @solidjs/testing-library
• @testing-library/jest-dom
• @testing-library/user-event
• jsdom
• typescript
• vite
• vite-plugin-solid
• vitest

Provocări write-tests

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

• Runner de teste: Vitest + @solidjs/testing-library
• Aceeași configurare ca la SolidJS, cu fișiere de test *.spec.tsx.
• Pentru input-urile legate cu onInput, folosește fireEvent.input(input, { target: { value } }).

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum se face depanarea

Depanarea SolidJS cu TypeScript este similară cu depanarea JavaScript. Folosește console.log() pentru a inspecta valorile semnalelor în interiorul createEffect sau direct în interiorul expresiilor JSX și bazează-te pe verificatorul de tipuri pentru a depista problemele înainte de execuție.

Pași pentru depanare folosind loguri în consolă

1. Identifică zona cu probleme: Localizează componenta sau semnalul pe care vrei să le inspectezi.

2. Introdu instrucțiuni console.log(): Înregistrează valorile semnalelor în interiorul createEffect astfel încât să se reexecute ori de câte ori se schimbă semnalul, sau înregistrează-le direct în JSX.

3. Verifică rezultatul testelor (Results Output)

4. Folosește pictograma de depanare (Debug) din zona de previzualizare: Fă clic pe pictograma de depanare din zona de Previzualizare pentru a verifica rezultatul din consolă sau deschide consola browserului.

5. Analizează rezultatul: Compară logurile cu interfața grafică redată pentru a depista semnalele învechite sau actualizările omise.

Iată un exemplu de utilizare a console.log() pentru depanare în SolidJS cu TypeScript:

import { createSignal, createEffect } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal<number>(0);

  createEffect(() => {
    console.log('count is now', count()); // Log every time count changes
  });

  const handleClick = (): void => {
    console.log('Button clicked, current count:', count());
    setCount((prev) => prev + 1);
  };

  return <button onClick={handleClick}>{count()}</button>;
}