1
# Svelte
2

3
Svelte is a revolutionary JavaScript framework and compiler that takes a unique approach to building web applications. Rather than running in the browser as a traditional framework, Svelte compiles components at build time into highly optimized vanilla JavaScript that surgically updates the DOM. This compilation step eliminates the overhead of a virtual DOM and framework runtime, resulting in smaller bundle sizes and faster performance.
4

5
## Package Information
6

7
- **Package Name**: svelte  
8
- **Package Type**: npm
9
- **Language**: JavaScript/TypeScript
10
- **Installation**: `npm install svelte`
11

12
## Core Imports
13

14
```javascript
15
import { onMount, createEventDispatcher } from "svelte";
16
```
17

18
Additional imports for animations, transitions, and easing:
19

20
```javascript
21
import { spring, tweened } from "svelte/motion";
22
import { fade, fly, slide, scale } from "svelte/transition";
23
import { cubicOut, elasticOut } from "svelte/easing";
24
import { flip } from "svelte/animate";
25
```
26

27
Compiler usage:
28

29
```javascript
30
import { compile, parse, preprocess } from "svelte/compiler";
31
```
32

33
Store management:
34

35
```javascript
36
import { writable, readable, derived } from "svelte/store";
37
```
38

39
## Basic Usage
40

41
```javascript
42
// Component lifecycle
43
import { onMount, onDestroy } from "svelte";
44

45
export let name = "";
46

47
onMount(() => {
48
  console.log("Component mounted");
49
  return () => {
50
    console.log("Cleanup function");
51
  };
52
});
53

54
// Event handling
55
import { createEventDispatcher } from "svelte";
56

57
const dispatch = createEventDispatcher();
58

59
function handleClick() {
60
  dispatch("message", {
61
    text: "Hello from component"
62
  });
63
}
64

65
// Store usage
66
import { writable } from "svelte/store";
67

68
const count = writable(0);
69

70
function increment() {
71
  count.update(n => n + 1);
72
}
73
```
74

75
## Architecture
76

77
Svelte's architecture consists of several key components:
78

79
- **Compiler**: Transforms `.svelte` components into optimized JavaScript at build time
80
- **Runtime**: Minimal runtime library providing lifecycle hooks and reactivity
81
- **Component System**: Template-based components with scoped CSS and reactive state
82
- **Store System**: Global state management with reactive subscriptions
83
- **Transition/Animation**: Built-in animation and transition effects
84
- **Server-Side Rendering**: Full SSR support with hydration capabilities
85

86
## Capabilities
87

88
### Core Runtime
89

90
Component lifecycle hooks, event dispatching, and context management for building interactive Svelte components.
91

92
```javascript { .api }
93
function onMount(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
94
function onDestroy(fn: () => any): void;
95
function beforeUpdate(fn: () => void): void;
96
function afterUpdate(fn: () => void): void;
97
function tick(): Promise<void>;
98
function createEventDispatcher<EventMap extends Record<string, any> = any>(): EventDispatcher<EventMap>;
99
function setContext<T>(key: any, context: T): T;
100
function getContext<T>(key: any): T;
101
function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
102
function hasContext(key: any): boolean;
103
```
104

105
[Core Runtime](./core-runtime.md)
106

107
### Compiler
108

109
Complete compilation pipeline for transforming Svelte components into optimized JavaScript with preprocessing support.
110

111
```javascript { .api }
112
function compile(source: string, options?: CompileOptions): CompileResult;
113
function parse(template: string, options?: ParserOptions): Ast;
114
function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: { filename?: string }): Promise<Processed>;
115
function walk(ast: Node, visitors: { enter?: (node: Node, parent?: Node) => void; leave?: (node: Node, parent?: Node) => void; }): void;
116
const VERSION: string;
117
```
118

119
[Compiler](./compiler.md)
120

121
### Store Management
122

123
Reactive state management system with readable, writable, and derived stores for application-wide state.
124

125
```javascript { .api }
126
function writable<T>(value?: T, start?: StartStopNotifier<T>): Writable<T>;
127
function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T>;
128
function derived<S extends Stores, T>(stores: S, fn: Function, initial_value?: T): Readable<T>;
129
function readonly<T>(store: Readable<T>): Readable<T>;
130
function get<T>(store: Readable<T>): T;
131
```
132

133
[Store Management](./store-management.md)
134

135
### Motion and Animation
136

137
Physics-based animations and smooth transitions between state values with spring and tween effects.
138

139
```javascript { .api }
140
function spring<T = any>(value?: T, opts?: SpringOpts): Spring<T>;
141
function tweened<T>(value?: T, defaults?: TweenedOptions<T>): Tweened<T>;
142
```
143

144
[Motion and Animation](./motion-animation.md)
145

146
### List Animations
147

148
FLIP animations for smooth list reordering and element positioning transitions.
149

150
```javascript { .api }
151
function flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect }, params?: FlipParams): AnimationConfig;
152
```
153

154
[List Animations](./list-animations.md)
155

156
### Transitions
157

158
Built-in transition effects for element enter/exit animations with customizable parameters and easing functions.
159

160
```javascript { .api }
161
function blur(node: Element, params?: BlurParams): TransitionConfig;
162
function fade(node: Element, params?: FadeParams): TransitionConfig;
163
function fly(node: Element, params?: FlyParams): TransitionConfig;
164
function slide(node: Element, params?: SlideParams): TransitionConfig;
165
function scale(node: Element, params?: ScaleParams): TransitionConfig;
166
function draw(node: SVGElement & { getTotalLength(): number }, params?: DrawParams): TransitionConfig;
167
function crossfade(params: CrossfadeParams): [send: Function, receive: Function];
168
```
169

170
[Transitions](./transitions.md)
171

172
### Easing Functions
173

174
Comprehensive collection of easing functions for smooth animation curves and natural motion effects.
175

176
```javascript { .api }
177
function linear(t: number): number;
178
function cubicInOut(t: number): number;
179
function elasticOut(t: number): number;
180
function bounceInOut(t: number): number;
181
```
182

183
[Easing Functions](./easing-functions.md)
184

185
### Actions
186

187
Element lifecycle and behavior enhancement system for reusable DOM interactions.
188

189
```javascript { .api }
190
interface Action<Element = HTMLElement, Parameter = undefined, Attributes extends Record<string, any> = Record<never, any>> {
191
  (node: Element, parameter?: Parameter): void | ActionReturn<Parameter, Attributes>;
192
}
193

194
interface ActionReturn<Parameter = undefined, Attributes extends Record<string, any> = Record<never, any>> {
195
  update?: (parameter: Parameter) => void;
196
  destroy?: () => void;
197
}
198
```
199

200
[Actions](./actions.md)
201

202
## Core Types
203

204
```javascript { .api }
205
class SvelteComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any> {
206
  constructor(options: ComponentConstructorOptions<Props>);
207
  $destroy(): void;
208
  $on<K extends Extract<keyof Events, string>>(type: K, callback: ((e: Events[K]) => void) | null | undefined): () => void;
209
  $set(props: Partial<Props>): void;
210
}
211

212
interface ComponentConstructorOptions<Props extends Record<string, any> = Record<string, any>> {
213
  target: Element | Document | ShadowRoot;
214
  anchor?: Element;
215
  props?: Props;
216
  context?: Map<any, any>;
217
  hydrate?: boolean;
218
  intro?: boolean;
219
}
220

221
interface EventDispatcher<EventMap extends Record<string, any>> {
222
  <Type extends keyof EventMap>(
223
    ...args: null extends EventMap[Type]
224
      ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
225
      : undefined extends EventMap[Type]
226
      ? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
227
      : [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
228
  ): boolean;
229
}
230

231
interface DispatchOptions {
232
  cancelable?: boolean;
233
}
234
```