svelte/compiler
import {
const VERSION: string
The current version, as set in package.json.
VERSION,
function compile(source: string, options: CompileOptions): CompileResult
compile
converts your .svelte
source code into a JavaScript module that exports a component
compile,
function compileModule(source: string, options: ModuleCompileOptions): CompileResult
compileModule
takes your JavaScript source code containing runes, and turns it into a JavaScript module.
compileModule,
function migrate(source: string, { filename, use_ts }?: {
filename?: string;
use_ts?: boolean;
} | undefined): {
code: string;
}
Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.
May throw an error if the code is too complex to migrate automatically.
migrate,
function parse(source: string, options: {
filename?: string;
modern: true;
loose?: boolean;
}): AST.Root (+1 overload)
The parse function parses a component, returning only its abstract syntax tree.
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 preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: {
filename?: string;
} | undefined): Promise<Processed>
The preprocess function provides convenient hooks for arbitrarily transforming component source code.
For example, it can be used to convert a <style lang="sass">
block into vanilla CSS.
preprocess,
function walk(): never
walk
} from 'svelte/compiler';
VERSION
La version actuelle, telle que définie dans package.json
.
const VERSION: string;
compile
compile
convertit vos fichiers .svelte
source en des modules JavaScript qui exportent un
composant.
function compile(
source: string,
options: CompileOptions
): CompileResult;
compileModule
compileModule
prend votre code JavaScript contentant des runes, et le transforme en modules
JavaScript.
function compileModule(
source: string,
options: ModuleCompileOptions
): CompileResult;
migrate
Fait de son mieux pour migrer du code Svelte vers la syntaxe utilisant les runes, des attributs
d’évènement et des balises @render
. Peut lever des erreurs si le code est trop complexe pour
effectuer la migration de manière automatique.
function migrate(
source: string,
{
filename,
use_ts
}?:
| {
filename?: string;
use_ts?: boolean;
}
| undefined
): {
code: string;
};
parse
La fonction parse
parse un composant, ne renvoyant que son Arbre Syntaxique Abstrait (AST).
L’option modern
(false
par défaut en Svelte 5) oblige le parser à renvoyer un AST moderne plutôt
qu’un AST legacy. modern
aura pour valeur par défaut true
en Svelte 6, et l’option sera
supprimée en Svelte 7.
function parse(
source: string,
options: {
filename?: string;
modern: true;
loose?: boolean;
}
): AST.Root;
function parse(
source: string,
options?:
| {
filename?: string;
modern?: false;
loose?: boolean;
}
| undefined
): Record<string, any>;
preprocess
La fonction preprocess
fournit des hooks pratiques pour transformer du code source de composant
selon vos besoins. Par exemple, elle peut être utilisée pour convertir un bloc <style lang="sass">
en du CSS classique.
function preprocess(
source: string,
preprocessor: PreprocessorGroup | PreprocessorGroup[],
options?:
| {
filename?: string;
}
| undefined
): Promise<Processed>;
walk
Remplacez ceci par
import { walk } from 'estree-walker'
function walk(): never;
AST
namespace AST {
export interface BaseNode {
type: string;
start: number;
end: number;
}
export interface Fragment {
type: 'Fragment';
nodes: Array<
Text | Tag | ElementLike | Block | Comment
>;
}
export interface Root extends BaseNode {
type: 'Root';
/**
* Les options inline fournies par `<svelte:options>` — celles-ci écrasent celles passées à `compile(...)`
*/
options: SvelteOptions | null;
fragment: Fragment;
/** L'élément `<style>` parsé, s'il existe */
css: AST.CSS.StyleSheet | null;
/** L'élément `<script>` parsé, s'il existe */
instance: Script | null;
/** L'élément `<script module>` parsé, s'il existe */
module: Script | null;
}
export interface SvelteOptions {
// des infos start/end (nécéssaires pour les warnings et pour notre plugin Prettier)
start: number;
end: number;
// options
runes?: boolean;
immutable?: boolean;
accessors?: boolean;
preserveWhitespace?: boolean;
namespace?: Namespace;
css?: 'injected';
customElement?: {
tag?: string;
shadow?: 'open' | 'none';
props?: Record<
string,
{
attribute?: string;
reflect?: boolean;
type?:
| 'Array'
| 'Boolean'
| 'Number'
| 'Object'
| 'String';
}
>;
/**
* Est de type
* ```ts
* (ceClass: new () => HTMLElement) => new () => HTMLElement
* ```
*/
extend?: ArrowFunctionExpression | Identifier;
};
attributes: Attribute[];
}
/** Texte statique */
export interface Text extends BaseNode {
type: 'Text';
/** Du texte avec les entités HTML décodées */
data: string;
/** Le texte original, avec les entités HTML non décodées */
raw: string;
}
/** Une expression de template (possiblement réactive) — `{...}` */
export interface ExpressionTag extends BaseNode {
type: 'ExpressionTag';
expression: Expression;
}
/** Une expression de template HTML (possiblement réactive) — `{@html...}` */
export interface HtmlTag extends BaseNode {
type: 'HtmlTag';
expression: Expression;
}
/** Un commentaire HTML */
// TODO rename to disambiguate
export interface Comment extends BaseNode {
type: 'Comment';
/** le contenu du commentaire */
data: string;
}
/** Une balise `{@const ...}` */
export interface ConstTag extends BaseNode {
type: 'ConstTag';
declaration: VariableDeclaration & {
declarations: [
VariableDeclarator & {
id: Pattern;
init: Expression;
}
];
};
}
/** Une balise `{@debug ...}` */
export interface DebugTag extends BaseNode {
type: 'DebugTag';
identifiers: Identifier[];
}
/** Une balise `{@render foo(...)} */
export interface RenderTag extends BaseNode {
type: 'RenderTag';
expression:
| SimpleCallExpression
| (ChainExpression & {
expression: SimpleCallExpression;
});
}
/** Une directive `animate:` */
export interface AnimateDirective extends BaseNode {
type: 'AnimateDirective';
/** Le 'x' de `animate:x` */
name: string;
/** Le 'y' de `animate:x={y}` */
expression: null | Expression;
}
/** Une directive `bind:` */
export interface BindDirective extends BaseNode {
type: 'BindDirective';
/** Le 'x' de `bind:x` */
name: string;
/** Le 'y' in `bind:x={y}` */
expression:
| Identifier
| MemberExpression
| SequenceExpression;
}
/** Une directive `class:` */
export interface ClassDirective extends BaseNode {
type: 'ClassDirective';
/** Le 'x' de `class:x` */
name: 'class';
/** Le 'y' de `class:x={y}`, ou le `x` de `class:x` */
expression: Expression;
}
/** Une directive `let:` */
export interface LetDirective extends BaseNode {
type: 'LetDirective';
/** Le 'x' de `let:x` */
name: string;
/** Le 'y' de `let:x={y}` */
expression:
| null
| Identifier
| ArrayExpression
| ObjectExpression;
}
/** Une directive `on:` */
export interface OnDirective extends BaseNode {
type: 'OnDirective';
/** Le 'x' de `on:x` */
name: string;
/** Le 'y' de `on:x={y}` */
expression: null | Expression;
modifiers: string[];
}
/** Une directive `style:` */
export interface StyleDirective extends BaseNode {
type: 'StyleDirective';
/** Le 'x' de `style:x` */
name: string;
/** Le 'y' de `style:x={y}` */
value:
| true
| ExpressionTag
| Array<ExpressionTag | Text>;
modifiers: Array<'important'>;
}
// TODO have separate in/out/transition directives
/** Une directive `transition:`, `in:` ou `out:` */
export interface TransitionDirective extends BaseNode {
type: 'TransitionDirective';
/** Le 'x' de `transition:x` */
name: string;
/** Le 'y' de `transition:x={y}` */
expression: null | Expression;
modifiers: Array<'local' | 'global'>;
/** `true` si ceci est une directive `transition:` ou `in:` */
intro: boolean;
/** `true` si ceci est une directive `transition:` ou `out:` */
outro: boolean;
}
/** Une directive `use:` */
export interface UseDirective extends BaseNode {
type: 'UseDirective';
/** Le 'x' de `use:x` */
name: string;
/** Le 'y' de `use:x={y}` */
expression: null | Expression;
}
interface BaseElement extends BaseNode {
name: string;
attributes: Array<
Attribute | SpreadAttribute | Directive
>;
fragment: Fragment;
}
export interface Component extends BaseElement {
type: 'Component';
}
export interface TitleElement extends BaseElement {
type: 'TitleElement';
name: 'title';
}
export interface SlotElement extends BaseElement {
type: 'SlotElement';
name: 'slot';
}
export interface RegularElement extends BaseElement {
type: 'RegularElement';
}
export interface SvelteBody extends BaseElement {
type: 'SvelteBody';
name: 'svelte:body';
}
export interface SvelteComponent extends BaseElement {
type: 'SvelteComponent';
name: 'svelte:component';
expression: Expression;
}
export interface SvelteDocument extends BaseElement {
type: 'SvelteDocument';
name: 'svelte:document';
}
export interface SvelteElement extends BaseElement {
type: 'SvelteElement';
name: 'svelte:element';
tag: Expression;
}
export interface SvelteFragment extends BaseElement {
type: 'SvelteFragment';
name: 'svelte:fragment';
}
export interface SvelteBoundary extends BaseElement {
type: 'SvelteBoundary';
name: 'svelte:boundary';
}
export interface SvelteHead extends BaseElement {
type: 'SvelteHead';
name: 'svelte:head';
}
/** Ceci n'est qu'une représentation intermédiaire lors du parsing, elle n'existe pas dans l'AST final */
export interface SvelteOptionsRaw extends BaseElement {
type: 'SvelteOptions';
name: 'svelte:options';
}
export interface SvelteSelf extends BaseElement {
type: 'SvelteSelf';
name: 'svelte:self';
}
export interface SvelteWindow extends BaseElement {
type: 'SvelteWindow';
name: 'svelte:window';
}
/** Un bloc `{#each ...}` */
export interface EachBlock extends BaseNode {
type: 'EachBlock';
expression: Expression;
/** Le `entry` dans `{#each item as entry}`. `null` si `as` n'est pas fourni */
context: Pattern | null;
body: Fragment;
fallback?: Fragment;
index?: string;
key?: Expression;
}
/** Un `{#if ...}` */
export interface IfBlock extends BaseNode {
type: 'IfBlock';
elseif: boolean;
test: Expression;
consequent: Fragment;
alternate: Fragment | null;
}
/** Un bloc `{#await ...}` */
export interface AwaitBlock extends BaseNode {
type: 'AwaitBlock';
expression: Expression;
// TODO can/should we move these inside the ThenBlock and CatchBlock?
/** La valeur résolue dans le bloc `then` */
value: Pattern | null;
/** La raison du rejet dans le bloc `catch` */
error: Pattern | null;
pending: Fragment | null;
then: Fragment | null;
catch: Fragment | null;
}
export interface KeyBlock extends BaseNode {
type: 'KeyBlock';
expression: Expression;
fragment: Fragment;
}
export interface SnippetBlock extends BaseNode {
type: 'SnippetBlock';
expression: Identifier;
parameters: Pattern[];
body: Fragment;
}
export interface Attribute extends BaseNode {
type: 'Attribute';
name: string;
/**
* Les valeurs entre guillemets sont représentées par un tableau, même si elles ne contiennent pas d'expression comme `"{x}"`
*/
value:
| true
| ExpressionTag
| Array<Text | ExpressionTag>;
}
export interface SpreadAttribute extends BaseNode {
type: 'SpreadAttribute';
expression: Expression;
}
export interface Script extends BaseNode {
type: 'Script';
context: 'default' | 'module';
content: Program;
attributes: Attribute[];
}
export type AttributeLike =
| Attribute
| SpreadAttribute
| Directive;
export type Directive =
| AST.AnimateDirective
| AST.BindDirective
| AST.ClassDirective
| AST.LetDirective
| AST.OnDirective
| AST.StyleDirective
| AST.TransitionDirective
| AST.UseDirective;
export type Block =
| AST.EachBlock
| AST.IfBlock
| AST.AwaitBlock
| AST.KeyBlock
| AST.SnippetBlock;
export type ElementLike =
| AST.Component
| AST.TitleElement
| AST.SlotElement
| AST.RegularElement
| AST.SvelteBody
| AST.SvelteBoundary
| AST.SvelteComponent
| AST.SvelteDocument
| AST.SvelteElement
| AST.SvelteFragment
| AST.SvelteHead
| AST.SvelteOptionsRaw
| AST.SvelteSelf
| AST.SvelteWindow
| AST.SvelteBoundary;
export type Tag =
| AST.ExpressionTag
| AST.HtmlTag
| AST.ConstTag
| AST.DebugTag
| AST.RenderTag;
export type TemplateNode =
| AST.Root
| AST.Text
| Tag
| ElementLike
| AST.Attribute
| AST.SpreadAttribute
| Directive
| AST.Comment
| Block;
export type SvelteNode =
| Node
| TemplateNode
| AST.Fragment
| _CSS.Node;
export type { _CSS as CSS };
}
CompileError
interface CompileError extends ICompileDiagnostic {}
CompileOptions
interface CompileOptions extends ModuleCompileOptions {…}
name?: string;
Définit le nom de la classe JavaScript compilée (même si le compilateur la renommera si elle devait
être en conflit avec d’autres variables dans le scope).
Si non spécifié, sera inférée depuis filename
.
customElement?: boolean;
- par défaut
false
Si true
, dit au compilateur de générer un constructeur d’élément personnalisé plutôt qu’un
composant Svelte classique.
accessors?: boolean;
- par défaut
false
- déprécié Ceci n’aura aucun effet en modes runes
Si true
, des getters et setters seront créés pour les props du composant. Si false
, ils ne
seront créés que pour des valeurs exportées (par ex. celles déclarées avec const
, class
, et
function
).
Si compilée avec customElement: true
, cette option vaut par défaut true
.
namespace?: Namespace;
- par défaut
'html'
Le namespace de l’élément ; par ex. "html"
, "svt"
, "mathml"
.
immutable?: boolean;
- par défaut
false
- déprécié Ceci n’aura aucun effet en mode runes
Si true
, dit au compilateur que vous promettez de ne jamais muter d’objet.
Ceci lui permet d’être moins conservatif lors des vérifications de changements de valeur.
css?: 'injected' | 'external';
'injected'
: les styles seront inclus dans lehead
lors derender(...)
, et injectés dans le document (si non déjà présents) lorsque le composant sera monté. Pour les composants compilés en tant qu’éléments personnalisés, les styles sont injectés dans le shadow root.'external'
: le CSS ne sera renvoyé que dans le champcss
du résultat de compilation. La plupart des plugins Svelte de bundler mettent cette option à'external
et utilisent le CSS qui est généré statiquement pour obtenir de meilleures performances, puisque cela conduit à des bundles JavaScript plus petits, et que l’output peut être servi en tant que fichiers.css
pouvant être mis en cache. Cette option vaut toujours'injected'
lorsque vous compilez avec l’optioncustomElement
.
cssHash?: CssHashGetter;
- par défaut
undefined
Une fonction qui prend un argument de forme { hash, css, name, filename }
et renvoie la chaîne de
caractères utilisée comme nom de classe pour le CSS scopé.
Par défaut elle renvoie svelte-${hash(css)}
.
preserveComments?: boolean;
- par défaut
false
Si true
, vos commentaires HTML seront préservés dans l’output. Par défaut ils sont supprimés.
preserveWhitespace?: boolean;
- par défaut
false
Si true
, les espaces dans et entre les éléments sont gardés tels que vous les avez écrits, plutôt
supprimés ou fusionnés en un seul espace lorsque c’est possible.
runes?: boolean | undefined;
- par défaut
undefined
Définir à true
pour forcer le compilateur en mode runes, même s’il n’y a pas d’indications de
l’usage de runes.
Définir à false
pour forcer le compilateur à ignorer le mode runes, même s’il y
a des indications de l’usage de runes.
Définir à undefined
(valeur par défaut) pour inférer le mode runes à partir du code du composant.
Vaut toujours true
pour les modules JS/TS compilés avec Svelte.
Vaudra true
par défaut en Svelte 6.
Notez que définir cette valeur à true
dans votre svelte.config.js
va forcer le mode runes pour
tout votre projet, en incluant les composants dans node_modules
, ce qui n’est probablement pas ce
que vous souhaitez. Si vous utilisez Vite, envisagez plutôt l’utilisation de
dynamicCompileOptions
discloseVersion?: boolean;
- default
true
Si true
, expose la version majeure de Svelte dans le navigateur en l’ajoutant à un Set
stocké
dans l’objet global window.__svelte.v
.
compatibility?: {…}
- déprécié Utilisez ceci uniquement comme une solution temporaire avant de migrer votre code
componentApi?: 4 | 5;
- par défaut
5
Applique une transformation de sorte que les exports par défaut des fichiers Svelte puisse toujours
être instanciés de la même façon qu’ils l’étaient en Svelte 4 — une classe lorsque vous compilez
pour le navigateur (comme si vous utilisiez createClassComponent(MyComponent, {...})
depuis
svelte/legacy
) ou un objet avec une méthode .render(...)
lorsque vous compilez pour le serveur.
sourcemap?: object | string;
- par défaut
null
Une sourcemap initiale qui sera fusionnée dans la sourcemap finale. C’est en général la sourcemap du préprocesseur.
outputFilename?: string;
- par défaut
null
Utilisé pour la sourcemap JavaScript.
cssOutputFilename?: string;
- par défaut
null
Utilisé pour la sourcemap CSS.
hmr?: boolean;
- par défaut
false
Si true
, compile les composants de manière compatible avec le hot module reloading.
modernAst?: boolean;
- par défaut
false
Si true
, renvoie la version moderne de l’AST.
Vaudra true
par défaut dans Svelte 6, et l’option sera supprimée dans Svelte 7.
CompileResult
La valeur de retour de compile
importée depuis svelte/compiler
.
interface CompileResult {…}
js: {…}
Le JavaScript compilé
code: string;
Le code généré
map: SourceMap;
Une sourcemap
css: null | {
/** Le code généré */
code: string;
/** Une sourcemap */
map: SourceMap;
};
Le CSS compilé
warnings: Warning[];
Un tableau d’objets de warnings qui ont été généré pendant la compilation. Chaque warning a plusieurs propriétés :
code
est une chaîne de caractères identifiant la catégory du warningmessage
décrit le problème en des termes lisibles par l’humainstart
etend
, si le warning est relatif à une position précise, sont des objets avec les propriétésline
,column
etcharacter
metadata: {…}
Les métadonnées concernant le composant compilé
runes: boolean;
Si oui ou non le fichier a été compilé en mode runes, soit via une option explicite, soit inféré
depuis l’usage.
Avec l’option compileModule
, ceci vaudra toujours true
.
ast: any;
L’AST
MarkupPreprocessor
Un préprocesseur de markup qui prend une chaîne de caractères représentant du code et en renvoie une version compilée.
type MarkupPreprocessor = (options: {
/**
* Le contenu complet du fichier Svelte
*/
content: string;
/**
* Le nom du fichier Svelte
*/
filename?: string;
}) => Processed | void | Promise<Processed | void>;
ModuleCompileOptions
interface ModuleCompileOptions {…}
dev?: boolean;
- par défaut
false
Si true
, provoque l’ajout de code supplémentaire pour effectuer des vérifications lors de
l’exécution et fournir des informations de debug lors du développement.
generate?: 'client' | 'server' | false;
- par défaut
'client'
Si "client"
, Svelte émet du code prévu pour être exécuté dans le navigateur.
Si "server"
, Svelte émet du code prévu pour le rendu côté serveur.
Si false
, rien n’est généré. Utile pour de l’outillage qui ne sert qu’aux warnings.
filename?: string;
Utile pour les aides au debug et les sourcemaps. Votre plugin de bundler le définit automatiquement.
rootDir?: string;
- par défaut
process.cwd() dans les environnements similairess à Node, undefined ailleurs
Utile pour s’assurer que les noms de fichiers ne fassent pas fuiter des informations sur le système de fichiers. Votre plugin de bundler le définit automatiquement.
warningFilter?: (warning: Warning) => boolean;
Une fonction qui prend un Warning
en argument et renvoie un booléen.
Utilisez ceci pour filtrer les warnings. Renvoyez true
pour garder le warning, false
pour
l’ignorer.
Preprocessor
Un préprocesseur de script et de style qui prend en argument une chaîne de caractères représentant du code et renvoie une version processée.
type Preprocessor = (options: {
/**
* Le contenu de la balise de script ou de style
*/
content: string;
/**
* Les attributs de la balise de script ou de style
*/
attributes: Record<string, string | boolean>;
/**
* Le contenu complet du fichier Svelte
*/
markup: string;
/**
* Le nom du fichier Svelte
*/
filename?: string;
}) => Processed | void | Promise<Processed | void>;
PreprocessorGroup
Un group de préprocesseur est un ensemble de préprocesseurs qui sont appliqués à un fichier Svelte.
interface PreprocessorGroup {…}
name?: string;
Nom du préprocesseur. Sera une option obligatoire dans la prochaine version majeure
markup?: MarkupPreprocessor;
style?: Preprocessor;
script?: Preprocessor;
Processed
Le résultat d’une exécution de préprocesseur. Si le préprocesseur ne renvoie pas de résultat, on suppose que le code n’a pas changé.
interface Processed {…}
code: string;
Le nouveau code
map?: string | object;
Une sourcemap renvoyant vers le code original
dependencies?: string[];
Une liste de fichiers additionnels dont il faut écouter les changements
attributes?: Record<string, string | boolean>;
Uniquement pour les préprocesseurs de script ou de style : les attributs mis à jour à définir sur la
balise. Si undefined
, les attributs ne seront pas modifiés.
toString?: () => string;
Warning
interface Warning extends ICompileDiagnostic {}
Modifier cette page sur Github