Counter with Theme Toggle and Computed Class - Svelte Typing CST Test
Loading…
Counter with Theme Toggle and Computed Class — Svelte Code
Dynamically applies theme classes in Svelte using a computed expression.
<script>
let count = 0;
let isDark = false;
function increment() { count += 1; }
function decrement() { count -= 1; }
function toggleTheme() { isDark = !isDark; }
</script>
<div class={isDark ? 'dark-theme' : 'light-theme'}>
<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={toggleTheme}>Toggle Theme</button>
</div>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.