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

This reverts commit 25233e1.

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": "^5.0.0"
+    "rollup-plugin-css-only": "^4.5.2", 
+    "svelte": "^4.2.19"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "svelte": "^3.0.0 || ^4.0.0"
   },
   "keywords": [
     "svelte",

package.json

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

src/components/Placeholder.svelte

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

src/index.svelte

@@ -1,7 +1,7 @@
 <script>
 import Lazy from '../src/index.svelte';
 
-let search = $state('');
+let search = '';
 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()))]
 })
-let filteredData = $derived(filterData(search));
+$: filteredData = filterData(search);
 
 </script>