Svelte Language Server Formatting breaks with {@render children()}

[dmmulroy]

Describe the bug

When introducing {@render children()} in a svelte component the Svelte Language Server's formatting breaks entirely. I have verified this both in neovim and vscode. Prettier and Eslint were/are not installed so there should be no conflicts there.

Reproduction

// src/lib/my-component.svelte
<script lang="ts">
      import type { Snippet } from "svelte";

  let { children }: {       children: Snippet } = $props();
     



</script>

<div>{@render children(



)}       </div>

Expected behaviour

The language server should format the code/buffer.

System Info

• OS: OSX
• IDE: Neovim (also verified in VsCode)

Which package is the issue about?

svelte-language-server

Additional Information, eg. Screenshots

repo w/ reproduction: https://github.com/dmmulroy/svelte-formatting-bug

[dmmulroy]

Error message from the lsp logs:

"CompileError [ParseError]: Unexpected character '@'\n  1 | <script lang=\"ts\">\n  2 |       import type { Snippet } from \"svelte\";\n> 3 |\n    | ^\n  4 |   let { children }: {       children: Snippet } = $props();\n  5 |      \n  6 |\n    at error (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:13213:20)\n    at Parser$1.error (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:13291:10)\n    at Parser$1.acorn_error (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:13285:15)\n    at read_expression (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:8978:17)\n    at mustache (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:13033:29)\n    at new Parser$1 (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:13250:22)\n    at Object.parse$b [as parse] (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/svelte/compiler.js:13390:21)\n    at Object.parse (/Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/prettier-plugin-svelte/plugin.js:2287:65)\n    at parse4 (file:///Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/prettier/index.mjs:22117:24)\n    at async coreFormat (file:///Users/dmmulroy/.local/share/nvim/mason/packages/svelte-language-server/node_modules/svelte-language-server/node_modules/prettier/index.mjs:22607:7) {\n  code: 'parse-error',\n  start: { line: 3, column: 6, character: 215 },\n  end: { line: 3, column: 6, character: 215 },\n  pos: 215,\n  filename: undefined,\n  frame: '1: <script lang=\"ts\" ✂prettier:content✂=\"CiAgICAgIGltcG9ydCB0eXBlIHsgU25pcHBldCB9IGZyb20gInN2ZWx0ZSI7CgogIGxldCB7IGNoaWxkcmVuIH06IHsgICAgICAgY2hpbGRyZW46IFNuaXBwZXQgfSA9ICRwcm9wcygpOwogICAgIAoKCgo=\">{}</script>\\n' +\n    '2: \\n' +\n    '3: <div>{@render children(\\n' +\n    '         ^\\n' +\n    '4: \\n' +\n    '5: ',\n  loc: {\n    start: { line: 3, column: 6, character: 215 },\n    end: { line: 3, column: 6, character: 215 }\n  },\n  codeFrame: '  1 | <script lang=\"ts\">\\n' +\n    '  2 |       import type { Snippet } from \"svelte\";\\n' +\n    '> 3 |\\n' +\n    '    | ^\\n' +\n    '  4 |   let { children }: {       children: Snippet } = $props();\\n' +\n    '  5 |      \\n' +\n    '  6 |'\n}\n"

[jasonlyu123]

Duplicate of #2338. Svelte 5 require a workspace version of prettier-plugin-svelte because we currently bundled Svelte 3.

#2338 (comment)

[jrmoynihan]

Just in case anyone else stumbles onto this, you may need to add a .prettierrc file to your project even after you have installed the plugin. The Svelte startup template may not add it.

Here are the critical lines:

{
    "plugins": ["prettier-plugin-svelte"],
    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}