Svelte 5 migration: event modifier transformer doesn't respect indentation

[Rich-Harris]

Describe the bug

This...

<script>
  let count = 0;
</script>

<div>
  <div>
    <div>
      <div>
        <button on:click|preventDefault={() => count += 1}>
          clicks: {count}
        </button>
      </div>
    </div>
  </div>
</div>

...becomes this:

<script>
  let count = $state(0);
</script>

<div>
  <div>
    <div>
      <div>
        <button onclick={(event) => {
  event.preventDefault();
  count += 1
}}>
          clicks: {count}
        </button>
      </div>
    </div>
  </div>
</div>

Reproduction

demo

[Neptunium1129]

Off topic, how will this feature change?

on:click|self={test()}

[stalkerg]

sorry for off topic too, but a new way to making events is ugly, old solutions with on:click|preventDefault much much better from readability and usability. Declarative way here is the best.
Just check how many boilerplate we will have:

<button on:click|preventDefault={() => count += 1}>

vs

<button onclick={(event) => { event.preventDefault(); count += 1; }}>

also in that case we have classic abstract leaking, if we will have function should they should worry about event's options and not about business logic. Yes we can do it in the arrow function in place and just call our function somewhere else but it extra boilerplate again.

Really, sorry, I started fighting after battle but it's looks really bad. :(