From a2565efa37dfbba2e462eb5cdbb6c47424ce98ad Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 8 Jan 2025 19:37:26 +0100 Subject: [PATCH] docs: tweak "invalid assignment" compiler error message (#14955) * docs: tweak "invalid assignment" compiler error message fixes #14702 * tweak wording --------- Co-authored-by: Rich Harris --- .changeset/sharp-dryers-try.md | 5 +++ .../98-reference/.generated/compile-errors.md | 34 ++++++++++++++++++- .../svelte/messages/compile-errors/script.md | 34 ++++++++++++++++++- packages/svelte/src/compiler/errors.js | 4 +-- .../_config.js | 2 +- .../runes-invalid-each-binding/_config.js | 2 +- .../runes-invalid-each-mutation/_config.js | 2 +- 7 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 .changeset/sharp-dryers-try.md diff --git a/.changeset/sharp-dryers-try.md b/.changeset/sharp-dryers-try.md new file mode 100644 index 0000000000..dcdbd99d02 --- /dev/null +++ b/.changeset/sharp-dryers-try.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: tweak "invalid assignment" compiler error message diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md index c498920007..a867cfe88c 100644 --- a/documentation/docs/98-reference/.generated/compile-errors.md +++ b/documentation/docs/98-reference/.generated/compile-errors.md @@ -331,7 +331,39 @@ The $ prefix is reserved, and cannot be used for variables and imports ### each_item_invalid_assignment ``` -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`) +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`, or `bind:value={array[i]}` instead of `bind:value={entry}`) +``` + +In legacy mode, it was possible to reassign or bind to the each block argument itself: + +```svelte + + +{#each array as entry} + + + + + +{/each} +``` + +This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead: + +```svelte + + +{#each array as entry, i} + + + + + +{/each} ``` ### effect_invalid_placement diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md index fa851cec89..0aa6fbed90 100644 --- a/packages/svelte/messages/compile-errors/script.md +++ b/packages/svelte/messages/compile-errors/script.md @@ -32,7 +32,39 @@ ## each_item_invalid_assignment -> 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`) +> 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`, or `bind:value={array[i]}` instead of `bind:value={entry}`) + +In legacy mode, it was possible to reassign or bind to the each block argument itself: + +```svelte + + +{#each array as entry} + + + + + +{/each} +``` + +This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead: + +```svelte + + +{#each array as entry, i} + + + + + +{/each} +``` ## effect_invalid_placement diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js index 870cd9ac09..a997eeef8d 100644 --- a/packages/svelte/src/compiler/errors.js +++ b/packages/svelte/src/compiler/errors.js @@ -151,12 +151,12 @@ export function dollar_prefix_invalid(node) { } /** - * 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`) + * 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`, or `bind:value={array[i]}` instead of `bind:value={entry}`) * @param {null | number | NodeLike} node * @returns {never} */ export function each_item_invalid_assignment(node) { - e(node, "each_item_invalid_assignment", `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\`)\nhttps://svelte.dev/e/each_item_invalid_assignment`); + e(node, "each_item_invalid_assignment", `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\`, or \`bind:value={array[i]}\` instead of \`bind:value={entry}\`)\nhttps://svelte.dev/e/each_item_invalid_assignment`); } /** diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js index 524c2f161c..ed02e0960d 100644 --- a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js +++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js @@ -4,6 +4,6 @@ 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`)' + '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`, or `bind:value={array[i]}` instead of `bind:value={entry}`)' } }); diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js index 524c2f161c..ed02e0960d 100644 --- a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js +++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js @@ -4,6 +4,6 @@ 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`)' + '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`, or `bind:value={array[i]}` instead of `bind:value={entry}`)' } }); diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js index 524c2f161c..ed02e0960d 100644 --- a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js +++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js @@ -4,6 +4,6 @@ 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`)' + '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`, or `bind:value={array[i]}` instead of `bind:value={entry}`)' } });