Counter with Reactive Statement - Svelte Typing CST Test
Loading…
Counter with Reactive Statement — Svelte Code
Uses a reactive statement to log counter changes in Svelte.
<script>
let count = 0;
$: console.log('Counter changed:', count);
function increment() { count += 1; }
function decrement() { count -= 1; }
</script>
<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>Svelte Language Guide
Svelte is a modern, component-based JavaScript framework that shifts work from the browser to the build step. Instead of using a virtual DOM, Svelte compiles components into highly optimized vanilla JavaScript, delivering faster performance and smaller bundles.
Primary Use Cases
- ▸Single-page applications (SPAs)
- ▸Highly interactive UI widgets
- ▸Performance-critical front-end apps
- ▸Progressive web apps (PWAs)
- ▸Embeddable components for websites
Notable Features
- ▸Compile-time reactivity (no virtual DOM)
- ▸Component-based architecture
- ▸SvelteKit for routing, SSR, and full-stack apps
- ▸Built-in stores for state management
- ▸CSS scoped by default
Origin & Creator
Created in 2016 by Rich Harris, a graphics editor at The Guardian, aiming to simplify reactive UI development.
Industrial Note
Svelte is highly suited for performance-sensitive web apps, small-to-medium SPAs, interactive widgets, and animation-heavy projects.
More Svelte Typing Exercises
Svelte Counter ComponentSvelte Counter with LocalStorageSvelte Counter with Theme Toggle and Computed ClassSvelte Counter with Derived StateSvelte Counter with Event DispatchSvelte Counter with Slot ControlsSvelte Counter with Reactive ThemeSvelte Counter with Lifecycle HookSvelte Counter with Two-way Binding