fix(svelte): correct lazy loading (#485)

This is an attempt to fix #444, based on @adrienrn's example. This is mainly about ensuring the loading=lazy prop is applied after the src attribute.
ascorbic · Feb 4, 2024 · c44fad7 · c44fad7
1 parent 31c20f2
commit c44fad7
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 16 deletions.
diff --git a/examples/svelte/src/routes/+page.svelte b/examples/svelte/src/routes/+page.svelte
@@ -24,3 +24,91 @@
   layout="fixed"
   alt="Bunny.net"
 />
+
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=1"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=1"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=2"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=3"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=4"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=5"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=6"
+  width={600}
+  height={800}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=7"
+  width={400}
+  height={300}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=8"
+  width={400}
+  height={300}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=9"
+  width={400}
+  height={300}
+  layout="fixed"
+  alt="Cat"
+/>
+<hr />
+<Image
+  src="https://source.unsplash.com/random?cat=cat&=x=10"
+  width={400}
+  height={300}
+  layout="fixed"
+  alt="Cat"
+/>
diff --git a/packages/svelte/src/lib/elements.d.ts b/packages/svelte/src/lib/elements.d.ts
@@ -0,0 +1,14 @@
+import type { HTMLImgAttributes } from "svelte/elements";
+
+declare global {
+  namespace svelteHTML {
+    interface IntrinsicElements {
+      img: HTMLImgAttributes & {
+        // Because https://github.com/sveltejs/svelte/issues/8099
+        fetchpriority?: "auto" | "low" | "high" | null;
+      };
+    }
+  }
+}
+
+export {};
diff --git a/packages/svelte/src/lib/image.svelte b/packages/svelte/src/lib/image.svelte
@@ -1,27 +1,43 @@
 <script lang="ts">
-  import { transformProps } from "@unpic/core";
+  import { transformProps, type UnpicImageProps } from "@unpic/core";
   import styleToCss from "style-object-to-css-string";
-  import type { ImageProps as BaseImageProps } from "./types";
-  import type { HTMLAttributes } from "svelte/elements";
-  // This unused import is a hack to get around a bug in svelte2tsx
-  import type { UrlTransformer, ImageCdn } from "unpic";
+  import type { HTMLAttributes, HTMLImgAttributes } from "svelte/elements";
+  type $$Props = UnpicImageProps<
+    HTMLImgAttributes,
+    HTMLAttributes<HTMLImageElement>["style"]
+  > & { style?: HTMLAttributes<HTMLImageElement>["style"] };
 
-  type $$Props = BaseImageProps;
-
-  $: ({ style: parentStyle, ...props } = $$props as $$Props);
+  $: ({ style: parentStyle, ...props } = $$props);
   $: ({
     alt,
     style: styleObj,
-    ...transformedProps
-  } = transformProps<
-    Omit<HTMLAttributes<HTMLImageElement>, "style"> & {
-      style: Record<string, string>;
-      alt?: string | null;
-    }
-  >({ ...props }));
+    src,
+    width,
+    height,
+    loading,
+    decoding,
+    srcset,
+    role,
+    sizes,
+    fetchpriority,
+  } = transformProps(props as $$Props));
   $: style = [styleToCss(styleObj || {}), parentStyle]
     .filter(Boolean)
     .join(";");
 </script>
 
-<img {alt} {style} {...transformedProps} on:load />
+<img
+  {...$$props}
+  {style}
+  {loading}
+  {width}
+  {height}
+  {decoding}
+  {role}
+  {fetchpriority}
+  alt={alt?.toString()}
+  src={src?.toString()}
+  srcset={srcset?.toString()}
+  sizes={sizes?.toString()}
+  on:load
+/>