impure expression in each block causes infinite loop in runtime

[milahu]

Describe the bug impure expression in each block causes infinite loop in runtime

Severity low priority

To Reproduce repl - uncomment //state[key] = val; to crash the browser tab

<script>
  const data = { k1: 'v1' };
  const state = {};
</script>
{#each
  ['k1'].map(key => {
    const val = data[key];
    console.log('step'); // should be called only once

    //state[key] = val;
    // this global assignment makes the each-expression impure
    // and causes an infinite loop in the svelte runtime
    // 'step' is printed over and over in the browser console

    return [key, val];
  }) as [key, val]
}
  <div>{key}: {val}</div>
{/each}

Expected behavior probably this impurity should be detected by the svelte compiler as fatal error at least i cannot think of a use case where this should work

Possible Solutions

1. compile time

parse the expression and look for assignments to non-local variables (sample code)

this would at least detect the simple case shown above. its harder to detect impure functions, that write to the global state

2. runtime

in the dev mode runtime, detect the infinite loop, stop it, and help to analyze (start devtools debugger?)

Related

• https://softwareengineering.stackexchange.com/questions/321794/programatically-determine-that-some-functions-are-pure
• https://stackoverflow.com/questions/29858699/algorithmically-identifying-pure-functions-in-javascript
  • i posted some sample code as a proof of concept
• https://glebbahmutov.com/blog/test-if-a-function-is-pure-revisited/

Env Svelte version 3.32.3

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.