-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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: desync in variable imported into components #12489
Comments
This is not a bug, as far as I can tell. An exported variable from a module is never a good thing because JS engines (primarily V8) cache (unsure if "cache" is the right word, but still) the exported objects. So even if Basically, this is how JavaScript works. |
I disagree, this does not explain the behavior
Looks like it, took me a while to figure it out. This is (part of) the generated code for import * as $ from "svelte/internal/client";
import { num } from './Store.svelte.js';
function onclick(_, $$props, num) {
$$props.foo();
console.log(num);
} Do you see it? The But regardless, the pattern you are using is definitely not the way to go. You shouldn't mutate an exported variable like that. You could use $state: |
Bug in event delegation; |
Thank you all for the incredible response time. The morning after (for me), and there's already a fix PR. I greatly appreciate this community and its framework.
Indirection (using either a container (object) or a getter, hiding direct access to the variable) was my first attempt at "fixing" the problem (not the root bug, but the symptom), and that did indeed work. Notice that using an object, even without But it seems, to me, like a "gotcha" to allow components to import variables, and allow those variables to be reassigned by the importee, and allow those changes to be propagated to the importers, but then not allow those changes to be reflected across all importers (depending on the calling context). To me, if it's "bad practice" or "not guaranteed to work" to rely on an imported variable maintaining state after mutations, then all imported variables ought to be constant, as that would be most self-consistent. I'm not an experienced front-end dev whatsoever, but those are just my two cents. If you have any counterpoints to my thoughts, I would love to hear them. :-) |
I was referring to what your code does in the context of Svelte (not to imports in general). Actively pulling |
Describe the bug
I don't have much experience with Svelte, so please pardon any inaccuracies in this report.
A variable held in a script, imported into two components (parent and child), mutated by a function in the script, which is called by a function in the parent component, which is passed as a prop into the child component and called by another function, will have a different value depending on whether it is the parent component or the child component that accesses it.
The REPL showcases the issue quite concisely. Click the button multiple times, and look at the console. The numbers printed should be the same each click, but
num
inComponent.svelte
doesn't update from its initial state of 0.I was discussing this with cirilla (gtmnayan) on the Svelte Discord (link to message), and they suspect "[t]hat's a bug with how event delegation is implemented."
Reproduction
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE51RQU7DMBD8ymIhtRVRAtc0rYT6BI6EA7gb5BLvWraDQJb_jt20SQ8IBCfHk9nZmXEQnerRifoxCHrWKGrx4Nli6d6x9ygK4T9NRg8ufTserMw3_DBsPfTogQYNG7hdt9TSCe4Gkl4xgSJpUSP55QpCIvhMvtnAXWLHpKd5rzqFe1F7O2AsJg_3xsyrJyvT-sZJq4zfZkmljztDNlLMGyFCZ1nDoqwuA5UHt1hfjO04nZT5Z_aEnCaO9DQwheqYz3GSzJxwPSKSyXGPZc-vy2RphGNLTTWbpmbeG5JehGr7Ux0T-z-l_NZEfsSQUyXiBq6NZePGNJepmWSv5Nuc_FjDnzK_DN4npXCSittdPkDjFdSrphp_f9PDU_wCkWj2IKYCAAA=
Logs
No response
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: