CodeMirror Svelte Mode

This is a CodeMirror 6 extension that adds support for Svelte.

[!NOTE] This is a fork of the MIT licensed @replit/codemirror-lang-svelte.

Major Difference

• Support for new Svelte 5 template syntax (Attachement, Snippet, Render, in template await)
• Autocomplte for runes

As some parts are partially rewritten, the behaviour is slightly different from @replit/codemirror-lang-svelte. This version tends to be stricter towards grammar than the original one.

API Reference

svelte(config: Config): LanguageSupport

Config:

• jsParser: LRParser
  Javascript parser used to parse nodes inside <script> tags and template javascript expressions.
  Default: javascriptLanguage.parser from @codemirror/lang-javascript
  Useful for providing a parser with custom configs (e.g. overriding syntax highlighting)

• tsParser: LRParser
  Typescript parser used to parse nodes inside <script lang="ts"> tags.
  Default: typescriptLanguage.parser from @codemirror/lang-javascript
  Useful for providing a parser with custom configs (e.g. overriding syntax highlighting)

• cssParser: LRParser
  CSS parser used to parse nodes inside <style> tags.
  Default: cssLanguage.parser from @codemirror/lang-css
  Useful for providing a parser with custom configs (e.g. overriding syntax highlighting)

The extension also exports svelteLanguage (LRLanguage) and svelteParser (LRPraser) for advanced usage.

Usage

import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { svelte } from 'codemirror-lang-svelte';
import { basicSetup } from 'codemirror';
import { javascriptLanguage } from '@codemirror/lang-javascript';
import { styleTags, tags } from '@lezer/highlight';

new EditorView({
  state: EditorState.create({
    doc: `<script>let a = "hello world";</script> <div>{a}</div>`,
    extensions: [
      basicSetup,
      svelte({
        jsParser: javascriptLanguage.parser.configure({
          props: [
            styleTags({
              'CallExpression/MemberExpression/PropertyName': tags.function(
                tags.variableName
              ),
            }),
          ],
        }),
      })
    ],
  }),
  parent: document.querySelector('#editor'),
});