Migrate to svelte5 using "npx sv migrate svelte-5"

Author: leafOfTree

package-lock.json

@@ -28,11 +28,11 @@
     "rollup-plugin-serve": "^1.0.3",
     "rollup-plugin-svelte": "^7.2.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "rollup-plugin-css-only": "^4.5.2", 
-    "svelte": "^4.2.19"
+    "rollup-plugin-css-only": "^4.5.2",
+    "svelte": "^5.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0"
+    "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "keywords": [
     "svelte",

package.json

@@ -3,13 +3,20 @@
     {#if typeof placeholder === 'string'}
       <div>{placeholder}</div>
     {:else if ['function', 'object'].includes(typeof placeholder)}
-      <svelte:component this={placeholder} {...placeholderProps} />
+      {@const SvelteComponent = placeholder}
+      <SvelteComponent {...placeholderProps} />
     {/if}
   </div>
 {/if}
 
 <script>
-  export let placeholder = null;
-  export let placeholderProps = null;
+  /**
+   * @typedef {Object} Props
+   * @property {any} [placeholder]
+   * @property {any} [placeholderProps]
+   */
+
+  /** @type {Props} */
+  let { placeholder = null, placeholderProps = null } = $props();
   const placeholderClass = 'svelte-lazy-placeholder';
 </script>

src/components/Placeholder.svelte

@@ -5,7 +5,11 @@
       class={contentClass}
       style={contentStyle}
     >
-      <slot>Lazy load content</slot>
+      {#if children}
+        {@render children()}
+      {:else}
+        Lazy load content
+      {/if}
     </div>
     {#if !contentShow && placeholder}
       <Placeholder {placeholder} {placeholderProps} />
@@ -18,28 +22,46 @@
 <script>
   import { fade } from 'svelte/transition';
   import Placeholder from './components/Placeholder.svelte';
-  export let keep = false;
-  export let height = 0;
-  export let offset = 150;
-  export let fadeOption = {
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} [keep]
+   * @property {number} [height]
+   * @property {number} [offset]
+   * @property {any} [fadeOption]
+   * @property {number} [resetHeightDelay]
+   * @property {any} [onload]
+   * @property {any} [placeholder]
+   * @property {any} [placeholderProps]
+   * @property {string} [class]
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let {
+    keep = false,
+    height = 0,
+    offset = 150,
+    fadeOption = {
     delay: 0,
     duration: 400,
-  };
-  export let resetHeightDelay = 0;
-  export let onload = null;
-  export let placeholder = null;
-  export let placeholderProps = null;
-  let className = '';
-  export { className as class };
+  },
+    resetHeightDelay = 0,
+    onload = null,
+    placeholder = null,
+    placeholderProps = null,
+    class: className = '',
+    children
+  } = $props();
+  
 
   const rootClass = 'svelte-lazy'
     + (className ? ' ' + className : '');
   const contentClass = 'svelte-lazy-content';
   const rootInitialHeight = getStyleHeight();
-  let loaded = false;
+  let loaded = $state(false);
 
-  let contentShow = true;
-  $: contentStyle = !contentShow ? 'display: none' : '';
+  let contentShow = $state(true);
+  let contentStyle = $derived(!contentShow ? 'display: none' : '');
 
   function load(node) {
     setHeight(node);

src/index.svelte

@@ -1,7 +1,7 @@
 <script>
 import Lazy from '../src/index.svelte';
 
-let search = '';
+let search = $state('');
 let data = [
   {id: 1, text: "one"},
   {id: 2, text: "two"},
@@ -50,7 +50,7 @@ const filterData = (() => {
   else 
     return [...data.filter(x => x.text.toLowerCase().includes(search.toLowerCase()))]
 })
-$: filteredData = filterData(search);
+let filteredData = $derived(filterData(search));
 
 </script>