Svelte component inside virtual swiper not rendered correctly when prepending slides

[schoero]

• Swiper Version: 6.6.1
• Svelte Version: 3.38.2
• Platform/Target and Browser Versions: Tested on MacOS BigSur 11.3.1 with Safari 14.1 (16611.1.21.161.6), Chrome 90.0.4430.212 and Firefox 88.0.1

What You Did

I try to create an online calendar using Framework7, swiper and svelte. I want to create an infinite calendar where the next day gets loaded as soon as the first or last slide is active.

https://codesandbox.io/s/swiper-svelte-fork-forked-r2z7p?file=/App.svelte

In the codesandbox demo, when you swipe two times, so that a new slide gets prepended, the component gets rerendered with wrong properties and therefore show the wrong day. But if I skip the svelte component and include its source code directly in the slider, everything works as expected. You can comment out the svelte component on line 115 and uncomment the div on line 113 to test this behaviour.

The problem occurs only if the slideTo method is called. When I append the slides, which does not call the slideTo method, everything works just fine.

Expected Behavior

I expect that svelte components get rendered correctly when prepending them in a slide.

Actual Behavior

The svelte component gets rendered with wrong properties.

[schoero]

I have made a simpler test case: https://codesandbox.io/s/swiper-svelte-fork-forked-rgxie?file=/App.svelte.
Inside the swiper.virtual.prependSlide method, the things that are happening are basically the following:

1. The new slide is unshifted to swiper.virtual.slides.
2. swiper.virtual.update(true) is called.
3. swiper.slideTo() is called to get to the new index.

I have implemented this behaviour in the prependDate function on line 46, but skipped the slideTo call.
You can see that when you click on the prepend button when you are on the first slide, nothing gets rerendered. If then the slideTo method is called inside the prependSlide method, the swiper goes 'back' to the next slide, because the new slide is not rendered yet.
But if you skip the slideTo call and swipe forward a few times to force a rerender and then swipe back, you can see that the new slide gets rendered correctly.

So the problem is that the new slides do not get rendered when prepending a slide, and not an issue in the slideTo method as I initially thought.

[nolimits4web]

Here in Svelte, you shouldn't use swiper.virtual.prependSlide/appendSlide methods, you should just modify your initial virtualSlide array with push/unshift but I see it also have some issue

[nolimits4web]

Fixes in Swiper 6.6.2. Here is the full working example with logic for example https://github.com/nolimits4web/swiper/blob/master/playground/svelte/Virtual.svelte

[hugotox]

Hello @nolimits4web the svelte example is missing. Any advice how to use it with svelte?