fix: error on `bind:this` to each block parameter (#12638)

* chore: remove outdated comment

* fix: error on `bind:this` to each block parameter
pull/12641/head
Rich Harris 2 months ago committed by GitHub
parent 7af0e604d8
commit 219ba6a71b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: error on `bind:this` to each block parameter

@ -385,33 +385,31 @@ const validation = {
const binding = context.state.scope.get(left.name);
if (
assignee.type === 'Identifier' &&
node.name !== 'this' // bind:this also works for regular variables
) {
if (assignee.type === 'Identifier') {
// reassignment
if (
!binding ||
(binding.kind !== 'state' &&
binding.kind !== 'frozen_state' &&
binding.kind !== 'prop' &&
binding.kind !== 'bindable_prop' &&
binding.kind !== 'each' &&
binding.kind !== 'store_sub' &&
!binding.mutated)
node.name !== 'this' && // bind:this also works for regular variables
(!binding ||
(binding.kind !== 'state' &&
binding.kind !== 'frozen_state' &&
binding.kind !== 'prop' &&
binding.kind !== 'bindable_prop' &&
binding.kind !== 'each' &&
binding.kind !== 'store_sub' &&
!binding.mutated))
) {
e.bind_invalid_value(node.expression);
}
if (binding.kind === 'derived') {
if (binding?.kind === 'derived') {
e.constant_binding(node.expression, 'derived state');
}
if (context.state.analysis.runes && binding.kind === 'each') {
if (context.state.analysis.runes && binding?.kind === 'each') {
e.each_item_invalid_assignment(node);
}
if (binding.kind === 'snippet') {
if (binding?.kind === 'snippet') {
e.snippet_parameter_assignment(node);
}
}

@ -0,0 +1,9 @@
import { test } from '../../test';
export default test({
error: {
code: 'each_item_invalid_assignment',
message:
'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)'
}
});

@ -0,0 +1,11 @@
<script lang="ts">
let array: Array<{ id: number; element: HTMLElement | null }> = $state([
{ id: 1, element: null },
{ id: 2, element: null },
{ id: 3, element: null }
]);
</script>
{#each array as { id, element } (id)}
<input bind:this={element} />
{/each}
Loading…
Cancel
Save