Add rule require-event-prefix

[marekdedic]

Motivation

In Svelte 5, all HTML element events are props starting with "on". Component events can have any name, so it is not clear, which props are events and which are not.

Description

I'd like to add a rule that requires that all props that are events (i.e. that are functions) start with "on"

Examples

<script lang="ts">
  /* ✓ GOOD */

  interface Props {
    regularProp: string;
    onclick(): void;
  }

  let { regularProp, onclick }: Props = $props;

  /* ✗ BAD */

  interface Props {
    click(): void;
  }

  let { click }: Props = $props;
</script>

Additional comments

I think this works even without TS, as the type would be in the parsed AST, right?

[ota-meshi]

Hmm. I think it would be useful to have that rule, but I'm worried about whether it's okay to judge all function props as event props 🤔.

What about implementing a rule that checks naming conventions for all props and provides examples for event names in the rule's documentation?
The rule could also disallow the on prefix for non-function props.

[marekdedic]

Well, in Svelte 5, IIUC there are no special event props - it's all just props, functions or not... I think in that case, it makes sense to treat function props as events...

Disallowing the on prefix for non-function props makes sense to me 👍

I don't really understand your point about naming convention for all props?

[ota-meshi]

I don't really understand your point about naming convention for all props?

For example, the following rule:

{
  "svelte/props-naming-convention": [
    "error",
    {
      "pattern": [
        "/^(?!on)/u" // Non-function props should not start with `on`.
      ],
      "overrides": [
        {
          "type": "function",
          "pattern": [
            "/^on/u" // Function props must start with `on`.
          ]
        },
      ]
    }
  ]
}

<script>
  /* ✓ GOOD */
  let { onclick = () => {}, num = 42 } = $props();
  /* ✗ BAD */
  let { onFoo = 42, bar = () => {} } = $props();
</script>

{
  "svelte/props-naming-convention": [
    "error",
    {
      "pattern": [...],
      "overrides": [
        {
          "type": "boolean",
          "pattern": [
            "/^is/u" // Boolean props must start with `is`.
          ],
        },
      ]
    }
  ]
}

<script>
  /* ✓ GOOD */
  let { isEnable = true } = $props();
  /* ✗ BAD */
  let { enable = true } = $props();
</script>