Sveltefromllmstxt

Imperative component API

[!NOTE] Vite is often used in standalone mode to build single page apps (SPAs), which you can also build with SvelteKit.

[!NOTE] Vite is often used in standalone mode to build single page apps (SPAs), which you can also build with SvelteKit.

Available Resources

Alternatives to SvelteKit

Editor tooling

Getting help

<script>

<script module>

<style>

$state.raw

$state.snapshot

$state.eager

Passing state into functions

Passing state across modules

$derived.by

Understanding dependencies

Overriding derived values

Deriveds and reactivity

Destructuring

Update propagation

$effect.pre

$effect.tracking

$effect.pending

$effect.root

When not to use $effect

Fallback values

Renaming props

Rest props

Updating props

Type safety

$props.id()

$inspect(...).with

$inspect.trace(...)

Tags

Element attributes

Component props

Spread attributes

Events

Text expressions

Comments

Keyed each blocks

Each blocks without an item

Else blocks

Snippet scope

Passing snippets to components

Typing snippets

Exporting snippets

Programmatic snippets

Snippets and slots

Styling

Attachment factories

Inline attachments

Conditional attachments

Passing attachments to components

Controlling when attachments re-run

Creating attachments programmatically

Converting actions to attachments

Function bindings

<input bind:value>

<input bind:checked>

<input bind:indeterminate>

<input bind:group>

<input bind:files>

<select bind:value>

<audio>

• currentTime

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

• playbackRate

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

• paused

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused

• volume

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume

• muted

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted

• duration

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration

• buffered

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered

• seekable

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable

• seeking

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event

• ended

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended

• readyState

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

• played

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played

<video>

<img>

• naturalWidth

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth

• naturalHeight

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight

<details bind:open>

window and document

Contenteditable bindings

• innerHTML

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

• innerText

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

• textContent

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Dimensions

• clientWidth

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

• clientHeight

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

• offsetWidth

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

• offsetHeight

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

• contentRect

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect

• contentBoxSize

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize

• borderBoxSize

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize

• devicePixelContentBoxSize

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize

bind:this

bind:property for components

Typing

Local vs global

Built-in transitions

Transition parameters

Accessibility

Custom transition functions

Transition events

Animation Parameters

Custom animation functions

Attributes

The class: directive

Synchronized updates

Concurrency

Indicating loading states

Error handling

Server-side rendering

Forking

Caveats

Breaking changes

Specificity

Scoped keyframes

:global(...)

:global

• await
  • URL: await-expressions

Properties

Using transformError

• Legacy APIs

  • URL: legacy-overview

• options

  • URL: custom-elements#Component-options

When to use stores

svelte/store

Store contract

setContext and getContext

Using context with state

Mounting components with context

Replacing global state

onMount

onDestroy

tick

Deprecated: beforeUpdate / afterUpdate

mount

unmount

render

hydrate

Serialization

CSP

$state

$derived

$effect

• {@attach ...}

  • URL: @attach

• function binding

  • URL: bind#Function-bindings

• $inspect

  • URL: $inspect

• createSubscriber

  • URL: svelte-reactivity#createSubscriber

$props

$inspect.trace

Events

Snippets

Each blocks

Using JavaScript variables in CSS

Styling child components

Context

Async Svelte

Avoid legacy features

Unit and component tests with Vitest

Component tests with Storybook

End-to-end tests with Playwright

<script lang="ts">

Preprocessor setup

tsconfig.json settings

• target

  • URL: https://www.typescriptlang.org/tsconfig/#target

• verbatimModuleSyntax

  • URL: https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax

• isolatedModules

  • URL: https://www.typescriptlang.org/tsconfig/#isolatedModules

Typing $props

Generic $props

Typing wrapper components

Typing $state

The Component type

Enhancing built-in DOM types

Component lifecycle

Component options

• ShadowRootInit: You can pass a settings object that will be passed to attachShadow() when shadow root is created.

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options

• ElementInternals

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#examples

Caveats and limitations

Exceptions

Minimum version requirements

• #8566

  • URL: https://github.com/sveltejs/svelte/issues/8566

• sveltejs/kit#10172

  • URL: https://github.com/sveltejs/kit/pull/10172

• #8516

  • URL: https://github.com/sveltejs/svelte/issues/8516

• #8515

  • URL: https://github.com/sveltejs/svelte/issues/8515

• 198dbcf

  • URL: https://github.com/sveltejs/svelte/commit/198dbcf

• #8488

  • URL: https://github.com/sveltejs/svelte/issues/8488

Browser conditions for bundlers

• rollup-plugin-svelte

  • URL: https://github.com/sveltejs/rollup-plugin-svelte/#usage

• svelte-loader

  • URL: https://github.com/sveltejs/svelte-loader#usage

Removal of CJS related output

Stricter types for Svelte functions

• #7224

  • URL: https://github.com/sveltejs/svelte/issues/7224

• #7442

  • URL: https://github.com/sveltejs/svelte/pull/7442

• #8136

  • URL: https://github.com/sveltejs/svelte/issues/8136

Custom Elements with Svelte

SvelteComponentTyped is deprecated

Transitions are local by default

Default slot bindings

Preprocessors

New eslint package

Other breaking changes

• #8628

  • URL: https://github.com/sveltejs/svelte/pull/8628

• polyfill

  • URL: https://github.com/eligrey/classList.js

• polyfill

  • URL: https://github.com/theftprevention/event-constructor-polyfill/tree/master

• #6750

  • URL: https://github.com/sveltejs/svelte/issues/6750

• #7947

  • URL: https://github.com/sveltejs/svelte/issues/7947

• #8763

  • URL: https://github.com/sveltejs/svelte/pull/8763

• here

  • URL: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-getting-deprecation-warnings-for-sveltejsx--i-want-to-migrate-to-the-new-typings

Reactivity syntax changes

Event changes

Snippets instead of slots

Migration script

Components are no longer classes

<svelte:component> is no longer necessary

Whitespace handling changed

Modern browser required

• Proxies

  • URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

• ResizeObserver

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Changes to compiler options

The children prop is reserved

Breaking changes in runes mode

Other breaking changes

I'm new to Svelte. Where should I start?

Where can I get support?

Are there any third-party resources?

How can I get VS Code to syntax-highlight my .svelte files?

Is there a tool to automatically format my .svelte files?

How do I document my components?

Does Svelte scale?

Is there a UI component library?

How do I test Svelte apps?

• Svelte docs on testing

  • URL: /docs/svelte/testing

• Setup Vitest using the Svelte CLI

  • URL: /docs/cli/vitest

• Svelte Testing Library

  • URL: https://testing-library.com/docs/svelte-testing-library/example/

• Svelte Component Testing in Cypress

  • URL: https://docs.cypress.io/guides/component-testing/svelte/overview

• Example using uvu test runner with JSDOM

  • URL: https://github.com/lukeed/uvu/tree/master/examples/svelte

• Test Svelte components using Vitest & Playwright

  • URL: https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright

• Component testing with WebdriverIO

  • URL: https://webdriver.io/docs/component-testing/svelte

Is there a router?

How do I write a mobile app with Svelte?

Can I tell Svelte not to remove my unused styles?

Is Svelte v2 still available?

How do I do hot module reloading?

SvelteComponent

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

• migration guide

  • URL: https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes

SvelteComponentTyped

afterUpdate

beforeUpdate

createContext

createEventDispatcher

createRawSnippet

flushSync

fork

getAbortSignal

getAllContexts

getContext

hasContext

hydratable

hydrate

mount

onDestroy

onMount

setContext

settled

tick

unmount

untrack

Component

ComponentConstructorOptions

ComponentEvents

ComponentInternals

ComponentProps

ComponentType

EventDispatcher

Fork

MountOptions

Snippet

Action

ActionReturn

flip

AnimationConfig

FlipParams

createAttachmentKey

fromAction

Attachment

VERSION

compile

compileModule

migrate

parse

parseCss

preprocess

print

walk

AST

CompileError

CompileOptions

• Content Security Policy
  • URL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP

CompileResult

MarkupPreprocessor

ModuleCompileOptions

Preprocessor

PreprocessorGroup

Processed

Warning

backIn

backInOut

backOut

bounceIn

bounceInOut

bounceOut

circIn

circInOut

circOut

cubicIn

cubicInOut

cubicOut

elasticIn

elasticInOut

elasticOut

expoIn

expoInOut

expoOut

linear

quadIn

quadInOut

quadOut

quartIn

quartInOut

quartOut

quintIn

quintInOut

quintOut

sineIn

sineInOut

sineOut

on

asClassComponent

createBubbler

createClassComponent

handlers

nonpassive

once

passive

preventDefault

run

self

stopImmediatePropagation

stopPropagation

trusted

LegacyComponentType

Spring

Tween

prefersReducedMotion

spring

tweened

Spring

SpringOptions

SpringUpdateOptions

TweenOptions

Tweened

Updater

devicePixelRatio

innerHeight

innerWidth

online

outerHeight

outerWidth

screenLeft

screenTop

scrollX

scrollY

MediaQuery

SvelteDate

SvelteMap

SvelteSet

SvelteURL

SvelteURLSearchParams

createSubscriber

render

Csp

RenderOutput

Sha256Source

SyncRenderOutput

derived

fromStore

get

readable

readonly

toStore

writable

Readable

StartStopNotifier

Subscriber

Unsubscriber

Updater

Writable

blur

crossfade

draw

fade

fly

scale

slide

BlurParams

CrossfadeParams

DrawParams

EasingFunction

FadeParams

FlyParams

ScaleParams

SlideParams

TransitionConfig

• fragment-defining tag
  • URL: https://github.com/sveltejs/svelte/issues/4697

Client errors

Server errors

Shared errors

Client warnings

Shared warnings

Understanding dependencies

Browser-only code

Component exports

Renaming props

Component events

Named slots

Fallback content

Passing data to slotted content

Creating a component

$set

$on

$destroy

Component props

Server-side component API

Additional Resources (Optional)

Optional snippets

How to Use This Skill

Reference these resources when working with Imperative component API.