compile()

Convert Svelte source code into a JavaScript module

The compile() function converts your .svelte source code into a JavaScript module that exports a component.

Signature

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

Parameters

source · string · required

The component source code

options · CompileOptions · required

Compiler options. See Compiler Options for details.

Return Value

Returns a CompileResult object with the following properties:

js · object

The compiled JavaScript

js.code · string

The generated JavaScript code

js.map · SourceMap

A source map for the JavaScript

css · object | null

The compiled CSS (null if no styles)

css.code · string

The generated CSS code

css.map · SourceMap

A source map for the CSS

css.hasGlobal · boolean

Whether the CSS includes global rules

warnings · Warning[]

Array of warning objects generated during compilation. Each warning has:

• code: A string identifying the category of warning
• message: Human-readable description
• start and end: Location objects with line, column, and character properties (if applicable)

metadata · object

Metadata about the compiled component

metadata.runes · boolean

Whether the file was compiled in runes mode, either because of an explicit option or inferred from usage

ast · AST.Root

The abstract syntax tree of the component

Usage Examples

Basic Usage

import { compile } from 'svelte/compiler';

const source = `
<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
`;

const result = compile(source, {
  filename: 'App.svelte',
  dev: false,
  generate: 'client'
});

console.log(result.js.code);

With Vite Plugin

// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        dev: process.env.NODE_ENV === 'development',
        generate: 'client',
        hydratable: true,
        css: 'external'
      }
    })
  ]
});

With Rollup

// rollup.config.js
import svelte from 'rollup-plugin-svelte';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/bundle.js',
    format: 'iife'
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: process.env.NODE_ENV === 'development',
        css: 'external',
        hydratable: true
      }
    })
  ]
};

Server-Side Rendering

import { compile } from 'svelte/compiler';
import fs from 'fs';

const source = fs.readFileSync('App.svelte', 'utf-8');

const result = compile(source, {
  filename: 'App.svelte',
  generate: 'server',
  dev: false
});

// Use result.js.code for SSR
const Component = eval(result.js.code);
const { html, css, head } = Component.render({ props: {} });

Custom Element

import { compile } from 'svelte/compiler';

const result = compile(source, {
  filename: 'MyElement.svelte',
  customElement: true,
  dev: false
});

Related

• Compiler Options - Full list of compiler options
• preprocess() - Transform component source before compilation
• migrate() - Migrate Svelte 4 code to Svelte 5