Skip to content

Commit ca0299f

Browse files
CommunalWheat9CommunalWheat9
committed
fix Splidejs#17 (svelte 5 runes)
- Updating the use of reactive variables to runes for svelte 5 compatibility
1 parent 72d805b commit ca0299f

File tree

3 files changed

+67
-133
lines changed

3 files changed

+67
-133
lines changed

‎src/lib/components/Splide/Splide.svelte

+59-119
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,94 @@
1-
<script lang="ts">
2-
import type { ArrowsEventDetail, EventDetail, MoveEventDetail, SlideEventDetail } from '$lib/types';
3-
import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '$lib/utils';
4-
import type { ComponentConstructor, Options, PaginationData, PaginationItem, SlideComponent } from '@splidejs/splide';
1+
<script>
2+
3+
import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '../../utils';
54
import { Splide } from '@splidejs/splide';
6-
import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
5+
import {createEventDispatcher, onMount } from 'svelte';
76
import { bind } from './bind';
8-
import { SplideTrack } from '$lib/components';
9-
10-
11-
/**
12-
* The class name for the root element.
13-
*/
14-
let className: string | undefined = undefined;
15-
export { className as class };
16-
17-
/**
18-
* Splide options. Do not change readonly options after mount.
19-
*/
20-
export let options: Options = {};
21-
22-
/**
23-
* The splide instance.
24-
*/
25-
export let splide: Splide | undefined = undefined;
26-
27-
/**
28-
* An object with extensions.
29-
*/
30-
export let extensions: Record<string, ComponentConstructor> | undefined = undefined;
31-
32-
/**
33-
* A transition component.
34-
*/
35-
export let transition: ComponentConstructor | undefined = undefined;
36-
7+
import { SplideTrack } from '..';
8+
379
/**
38-
* Determines whether to render a track element or not.
39-
*/
40-
export let hasTrack = true;
41-
10+
* Export attributes
11+
*/
12+
let { class: className = undefined, options = {}, splide = undefined, extensions = undefined, transition = undefined, hasTrack = true, ...rest } = $props();
13+
4214
/**
4315
* A dispatcher function.
4416
* The `createEventDispatcher` type assertion does not accept a type alias.
4517
* If specified, the svelte kit fails to generate a type of `events` and it will be `CustomEvent<any>`.
4618
* Also, the svelte action does not provide the way to specify event types.
4719
*/
48-
const dispatch = createEventDispatcher<{
49-
mounted: EventDetail;
50-
destroy: EventDetail;
51-
active: SlideEventDetail;
52-
arrowsMounted?: ArrowsEventDetail;
53-
arrowsUpdated?: ArrowsEventDetail;
54-
autoplayPause?: EventDetail;
55-
autoplayPlay?: EventDetail;
56-
autoplayPlaying?: EventDetail<{ rate: number }>;
57-
click?: SlideEventDetail;
58-
drag?: EventDetail;
59-
dragged?: EventDetail;
60-
dragging?: EventDetail;
61-
hidden?: SlideEventDetail;
62-
inactive?: SlideEventDetail;
63-
lazyloadLoaded?: EventDetail<{ img: HTMLImageElement, Slide: SlideComponent }>;
64-
move?: MoveEventDetail;
65-
moved?: MoveEventDetail;
66-
navigationMounted?: EventDetail<{ splides: Splide[] }>;
67-
paginationMounted?: EventDetail<{ data: PaginationData, item: PaginationItem }>;
68-
paginationUpdated?: EventDetail<{ data: PaginationData, prev: PaginationItem, curr: PaginationItem }>;
69-
refresh?: EventDetail;
70-
resize?: EventDetail;
71-
resized?: EventDetail;
72-
scroll?: EventDetail;
73-
scrolled?: EventDetail;
74-
updated?: EventDetail<{ options: Options }>;
75-
visible?: SlideEventDetail;
76-
}>();
77-
20+
const dispatch = createEventDispatcher();
7821
/**
7922
* The root element.
8023
*/
81-
let root: HTMLElement;
82-
24+
let root;
8325
/**
8426
* Holds the previous slide elements.
8527
*/
86-
let prevSlides: HTMLElement[];
87-
28+
let prevSlides;
8829
/**
8930
* Holds the previous options.
9031
*/
91-
let prevOptions = merge( {}, options );
92-
32+
let prevOptions = merge({}, options);
9333
/**
9434
* Updates splide options only when they have difference with previous options.
9535
*/
96-
$: if ( splide && ! isEqualDeep( prevOptions, options ) ) {
97-
splide.options = options;
98-
prevOptions = merge( {}, prevOptions );
99-
}
100-
101-
onMount( () => {
102-
splide = new Splide( root, options );
103-
bind<typeof dispatch>( splide, dispatch );
104-
splide.mount( extensions, transition );
105-
prevSlides = getSlides( splide );
106-
107-
return () => splide.destroy();
108-
} );
109-
110-
afterUpdate( () => {
111-
if ( splide ) {
112-
const newSlides = getSlides( splide );
113-
114-
if ( ! isEqualShallow( prevSlides, newSlides ) ) {
115-
splide.refresh();
116-
prevSlides = newSlides.slice();
36+
$effect(()=>{
37+
if (splide && !isEqualDeep(prevOptions, options)) {
38+
splide.options = options;
39+
prevOptions.set(merge({}, options)); // Met à jour `prevOptions`
11740
}
118-
}
119-
} );
120-
41+
})
42+
43+
onMount(() => {
44+
splide = new Splide(root, options);
45+
bind(splide, dispatch);
46+
splide.mount(extensions, transition);
47+
prevSlides = getSlides(splide);
48+
return () => splide.destroy();
49+
});
50+
51+
52+
$effect.pre(() => {
53+
if (splide) {
54+
const newSlides = getSlides(splide);
55+
if (!isEqualShallow(prevSlides, newSlides)) {
56+
splide.refresh();
57+
prevSlides = newSlides.slice();
58+
}
59+
}
60+
});
12161
/**
12262
* Moves the slider by the specified control.
12363
*
12464
* @param control - A control pattern.
12565
*/
126-
export function go( control: number | string ): void {
127-
splide?.go( control );
66+
export function go(control) {
67+
splide?.go(control);
12868
}
129-
13069
/**
13170
* Syncs the slider with another Splide.
13271
*
13372
* @param target - A target splide instance to sync with.
13473
*/
135-
export function sync( target: Splide ): void {
136-
splide?.sync( target );
74+
export function sync(target) {
75+
splide?.sync(target);
13776
}
138-
</script>
139-
140-
<svelte:options accessors/>
141-
142-
<div
143-
class={ classNames( 'splide', className ) }
144-
bind:this={ root }
145-
{ ...$$restProps }
146-
>
147-
{ #if hasTrack }
148-
<SplideTrack>
77+
</script>
78+
79+
<svelte:options accessors/>
80+
81+
<div
82+
class={ classNames( 'splide', className ) }
83+
bind:this={ root }
84+
{ ...rest }
85+
>
86+
{#if hasTrack }
87+
<SplideTrack>
88+
<slot/>
89+
</SplideTrack>
90+
{:else }
14991
<slot/>
150-
</SplideTrack>
151-
{ :else }
152-
<slot/>
153-
{ /if }
154-
</div>
92+
{/if }
93+
</div>
94+

‎src/lib/components/SplideSlide/SplideSlide.svelte

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
<script lang="ts">
2-
import { classNames } from '$lib/utils';
3-
4-
5-
let className: string | undefined = undefined;
6-
export { className as class };
1+
<script>
2+
import { classNames } from '../../utils';
3+
let { class: className = undefined, ...rest } = $props();
74
</script>
85

9-
<li class={ classNames( 'splide__slide', className ) } { ...$$restProps }>
6+
<li class={ classNames( 'splide__slide', className ) } { ...rest }>
107
<slot/>
118
</li>

‎src/lib/components/SplideTrack/SplideTrack.svelte

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
<script lang="ts">
2-
import { classNames } from '$lib/utils';
3-
4-
5-
let className: string | undefined = undefined;
6-
export { className as class };
1+
<script >
2+
import { classNames } from '../../utils';
3+
let { class: className = undefined, ...rest } = $props();
74
</script>
85

9-
<div class={ classNames( 'splide__track', className ) } { ...$$restProps }>
6+
<div class={ classNames( 'splide__track', className ) } { ...rest }>
107
<ul class="splide__list">
118
<slot/>
129
</ul>

0 commit comments

Comments
 (0)