Events in Svelte are handled using the on: directive. Example: <button on:click={handleClick}>. Supports modifiers like preventDefault using |. Example: <form on:submit|preventDefault={handleSubmit}>.
Two-way binding is implemented using the bind: directive. Common with form elements. Example: <input bind:value={name}>. Supports binding to different properties like checked for checkboxes.
Advanced patterns include compound components, render props, higher-order components. Handle complex state sharing. Support flexible component composition. Implement reusable logic.
Svelte is a compiler that creates reactive JavaScript modules. Unlike React or Vue that do most of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app, resulting in highly optimized vanilla JavaScript with minimal runtime overhead.
Component composition in Svelte involves building larger components from smaller ones. Components can be imported and used like HTML elements. Example: import Child from './Child.svelte'; then use <Child /> in template.
Styles are added in the <style> block and are automatically scoped to the component. Global styles can be added using :global() modifier. Supports regular CSS with automatic vendor prefixing.
Component initialization is handled in the <script> section. Can use onMount lifecycle function for side effects. Top-level code runs on component creation. Support async initialization using IIFE or onMount.
Reactive statements ($:) automatically re-run when dependencies change. Used for derived calculations and side effects. Support multiple dependencies. Handle complex reactive computations.
Lifecycle methods include onMount, onDestroy, beforeUpdate, afterUpdate. Handle component initialization, cleanup, updates. Support async operations. Manage side effects.
Optimize rendering using keyed each blocks, memoization, lazy loading. Implement virtual scrolling. Handle large lists. Optimize reactive updates. Monitor performance metrics.
Error boundaries catch and handle component errors. Implement error recovery. Support fallback UI. Handle error reporting. Manage error state.
A Svelte component is created in a .svelte file with three main sections: <script> for JavaScript logic, <style> for component-scoped CSS, and the template section for HTML markup. Styles are automatically scoped to the component.
Reactive variables in Svelte are declared using the let keyword in the <script> section. Any variables used in the template are automatically reactive. Example: let count = 0. When count changes, the UI automatically updates.
The $ prefix in Svelte is a special syntax that marks a statement as reactive. It automatically re-runs the code whenever any referenced values change. It's commonly used with derived values and store subscriptions.
Svelte uses #if, :else if, and :else blocks for conditional rendering. Example: {#if condition}...{:else if otherCondition}...{:else}...{/if}. These blocks can contain any valid HTML or component markup.
Derived stores are created using derived() function, combining one or more stores into a new one. Values update automatically when source stores change. Support synchronous and asynchronous derivation.
Actions are reusable functions that run when an element is created. Used with use: directive. Can return destroy function. Example: <div use:tooltip={params}>. Support custom DOM manipulation.
Component interfaces use TypeScript with props and events. Define prop types using export let prop: Type. Support interface inheritance. Handle optional props and default values.
Advanced reactivity includes custom stores, derived state, reactive declarations. Handle complex dependencies. Implement reactive cleanup. Support async reactivity.
Svelte uses the #each block for iteration. Syntax: {#each items as item, index}...{/each}. Supports destructuring, key specification, and else blocks for empty arrays. Example: {#each users as {id, name} (id)}.
The export keyword in Svelte is used to declare props that a component can receive. Example: export let name; Makes the variable available as a prop when using the component: <Component name='value' />.
Dynamic components can be loaded using svelte:component directive. Example: <svelte:component this={dynamicComponent} />. Support lazy loading using import(). Handle loading states.
Component composition patterns include slots, context API, event forwarding. Support nested components, higher-order components. Handle component communication through props and events.
State persistence uses local storage, session storage, or external stores. Implement auto-save functionality. Handle state rehydration. Support offline state management.
Testing strategies include unit tests, integration tests, component tests. Use testing library/svelte. Implement test utilities. Handle async testing. Support snapshot testing.
State machines handle complex component states. Implement finite state automata. Handle state transitions. Support parallel states. Manage side effects in state changes.
Code splitting uses dynamic imports, route-based splitting. Implement lazy loading strategies. Handle loading states. Optimize bundle size. Support prefetching.
Accessibility implementation includes ARIA attributes, keyboard navigation, screen reader support. Handle focus management. Implement semantic HTML. Support a11y testing.
