[feat] Sorting component or element props

Is your feature request related to a problem? Please describe. To make it clean I always try to sort the props, event handlers, actions and so on in a consistent way. Manually, of course. Wouldn’t it be cool to do it automatically?

Describe the solution you’d like It would be super nice if this plugin could sort the props automatically with some rules, like: class, shorthand conditional class, conditional class, shorthand props, key props, actions without params, actions with params, forwarding events, handling events and, eventually, CSS vars. Maybe it would be cool to also sort them alphabetically as well. It would also be nice if it automatically grouped all these properties with an extra newline (now it removes all of them).

It would turn a messy element (real-world example, btw), like

<input
  class="input"
  class:is-success={field.isBlurred && field.isValid}
  type={field.type}
  {id}
  value={field.inputValue || ''}
  disabled={field.disabled || $formStore.formDisabled}
  placeholder={field.placeholder}
  readonly={field.readonly}
  aria-label={field.label}
  autocomplete={field.enableAutocomplete ? '' : 'off'}
  on:input={onInput}
  use:clearOnEscape
  class:is-danger={field.isBlurred && !field.isValid}
  on:blur />

into this beautiful thing:

<input
  class="input"
  class:is-success={field.isBlurred && field.isValid}
  class:is-danger={field.isBlurred && !field.isValid}
  
  {id}
  autocomplete={field.enableAutocomplete ? '' : 'off'}
  aria-label={field.label}
  disabled={field.disabled || $formStore.formDisabled}
  placeholder={field.placeholder}
  readonly={field.readonly}
  type={field.type}
  value={field.inputValue || ''}
  
  use:clearOnEscape

  on:blur 
  on:input={onInput} />

Describe alternatives you’ve considered Just do it manually.

How important is this feature to you? Not that much, but would be a very cool addition!

Additional context

1. I’m not sure it is in the scope of the project at all
2. I’m not sure if changing the order doesn’t have any side effects. Afaik, it is common to make templates pure-ish so they don’t change the state, but a user can still call some functions that make the order of props kind if important. I would think it is a very bad pattern but still it’s not prohibited.

[dummdidumm]

I don’t think we can make this an option, because the order matters and there’s no good way to tell the user’s intent - see the last section in https://svelte.dev/docs#bind_element_property .

[pngwn]

It is okay to be opinionated as long as those opinions are correct, which is to say, they agree with mine. 👹

I personally think all component should look like upside down Christmas tree.