From ba403fb0155e9bcbba730787e5ff4dabd3c2ef16 Mon Sep 17 00:00:00 2001
From: Jason Lee <jason@zerodevx.com>
Date: Sat, 24 Aug 2024 17:47:02 +0800
Subject: [PATCH] Format `jsdoc`

---
 src/lib/FxParallax.svelte | 16 +++++++++---
 src/lib/FxReveal.svelte   | 13 ++++++---
 src/lib/SvelteImg.svelte  | 55 +++++++++++++++++++++++++++++++++------
 3 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/src/lib/FxParallax.svelte b/src/lib/FxParallax.svelte
index de5c16c..a67452f 100644
--- a/src/lib/FxParallax.svelte
+++ b/src/lib/FxParallax.svelte
@@ -3,16 +3,26 @@ import Img from './SvelteImg.svelte'
 import { observe } from './utils.js'
 import { onMount } from 'svelte'
 
+/**
+ * Class list forwarded to &lt;img&gt; wrapper
+ * @type {string}
+ */
 let classes = ''
 export { classes as class }
+
 /**
- * @type {number} number between 0 to 1 to control speed relative to scroll
+ * Number between 0 to 1 to control speed relative to scroll:
  * - value closer to 0 is faster, while a value closer to 1 is slower
  * - value of 1 behaves normally
  * - value of 0 effectively makes the element scroll fixed with the page
+ * @type {number}
  */
 export let factor = 0.75
-/** @type {HTMLImageElement|undefined} bindable reference to <img> element */
+
+/**
+ * Bindable reference to &lt;img&gt; element
+ * @type {HTMLImageElement|undefined}
+ */
 export let ref = undefined
 
 let mounted = false
@@ -61,11 +71,11 @@ onMount(() => {
   on:leave={() => (inview = false)}
 >
   <Img
+    {...$$restProps}
     style="height:{height}%;transform:translate(0,{offset}px)"
     bind:ref
     on:load
     on:click
-    {...$$restProps}
   />
 </div>
 
diff --git a/src/lib/FxReveal.svelte b/src/lib/FxReveal.svelte
index d3b7208..253f4ca 100644
--- a/src/lib/FxReveal.svelte
+++ b/src/lib/FxReveal.svelte
@@ -3,9 +3,16 @@ import Img from './SvelteImg.svelte'
 import { observe, len, lqipToBackground } from './utils.js'
 import { onMount } from 'svelte'
 
-/** @type {Object} imagetools import */
+/**
+ * Imagetools import meta
+ * @type {any}
+ */
 export let src = {}
-/** @type {HTMLImageElement|undefined} bindable reference to <img> element */
+
+/**
+ * Bindable reference to &lt;img&gt; element
+ * @type {HTMLImageElement|undefined}
+ */
 export let ref = undefined
 
 let meta = {}
@@ -38,7 +45,7 @@ onMount(() => {
     use:observe
     on:enter={() => (inview = true)}
   >
-    <Img src={meta} bind:ref on:load on:load={() => (loaded = true)} on:click {...$$restProps} />
+    <Img {...$$restProps} bind:ref on:load on:load={() => (loaded = true)} on:click src={meta} />
     <div class="lqip" style:background />
   </div>
 {/if}
diff --git a/src/lib/SvelteImg.svelte b/src/lib/SvelteImg.svelte
index bf8ca67..a9bc172 100644
--- a/src/lib/SvelteImg.svelte
+++ b/src/lib/SvelteImg.svelte
@@ -2,19 +2,46 @@
 import Picture from './Picture.svelte'
 import { len, lqipToBackground } from './utils.js'
 
-/** @type {Object} imagetools import */
+/**
+ * Imagetools import meta
+ * @type {any}
+ */
 export let src = {}
-/** @type {string|undefined} img tag `sizes` attr */
+
+/**
+ * &lt;img&gt; element `sizes` attr
+ * @type {string|undefined}
+ */
 export let sizes = undefined
-/** @type {number|undefined} img width override */
+
+/**
+ * &lt;img&gt; `width` override
+ * @type {number|undefined}
+ */
 export let width = undefined
-/** @type {number|undefined} img height override */
+
+/**
+ * &lt;img&gt; `height` override
+ * @type {number|undefined}
+ */
 export let height = undefined
-/** @type {'lazy'|'eager'} img tag `loading` attr */
+
+/**
+ * &lt;img&gt; element `loading` attr
+ * @type {'lazy'|'eager'}
+ */
 export let loading = 'lazy'
-/** @type {'async'|'auto'|'sync'} img tag `decoding` attr */
+
+/**
+ * &lt;img&gt; element `decoding` attr
+ * @type {'async'|'auto'|'sync'}
+ */
 export let decoding = 'async'
-/** @type {HTMLImageElement|undefined} bindable reference to `<img>` element */
+
+/**
+ * Bindable reference to &lt;img&gt; element
+ * @type {HTMLImageElement|undefined}
+ */
 export let ref = undefined
 
 let sources = []
@@ -29,10 +56,23 @@ $: if (len(img)) {
 }
 </script>
 
+<!-- @component
+High-performance responsive/progressive images for SvelteKit.
+
+@example
+<script>
+  import Img from '@zerodevx/svelte-img'
+  import src from '$lib/assets/cat.jpg?as=run'
+</script>
+
+<Img {src} alt="cute cat" />
+-->
+
 {#if len(img)}
   <Picture {sources} {sizes}>
     <!-- svelte-ignore a11y-missing-attribute a11y-no-noninteractive-element-interactions -->
     <img
+      {...$$restProps}
       {loading}
       {decoding}
       width={width || img.w || undefined}
@@ -41,7 +81,6 @@ $: if (len(img)) {
       bind:this={ref}
       on:click
       on:load
-      {...$$restProps}
       src={img.src}
     />
   </Picture>