diff --git a/.changeset/wild-queens-promise.md b/.changeset/wild-queens-promise.md new file mode 100644 index 000000000000..360b5f9eb4c9 --- /dev/null +++ b/.changeset/wild-queens-promise.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +Improve compiler output on legacy components to prevent infinite loops from + + + + + + + + `, + + async test({ assert, component, window, logs }) { + // Primary assertion: No infinite loop error + assert.notInclude(logs, 'Infinite loop detected'); + + // Verify component state + const select = window.document.querySelector('select'); + if (!select) { + assert.fail('Select element not found'); + return; + } + + // With default_details fallback nothing is selected + assert.equal(select.value, ''); + assert.equal(select.disabled, false); + + window.document.getElementById('btn-us')?.click(); + await tick(); + assert.equal(select.disabled, true); + assert.equal(select.value, 'US'); + + window.document.getElementById('btn-reset')?.click(); + await tick(); + assert.equal(select.value, ''); + assert.equal(select.disabled, false); + + window.document.getElementById('btn-fr')?.click(); + await tick(); + assert.equal(select.value, 'FR'); + assert.equal(select.disabled, true); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-block/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-block/main.svelte new file mode 100644 index 000000000000..45f2b129e81a --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-block/main.svelte @@ -0,0 +1,41 @@ + + + + + + + diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-fallback/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-fallback/_config.js new file mode 100644 index 000000000000..d4274870cad6 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-fallback/_config.js @@ -0,0 +1,46 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + html: ` + + + + + `, + + async test({ assert, component, window, logs }) { + // Primary assertion: No infinite loop error + assert.notInclude(logs, 'Infinite loop detected'); + + // Verify component state + const select = window.document.querySelector('select'); + if (!select) { + assert.fail('Select element not found'); + return; + } + + // With default_details fallback nothing is selected + assert.equal(select.value, ''); + assert.equal(select.disabled, false); + + window.document.getElementById('btn-us')?.click(); + await tick(); + assert.equal(select.disabled, true); + assert.equal(select.value, 'US'); + + window.document.getElementById('btn-reset')?.click(); + await tick(); + assert.equal(select.value, ''); + assert.equal(select.disabled, false); + + window.document.getElementById('btn-fr')?.click(); + await tick(); + assert.equal(select.value, 'FR'); + assert.equal(select.disabled, true); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-fallback/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-fallback/main.svelte new file mode 100644 index 000000000000..09b5dff734a9 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-fallback/main.svelte @@ -0,0 +1,38 @@ + + + + + + +