Svelte is a web UI framework with a compiler
Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript into lean, tightly optimized JavaScript.
Svelte · Language · all subjects
core/introduction
58 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Svelte can build full stack apps with SvelteKit
Svelte can be used to build anything on the web, from standalone components to ambitious full stack apps using Svelte's companion application framework called SvelteKit.
.svelte.js and .svelte.ts files can use runes
In .svelte.js and .svelte.ts files, you can use Svelte runes just as you would in .svelte components. This enables creating reusable reactive logic.
.svelte.js and .svelte.ts files are useful for reusable reactive logic and shared state
.svelte.js and .svelte.ts files can be used to create reusable reactive logic or to share reactive state across an application.
Cannot export reassigned state across modules
When sharing reactive state across modules using .svelte.js or .svelte.ts files, you cannot export reassigned state.
.svelte.js and .svelte.ts files are new in Svelte 5
The ability to use .svelte.js and .svelte.ts files with runes is a new concept that did not exist prior to Svelte 5.
.svelte.js and .svelte.ts file types exist in Svelte 5
.svelte.js and .svelte.ts files are module files that behave like ordinary .js or .ts modules, but with the ability to use runes within them.
Svelte 5 documentation is auto-generated
The Svelte documentation files are generated automatically by scripts and should not be edited directly. The generation script is located at apps/svelte.dev/scripts/sync-docs/index.ts.
Runes are not normal JavaScript functions
Runes differ from normal JavaScript functions in three important ways: (1) they do not need to be imported as they are part of the language, (2) they are not values and cannot be assigned to a variable or passed as arguments to a function, (3) like JavaScript keywords, they are only valid in certain positions and the compiler will help if they are placed incorrectly.
What are runes in Svelte 5
Runes are symbols used in .svelte and .svelte.js/.svelte.ts files to control the Svelte compiler. They are part of the Svelte language syntax and function as keywords. Runes have a $ prefix and look like functions, such as $state('hello'). Runes did not exist prior to Svelte 5.
TypeScript lang attribute on script tags
To use TypeScript inside Svelte components, add the lang="ts" attribute to the script tag: <script lang="ts">. This enables TypeScript type-only features within the component.
TypeScript type-only features supported by default
Without a preprocessor, Svelte supports only TypeScript type-only features that disappear during transpilation to JavaScript. This includes type annotations and interface declarations. Features that require the TypeScript compiler to output actual code are not supported by default.
TypeScript features not supported without preprocessor
The following TypeScript features are not supported without setting up a preprocessor: using enums, using private, protected, or public modifiers in constructor functions together with initializers, and using features not yet part of the ECMAScript standard or not implemented in Acorn (the JavaScript parser Svelte uses).
vitePreprocess for TypeScript with Vite
To use non-type-only TypeScript features with SvelteKit or Vite, use vitePreprocess from @sveltejs/vite-plugin-svelte in the svelte.config.js file with the configuration preprocess: vitePreprocess({ script: true }). This preprocessor converts TypeScript to JavaScript.
svelte-check for TypeScript validation
The svelte-check tool validates TypeScript in Svelte components on the command line. It can be integrated into CI pipelines. IDE extensions like the Svelte VS Code extension also catch TypeScript errors in the editor.
tsconfig.json target for Svelte projects
When using TypeScript with Svelte, set the tsconfig.json target to at least ES2015 so that classes are not compiled to functions.
tsconfig.json verbatimModuleSyntax setting
Set verbatimModuleSyntax to true in tsconfig.json so that imports are left as-is in Svelte projects.
tsconfig.json isolatedModules setting
Set isolatedModules to true in tsconfig.json so that each file is analyzed in isolation. TypeScript has features requiring cross-file analysis which the Svelte compiler and tools like Vite do not perform.
svelte/internal type definitions removed in Svelte 4
Type definitions for svelte/internal were removed to discourage usage of internal methods that are not part of the public API. These methods will likely change for Svelte 5.
Misc documentation auto-generated
The miscellaneous documentation section is auto-generated from apps/svelte.dev/scripts/sync-docs/index.ts and should not be edited directly.
Compile warning: legacy_code
The legacy_code warning is triggered when code from Svelte 4 or earlier is detected. The warning message specifies the outdated code and suggests the Svelte 5 replacement.
Compile warning: options_deprecated_accessors
The options_deprecated_accessors warning is triggered when the `accessors` compile option is used. This option has been deprecated and will have no effect in runes mode.
Compile warning: options_deprecated_immutable
The options_deprecated_immutable warning is triggered when the `immutable` compile option is used. This option has been deprecated and will have no effect in runes mode.
Compile warning: options_removed_enable_sourcemap
The options_removed_enable_sourcemap warning is triggered when the `enableSourcemap` compile option is used. This option has been removed. Source maps are always generated in Svelte 5, and tooling can choose to ignore them.
Compile warning: options_removed_hydratable
The options_removed_hydratable warning is triggered when the `hydratable` compile option is used. This option has been removed. Svelte 5 components are always hydratable.
Compile warning: options_removed_loop_guard_timeout
The options_removed_loop_guard_timeout warning is triggered when the `loopGuardTimeout` compile option is used. This option has been removed in Svelte 5.
Compile warning: perf_avoid_inline_class
The perf_avoid_inline_class warning is triggered when a class is declared inline using `new class`. For better performance, declare the class at the top level scope instead.
Compile warning: perf_avoid_nested_class
The perf_avoid_nested_class warning is triggered when a class is declared below the top level scope. For better performance, declare classes at the top level scope.
Compile warning: reactive_declaration_invalid_placement
The reactive_declaration_invalid_placement warning is triggered when a reactive declaration is placed outside the top level of the instance script.
Compile warning: script_context_deprecated
The script_context_deprecated warning is triggered when `context="module"` is used in a `<script>` tag. This syntax is deprecated in Svelte 5. Use the `module` attribute instead: `<script module>`.
Compile warning: unknown_code
The unknown_code warning is triggered when an unrecognized code pattern is detected. The warning message may suggest a similar valid pattern if one exists.
Compile warning: options_renamed_ssr_dom
The options_renamed_ssr_dom warning is triggered when the `generate: "dom"` or `generate: "ssr"` compile options are used. These options have been renamed to `generate: "client"` and `generate: "server"` respectively in Svelte 5.
Compile warning: a11y_accesskey
The a11y_accesskey warning is triggered when the `accesskey` attribute is used on elements. Access keys are HTML attributes that assign keyboard shortcuts to elements. They should not be used because inconsistencies between keyboard shortcuts and commands used by screen reader and keyboard-only users create accessibility complications.
Compile warning: a11y_figcaption_index
The a11y_figcaption_index warning is triggered when a `<figcaption>` element is not the first or last child of a `<figure>` element.
Compile warning: a11y_figcaption_parent
The a11y_figcaption_parent warning is triggered when a `<figcaption>` element is not an immediate child of a `<figure>` element.
Compile warning: a11y_incorrect_aria_attribute_type_boolean
The a11y_incorrect_aria_attribute_type_boolean warning is triggered when a boolean ARIA attribute receives a value other than 'true' or 'false', or when it is empty.
Compile warning: a11y_incorrect_aria_attribute_type_id
The a11y_incorrect_aria_attribute_type_id warning is triggered when an ARIA attribute that expects a DOM element ID receives a value that is not a string representing a valid DOM element ID.
Compile warning: a11y_incorrect_aria_attribute_type_idlist
The a11y_incorrect_aria_attribute_type_idlist warning is triggered when an ARIA attribute that expects a space-separated list of DOM element IDs receives a value that is not in the correct format.
Compile warning: a11y_incorrect_aria_attribute_type_integer
The a11y_incorrect_aria_attribute_type_integer warning is triggered when an ARIA attribute that expects an integer value receives a non-integer value.
Compile warning: a11y_incorrect_aria_attribute_type_tokenlist
The a11y_incorrect_aria_attribute_type_tokenlist warning is triggered when an ARIA attribute that expects a space-separated list of tokens receives a value that does not conform to this format or contains invalid tokens.
Compile warning: a11y_incorrect_aria_attribute_type_tristate
The a11y_incorrect_aria_attribute_type_tristate warning is triggered when a tristate ARIA attribute receives a value other than 'true', 'false', or 'mixed'.
Compile warning: a11y_interactive_supports_focus
The a11y_interactive_supports_focus warning is triggered when an element with an interactive ARIA role (such as 'button') has mouse or key event handlers but does not have a `tabindex` value. Interactive elements must be focusable or tabbable.
Compile warning: a11y_misplaced_scope
The a11y_misplaced_scope warning is triggered when the `scope` attribute is used on elements other than `<th>`. The `scope` attribute should only be used on `<th>` elements.
Compile warning: a11y_missing_content
The a11y_missing_content warning is triggered when heading elements (`h1`, `h2`, etc.) and anchors lack text content that is accessible to screen readers.
Compile warning: a11y_no_abstract_role
The a11y_no_abstract_role warning is triggered when an abstract ARIA role is used. Abstract roles should not be assigned to elements.
Compile warning: a11y_no_noninteractive_element_interactions
The a11y_no_noninteractive_element_interactions warning is triggered when a non-interactive element is assigned mouse or keyboard event listeners. Non-interactive elements include `<main>`, `<area>`, `<h1>` (and other headings), `<p>`, `<img>`, `<li>`, `<ul>`, and `<ol>`. Elements with non-interactive ARIA roles also cannot have event handlers.
Compile warning: a11y_no_redundant_roles
The a11y_no_redundant_roles warning is triggered when an ARIA role is assigned that is already the default role for that element. For example, `<button role="button">` is redundant because buttons have the button role by default.
Compile warning: a11y_role_has_required_aria_props
The a11y_role_has_required_aria_props warning is triggered when an element with an ARIA role lacks required attributes for that role. For example, a checkbox role requires the `aria-checked` attribute.
Compile warning: a11y_role_supports_aria_props_implicit
The a11y_role_supports_aria_props_implicit warning is triggered when an element with an implicit ARIA role has an `aria-*` attribute that is not supported by that role. The warning message indicates the implicit role.
Compile warning: a11y_unknown_aria_attribute
The a11y_unknown_aria_attribute warning is triggered when an unknown ARIA attribute is used. The warning message may suggest the correct attribute name if a similar one exists. The valid ARIA attributes are based on the WAI-ARIA States and Properties specification.
Compile warning: a11y_unknown_role
The a11y_unknown_role warning is triggered when an unknown or abstract ARIA role is used on an element. The warning message may suggest the correct role name if a similar one exists. Valid roles are defined in the WAI-ARIA role definitions specification.
svelte/legacy exports list of deprecation utilities
The svelte/legacy module exports the following functions and utilities: asClassComponent, createBubbler, createClassComponent, handlers, nonpassive, once, passive, preventDefault, run, self, stopImmediatePropagation, stopPropagation, and trusted.
svelte/legacy module provides migration utilities
The svelte/legacy module provides various functions for use during migration from Svelte 4 to Svelte 5, since some features cannot be replaced one-to-one with new features. All imports are marked as deprecated and should be migrated away from over time.
Incremental migration recommended for Svelte 3/4 to Svelte 5
The Svelte team recommends incrementally migrating existing Svelte 3/4 code to Svelte 5, rather than attempting a complete rewrite all at once.
Svelte 3/4 syntax continues to work in Svelte 5
Svelte 3/4 syntax is still supported in Svelte 5, allowing gradual migration of components without requiring immediate full adoption of new features.
Legacy mode vs runes mode in Svelte 5
Svelte 5 distinguishes between legacy mode and runes mode. Once a component is in runes mode (enabled by using runes or by explicitly setting the compiler option runes: true), legacy mode features are no longer available. Legacy mode features can be used in Svelte 5 if the component has not been migrated to runes mode.
Svelte 5 introduces runes, snippets, and event attributes
Svelte 5 introduced significant changes to Svelte's API including runes, snippets, and event attributes. These new features make some Svelte 3/4 features deprecated, though they are still supported for now unless otherwise specified.
Reference documentation is generated automatically
The Svelte reference documentation is generated via a script located at apps/svelte.dev/scripts/sync-docs/index.ts. The reference files should not be edited directly; they are created programmatically.