feat(svelte)!: mimgrate to Svelte 5 runes

johannschopplich · Nov 13, 2024 · 23ef971 · 23ef971
1 parent bb1dd23
commit 23ef971
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 42 deletions.
diff --git a/docs/integrations/svelte.md b/docs/integrations/svelte.md
@@ -2,6 +2,10 @@
 
 unlazy is not only framework-agnostic, but also provides a Svelte component that you can use in your Svelte application.
 
+::: info
+The component is written for Svelte 5 and above using runes.
+:::
+
 ## Installation
 
 Install the `@unlazy/svelte` package using your favorite package manager:

diff --git a/packages/svelte/eslint.config.js b/packages/svelte/eslint.config.js
@@ -1,16 +1,8 @@
 // @ts-check
 import antfu from '@antfu/eslint-config'
 
-export default antfu(
-  {
-    vue: false,
-    svelte: true,
-    ignores: ['.svelte-kit'],
-  },
-  {
-    files: ['**/*.svelte'],
-    rules: {
-      'no-undef-init': 'off',
-    },
-  },
-)
+export default antfu({
+  vue: false,
+  svelte: true,
+  ignores: ['.svelte-kit'],
+})
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -49,7 +49,7 @@
     "test:types": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "peerDependencies": {
-    "svelte": "^3 || ^4"
+    "svelte": "^5"
   },
   "dependencies": {
     "unlazy": "workspace:*"

diff --git a/packages/svelte/src/app.html b/packages/svelte/src/app.html
@@ -6,7 +6,7 @@
     <title>@unlazy/svelte</title>
     %sveltekit.head%
   </head>
-  <body>
+  <body data-sveltekit-preload-data="hover">
     <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/packages/svelte/src/lib/UnLazyImage.svelte b/packages/svelte/src/lib/UnLazyImage.svelte
@@ -1,40 +1,51 @@
 <script lang='ts'>
-  import { onDestroy } from 'svelte'
+  import type { HTMLImgAttributes } from 'svelte/elements'
   import { lazyLoad } from 'unlazy'
 
-  /** Image source URL to be lazy-loaded. */
-  export let src: string | undefined = undefined
-  /** Image source set to be lazy-loaded. */
-  export let srcSet: string | undefined = undefined
-  /**
-   * A flag to indicate whether the sizes attribute should be automatically calculated.
-   * @default false
-   */
-  export let autoSizes = false
-  /** A BlurHash string representing the blurry placeholder image. */
-  export let blurhash: string | undefined = undefined
-  /** A ThumbHash string representing the blurry placeholder image. */
-  export let thumbhash: string | undefined = undefined
-  /** Optional image source URL for a custom placeholder image. Will be ignored if a BlurHash or ThumbHash is provided. */
-  export let placeholderSrc: string | undefined = undefined
-  /** The size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the `blurhash` prop is used. */
-  export let placeholderSize: number | undefined = undefined
+  const {
+    src,
+    srcSet,
+    autoSizes = false,
+    blurhash,
+    thumbhash,
+    placeholderSrc,
+    placeholderSize,
+    ...restProps
+  }: {
+    /** Image source URL to be lazy-loaded. */
+    src?: HTMLImgAttributes['src']
+    /** Image source set to be lazy-loaded. */
+    srcSet?: HTMLImgAttributes['srcset']
+    /**
+     * A flag to indicate whether the sizes attribute should be automatically calculated.
+     * @default false
+     */
+    autoSizes?: boolean
+    /** A BlurHash string representing the blurry placeholder image. */
+    blurhash?: string
+    /** A ThumbHash string representing the blurry placeholder image. */
+    thumbhash?: string
+    /** Optional image source URL for a custom placeholder image. Will be ignored if a BlurHash or ThumbHash is provided. */
+    placeholderSrc?: string
+    /** The size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the `blurhash` prop is used. */
+    placeholderSize?: number
+  } & Omit<HTMLImgAttributes, 'srcset'> = $props()
 
-  let target: HTMLImageElement | undefined = undefined
-  let cleanup: (() => void) | undefined = undefined
+  let target = $state<HTMLImageElement | undefined>()
 
-  $: if (target) {
-    cleanup?.()
+  $effect(() => {
+    if (!target)
+      return
 
-    cleanup = lazyLoad(target, {
+    const cleanup = lazyLoad(target, {
       hash: thumbhash || blurhash,
       hashType: thumbhash ? 'thumbhash' : 'blurhash',
       placeholderSize,
     })
-  }
 
-  onDestroy(() => {
-    cleanup?.()
+    return () => {
+      cleanup()
+    }
   })
 </script>
 
@@ -45,5 +56,5 @@
   data-srcset={srcSet}
   data-sizes={autoSizes ? 'auto' : undefined}
   loading='lazy'
-  {...$$restProps}
+  {...restProps}
 />
diff --git a/packages/svelte/src/lib/index.js → packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.js → packages/svelte/src/lib/index.ts