Command line code checking for Svelte
Svelte code can be checked from the command line using the command npx sv check.
Svelte · Language · all subjects
tooling
67 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
Preprocessor name requirement in Svelte 4
Each preprocessor in Svelte 4 must have a name property defined.
Preprocessor execution order in Svelte 4
Preprocessors are now executed in order. Within each preprocessor object, the execution order is markup, script, style. In Svelte 3, all markup preprocessors ran first, then all script preprocessors, then all style preprocessors.
Hot module reloading (HMR) support
SvelteKit supports HMR out of the box and is built on top of Vite and svelte-hmr. Community plugins for rollup and webpack also provide HMR support for Svelte.
Easing function signature
Each easing function in svelte/easing accepts a single parameter t of type number and returns a number. The parameter t typically represents normalized time (0 to 1) in an animation.
Easing curve types
Svelte provides easing functions across multiple curve types: back, bounce, circular, cubic, elastic, exponential, linear, quadratic, quartic, quintic, and sine. Each type (except linear) comes in In, Out, and InOut variants for a total of 33 easing functions.
svelte/easing module exports
The svelte/easing module exports 33 easing functions for animations. The available easing functions are: 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, and sineOut.
Easing categories: In/Out/InOut
Easing functions follow a naming convention with three timing modifiers. Functions ending in 'In' apply easing at the start of the animation, functions ending in 'Out' apply easing at the end, and functions ending in 'InOut' apply easing at both the start and end.
CompileError interface
CompileError extends ICompileDiagnostic and represents compilation errors.
Warning in CompileResult
Warnings in CompileResult have code (string), message (string), and optional start/end objects with line, column, and character properties.
ModuleCompileOptions fields
ModuleCompileOptions includes: dev (boolean, default false), generate ('client' | 'server' | false, default 'client'), filename (string), rootDir (string, default process.cwd() in Node), warningFilter (function returning boolean), experimental.async (boolean, v5.36+, allows await in deriveds, expressions, and top level).
generate option in compile
generate option: 'client' emits browser code, 'server' emits server-side rendering code, false generates nothing (useful for warnings-only tooling). Default 'client'.
dev compile option
If dev is true, extra code is added for runtime checks and debugging information during development. Default false.
MarkupPreprocessor type
MarkupPreprocessor is a function type that takes options with content (whole Svelte file) and optional filename, returning Processed | void | Promise<Processed | void>.
Preprocessor type
Preprocessor is a function type for script/style preprocessing. It takes options with content (tag content), attributes (Record<string, string | boolean>), markup (whole file), and optional filename, returning Processed | void | Promise<Processed | void>.
PreprocessorGroup interface
PreprocessorGroup has optional name (string, will be required in next major version), optional markup (MarkupPreprocessor), optional style (Preprocessor), and optional script (Preprocessor).
Processed result interface
Processed has code (string), optional map (string | object sourcemap), optional dependencies (string[] for files to watch), optional attributes (for script/style tags), and optional toString function.
migrate function use case
migrate converts Svelte 4 code to Svelte 5+ patterns: runes, event attributes, and render tags. Options include filename (string) and use_ts (boolean). Returns object with code property.
svelte/compiler VERSION constant
The VERSION export from svelte/compiler is a string constant that holds the current version as set in package.json.
compile function signature and purpose
The compile function accepts source code as a string and CompileOptions, returning a CompileResult. It converts .svelte source code into a JavaScript module that exports a component.
compileModule function signature and purpose
The compileModule function accepts source code as a string and ModuleCompileOptions, returning a CompileResult. It takes JavaScript source code containing runes and turns it into a JavaScript module.
migrate function signature and purpose
The migrate function performs a best-effort migration of Svelte code towards using runes, event attributes and render tags. It accepts source code as a string and optional options with filename and use_ts fields, returning an object with a code property. It may throw an error if the code is too complex to migrate automatically.
parse function with modern AST option
The parse function accepts source code and options, returning an AST.Root when modern: true is passed. The modern option (false by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST. modern will become true by default in Svelte 6 and the option will be removed in Svelte 7.
parse function legacy AST behavior
The parse function returns Record<string, any> (legacy AST) when modern is false or omitted. This is the default behavior in Svelte 5.
parseCss function
The parseCss function accepts a CSS source string and returns an AST.CSS.StyleSheetFile representing the parsed CSS stylesheet.
preprocess function
The preprocess function accepts source code, a preprocessor or array of preprocessors, and optional options with filename. It returns a Promise<Processed>. It provides hooks for arbitrarily transforming component source code, such as converting <style lang="sass"> blocks into vanilla CSS.
print function for AST transformation
The print function converts a Svelte AST node back into Svelte source code. It requires an AST node produced by parse with modern: true or any sub-node within that modern AST. It returns an object with code (string) and map (sourcemap) properties. The output is valid Svelte but formatting details such as whitespace or quoting may differ from the original.
walk function deprecation
The walk function from svelte/compiler is deprecated. Users should import walk from 'estree-walker' instead.
AST Root node structure
An AST.Root node has type 'Root', start and end positions, options (SvelteOptions | null) from <svelte:options>, a fragment containing template nodes, css (parsed <style> element or null), instance (parsed <script> element or null), module (parsed <script module> element or null), and comments found in <script> and expressions.
SvelteOptions in AST
SvelteOptions in the AST includes: runes (boolean), immutable (boolean), accessors (boolean), preserveWhitespace (boolean), namespace (string), css ('injected'), customElement object with tag, shadow, props, and extend, and attributes array. All options require start/end position info.
ExpressionTag and HtmlTag AST nodes
ExpressionTag (type 'ExpressionTag') represents a reactive template expression {...}. HtmlTag (type 'HtmlTag') represents a reactive HTML template expression {@html ...}. Both contain an expression property.
ConstTag and DeclarationTag AST nodes
ConstTag (type 'ConstTag') represents {@const ...} and has a declaration property with a VariableDeclaration containing exactly one VariableDeclarator with id and required init Expression. DeclarationTag (type 'DeclarationTag') represents {let ...} or {const ...} with a declaration property containing a VariableDeclaration.
DebugTag and RenderTag AST nodes
DebugTag (type 'DebugTag') represents {@debug ...} with identifiers array. RenderTag (type 'RenderTag') represents {@render foo(...)} with an expression that is either SimpleCallExpression or ChainExpression containing a SimpleCallExpression.
AttachTag AST node
AttachTag (type 'AttachTag') represents {@attach foo(...)} with an expression property.
AnimateDirective AST node
AnimateDirective (type 'AnimateDirective') represents animate: directives. It has a name property (the 'x' in animate:x) and an expression property (the y in animate:x={y}, or null).
BindDirective AST node
BindDirective (type 'BindDirective') represents bind: directives. It has a name property (the 'x' in bind:x) and an expression property that is Identifier, MemberExpression, or SequenceExpression (the y in bind:x={y}).
ClassDirective AST node
ClassDirective (type 'ClassDirective') represents class: directives. It has name always set to 'class' and an expression property that is the 'y' in class:x={y} or the x in class:x shorthand.
LetDirective AST node
LetDirective (type 'LetDirective') represents let: directives. It has a name property (the 'x' in let:x) and an expression property that can be null, Identifier, ArrayExpression, or ObjectExpression (the y in let:x={y}).
OnDirective AST node structure
OnDirective (type 'OnDirective') represents on: directives. It has name (the 'x' in on:x), expression (the y in on:x={y}, or null), and modifiers array containing any of: 'capture', 'nonpassive', 'once', 'passive', 'preventDefault', 'self', 'stopImmediatePropagation', 'stopPropagation', 'trusted'.
StyleDirective AST node
StyleDirective (type 'StyleDirective') represents style: directives. It has name (the 'x' in style:x), value (true for shorthand or ExpressionTag or array of Text/ExpressionTag), and modifiers array containing 'important'.
TransitionDirective AST node
TransitionDirective (type 'TransitionDirective') represents transition:, in:, or out: directives. It has name (the 'x' in transition:x), expression (the y in transition:x={y}, or null), modifiers array with 'local' or 'global', intro boolean (true for transition: or in:), and outro boolean (true for transition: or out:).
UseDirective AST node
UseDirective (type 'UseDirective') represents use: directives. It has name (the 'x' in use:x) and expression (the y in use:x={y}, or null).
BaseElement AST node properties
BaseElement nodes have name, name_loc (SourceLocation), attributes array (Attribute, SpreadAttribute, Directive, or AttachTag), and a fragment containing child nodes.
Component AST node
Component (type 'Component') extends BaseElement and represents a custom Svelte component instance in the template.
Special element types in AST
Special element types include: TitleElement (type 'TitleElement', name 'title'), SlotElement (type 'SlotElement', name 'slot'), RegularElement (type 'RegularElement' for HTML elements), SvelteBody, SvelteComponent, SvelteDocument, SvelteElement, SvelteFragment, SvelteBoundary, SvelteHead, SvelteSelf, SvelteWindow (all Svelte special elements).
SvelteComponent AST node
SvelteComponent (type 'SvelteComponent', name 'svelte:component') extends BaseElement and has an expression property for dynamic component selection.
SvelteElement AST node
SvelteElement (type 'SvelteElement', name 'svelte:element') extends BaseElement and has a tag property (Expression) for dynamic element tag.
EachBlock AST node
EachBlock (type 'EachBlock') represents {#each ...} blocks. It has expression, context (Pattern | null for the 'as' binding), body (Fragment), optional fallback (Fragment), optional index (string), and optional key (Expression).
IfBlock AST node
IfBlock (type 'IfBlock') represents {#if ...} blocks. It has test (Expression), consequent (Fragment), alternate (Fragment | null), and elseif (boolean) flag.
AwaitBlock AST node
AwaitBlock (type 'AwaitBlock') represents {#await ...} blocks. It has expression, value (Pattern | null for 'then' block), error (Pattern | null for 'catch' block), pending (Fragment | null), then (Fragment | null), and catch (Fragment | null).
KeyBlock and SnippetBlock AST nodes
KeyBlock (type 'KeyBlock') has expression and fragment. SnippetBlock (type 'SnippetBlock') has expression (Identifier), parameters (Pattern[]), optional typeParams (string), and body (Fragment).
Attribute AST node structure
Attribute (type 'Attribute') has name, name_loc (SourceLocation | null), and value which is true for boolean attributes or ExpressionTag or array of Text/ExpressionTag for string/dynamic values.
SpreadAttribute AST node
SpreadAttribute (type 'SpreadAttribute') has an expression property for spread operator attributes.
CompileOptions interface fields
CompileOptions extends ModuleCompileOptions and adds: name (string, inferred from filename if unspecified), customElement (boolean or function, default false), accessors (boolean, default false, deprecated in runes mode), namespace (string, default 'html'), immutable (boolean, default false, deprecated in runes mode), css ('injected' | 'external' | function, see details), cssHash (CssHashGetter function), preserveComments (boolean, default false), preserveWhitespace (boolean, default false), fragments ('html' | 'tree', default 'html', v5.33+), runes (boolean | undefined | function, default undefined), discloseVersion (boolean, default true), compatibility.componentApi (4 | 5, default 5), sourcemap (object | string), outputFilename (string), cssOutputFilename (string), hmr (boolean, default false), modernAst (boolean, default false).
css compile option: 'injected' vs 'external'
'injected': styles included in <head> for render(...), or injected into document/shadow root when component mounts. 'external': CSS only returned in css field of compilation result, used by bundler plugins for better performance and cacheable .css files. Always 'injected' for customElement mode.
runes compile option behavior
Set runes to true to force runes mode even without rune usage. Set to false to ignore runes usage. Set to undefined (default) to infer from code. Always true for JS/TS modules with compileModule. Will default to true in Svelte 6. Setting true in svelte.config.js forces runes for entire project including node_modules.
fragments compile option: 'html' vs 'tree'
'html': populates <template> with innerHTML and clones it, faster but cannot be used with Content Security Policy including require-trusted-types-for 'script'. 'tree': creates fragment one element at a time then clones, slower but works everywhere. Default 'html' in v5.33+.
CompileResult structure
CompileResult contains: js object with code (string) and map (SourceMap), css object with code, map, and hasGlobal (boolean) or null, warnings array (Warning[]), metadata object with runes (boolean), and ast (any).
perf_avoid_nested_class warning
The `perf_avoid_nested_class` warning recommends avoiding declaring classes below the top level scope for better performance.
perf_avoid_inline_class warning
The `perf_avoid_inline_class` warning recommends avoiding 'new class' declarations and instead declaring classes at the top level scope for better performance.