A .svelte.ts file does not create reactivity across numerous $derived updates about svelte HOT 28 CLOSED

toReversed would not do it in place. Dumb that there isn't a dx catch.

from svelte.

toReversed would not do it in place. Dumb that there isn't a dx catch.

Wdym by this? That's not something svelte can warn you against. It's a prop, from what svelte is concerned you might really want to reverse that array whenever you render.

And toReversed works, I just tested it.

from svelte.

I found difficult following what you want to achieve. Can you provide a more minimal example in the repl? Or at least provide an example usage of those functions.

from svelte.

They're just getters. So have a class or a closure that has a lot of $states and $deriveds in a .svelte.ts then have a Component that calls the getters of the $derived. If I depend on a field of an object created by a $derived in a .svelte.ts from a Component, it actually freezes the page (not even cmd + w will close the tab).

const appData = createAppData()
appData.addInspectResult()

That code will cause a frozen Svelte app that depends on a $derived using the data mutated in addInspectResult.

from svelte.

Are there any code samples of using chained $deriveds in a .svelte.ts with Svelte 5?

from svelte.

They're just getters. So have a class or a closure that has a lot of $states and $deriveds in a .svelte.ts then have a Component that calls the getters of the $derived. If I depend on a field of an object created by a $derived in a .svelte.ts from a Component, it actually freezes the page (not even cmd + w will close the tab).

const appData = createAppData()
appData.addInspectResult()

That code will cause a frozen Svelte app that depends on a $derived using the data mutated in addInspectResult.

I mean those are just getters with states and derived in a svelte.js file and a component that call the getter and it works just fine.

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE2VQy27DIBD8lRXqwUmspMoxji1F6l-UHgheV7Q2IFiiVhb_XmGTOE3EAbHDPHZG1qkePTu8j0yLAdmBnaxlJaNfmx7-gj0hK5k3wck0OXrplKWGa05qsMYRjCAdCsKTtW-CBETonBmAs-2O0NN2FuGs4jqxpNGeQOTP9X9ysaq4Pu4WE308ByKjwWjZK_ldj8WqbsYklCW20gRN6DabiusYp2TjAxZhDXuo4TZvTTj32MZkNhs0rGSDaVWnsGUHcgFjeSvlbo-lnC9_Xwz-TGV0QUtSRj-uNSXukSAnghpePAnC4jWtfK0l50poi05dsC2uhDXsV7lChxSchkmT0-eimn3SyX8yUM3jWM63v6NcRB9w4S35JuCBmLxyxmevDFwp6Ypcx-diP-If3KLqYnkCAAA=

So either you mean something different or there are other things in play, that's why i ask you to provide a repl :)

from svelte.

I think the problem comes from state being a complex object graph with optional fields.

from svelte.

I was going to try creating a smaller recreation since the two recreations I posted require too much setup to run.

from svelte.

I was going to try creating a smaller recreation since the two recreations I posted require too much setup to run.

Yeah thanks...ping me whenever you create a minimal repro, possible in the repl with instructions on how to spot the problem. 😊

from svelte.

I tried recreating the bug in the REPL with no luck. Also updated svelte on those two branches that create the crash condition.

Either branch svelte-ts-hof or svelte-ts-class of that repo demonstrates the crash that brings the browser down (and doesn't happen in branch main with using a .svelte.ts data layer).

Here are instructions on how to run the program and recreate:

pnpm i
cd qwerky
pnpm build:watch &
pnpm start:watch &
cd ../ui
pnpm dev

Here is a video of main branch where the page is responsive and events keep firing and renders keep rendering

Here is branch svelte-ts-hof that crashes the page

from svelte.

I recreated this issue by cutting the UI package out of that monorepo and removing the dependency on the API process.

This can now be recreated by running pnpm dev from this repo:

https://github.com/eighty4/svelte-crash

Before a click on the image, the image can be panned with mouse down and mouse move up and down. Clicking on the image causes the AppData.svelte.ts reactivity and crashes the app. Having the $state and $derived data in the component instead of a .svelte.ts does not crash.

from svelte.

I recreated this issue by cutting the UI package out of that monorepo and removing the dependency on the API process.

This can now be recreated by running pnpm dev from this repo:

https://github.com/eighty4/svelte-crash

Before a click on the image, the image can be panned with mouse down and mouse move up and down. Clicking on the image causes the AppData.svelte.ts reactivity and crashes the app. Having the $state and $derived data in the component instead of a .svelte.ts does not crash.

https://www.sveltelab.dev/3jo0l8re6ct94ko

It works for me unless i'm misunderstanding something

from svelte.

You don't get an unresponsive page in chrome browser?

I appreciate you taking the time to run the project. Could you record a video like I created of the clicks on the loaded image? I'm not sure why it would crash Chromium for one user and not another.

from svelte.

from svelte.

Swapped out the image with the Svelte logo? Did you do a click on the image before trying to pan? Is that REPL project shareable?

from svelte.

comes

@eighty4 I believe I am encountering a similar problem with page freezes when using many derived field against a complex stateful object. Your repo also freezes for me so you're not going crazy 👍

from svelte.

Swapped out the image with the Svelte logo? Did you do a click on the image before trying to pan? Is that REPL project shareable?

Your GitHub repo didn't have any image so I had to use something. Isn't a click necessary to pan or you mean just click and then release? I shared that repl in the message above

https://www.sveltelab.dev/3jo0l8re6ct94ko

from svelte.

The repo had a json file with a base64 png that was loaded into the $state field. I hope that made it into git.

from svelte.

The repo had a json file with a base64 png that was loaded into the $state field. I hope that made it into git.

It did not. That's why I had to base64 a random image and put it in the file together with height and width. Did you open my link?

from svelte.

The repo has a src/lib/img.json. I just double checked.

from svelte.

Also I couldn't tell in your video if you were doing the click on the image (without panning) which is what triggers the derived that causes the freeze.

from svelte.

Also I couldn't tell in your video if you were doing the click on the image (without panning) which is what triggers the derived that causes the freeze.

Yeah that's what I was asking. It was not clear from your description that you had to do that. I'll try again

from svelte.

Ok with the single click i can see the crash. However inspecting the flow it seems most likely that you are involuntarely triggering an infinite loop reading and writing some signal. The code you provided as a reproduction is too much to pinpoint the issue in svelte. I would suggest you to try to find a much more minimal reproduction because it's very possible that this is just a bug in your code.

from svelte.

from svelte.

I'm not convinced because I've applied the same derived state flow without a svelte.ts file on the main branch of eighty4/qwerky. It's actually just the same code but in a giant god component (qwerky_app.svelte). So the same state changes work without crashing in a .svelte component. The bug stops as soon as you don't pass boundingBoxes to open_page.svelte. Since passing that derived state to open_page doesn't trigger any additional state updates, I'm not sure how that could be a logic error. If it was a logic error, shouldn't the compiler have a safeguard against infinite updates?
…
On Sun, Apr 21, 2024, 9:29 AM Paolo Ricciuti @.> wrote: Ok with the single click i can see the crash. However inspecting the flow it seems most likely that you are involuntarely triggering an infinite loop reading and writing some signal. The code you provided as a reproduction is too much to pinpoint the issue in svelte. I would suggest you to try to find a much more minimal reproduction because it's very possible that this is just a bug in your code. — Reply to this email directly, view it on GitHub <#11188 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL7MQY6NXXOCQU5TAXQSFILY6PEKXAVCNFSM6AAAAABGIQR3PSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRYGA3DIOBTGQ . You are receiving this because you were mentioned.Message ID: @.>

I'm trying to explore a bit more and if you add an $inspect for appData inside app_panel you can see the logs goes crazy after the click.

from svelte.

Continuing my exploration: the bug occurs when there's more then one element in the elements array of the inspection

from svelte.

@eighty4 here's your bug:

https://github.com/eighty4/svelte-crash/blob/3f105b4ead383e24385c05b6f1a8421a91cb072f/src/lib/page/open_page.svelte#L94

by calling reverse you are mutating the array every time you render it. As soon as the array has more then one element the content of the array change because you are reversing it, it's rerendered and during that rerender you are reversing it again causing the infinite loop. I've verified that removing the reverse is fixing the bug.

If you need it reversed you can either use the new methods .toReversed or you will need to copy everything into a new array without mutating the old one.

from svelte.

Closing as this is not a Svelte bug

from svelte.