sveltejs/svelte

Data models

Active contributors: Rich Harris, Simon H, Dominic Gannaway

The most important data shapes that flow through the compiler and runtime.

Compile result

compile() returns:

{
  js: { code: string; map: SourceMap }
  css: { code: string; map: SourceMap } | null
  ast: AST.Root | LegacyRoot
  warnings: Warning[]
  metadata: { runes: boolean; ... }
}

Defined in packages/svelte/src/compiler/public.d.ts.

AST.Root (modern) and LegacyRoot (Svelte 4 shape) are both possible outputs of parse(). Modern shape lives in packages/svelte/src/compiler/types/template.d.ts; the legacy shape is in packages/svelte/src/compiler/types/legacy-nodes.js. Top-level fields:

Field	Type	Description
`fragment`	`AST.Fragment`	The markup tree.
`instance`	`Program \| null`	`<script>` block (acorn estree).
`module`	`Program \| null`	`<script context="module">` block.
`css`	`AST.CSS.StyleSheet \| null`	Parsed CSS (only when `<style>` present).
`options`	`AST.SvelteOptions \| null`	`<svelte:options>` parse result.
`metadata.ts`	`boolean`	True when `<script lang="ts">`.

AST.Fragment.nodes is an array of one of: RegularElement, Component, SvelteElement, SvelteComponent, SvelteSelf, SvelteWindow, SvelteBody, SvelteHead, SvelteFragment, SvelteOptions, SlotElement, SnippetBlock, EachBlock, IfBlock, KeyBlock, AwaitBlock, Text, ExpressionTag, HtmlTag, RenderTag, AttachTag, DebugTag, ConstTag, or Comment.

ComponentAnalysis

The output of analyze_component(parsed, source, options) from packages/svelte/src/compiler/phases/2-analyze/index.js. The full type is in 2-analyze/types.d.ts. Top-level fields most consulted by phase 3:

Field	Description
`name`	Component name (derived from filename).
`runes`	`true` when the component is in runes mode.
`instance.scope`	Root scope for `<script>` (a `Scope` from `phases/scope.js`).
`module.scope`	Root scope for `<script context="module">`.
`template.scope`	Root scope for the markup.
`bindings`	Map of identifier → `Binding` (kind, mutated, references).
`slots`	Set of slot names.
`snippets`	Set of snippet identifiers.
`css`	CSS analysis (selector hash, pruned-unused list, `<style global>` flag).
`accessors`	`true` when accessor classes are needed.
`inject_styles`	Whether the compiler should emit `append_styles` runtime calls.
`warnings`	Accumulated warnings.

Binding.kind is one of 'state', 'derived', 'prop', 'rest_prop', 'bindable_prop', 'each', 'snippet_argument', 'normal', ... — declared in phases/scope.js.

Reactivity types

Defined in packages/svelte/src/internal/client/reactivity/types.d.ts:

| Type | Shape | | ------------ | ---------------------------------------------------------------------- | ------- | | Value<T> | { v: T; version: number; reactions: Reaction[] | null } | | Source<T> | Value<T> & { equals; wv; } — leaf reactive value. | | Derived<T> | Value<T> & Reaction & { fn; deps; ... } — memoised reaction. | | Effect | Reaction & { f; first; last; nodes; teardown; ... } — side effect. | | Reaction | { deps; first; last; v; ... } — common reaction shape. | | Batch | { effects; sources; ... } — see reactivity/batch.js for the class. |

The status bitmask (f field) uses constants in packages/svelte/src/internal/client/constants.js. See Reactivity engine for the meaning of each flag.

ComponentContext

packages/svelte/src/internal/client/context.js defines ComponentContext. It carries:

p — parent context.
c — child contexts.
m, b, a, d — onMount/beforeUpdate/afterUpdate/onDestroy callback queues (legacy).
e — error handler (boundary).
s — $$slots/$$events for legacy.
x — exports of the user component.
l — legacy-only nested object holding $: declaration metadata.
h — host element (custom-element only).

RenderOutput (server)

packages/svelte/src/internal/server/types.d.ts defines:

type RenderOutput = {
  html: string
  head: string
  body: string
  css: { code: string; map: any } | null
  csp: { script-src: string[]; style-src: string[] }
}

Returned from render(component, options) in packages/svelte/src/server/index.js.