Merge pull request #992 from S1r-Lanzelot/master

[Feat]: Adding updated `onemblaInit` naming for Svelte 5
davidjerleke · Sep 11, 2024 · 2019bc8 · 2019bc8
2 parents e1af89c + 1bdf127
commit 2019bc8
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 9 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",

diff --git 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<