Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5: State mutations in $effect breaks $derived #10836

Closed
ampatspell opened this issue Mar 18, 2024 · 1 comment · Fixed by #10842
Closed

Svelte 5: State mutations in $effect breaks $derived #10836

ampatspell opened this issue Mar 18, 2024 · 1 comment · Fixed by #10842
Assignees
Milestone

Comments

@ampatspell
Copy link

ampatspell commented Mar 18, 2024

Describe the bug

If $state and $derived are class fields and state is modified in $effect, $derived doesn't update.

<script lang="ts">
  type ModelProps = {
    name: string;
  }

  class Model {
    data = $state<ModelProps>();

    constructor(data: ModelProps) {
      this.data = data;
    }

    name = $derived(this.data?.name);

    toggle() {
      this.data!.name = this.data!.name === 'zeeba' ? 'neighba' : 'zeeba';
    }
  }

  let model = $state<Model>(new Model({ name: 'zeeba' }));
  let shouldCreate = $state(false);

  $effect(() => {
    if(shouldCreate) {
      model = new Model({ name: 'zeeba' });
      untrack(() => {
        shouldCrete = false;
      });
    }
  });

  // this breaks also non-effect case
  // $inspect(model.data, model.name);
</script>

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE52UTWvcMBCG_8pUBGzDZt0WevHaDoX2GCi00EPdg2LLjohWMtbsJlvj_15kSf7YbBrSk-XRzDOjd0bqSc0F0yT51RNJ94wk5HPbkg3BU2t-9JEJZGRDtDp0pbGkuux4iyCobLKCoC5IXkgAvm9Vh9DDQWJHywcYoO7UHgKLCHaFNG6GC7eqYuJbp1oNGfTGDGCyJ6Cx47LZWZPNuTIOllIKqrXF-PiKIoUMrjRSZOmcIQ8jkxoLtH6lkhq7Q4mqC01Msqgm8jAAvOd665jm40py-W25Jl3FOn5kVTj532zNVrQ6wguOdjPaeSaqphEsvFTFu61L-MySZRD8YeyOBnADgWS8uTfrxFvnwl31BQqGsB-1W-uVh5I9WjnC3jXEUTZTMwIuOXIqAhgiX7oBaoa3jhmuGxdBlpsjmR4YT8meEDJ4NRcMvnO-WBO5HANLY5X-znA6S1hToSdVr1hdsxLD0FdhxOB16MMWYvsThIGNCXwTwc_0mjKOwZx9TDtFDNFK-DOlfnK8_zomMXItoQsgdgfLG9bBX3jHShSn89C5_mr0cPUvtLIDdh43qrv1w7dbDEocj_MGdx2jDxqo0AqkktdWHyipZsY7juGKS90anS3MDOjGgf11SGP7cuSGnVb8aG9xVpCWNsy9Iiu7ZiVyJd3W2WanHguSp3cHRCVByVLw8iHrV-IO-fdp1LkEW3Ya25g8jSt-fBvaS78EV87231yr_JD_sN2ZFRylu4D1qwJflMvcmgu53UOIBpz1c38GFzGB_xk91eYRk-FtHHvNPcT-PSP41WSRqcaTYKMSWzM6fo5bWlVcNgl8eN8-udtXcd0KekqgFszbzPLado0rmUCpxGEv3WZD2wQ-zoCtU3W-9JeQr0Ad9tNE9a9xGvuzkA3Zq4rXnFUkMTd_-D38BfccLm-dBwAA

Logs

No response

System Info

System:
  OS: macOS 14.2.1
  CPU: (8) arm64 Apple M1
  Memory: 110.77 MB / 8.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
  Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
  npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  bun: 1.0.15 - ~/.bun/bin/bun
  Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
Browsers:
  Chrome: 122.0.6261.129
  Safari: 17.2.1
npmPackages:
  svelte: ^5.0.0-next.80 => 5.0.0-next.80

Severity

blocking all usage of svelte

@dummdidumm dummdidumm added this to the 5.0 milestone Mar 18, 2024
@dummdidumm
Copy link
Member

To reproduce:

  1. click "Set model in effect"
  2. click "Toggle model.data.name"

Hunch: Something about unowned signals

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants