Counter with Lifecycle Hook - Svelte Typing CST Test
Loading…
Counter with Lifecycle Hook — Svelte Code
Uses Svelte's onMount lifecycle hook to log initial counter state.
<script>
import { onMount } from 'svelte';
let count = 0;
onMount(() => { console.log('Mounted with count =', 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 Reactive StatementSvelte 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 Two-way Binding