Svelte 5 support

.changeset/eight-lions-decide.md

@@ -0,0 +1,5 @@
+---
+"svelte-example": patch
+---
+
+chore: Update example to Svelte 5

.changeset/pink-wasps-judge.md

@@ -0,0 +1,5 @@
+---
+"torph": minor
+---
+
+feat: Svelte 5 support

.changeset/plenty-dingos-greet.md

@@ -0,0 +1,5 @@
+---
+"site": patch
+---
+
+fix: Fix svelte example

apps/svelte-example/package.json

@@ -12,9 +12,9 @@
     "torph": "workspace:*"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "svelte": "^5.0.0",
     "typescript": "^5.0.2",
-    "vite": "^5.0.0"
+    "vite": "^6.0.0"
   }
 }

apps/svelte-example/src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
   import { TextMorph } from 'torph/svelte';
 
   const texts = [
@@ -9,20 +9,17 @@
     "Fluidly Animate Text",
   ];
 
-  let index = 0;
-  let interval: ReturnType<typeof setInterval>;
+  let index = $state(0);
 
   onMount(() => {
-    interval = setInterval(() => {
+    const interval = setInterval(() => {
       index = (index + 1) % texts.length;
     }, 2000);
-  });
 
-  onDestroy(() => {
-    clearInterval(interval);
+    return () => clearInterval(interval);
   });
 
-  $: text = texts[index];
+  const text = $derived(texts[index]);
 </script>
 
 <div class="container">

apps/svelte-example/src/main.ts

@@ -1,6 +1,7 @@
+import { mount } from "svelte";
 import App from "./App.svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById("app")!,
 });
 

packages/torph/README.md

@@ -89,7 +89,7 @@ const handleComplete = () => {
 <script>
   import { TextMorph } from 'torph/svelte';
 
-  let text = 'Hello World';
+  let text = $state('Hello World');
 
   const handleComplete = () => {
     console.log('Animation done!');

packages/torph/package.json

@@ -60,7 +60,7 @@
     "react": ">=18",
     "react-dom": ">=18",
     "vue": ">=3",
-    "svelte": ">=4"
+    "svelte": ">=5"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -92,7 +92,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "svelte": "^4.0.0",
+    "svelte": "^5.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
     "vue": "^3.3.0"

packages/torph/src/svelte/TextMorph.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, TextMorph as Morph } from '../lib/text-morph';
-
-  export let text: string;
-  export let locale: Intl.LocalesArgument = DEFAULT_TEXT_MORPH_OPTIONS.locale;
-  export let duration: number = DEFAULT_TEXT_MORPH_OPTIONS.duration;
-  export let ease: string = DEFAULT_TEXT_MORPH_OPTIONS.ease;
-  export let debug: boolean = DEFAULT_TEXT_MORPH_OPTIONS.debug;
-  export let disabled: boolean = DEFAULT_TEXT_MORPH_OPTIONS.disabled;
-  export let respectReducedMotion: boolean = DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion;
-  export let onAnimationStart: (() => void) | undefined = undefined;
-  export let onAnimationComplete: (() => void) | undefined = undefined;
+  import { onMount } from 'svelte';
+  import { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, TextMorph as Morph, type TextMorphOptions } from '../lib/text-morph';
 
-  let className: string = '';
-  export { className as class };
-  export let style: string = '';
-  export let as: string = DEFAULT_AS;
+  type Props = Omit<TextMorphOptions, "element"> & {
+    text: string;
+    class?: string;
+    style?: string;
+    as?: string;
+  }
 
-  let containerRef: HTMLElement;
-  let morphInstance: Morph | null = null;
+  let {
+    text,
+    locale = DEFAULT_TEXT_MORPH_OPTIONS.locale,
+    duration = DEFAULT_TEXT_MORPH_OPTIONS.duration,
+    ease = DEFAULT_TEXT_MORPH_OPTIONS.ease,
+    debug = DEFAULT_TEXT_MORPH_OPTIONS.debug,
+    disabled = DEFAULT_TEXT_MORPH_OPTIONS.disabled,
+    respectReducedMotion = DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion,
+    onAnimationStart = undefined,
+    onAnimationComplete = undefined,
+    as = DEFAULT_AS,
+    ...props
+  }: Props = $props();
+
+  let containerRef = $state<HTMLElement>();
+  let morphInstance = $state<Morph | null>(null);
 
   onMount(() => {
     if (containerRef) {
@@ -35,16 +41,18 @@
       });
       morphInstance.update(text);
     }
-  });
 
-  onDestroy(() => {
-    morphInstance?.destroy();
+    return () => {
+		  morphInstance?.destroy();
+		};
   });
 
-  $: if (morphInstance) {
-    morphInstance.update(text);
-  }
+  $effect(() => {
+    if (morphInstance) {
+      morphInstance.update(text);
+    }
+  });
 </script>
 
-<svelte:element this={as} bind:this={containerRef} class={className} {style}>
+<svelte:element this={as} bind:this={containerRef} {...props}>
 </svelte:element>

packages/torph/tsup.config.ts

@@ -25,7 +25,7 @@ export default defineConfig((options) => [
     dts: false,
     sourcemap: true,
     target: "es2022",
-    external: ["vue", "../lib/text-morph"],
+    external: ["vue"],
     minify: !options.watch,
     loader: {
       ".vue": "copy",
@@ -40,7 +40,7 @@ export default defineConfig((options) => [
     dts: {
       only: true,
     },
-    external: ["vue", "../lib/text-morph/types"],
+    external: ["vue"],
   },
   // Svelte - JS build
   {
@@ -51,7 +51,7 @@ export default defineConfig((options) => [
     dts: false,
     sourcemap: true,
     target: "es2022",
-    external: ["svelte", "../lib/text-morph"],
+    external: ["svelte"],
     minify: !options.watch,
     loader: {
       ".svelte": "copy",
@@ -66,6 +66,6 @@ export default defineConfig((options) => [
     dts: {
       only: true,
     },
-    external: ["svelte", "../lib/text-morph/types"],
+    external: ["svelte"],
   },
 ]);