Rule to point out when a `$bindable` is not used as such

[AntonioVentilii]

Motivation

It is useful and a better code (by dev's choice) to point out when a $bindable prop is not being used as bindable in the parent consumer.

Description

The rule will enforce the use of a prop as $bindable in the parent, if it is defined as such. Otherwise the exception should be explicitly set with eslint-disable-next-line (or similar).

Examples

<!-- Child -->
<script lang="ts">
	interface Props {
		value: number;
	}

	let { value = $bindable(0) }: Props = $props();
</script>

<button onclick={() => value++}>Increment</button>

The value is {value}

<!-- Parent -->
<script>
        let value = $state(0);
</script>

<!-- ✓ GOOD -->
<Child bind:value />

<!-- ✗ BAD -->
<Child {value} />

[AntonioVentilii]

Inspired by @peterpeterparker 's suggestion: the idea is to make $bindable props more obvious

[sacrosanctic]

bind:value is optional, we shouldn't enforce it with an eslint rule. With JSDocs, you can hover over the property to know if it is $bindable.

Something like this is more appropriate if we're talking about discoverability.