Indent Svelte <script> tags by 1 level

[notramo]

Currently, there is a mismatch between Prettier and Biome, as Prettier indents the <script> tag in Svelte:

<script lang="ts">
  import a from './a';

  if (a) {
    console.debug('hello world');
  }
</script>

but Biome starts the indent from 0:

<script lang="ts">
import a from './a';

if (a) {
  console.debug('hello world');
}
</script>

This can cause unnecessary modifications when switching from Prettier to Biome, which resets git blame to the formatting comment.

What about adding an extra pass to the formatter, and using the same parser that's used to extract the script part to extract it from the markup again, and add an indentation to every line? (Edit: see my other comment below for an even simpler solution)

[dyc3]

This is planned, but requires #3334. As you are likely already aware, Biome doesn't fully support svelte yet. I personally recommend excluding svelte files from being formatted by biome for the time being.

[notramo]

I'm aware of the current limitations, but since embedded language support will likely take a long time, I suggested this quick fix.
Since there is some hacky solution to extract the <script> part, treat it as TS, and then put it back, it's quite easy to modify it to accommodate this fix.

Three things required:

• when encountering a Svelte file, decrease lineWidth by exactly one indentWidth (since it will be indented, and lines exactly lineWidth would be longer after the indentation fix)
• do everything as currently (linting, formatting, import sorting, etc)
• when putting the formatted script back into the entire file, prefix every non-blank line with 1 configured indentation (space or tab)

[ematipico]

I already tried your suggestion when I implemented the support of these languages.

Unfortunately it isn't as easy as you might think, but you're welcome to try

[notramo]

@ematipico yes, you are correct, if it's simply a prefix, then it would modify multiline strings.

However, it seems I found a different solution, which can trick Biome into indenting the script, while considering things like multiline support: put the entire script into a namespace. Namespaces are syntactically valid TS, but deprecated, and not supported by the Svelte compiler natively, so it's certain that nobody uses them. However, if, for some reason it's used, that's not a problem either as namespaces can be nested.

Steps:

• after the script content is extracted from the markup, prepend namespace BiomeIndentFix {\n and append \n} to it.
• do everything as currently
• before putting it back into the file, remove the first and the last line

Basically, if the input Svelte component looks like this:

<script lang="ts">
  let { title }: { title: string } = $props();
</script>

<h1>{title}</h1>

then Biome will format this:

namespace BiomeIndentFix {
  let { title }: { title: string } = $props();
}

I tested this aproach by manually adding the namespace to some Svelte files in my editor, then running bun run biome format --write ... on them. It seems to be quite robust. Unfortunately, I don't know Rust, so I can't try it in the code.