Svelte 5 support

src/lib/components/Splide/Splide.svelte

@@ -1,51 +1,24 @@
 <script lang="ts">
   import type { ArrowsEventDetail, EventDetail, MoveEventDetail, SlideEventDetail } from '$lib/types';
-  import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '$lib/utils';
+  import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '../../utils';
   import type { ComponentConstructor, Options, PaginationData, PaginationItem, SlideComponent } from '@splidejs/splide';
   import { Splide } from '@splidejs/splide';
-  import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
+  import {createEventDispatcher, onMount } from 'svelte';
   import { bind } from './bind';
-  import { SplideTrack } from '$lib/components';
-
-
+  import { SplideTrack } from '..';
+
   /**
-   * The class name for the root element.
-   */
-  let className: string | undefined = undefined;
-  export { className as class };
-
-  /**
-   * Splide options. Do not change readonly options after mount.
-   */
-  export let options: Options = {};
-
-  /**
-   * The splide instance.
-   */
-  export let splide: Splide | undefined = undefined;
-
-  /**
-   * An object with extensions.
-   */
-  export let extensions: Record<string, ComponentConstructor> | undefined = undefined;
-
-  /**
-   * A transition component.
-   */
-  export let transition: ComponentConstructor | undefined = undefined;
-
-  /**
-   * Determines whether to render a track element or not.
-   */
-  export let hasTrack = true;
-
+    * Export attributes
+  */
+  let { class: className = undefined, options = {}, splide = undefined, extensions = undefined, transition = undefined, hasTrack = true, ...rest } = $props();
+
   /**
    * A dispatcher function.
    * The `createEventDispatcher` type assertion does not accept a type alias.
    * If specified, the svelte kit fails to generate a type of `events` and it will be `CustomEvent<any>`.
    * Also, the svelte action does not provide the way to specify event types.
    */
-  const dispatch = createEventDispatcher<{
+   const dispatch = createEventDispatcher<{
     mounted: EventDetail;
     destroy: EventDetail;
     active: SlideEventDetail;
@@ -74,81 +47,77 @@
     updated?: EventDetail<{ options: Options }>;
     visible?: SlideEventDetail;
   }>();
-
   /**
    * The root element.
    */
-  let root: HTMLElement;
-
+  let root : HTMLElement;
   /**
    * Holds the previous slide elements.
    */
-  let prevSlides: HTMLElement[];
-
+  let prevSlides : HTMLElement[];
   /**
    * Holds the previous options.
    */
-  let prevOptions = merge( {}, options );
-
+  let prevOptions = merge({}, options);
   /**
    * Updates splide options only when they have difference with previous options.
    */
-  $: if ( splide && ! isEqualDeep( prevOptions, options ) ) {
-    splide.options = options;
-    prevOptions = merge( {}, prevOptions );
-  }
-
-  onMount( () => {
-    splide = new Splide( root, options );
-    bind<typeof dispatch>( splide, dispatch );
-    splide.mount( extensions, transition );
-    prevSlides = getSlides( splide );
-
-    return () => splide.destroy();
-  } );
-
-  afterUpdate( () => {
-    if ( splide ) {
-      const newSlides = getSlides( splide );
-
-      if ( ! isEqualShallow( prevSlides, newSlides ) ) {
-        splide.refresh();
-        prevSlides = newSlides.slice();
+   $effect(()=>{
+    if (splide && !isEqualDeep(prevOptions, options)) {
+        splide.options = options;
+        prevOptions.set(merge({}, options)); // Met à jour `prevOptions`
+      }
+   })
+
+  onMount(() => {
+      splide = new Splide(root, options);
+      bind<typeof dispatch>(splide, dispatch);
+      splide.mount(extensions, transition);
+      prevSlides = getSlides(splide);
+      return () => splide.destroy();
+  });
+
+
+  $effect.pre(() => {
+      if (splide) {
+          const newSlides = getSlides(splide);
+          if (!isEqualShallow(prevSlides, newSlides)) {
+              splide.refresh();
+              prevSlides = newSlides.slice();
+          }
       }
-    }
-  } );
-
+  });
   /**
    * Moves the slider by the specified control.
    *
    * @param control - A control pattern.
    */
-  export function go( control: number | string ): void {
-    splide?.go( control );
+  export function go(control) {
+      splide?.go(control);
   }
-
   /**
    * Syncs the slider with another Splide.
    *
    * @param target - A target splide instance to sync with.
    */
-  export function sync( target: Splide ): void {
-    splide?.sync( target );
+  export function sync(target) {
+      splide?.sync(target);
   }
-</script>
-
-<svelte:options accessors/>
-
-<div
-  class={ classNames( 'splide', className ) }
-  bind:this={ root }
-  { ...$$restProps }
->
-  { #if hasTrack }
-    <SplideTrack>
+  </script>
+
+  <svelte:options accessors/>
+
+  <div
+    class={ classNames( 'splide', className ) }
+    bind:this={ root }
+    { ...rest }
+  >
+    {#if hasTrack }
+      <SplideTrack>
+        <slot/>
+      </SplideTrack>
+    {:else }
       <slot/>
-    </SplideTrack>
-  { :else }
-    <slot/>
-  { /if  }
-</div>
+    {/if  }
+  </div>
+

src/lib/components/SplideSlide/SplideSlide.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { classNames } from '$lib/utils';
-
-
-  let className: string | undefined = undefined;
-  export { className as class };
+  import { classNames } from '../../utils';
+  let { class: className = undefined, ...rest } = $props();
 </script>
 
-<li class={ classNames( 'splide__slide', className ) } { ...$$restProps }>
+<li class={ classNames( 'splide__slide', className ) } { ...rest }>
   <slot/>
 </li>

src/lib/components/SplideTrack/SplideTrack.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-  import { classNames } from '$lib/utils';
-
-
-  let className: string | undefined = undefined;
-  export { className as class };
+  import { classNames } from '../../utils';
+  let { class: className = undefined, ...rest } = $props();
 </script>
 
-<div class={ classNames( 'splide__track', className ) } { ...$$restProps }>
+<div class={ classNames( 'splide__track', className ) } { ...rest }>
   <ul class="splide__list">
     <slot/>
   </ul>