Skip to main content

svelte/compiler

import {
	const VERSION: string

The current version, as set in package.json.

https://svelte.dev/docs/svelte-compiler#svelte-version

VERSION
,
function compile(source: string, options: CompileOptions): CompileResult

compile converts your .svelte source code into a JavaScript module that exports a component

@paramsource The component source code
@paramoptions The compiler options
compile
,
function compileModule(source: string, options: ModuleCompileOptions): CompileResult

compileModule takes your JavaScript source code containing runes, and turns it into a JavaScript module.

@paramsource The component source code
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 &#x3C;style lang="sass"> block into vanilla CSS.

preprocess
,
function walk(): never
@deprecatedReplace this with import { walk } from 'estree-walker'
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 le head lors de render(...), 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 champ css 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’option customElement.
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 warning
  • message décrit le problème en des termes lisibles par l’humain
  • start et end, si le warning est relatif à une position précise, sont des objets avec les propriétés line, column et character
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

précédent suivant