From ca0299f81e4d1b411d7eeac7bcd0758400244ad3 Mon Sep 17 00:00:00 2001
From: CommunalWheat9 <46871372+CommunalWheat9@users.noreply.github.com>
Date: Tue, 25 Mar 2025 00:39:13 +0100
Subject: [PATCH 1/2] fix #17 (svelte 5 runes)

- Updating the use of reactive variables to runes for svelte 5 compatibility
---
 src/lib/components/Splide/Splide.svelte       | 178 ++++++------------
 .../components/SplideSlide/SplideSlide.svelte |  11 +-
 .../components/SplideTrack/SplideTrack.svelte |  11 +-
 3 files changed, 67 insertions(+), 133 deletions(-)

diff --git a/src/lib/components/Splide/Splide.svelte b/src/lib/components/Splide/Splide.svelte
index 5b85217..041cd6a 100644
--- a/src/lib/components/Splide/Splide.svelte
+++ b/src/lib/components/Splide/Splide.svelte
@@ -1,154 +1,94 @@
-<script lang="ts">
-  import type { ArrowsEventDetail, EventDetail, MoveEventDetail, SlideEventDetail } from '$lib/types';
-  import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '$lib/utils';
-  import type { ComponentConstructor, Options, PaginationData, PaginationItem, SlideComponent } from '@splidejs/splide';
+<script>
+
+  import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '../../utils';
   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';
-
-
-  /**
-   * 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;
-
+  import { SplideTrack } from '..';
+  
   /**
-   * 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<{
-    mounted: EventDetail;
-    destroy: EventDetail;
-    active: SlideEventDetail;
-    arrowsMounted?: ArrowsEventDetail;
-    arrowsUpdated?: ArrowsEventDetail;
-    autoplayPause?: EventDetail;
-    autoplayPlay?: EventDetail;
-    autoplayPlaying?: EventDetail<{ rate: number }>;
-    click?: SlideEventDetail;
-    drag?: EventDetail;
-    dragged?: EventDetail;
-    dragging?: EventDetail;
-    hidden?: SlideEventDetail;
-    inactive?: SlideEventDetail;
-    lazyloadLoaded?: EventDetail<{ img: HTMLImageElement, Slide: SlideComponent }>;
-    move?: MoveEventDetail;
-    moved?: MoveEventDetail;
-    navigationMounted?: EventDetail<{ splides: Splide[] }>;
-    paginationMounted?: EventDetail<{ data: PaginationData, item: PaginationItem }>;
-    paginationUpdated?: EventDetail<{ data: PaginationData, prev: PaginationItem, curr: PaginationItem }>;
-    refresh?: EventDetail;
-    resize?: EventDetail;
-    resized?: EventDetail;
-    scroll?: EventDetail;
-    scrolled?: EventDetail;
-    updated?: EventDetail<{ options: Options }>;
-    visible?: SlideEventDetail;
-  }>();
-
+  const dispatch = createEventDispatcher();
   /**
    * The root element.
    */
-  let root: HTMLElement;
-
+  let root;
   /**
    * Holds the previous slide elements.
    */
-  let prevSlides: HTMLElement[];
-
+  let prevSlides;
   /**
    * 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(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>
+  
\ No newline at end of file
diff --git a/src/lib/components/SplideSlide/SplideSlide.svelte b/src/lib/components/SplideSlide/SplideSlide.svelte
index c0ee390..1db0bb1 100644
--- a/src/lib/components/SplideSlide/SplideSlide.svelte
+++ b/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 };
+<script>
+  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>
\ No newline at end of file
diff --git a/src/lib/components/SplideTrack/SplideTrack.svelte b/src/lib/components/SplideTrack/SplideTrack.svelte
index 1b54dd5..4e04932 100644
--- a/src/lib/components/SplideTrack/SplideTrack.svelte
+++ b/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 };
+<script >
+  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>

From 4908713c989bdb01b596c9304bdebc59cea09b22 Mon Sep 17 00:00:00 2001
From: CommunalWheat9 <46871372+CommunalWheat9@users.noreply.github.com>
Date: Tue, 25 Mar 2025 10:12:25 +0100
Subject: [PATCH 2/2] fix typescript requirements

---
 src/lib/components/Splide/Splide.svelte       | 41 ++++++++++++++++---
 .../components/SplideSlide/SplideSlide.svelte |  2 +-
 .../components/SplideTrack/SplideTrack.svelte |  2 +-
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Splide/Splide.svelte b/src/lib/components/Splide/Splide.svelte
index 041cd6a..19153e9 100644
--- a/src/lib/components/Splide/Splide.svelte
+++ b/src/lib/components/Splide/Splide.svelte
@@ -1,6 +1,7 @@
-<script>
-
+<script lang="ts">
+  import type { ArrowsEventDetail, EventDetail, MoveEventDetail, SlideEventDetail } from '$lib/types';
   import { classNames, getSlides, isEqualDeep, isEqualShallow, merge } from '../../utils';
+  import type { ComponentConstructor, Options, PaginationData, PaginationItem, SlideComponent } from '@splidejs/splide';
   import { Splide } from '@splidejs/splide';
   import {createEventDispatcher, onMount } from 'svelte';
   import { bind } from './bind';
@@ -17,15 +18,43 @@
    * 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;
+    arrowsMounted?: ArrowsEventDetail;
+    arrowsUpdated?: ArrowsEventDetail;
+    autoplayPause?: EventDetail;
+    autoplayPlay?: EventDetail;
+    autoplayPlaying?: EventDetail<{ rate: number }>;
+    click?: SlideEventDetail;
+    drag?: EventDetail;
+    dragged?: EventDetail;
+    dragging?: EventDetail;
+    hidden?: SlideEventDetail;
+    inactive?: SlideEventDetail;
+    lazyloadLoaded?: EventDetail<{ img: HTMLImageElement, Slide: SlideComponent }>;
+    move?: MoveEventDetail;
+    moved?: MoveEventDetail;
+    navigationMounted?: EventDetail<{ splides: Splide[] }>;
+    paginationMounted?: EventDetail<{ data: PaginationData, item: PaginationItem }>;
+    paginationUpdated?: EventDetail<{ data: PaginationData, prev: PaginationItem, curr: PaginationItem }>;
+    refresh?: EventDetail;
+    resize?: EventDetail;
+    resized?: EventDetail;
+    scroll?: EventDetail;
+    scrolled?: EventDetail;
+    updated?: EventDetail<{ options: Options }>;
+    visible?: SlideEventDetail;
+  }>();
   /**
    * The root element.
    */
-  let root;
+  let root : HTMLElement;
   /**
    * Holds the previous slide elements.
    */
-  let prevSlides;
+  let prevSlides : HTMLElement[];
   /**
    * Holds the previous options.
    */
@@ -42,7 +71,7 @@
   
   onMount(() => {
       splide = new Splide(root, options);
-      bind(splide, dispatch);
+      bind<typeof dispatch>(splide, dispatch);
       splide.mount(extensions, transition);
       prevSlides = getSlides(splide);
       return () => splide.destroy();
diff --git a/src/lib/components/SplideSlide/SplideSlide.svelte b/src/lib/components/SplideSlide/SplideSlide.svelte
index 1db0bb1..b518cbf 100644
--- a/src/lib/components/SplideSlide/SplideSlide.svelte
+++ b/src/lib/components/SplideSlide/SplideSlide.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { classNames } from '../../utils';
   let { class: className = undefined, ...rest } = $props();
 </script>
diff --git a/src/lib/components/SplideTrack/SplideTrack.svelte b/src/lib/components/SplideTrack/SplideTrack.svelte
index 4e04932..86e13ca 100644
--- a/src/lib/components/SplideTrack/SplideTrack.svelte
+++ b/src/lib/components/SplideTrack/SplideTrack.svelte
@@ -1,4 +1,4 @@
-<script >
+<script lang="ts">
   import { classNames } from '../../utils';
   let { class: className = undefined, ...rest } = $props();
 </script>