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

Classes set imperatively (by actions) are removed when class directive updates #13404

Closed
Jibbedi opened this issue Sep 26, 2024 · 1 comment
Closed

Comments

@Jibbedi
Copy link

Jibbedi commented Sep 26, 2024

Describe the bug

I have an action that sets a class.

When i use a class directive that contain reactive values, the class set by the action is removed when the value updates.

I'm not sure if this is actually a bug or the expected behavior, since one could argue that the source of truth for the classes should be handled only by the component.

However i feel like actions kind of encourage classes to be added by them.

The problem only occurs for dynamic values inside class

class={"Button" + (small ? "small": "large")}

using a class:small directive for example does not remove the action class.

Is it possible to parse out any static value and continue to set them via $.set_class
while dynamic values get treated differently? At least for static analyzable values like in the example above the compiler could probably generate something like this?

const small = $.get(small);
$.toggle_class(button_1, "small", small);
$.toggle_class(button_1, "large", !small);

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE5WOQUvEMBCF_8o4eGix7Hqu7cqqR4-CB-MhptMlbJqUzlSQkv8uSdC9CZ4m8-blfW_D0TpibN829HoibPE4z9igfM1p4U9yQtggh3UxSenYLHaWg_JKHAmYsHqBHq5ZtFB1W98pn27j6o3Y4EHnUfkwUA1bOilJy844zfxsWXZ6GCqFx2x8TKrCOhljiUoYnrRzF8yoHVNCdftLH999rCLBw8rUFixkSJt_91sesWj9pvAh2xVGCN44a879VtXQH0rNH-RVfigf4-ElnE6O4DUsZ-72hfYn-UIBhXADVQm9B4UlFVtQ6PRyIoX1f3s8BWLwQXKh3z7Y4BQGO1oasJVlpfgevwGNOoQQ6AEAAA==

Logs

No response

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 33.33 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.volta/tools/image/node/20.11.1/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.1/bin/npm
    bun: 0.4.0 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 119.1.60.118
    Chrome: 129.0.6668.60
    Chrome Canary: 131.0.6740.0
    Edge: 129.0.2792.52
    Safari: 17.4.1
  npmPackages:
    svelte: ^5.0.0-next.259

Severity

annoyance

@paoloricciuti
Copy link
Member

Duplicate of #13270

Thanks for reporting tho 😄

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

No branches or pull requests

2 participants