Svelte 5 - Marquee

.changeset/spicy-lizards-lie.md

@@ -0,0 +1,5 @@
+---
+"@288-toolkit/marquee": major
+---
+
+Migrate to svelte 5

packages/components/marquee/README.md

@@ -6,47 +6,26 @@ pnpm i @288-toolkit/marquee
 
 A css animated generic marquee component.
 
-## Props
+## Css variables
 
 ### --gap
 
-Should be set as a css variable.
-
 To make a seamless marquee effect, the component generates whatever is in the slot twice or more.
 The `gap` property represents the space between the copies. Default: `0`.
 
 ### --speed
 
-Should be set as a css variable.
-
 The marquee animation duration, which determines the speed of the marquee. The higher the number,
 the slower the marquee. Default: `12000ms`.
 
-### direction
-
-The direction of the marquee.
-
-```ts
-export let direction: 'natural' | 'inverted' = 'natural';
-```
-
-### orientation
-
-The orientation of the marquee. Default: `horizontal`.
-
-```ts
-export let orientation: 'vertical' | 'horizontal' = 'horizontal';
-```
-
-### stopOnHover
-
-Whether the marquee should pause when hovered. Default: `false`.
+## Props
 
-```ts
-export let stopOnHover = false;
-```
+-   `direction` - `'natural' | 'inverted'`: The direction of the marquee. Default: `natural`.
+-   `orientation` - `'vertical' | 'horizontal'`: The orientation of the marquee. Default:
+    `horizontal`.
+-   `stopOnHover` - `boolean`: Whether the marquee should pause when hovered. Default: `false`.
 
-## Slot props
+## Children props
 
 -   `copy` (`boolean`): Wether the rendered slot is a copy of the original.
 

packages/components/marquee/package.json

@@ -28,7 +28,7 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "4.x || 5.x"
+		"svelte": "5.x"
 	},
 	"dependencies": {
 		"@288-toolkit/timeout": "workspace:^"

packages/components/marquee/src/lib/Marquee.svelte

@@ -1,22 +1,32 @@
 <script lang="ts">
 	import { debounce } from '@288-toolkit/timeout';
 
-	/**
-	 * The direction of the marquee.
-	 */
-	export let direction: 'natural' | 'inverted' = 'natural';
-	/**
-	 * The orientation of the marquee. Default: `horizontal`.
-	 */
-	export let orientation: 'vertical' | 'horizontal' = 'horizontal';
-	/**
-	 * Wether the marquee should pause when hovered. Default: `false`.
-	 */
-	export let stopOnHover = false;
+	interface Props {
+		/**
+		 * The direction of the marquee.
+		 */
+		direction?: 'natural' | 'inverted';
+		/**
+		 * The orientation of the marquee. Default: `horizontal`.
+		 */
+		orientation?: 'vertical' | 'horizontal';
+		/**
+		 * Wether the marquee should pause when hovered. Default: `false`.
+		 */
+		stopOnHover?: boolean;
+		children?: import('svelte').Snippet<[{ copy: boolean }]>;
+	}
+
+	let {
+		direction = 'natural',
+		orientation = 'horizontal',
+		stopOnHover = false,
+		children
+	}: Props = $props();
 
 	const minCopies = 2;
 
-	let copies = minCopies;
+	let copies = $state(minCopies);
 
 	const setCopies = (el: HTMLElement) => {
 		const observer = new ResizeObserver(
@@ -55,7 +65,7 @@
 		{#each new Array(copies) as _, i}
 			{@const copy = i > 0}
 			<div class="_marquee" aria-hidden={copy || null}>
-				<slot {copy} />
+				{@render children?.({ copy })}
 			</div>
 		{/each}
 	{/key}