or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

compiler.mdcontext.mdeasing.mdindex.mdlegacy.mdlifecycle.mdmotion.mdreactivity-window.mdreactivity.mdrendering.mdrunes.mdssr.mdstores.mdtransitions.md
tile.json

tessl/npm-svelte

A cybernetically enhanced web application framework that compiles to highly optimized JavaScript with reactive state management and component-based architecture.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/svelte@5.38.x

To install, run

npx @tessl/cli install tessl/npm-svelte@5.38.0

index.mddocs/

Svelte

Svelte is a revolutionary compile-time web application framework that transforms declarative component syntax into highly optimized vanilla JavaScript. Unlike traditional frameworks, Svelte performs the work during the build step, generating minimal and efficient code that surgically updates the DOM without requiring a virtual DOM layer.

Package Information

  • Package Name: svelte
  • Package Type: npm
  • Language: JavaScript with TypeScript support
  • Installation: npm install svelte

Core Imports

import { onMount, onDestroy } from "svelte";
import { mount, hydrate } from "svelte";

For CommonJS:

const { onMount, onDestroy } = require("svelte");
const { mount, hydrate } = require("svelte");

Module-specific imports:

import { compile, parse } from "svelte/compiler";
import { fade, fly, slide } from "svelte/transition";
import { spring, tweened } from "svelte/motion";
import { writable, readable, derived } from "svelte/store";
import { flip } from "svelte/animate";
import { cubicOut, elasticOut, bounceIn } from "svelte/easing";

Basic Usage

import { mount } from "svelte";
import App from "./App.svelte";

// Mount a component
const app = mount(App, {
  target: document.getElementById("app"),
  props: {
    name: "World"
  }
});

// Use lifecycle functions in components
import { onMount, onDestroy } from "svelte";

let count = 0;
let interval;

onMount(() => {
  interval = setInterval(() => {
    count += 1;
  }, 1000);
});

onDestroy(() => {
  clearInterval(interval);
});

Architecture

Svelte is built around several key components:

  • Compiler: Transforms .svelte components and rune-based JavaScript into optimized code
  • Runtime: Minimal runtime for reactivity, lifecycle management, and DOM updates
  • Reactivity System: Runes-based reactive state with $state, $derived, and $effect
  • Component System: Component mounting, hydration, and lifecycle management
  • Store System: External state management with reactive stores
  • Animation & Transitions: Built-in animation utilities and transition effects
  • Legacy Support: Compatibility layer for migrating from Svelte 4

Capabilities

Component Lifecycle

Core component lifecycle functions for managing component initialization, updates, and cleanup.

function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
function onDestroy(fn: () => any): void;
function beforeUpdate(fn: () => void): void;
function afterUpdate(fn: () => void): void;

Component Lifecycle

Component Rendering

Functions for mounting, hydrating, and unmounting Svelte components in the DOM.

function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(
  component: Component<Props, Exports, any>,
  options: MountOptions<Props>
): Exports;

function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(
  component: Component<Props, Exports, any>,
  options: {} extends Props ? {
    target: Document | Element | ShadowRoot;
    props?: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
  } : {
    target: Document | Element | ShadowRoot;
    props: Props;
    events?: Record<string, (e: any) => any>;
    context?: Map<any, any>;
    intro?: boolean;
    recover?: boolean;
  }
): Exports;

function unmount(component: Record<string, any>, options?: { outro?: boolean }): Promise<void>;

Component Rendering

Context Management

API for sharing data between parent and child components through context.

function getContext<T>(key: any): T;
function setContext<T>(key: any, context: T): T;
function hasContext(key: any): boolean;
function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;

Context Management

Reactivity Control

Functions for controlling reactive updates and execution timing.

function tick(): Promise<void>;
function settled(): Promise<void>;
function untrack<T>(fn: () => T): T;
function flushSync<T = void>(fn?: (() => T) | undefined): T;
function getAbortSignal(): AbortSignal;

Reactivity Control

Runes System

Svelte 5's runes-based reactivity system for declaring reactive state, derived values, and effects.

declare function $state<T>(initial: T): T;
declare function $state<T>(): T | undefined;

declare function $derived<T>(expression: T): T;

declare function $effect(fn: () => void | (() => void)): void;

declare function $props(): any;

declare function $bindable<T>(fallback?: T): T;

declare function $inspect<T extends any[]>(
  ...values: T
): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void };

declare function $host<El extends HTMLElement = HTMLElement>(): El;

Runes System

Snippet Creation

Functions for creating snippets programmatically from JavaScript functions.

function createRawSnippet<T extends unknown[]>(fn: (...args: T) => {
  render: () => string;
  setup?: (element: Element) => void | (() => void);
}): Snippet<T>;

Compiler API

Functions for compiling Svelte components and parsing source code.

function compile(source: string, options: CompileOptions): CompileResult;
function compileModule(source: string, options: ModuleCompileOptions): CompileResult;
function parse(source: string, options?: ParseOptions): AST.Root;
function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: PreprocessOptions): Promise<Processed>;

Compiler API

Motion & Animation

Animation utilities including springs, tweens, and FLIP animations.

class Spring<T> {
  constructor(value: T, options?: SpringOpts);
  set(value: T, options?: SpringUpdateOpts): Promise<void>;
  target: T;
  get current(): T;
}

class Tween<T> {
  constructor(value: T, options?: TweenedOptions<T>);
  set(value: T, options?: TweenedOptions<T>): Promise<void>;
  get current(): T;
  target: T;
}

function flip(node: Element, params: FlipParams): AnimationConfig;

Motion & Animation

Transitions

Built-in transition effects for element enter/exit animations.

function fade(node: Element, params?: FadeParams): TransitionConfig;
function fly(node: Element, params?: FlyParams): TransitionConfig;
function slide(node: Element, params?: SlideParams): TransitionConfig;
function scale(node: Element, params?: ScaleParams): TransitionConfig;
function blur(node: Element, params?: BlurParams): TransitionConfig;
function draw(node: SVGElement & { getTotalLength(): number }, params?: DrawParams): TransitionConfig;

Transitions

Easing Functions

Mathematical easing functions for smooth animation curves.

function linear(t: number): number;
function cubicOut(t: number): number;
function cubicIn(t: number): number;
function cubicInOut(t: number): number;
function elasticOut(t: number): number;
function bounceOut(t: number): number;

Easing Functions

Store System

External state management with reactive stores for sharing state across components.

function writable<T>(value?: T, start?: StartStopNotifier<T>): Writable<T>;
function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T>;
function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T, initial_value?: T): Readable<T>;
function get<T>(store: Readable<T>): T;

Store System

Events

Utilities for event handling and DOM event management.

function on(
  element: EventTarget, 
  event: string, 
  handler: EventListener, 
  options?: AddEventListenerOptions | boolean
): () => void;

Attachments

System for creating and managing element attachments as an alternative to actions.

function createAttachmentKey(): symbol;
function fromAction<E extends EventTarget, T>(
  action: Action<E, T>,
  fn?: () => T
): Attachment<E>;

Server-Side Rendering

Functions for rendering Svelte components on the server.

function render<Comp extends Component<any>>(
  component: Comp,
  options?: RenderOptions<ComponentProps<Comp>>
): RenderOutput;

Server-Side Rendering

Window Reactivity

Reactive values for window properties like dimensions, scroll position, and device characteristics.

const innerWidth: ReactiveValue<number | undefined>;
const innerHeight: ReactiveValue<number | undefined>;
const scrollX: ReactiveValue<number | undefined>;
const scrollY: ReactiveValue<number | undefined>;
const online: ReactiveValue<boolean | undefined>;
const devicePixelRatio: ReactiveValue<number | undefined>;

Window Reactivity

Legacy Compatibility

Utilities for migrating from Svelte 4 and working with legacy components.

function createClassComponent<Props, Exports>(
  component: Component<Props, Exports>
): LegacyComponentConstructor<Props, Exports>;

function asClassComponent<Props, Exports>(
  component: Component<Props, Exports>
): Component<Props, Exports>;

Legacy Compatibility

Types

interface Component<
  Props extends Record<string, any> = {},
  Exports extends Record<string, any> = {},
  Bindings extends keyof Props | '' = string
> {
  (internals: ComponentInternals, props: Props): Exports;
}

interface MountOptions<Props extends Record<string, any> = Record<string, any>> {
  target: Document | Element | ShadowRoot;
  anchor?: Node;
  events?: Record<string, (e: any) => any>;
  context?: Map<any, any>;
  intro?: boolean;
} & ({} extends Props
  ? { props?: Props }
  : { props: Props });

interface HydrateOptions<Props extends Record<string, any> = Record<string, any>> {
  target: Document | Element | ShadowRoot;
  events?: Record<string, (e: any) => any>;
  context?: Map<any, any>;
  intro?: boolean;
  recover?: boolean;
} & ({} extends Props
  ? { props?: Props }
  : { props: Props });

interface Snippet<Parameters extends unknown[] = []> {
  (...args: Parameters): SnippetReturn;
}

type ComponentProps<Comp extends Component<any, any>> = 
  Comp extends Component<infer Props, any> ? Props : never;

type NotFunction<T> = T extends Function ? never : T;

interface ComponentInternals {}

interface SnippetReturn {}

interface EventDispatcher<EventMap extends Record<string, any>> {
  <Type extends keyof EventMap>(
    ...args: null extends EventMap[Type]
      ? [type: Type, parameter?: EventMap[Type] | null | undefined]
      : undefined extends EventMap[Type]
        ? [type: Type, parameter?: EventMap[Type] | null | undefined]
        : [type: Type, parameter: EventMap[Type]]
  ): boolean;
}

interface Action<Element = HTMLElement, Parameter = undefined> {
  <Node extends Element>(
    ...args: undefined extends Parameter
      ? [node: Node, parameter?: Parameter]
      : [node: Node, parameter: Parameter]
  ): void | ActionReturn<Parameter>;
}

interface ActionReturn<Parameter = undefined> {
  update?: (parameter: Parameter) => void;
  destroy?: () => void;
}

interface Attachment<T extends EventTarget = Element> {
  (element: T): void | (() => void);
}

interface RenderOutput {
  head: string;
  html: string;
  body: string;
}