From 1bdf1274736005fb998e95de8aace783d9ca67a5 Mon Sep 17 00:00:00 2001
From: John Lanz <john.lanz@fis-ski.com>
Date: Thu, 5 Sep 2024 17:11:04 +0200
Subject: [PATCH] Add Svelte 5 support

---
 .../src/content/pages/api/events.mdx           | 18 +++++++++++++++---
 .../src/content/pages/api/methods.mdx          | 12 ++++++++++--
 .../src/content/pages/api/plugins.mdx          | 12 ++++++++++--
 .../src/content/pages/get-started/svelte.mdx   |  5 ++++-
 packages/embla-carousel-svelte/package.json    |  4 ++--
 .../src/components/emblaCarouselSvelte.ts      |  1 +
 6 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/embla-carousel-docs/src/content/pages/api/events.mdx b/packages/embla-carousel-docs/src/content/pages/api/events.mdx
index 4e8c57a43..3a3f1370a 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/events.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/events.mdx
@@ -125,9 +125,13 @@ export function EmblaCarousel() {
   }
 </script>
 
-<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>
+<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 </TabsItem>
 </Tabs>
 
@@ -242,9 +246,13 @@ export function EmblaCarousel() {
   }
 </script>
 
-<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>
+<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 </TabsItem>
 </Tabs>
 
@@ -400,9 +408,13 @@ export function EmblaCarousel() {
   }
 </script>
 
-<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>
+<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 <Admonition type="warning">
   If you're using `pnpm`, you need to install `embla-carousel` as a
   **devDependency** when importing types from it like demonstrated above.
diff --git a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx
index a21138d16..b80711d9f 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/methods.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/methods.mdx
@@ -105,9 +105,13 @@ export function EmblaCarousel() {
   }
 </script>
 
-<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>
+<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 </TabsItem>
 </Tabs>
 
@@ -245,9 +249,13 @@ export function EmblaCarousel() {
   }
 </script>
 
-<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>
+<div class="embla" use:emblaCarouselSvelte onemblaInit="{onInit}">...</div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 <Admonition type="warning">
   If you're using `pnpm`, you need to install `embla-carousel` as a
   **devDependency** when importing types from it like demonstrated above.
diff --git a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
index 3580e386c..27cafac3b 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/plugins.mdx
@@ -406,12 +406,16 @@ export function EmblaCarousel() {
 <div
   class="embla"
   use:emblaCarouselSvelte="{{ plugins }}"
-  on:emblaInit="{onInit}"
+  onemblaInit="{onInit}"
 >
   ...
 </div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 </TabsItem>
 </Tabs>
 
@@ -533,12 +537,16 @@ export function EmblaCarousel() {
 <div
   class="embla"
   use:emblaCarouselSvelte="{{ plugins }}"
-  on:emblaInit="{onInit}"
+  onemblaInit="{onInit}"
 >
   ...
 </div>
 ```
 
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
+
 </TabsItem>
 </Tabs>
 
diff --git a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx
index 1ff06bd7a..0218a7092 100644
--- a/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/get-started/svelte.mdx
@@ -91,7 +91,7 @@ The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options
 <div
   class="embla"
   use:emblaCarouselSvelte="{{ options }}"
-  on:emblaInit="{onInit}"
+  onemblaInit="{onInit}"
 >
   <div class="embla__container">
     <div class="embla__slide">Slide 1</div>
@@ -100,6 +100,9 @@ The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options
   </div>
 </div>
 ```
+<Admonition type="note">
+  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
+</Admonition>
 
 ## Adding plugins
 
diff --git a/packages/embla-carousel-svelte/package.json b/packages/embla-carousel-svelte/package.json
index 05d9464a2..a435a9aca 100644
--- a/packages/embla-carousel-svelte/package.json
+++ b/packages/embla-carousel-svelte/package.json
@@ -64,7 +64,7 @@
     "embla-carousel-reactive-utils": "8.2.1"
   },
   "peerDependencies": {
-    "svelte": "^3.49.0 || ^4.0.0"
+    "svelte": "^3.49.0 || ^4.0.0 || ^5.0.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -79,4 +79,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts b/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts
index f8e90e3dc..d16a3c17b 100644
--- a/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts
+++ b/packages/embla-carousel-svelte/src/components/emblaCarouselSvelte.ts
@@ -17,6 +17,7 @@ type EmblaCarouselParameterType = {
 
 type EmblaCarouselAttributesType = {
   'on:emblaInit'?: (evt: CustomEvent<EmblaCarouselType>) => void
+  onemblaInit?: (evt: CustomEvent<EmblaCarouselType>) => void
 }
 
 export type EmblaCarouselSvelteType = ActionReturn<