Refactor src destructuring

README.md

@@ -2,6 +2,9 @@
 
 > Elegant responsive images for SvelteKit.
 
+Automatically transform local images into multiple widths and next-gen formats, then render its
+associated HTML into your SvelteKit project.
+
 Demo: https://zerodevx.github.io/svelte-img/
 
 ## Install
@@ -33,12 +36,12 @@ Use anywhere in your Svelte app:
 <!-- prettier-ignore -->
 ```html
 <script>
-// Import original max-sized image with `?run` query param.
+// Import original full-sized image with `?run` query param.
 import cat from '$lib/assets/cat.jpg?run'
 import Img from '@zerodevx/svelte-img'
 </script>
 
-<Img class="any classes" src="{cat}" alt="Cute cat" />
+<Img class="my classes" src={cat} alt="Cute cat" />
 ```
 
 The image component renders into:
@@ -47,16 +50,16 @@ The image component renders into:
 <picture>
   <source
     type="image/avif"
-    srcset="path/to/avif/480 480w, path/to/avif/1024 1024w, path/to/avif/1920 1920w"
+    srcset="path/to/avif-480 480w, path/to/avif-1024 1024w, path/to/avif-1920 1920w"
   />
   <source
     type="image/webp"
-    srcset="path/to/webp/480 480w, path/to/webp/1024 1024w, path/to/webp/1920 1920w"
+    srcset="path/to/webp-480 480w, path/to/webp-1024 1024w, path/to/webp-1920 1920w"
   />
   <img
-    class="any classes"
+    class="my classes"
     src="path/to/jpg/480"
-    srcset="path/to/jpg/480 480w, path/to/jpg/1024 1024w, path/to/jpg/1920 1920w"
+    srcset="path/to/jpg-480 480w, path/to/jpg-1024 1024w, path/to/jpg-1920 1920w"
     loading="lazy"
     decoding="async"
     style='background: url("data:image/webp;base64,XXX") no-repeat center/cover'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodevx/svelte-img",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Elegant responsive images for SvelteKit",
   "author": "Jason Lee <[email protected]>",
   "scripts": {

src/lib/SvelteImg.svelte

@@ -1,21 +1,24 @@
 <script>
-import { createEventDispatcher } from 'svelte'
-
 export let src = []
 export let loading = 'lazy'
 export let decoding = 'async'
 export let ref = {}
 
 const priority = ['heic', 'heif', 'avif', 'webp', 'jpeg', 'jpg', 'png', 'gif', 'tiff']
 const blacklist = ['src', 'srcset', 'loading', 'decoding', 'style', 'ref']
-const fire = createEventDispatcher()
 let props = {}
 let image = {}
 let sources = []
 
 $: if (src.length) {
-  const list = [...src]
-  const lqip = list.pop().base64
+  const { list, lqip } = src.reduce(
+    (a, c) => {
+      if (c.base64) a.lqip = c.base64
+      else a.list.push(c)
+      return a
+    },
+    { list: [], lqip: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=' }
+  )
   const groups = []
   for (const f of priority) {
     const group = list.filter((i) => i.format === f)
@@ -40,20 +43,22 @@ $: {
 }
 </script>
 
-<picture>
-  {#each sources as { format, srcset }}
-    <source type="image/{format}" {srcset} />
-  {/each}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <img
-    src={image.src}
-    srcset={image.srcset}
-    {loading}
-    {decoding}
-    style="background:url('{image.lqip}') no-repeat center/cover"
-    bind:this={ref}
-    on:click={() => fire('click')}
-    on:load={() => fire('load')}
-    {...props}
-  />
-</picture>
+{#if image.src}
+  <picture>
+    {#each sources as { format, srcset }}
+      <source type="image/{format}" {srcset} />
+    {/each}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <img
+      src={image.src}
+      srcset={image.srcset}
+      {loading}
+      {decoding}
+      style="background:url('{image.lqip}') no-repeat center/cover"
+      bind:this={ref}
+      on:click
+      on:load
+      {...props}
+    />
+  </picture>
+{/if}

src/routes/+layout.svelte

@@ -0,0 +1,29 @@
+<script>
+import '../app.postcss'
+import { dev } from '$app/env'
+</script>
+
+<svelte:head>
+  <title>svelte-img</title>
+  {#if !dev}
+    <script>
+    ;(function () {
+      if (location.protocol === 'https:') {
+        window.ga =
+          window.ga ||
+          function () {
+            ;(ga.q = ga.q || []).push(arguments)
+          }
+        ga.l = +new Date()
+        ga('create', 'UA-66946548-3', 'auto')
+        ga('send', 'pageview')
+        var el = document.createElement('script')
+        el.src = 'https://www.google-analytics.com/analytics.js'
+        document.head.appendChild(el)
+      }
+    })()
+    </script>
+  {/if}
+</svelte:head>
+
+<slot />

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-import '../app.postcss'
 import cat01 from './cat01.jpg?run&width=480;1024;1920;2560'
 import cat02 from './cat02.jpg?run'
 import cat03 from './cat03.jpg?run'