Svelte 5 - Marquee

.changeset/spicy-lizards-lie.md

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

packages/components/marquee/dist/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<[any]>;
+	}
+
+	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}

packages/components/marquee/dist/Marquee.svelte.d.ts

@@ -2,23 +2,23 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
-             * The direction of the marquee.
-             */ direction?: "natural" | "inverted" | undefined;
+         * The direction of the marquee.
+         */
+        direction?: "natural" | "inverted" | undefined;
         /**
-             * The orientation of the marquee. Default: `horizontal`.
-             */ orientation?: "vertical" | "horizontal" | undefined;
+         * The orientation of the marquee. Default: `horizontal`.
+         */
+        orientation?: "vertical" | "horizontal" | undefined;
         /**
-             * Wether the marquee should pause when hovered. Default: `false`.
-             */ stopOnHover?: boolean | undefined;
+         * Wether the marquee should pause when hovered. Default: `false`.
+         */
+        stopOnHover?: boolean | undefined;
+        children?: import("svelte").Snippet<[any]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            copy: any;
-        };
-    };
+    slots: {};
 };
 export type MarqueeProps = typeof __propDef.props;
 export type MarqueeEvents = typeof __propDef.events;

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<[any]>;
+	}
+
+	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}