Svelte Prototype

A demonstration application showcasing core Svelte features including reactive declarations, component props, event handling, conditional rendering, list rendering, two-way binding, stores, and transitions.

Project Structure

svelte-prototype/
├── src/
│   ├── components/       # Svelte components
│   ├── App.svelte        # Root component
│   ├── main.js           # Application entry point
│   └── app.css           # Global styles
├── tests/
│   ├── unit/             # Unit tests
│   └── properties/       # Property-based tests
├── index.html            # HTML entry point
├── package.json          # Dependencies and scripts
├── vite.config.js        # Vite configuration
├── vitest.config.js      # Vitest configuration
└── svelte.config.js      # Svelte configuration

Setup

Install dependencies:

npm install

Development

Run the development server:

npm run dev

Testing

Run all tests:

npm test

Run tests with UI:

npm run test:ui

Build

Build for production:

npm run build

Preview production build:

npm run preview

Testing Strategy

This project uses a dual testing approach:

• Unit Tests (Vitest + @testing-library/svelte): Test specific examples and edge cases
• Property-Based Tests (fast-check): Verify universal behaviors across many generated inputs

Features Demonstrated

1. Reactive Declarations: Automatic updates using $: syntax
2. Component Props: Parent-child communication
3. Event Handling: Click, input, and mouseover events
4. Conditional Rendering: {#if}, {:else}, {:else if} blocks
5. List Rendering: {#each} blocks with keyed items
6. Two-Way Binding: bind:value and bind:checked
7. Stores: Shared state management with writable stores
8. Transitions: Fade, slide, and fly animations