Refactor for v1 release

Author: zerodevx

src/lib/SvelteImg.svelte

@@ -1,31 +1,29 @@
 <script>
 export let src = []
+export let sizes = undefined
 export let loading = 'lazy'
 export let decoding = 'async'
-export let ref = {}
+export let ref = undefined
 
-const priority = ['heic', 'heif', 'avif', 'webp', 'jpeg', 'jpg', 'png', 'gif', 'tiff']
-const blacklist = ['src', 'srcset', 'loading', 'decoding', 'style', 'ref']
-let props = {}
 let image = {}
 let sources = []
 
 $: if (src.length) {
   const { list, lqip } = src.reduce(
     (a, c) => {
-      if (c.base64) a.lqip = c.base64
+      if (c.base64) a.lqip = `url('${c.base64}') no-repeat center/cover`
       else a.list.push(c)
       return a
     },
-    { list: [], lqip: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=' }
+    { list: [], lqip: undefined }
   )
   const groups = []
-  for (const f of priority) {
-    const group = list.filter((i) => i.format === f)
+  for (const format of ['heic', 'heif', 'avif', 'webp', 'jpeg', 'jpg', 'png', 'gif', 'tiff']) {
+    const group = list.filter((i) => i.format === format)
     if (group.length) {
       group.sort((a, b) => a.width - b.width)
       groups.push({
-        format: f,
+        format,
         srcset: group.reduce((a, c) => [...a, `${c.src} ${c.width}w`], []).join(','),
         src: group[0].src
       })
@@ -34,31 +32,25 @@ $: if (src.length) {
   image = { ...groups.pop(), lqip }
   sources = groups
 }
-
-$: {
-  props = {}
-  for (const tag in $$props) {
-    if (!blacklist.includes(tag)) props[tag] = $$props[tag]
-  }
-}
 </script>
 
 {#if image.src}
   <picture>
     {#each sources as { format, srcset }}
-      <source type="image/{format}" {srcset} />
+      <source type="image/{format}" {srcset} {sizes} />
     {/each}
     <!-- svelte-ignore a11y-missing-attribute -->
     <img
       src={image.src}
       srcset={image.srcset}
+      {sizes}
       {loading}
       {decoding}
-      style="background:url('{image.lqip}') no-repeat center/cover"
+      style:background={image.lqip}
       bind:this={ref}
       on:click
       on:load
-      {...props}
+      {...$$restProps}
     />
   </picture>
 {/if}

src/lib/vite.js

@@ -15,13 +15,12 @@ function lqip(cfg, ctx) {
 }
 
 function set(url, defaults = 'width=480;1024;1920&format=avif;webp;jpg') {
-  const { searchParams } = url
-  const out = new URLSearchParams(defaults)
-  for (const [key, val] of searchParams.entries()) out.set(key, val)
-  return out
+  const merge = new URLSearchParams(defaults)
+  for (const [key, val] of url.searchParams.entries()) merge.set(key, val)
+  return merge
 }
 
-function main(opts) {
+function main(overrides = {}) {
   return imagetools({
     defaultDirectives: (url) => set(url),
     extendTransforms: (builtins) => [...builtins, lqip],
@@ -31,11 +30,10 @@ function main(opts) {
     }),
     resolveConfigs: (e, f) => {
       const idx = e.findIndex((i) => i[0] === 'lqip')
-      let lqip = 16
-      if (idx > -1) lqip = parseInt(e.splice(idx, 1)[0][1][0])
+      const lqip = idx > -1 ? parseInt(e.splice(idx, 1)[0][1][0]) : 16
       return [...resolveConfigs(e, f), { lqip }]
     },
-    ...opts
+    ...overrides
   })
 }
 

src/routes/+layout.svelte

@@ -5,6 +5,7 @@ import { dev } from '$app/env'
 
 <svelte:head>
   <title>svelte-img</title>
+  <meta name="description" content="Elegant responsive images for SvelteKit." />
   {#if !dev}
     <script>
     ;(function () {

src/routes/+page.svelte

@@ -17,9 +17,18 @@ import cat15 from './cat15.jpg?run&width=640&height=640&fit=cover'
 import Img from '$lib/index.js'
 
 const features = [
-  ['Full width responsive images served in multiple widths and next-gen formats.', cat02],
-  ['Native lazy loading with a <code>16px</code> wide placeholder image background.', cat03],
-  ['Pre-rendered pages that still work without Javascript.', cat04]
+  [
+    'Render the bare minimum, minimally invasive, HTML code to represent responsive images, served in multiple widths and next-gen formats.',
+    cat02
+  ],
+  [
+    'Delegate the heavy lifting to native browser handlers and existing build pipelines. Render <strong>&lt;img&gt;</strong> tags with modern defaults, with other component props spread into it.',
+    cat03
+  ],
+  [
+    'Images still work without Javascript. Try disabling JS and refreshing the page. Also try checking the lighthouse score.',
+    cat04
+  ]
 ]
 const dynamic = [cat05, cat06, cat07, cat08, cat09, cat10, cat11, cat12, cat13, cat14, cat15]
 let selected = 0
@@ -31,7 +40,7 @@ let selected = 0
     <h1>svelte-img</h1>
     <p>Elegant responsive images for SvelteKit.</p>
     <a
-      class="h-14 flex items-center justify-center rounded-full text-xs font-bold tracking-wider bg-blue-500 hover:bg-blue-900 px-6 mt-8 mb-6"
+      class="h-14 flex items-center justify-center rounded-full text-xs font-bold tracking-wider bg-blue-600 hover:bg-blue-800 px-6 mt-8 mb-6"
       href="https://github.com/zerodevx/svelte-img">VISIT GITHUB REPO</a
     >
   </div>
@@ -43,28 +52,30 @@ let selected = 0
     <Img class="w-full h-128 object-cover" src={f[1]} alt="cat" />
   {/each}
 
-  <p><code>src</code> can be dynamically changed. Well this requires Javascript.</p>
-  <div class="flex justify-center">
-    <Img
-      class="w-96 h-96 sm:w-128 sm:h-128 aspect-square object-cover"
-      src={dynamic[selected]}
-      alt="cat"
-      width="1"
-      height="1"
-    />
-  </div>
-  <div class="flex flex-wrap mt-4">
-    {#each dynamic as src, i}
-      <div>
+  <p>
+    Image <code>src</code> can be dynamically updated - well, this requires Javascript because interactivity.
+  </p>
+  <div class="flex flex-col md:flex-row">
+    <div class="flex justify-center">
+      <Img
+        class="w-96 h-96 md:w-128 md:h-128 object-cover"
+        src={dynamic[selected]}
+        alt="cat"
+        width="1"
+        height="1"
+      />
+    </div>
+    <div class="flex flex-wrap justify-center mt-4 md:flex-1 md:mt-6">
+      {#each dynamic as src, i}
         <Img
-          class="w-36 h-36 m-2 border-4 cursor-pointer {selected === i
+          class="w-32 h-32 md:w-36 md:h-36 m-2 border-4 cursor-pointer {selected === i
             ? 'border-red-500'
-            : 'border-transparent'}"
+            : 'border-gray-100'}"
           {src}
           alt="cat"
           on:click={() => (selected = i)}
         />
-      </div>
-    {/each}
+      {/each}
+    </div>
   </div>
 </div>