Svelte 5 not calling update event on layout changes like v4 in runes or legacy mode

[JonathonRP]

Describe the bug

when loading with events on element/or component events are not called, but were with svelte 4.
if your change repl version to 4 notice events are called with console output

Reproduction

https://svelte.dev/playground/184e73f05aca4b08955dffcffbd21f0a?version=5.5.0#H4sIAAAAAAAACn1U247jNgz9Fa6AIklhx8503R1okgH2AxYFOo91H2SLsbVRJEOic2mQfy8k2Ts7g2lfnPjw8PCQlHxjRhyRcYYnNOTBWIK9csp0YA1oKyQ4HKwcW1LWwKliGdsrjZ7xv26MrkPIDQDLZqWvw7D2J9QUsEZ4_AhvraFQkHG29a1TAz3XpqaaigJCjgRrOPREg-dF0VqJXhjZ2Mta2cIXeyeO6PKjDa7yh1yLqx0pF0YdRYB8flDfH4coOcuOfhRaX4F65UEdB-sIPDlB2F3B93bUEs7WHficMXFu32KVO-ydPULNUg9T7Zo9JfpETtxEXbxhFt61xfQ3sV5e_pwGsggiUUYjgfJ_mN1eaI-TdmuNJyDbdRpfzoraHnawXMHuOXE_hecbrh_iCndwqw1AwMOqeHAfIzXL5oAntd8b9J7Dl7L8AUtxHJTpOPxWJuF79Lgtfmxr6-mqMa6Nd9o2Qi9_XaWCjb3kXv0T8xvrJLq8sZen2twDe92I9tA5Oxp5S9qvANfKoHB554RUaGj5UJUSuwxc1yyrMqvK7KGqVul9U5XZJiLlavU0DUAqP2hx5XuNlwnqUXU98U1Z_jIh38fQ9jWfjiFv0RC6KSi06kyuCI_-50D0DrD2aQOx0bOS1HPY_F4OoRjAVAo25Yy89pa3VlvHg3WxfKiqDF4f5frzKtJn-zD5B3jvNUZyT8JRKpAGHAY2eg7VXHgQUsYNbGakHZ0PBgarpq7yMzYHRTmJIe9V1-vgfvZJThg_CIeGptWZdThpt48doZFP9-nGmXUvjNT4ZkqP74f0-N8zOveK8KP2Pqec6GdbzEdwK9UJWi2839XsVa1m4TPS9sJ0uLuFq2E1rrXtlgtCT4vV_TmUAHiTnxZcswTw0HKU0ao97G4_X8M5_Z1A6v1_iicwfGhRLlZ3KGYbhVSn0E78ZRkjvBDj5Ea8_33_FwAlsmWsBQAA

Logs

no errors, because events are just not called

System Info

svelte playground

Severity

blocking an upgrade

[brunnerh]

What is the actual use case?
Having on:change={console.log('test')} somewhere does not really serve much of a purpose.

(If you have a function creating a handler, that will currently be deferred until the event happens the first time.)

[JonathonRP]

What is the actual use case?
Having on:change={console.log('test')} somewhere does not really serve much of a purpose.

(If you have a function creating a handler, that will currently be deferred until the event happens the first time.)

My use case is I'm porting a framer-motion lib and utilizing component update for layout animations. I just stripped the motion component out to reduce deps and have a minimal repro. If you need or want I can share the repro with the motion comp, if it helps.

But the lib is actually hooking up to onUpdate event which was firing fine in svelte 4 but can't figure out the change in svelte 5 as to why onUpdate is not firing

[brunnerh]

It probably would be good to see what exactly you are trying to do.

Note that there were changes in v5 to beforeUpdate and afterUpdate if you were referring to that. (May also affect you if components are using that internally.)

[JonathonRP]

It probably would be good to see what exactly you are trying to do.

Note that there were changes in v5 to beforeUpdate and afterUpdate if you were referring to that. (May also affect you if components are using that internally.)

https://svelte.dev/playground/e4f011c3b144426792d369a11cbad456?version=4.0.0 here is it working, and not working - https://svelte.dev/playground/e4f011c3b144426792d369a11cbad456?version=5.0.0

I wonder if it is the before and after update changes affecting me.

[JonathonRP]

there is only one place using beforeUpdate, and it's not the same place that should be calling the event but it should be happening before and if failing could be not calling rest, but upon trying with effects and pre didn't fix but broke more... this is legacy code base so was trying have minimal impact with this change just to get the feature working like it did before.
@brunnerh, I appreciate your help.

[brunnerh]

I doubt that this is a Svelte issue. Some libraries will have to be updated to be compatible with Svelte 5 and there already is an issue in svelte-motion reporting trouble:

• Svelte 5 compatibility micha-lmxt/svelte-motion#51

Since the library is fairly complex I cannot tell what exactly the source is.

[JonathonRP]

@brunnerh, I've created a fork and trying to port to svelte 5. yes, there are issues. this seems to be the only main compat issue, i have found. the main component calling this failing logic is Aniamte.svelte in motion/features/layout. it uses onMount and a lifecycles.ts to manage subscriptions to the events one of them being onLayoutUpdate. I'm here asking for help because I have tried updating completely with runes but the issue still persists.

[JonathonRP]

@brunnerh I would be willing to discuss this further in discord if that helps?

[JonathonRP]

still can't get this working with $effect or runes mode

[JonathonRP]

the component update event is not getting called, this break for using runes too.
the component needs a prop that changes not just a layout-postionchange which worked in v4.
here is repo with working silly prop to force updates and animation works fine -
https://svelte.dev/playground/e4f011c3b144426792d369a11cbad456?version=5.5.3

comment out prop and watch animation break - the previous minimal repo also demo update not getting called, again using runes does not fix it and flushSync doesn't fix it.

[trueadm]

Unfortunately, the breaking changes regarding beforeUpdate and afterUpdate with Svelte 5 mean that svelte-motion isn't compatible. That's because this logic:

https://github.com/micha-lmxt/svelte-motion/blob/c734f01e404b091450c1bb8c174ef9a950700e23/src/motion/features/layout/Measure.svelte#L75-L108

Is just not something Svelte 5's compiler is able to try and convert to a signal driven reactivity world.

[JonathonRP]

Unfortunately, the breaking changes regarding beforeUpdate and afterUpdate with Svelte 5 mean that svelte-motion isn't compatible. That's because this logic:

https://github.com/micha-lmxt/svelte-motion/blob/c734f01e404b091450c1bb8c174ef9a950700e23/src/motion/features/layout/Measure.svelte#L75-L108

Is just not something Svelte 5's compiler is able to try and convert to a signal driven reactivity world.

Ive tried updating it to use runes and $effect and that did not change the behavior/ produce expected behavior.

[trueadm]

Unfortunately, the breaking changes regarding beforeUpdate and afterUpdate with Svelte 5 mean that svelte-motion isn't compatible. That's because this logic:
https://github.com/micha-lmxt/svelte-motion/blob/c734f01e404b091450c1bb8c174ef9a950700e23/src/motion/features/layout/Measure.svelte#L75-L108
Is just not something Svelte 5's compiler is able to try and convert to a signal driven reactivity world.

Ive tried updating it to use runes and $effect and that did not change the behavior/ produce expected behavior.

No, I mean the issue here is svelte-motion is not using Svelte 5 compatible code. So if you use it with Svelte 5, it won't work.

[JonathonRP]

Unfortunately, the breaking changes regarding beforeUpdate and afterUpdate with Svelte 5 mean that svelte-motion isn't compatible. That's because this logic:
https://github.com/micha-lmxt/svelte-motion/blob/c734f01e404b091450c1bb8c174ef9a950700e23/src/motion/features/layout/Measure.svelte#L75-L108
Is just not something Svelte 5's compiler is able to try and convert to a signal driven reactivity world.

Ive tried updating it to use runes and $effect and that did not change the behavior/ produce expected behavior.

No, I mean the issue here is svelte-motion is not using Svelte 5 compatible code. So if you use it with Svelte 5, it won't work.

oh! gotcha, thank you! I am using my port in dev and was using svelte-motion in repl because I need to update my packagejson exports as to access the SSR component.