Big v2 refactor ftw

Author: zerodevx

src/lib/FxReveal.svelte

@@ -1,40 +1,44 @@
 <script>
 import Img from './SvelteImg.svelte'
-import { observe } from './utils.js'
+import { observe, len, lqipToBackground } from './utils.js'
 import { onMount } from 'svelte'
 
-/** @type {Object[]} imagetools import */
-export let src = []
+/** @type {Object} imagetools import */
+export let src = {}
 /** @type {HTMLImageElement|undefined} bindable reference to <img> element */
 export let ref = undefined
 
-let sources = []
+let meta = {}
 let background
 let mounted = false
 let loaded = false
 let inview = false
 
-$: if (src.length) {
-  const { base64 } = src.find((i) => i.base64) || {}
-  background = base64 && `url('${base64}') no-repeat center/cover`
-  sources = src.filter((i) => !i.base64)
+$: if (len(src)) {
+  loaded = false
+  const { lqip, src: s, w, h } = src.img
+  background = lqip ? lqipToBackground(lqip) : undefined
+  const { sources = {} } = src
+  meta = { img: { src: s, w, h }, sources }
+} else {
+  meta = {}
 }
 
-onMount(() => {
+onMount(async () => {
   mounted = true
   if (ref.complete) loaded = true
 })
 </script>
 
-{#if src.length}
+{#if len(meta)}
   <div
     class="wrap"
     class:mounted
     class:reveal={loaded && inview}
     use:observe
     on:enter={() => (inview = true)}
   >
-    <Img src={sources} bind:ref on:load={() => (loaded = true)} on:click {...$$restProps} />
+    <Img src={meta} bind:ref on:load on:load={() => (loaded = true)} on:click {...$$restProps} />
     <div class="lqip" style:background />
   </div>
 {/if}
@@ -49,23 +53,23 @@ onMount(() => {
 }
 .mounted :global(img) {
   opacity: 0;
-  transform: scale(var(--reveal-scale, 1.03));
+  transform: var(--reveal-transform, scale(1.05));
 }
-.reveal :global(img) {
-  transition: opacity var(--reveal-opacity-duration, 1s) linear,
-    transform var(--reveal-transform-duration, 0.6s) ease-out;
+.mounted.reveal :global(img) {
+  transition: var(--reveal-transition, opacity 1s linear, transform 0.75s ease-out);
   opacity: 1;
   transform: scale(1);
 }
 .lqip {
   position: absolute;
   inset: 0;
   z-index: -1;
+  transform: var(--reveal-transform, scale(1.05));
 }
 .lqip::after {
   content: '';
   position: absolute;
   inset: 0;
-  backdrop-filter: blur(20px);
+  backdrop-filter: var(--reveal-filter, blur(20px));
 }
 </style>

src/lib/Picture.svelte

@@ -0,0 +1,32 @@
+<script>
+import { len } from './utils.js'
+
+export let sources = {}
+export let sizes = undefined
+
+let srcs = []
+
+$: if (len(sources)) {
+  const list = []
+  for (const [format, imgs] of Object.entries(sources)) {
+    list.push({
+      format,
+      srcset: imgs.map((i) => `${i.src} ${i.w}w`).join()
+    })
+  }
+  srcs = list
+} else {
+  srcs = []
+}
+</script>
+
+{#if len(srcs)}
+  <picture>
+    {#each srcs as { format, srcset }}
+      <source type="image/{format}" {sizes} {srcset} />
+    {/each}
+    <slot />
+  </picture>
+{:else}
+  <slot />
+{/if}

src/lib/SvelteImg.svelte

@@ -1,71 +1,48 @@
 <script>
-/** @type {Object[]} imagetools import */
-export let src = []
+import Picture from './Picture.svelte'
+import { len, lqipToBackground } from './utils.js'
+
+/** @type {Object} imagetools import */
+export let src = {}
 /** @type {string|undefined} img tag `sizes` attr */
 export let sizes = undefined
-/** @type {number|undefined} image width override */
+/** @type {number|undefined} img width override */
 export let width = undefined
-/** @type {number|undefined} image height override */
+/** @type {number|undefined} img height override */
 export let height = undefined
 /** @type {'lazy'|'eager'} img tag `loading` attr */
 export let loading = 'lazy'
-/** @type {'async'|'auto'|'sync'} */
+/** @type {'async'|'auto'|'sync'} img tag `decoding` attr */
 export let decoding = 'async'
-/** @type {HTMLImageElement|undefined} bindable reference to <img> element */
+/** @type {HTMLImageElement|undefined} bindable reference to `<img>` element */
 export let ref = undefined
 
-const priority = ['heic', 'heif', 'avif', 'webp', 'jpeg', 'jpg', 'png', 'gif', 'tiff']
-let image = {}
 let sources = []
+let img = {}
+let background = undefined
 
-$: if (src.length) {
-  const { list, lqip } = src.reduce(
-    (a, c) => {
-      if (c.base64) a.lqip = `url('${c.base64}') no-repeat center/cover`
-      else a.list.push(c)
-      return a
-    },
-    { list: [], lqip: undefined }
-  )
-  const groups = []
-  for (const format of priority) {
-    const group = list.filter((i) => i.format === format)
-    if (group.length) {
-      group.sort((a, b) => a.width - b.width)
-      const { src, width, height } = group[group.length - 1]
-      groups.push({
-        format: format === 'jpg' ? 'jpeg' : format,
-        srcset: group.reduce((a, c) => [...a, `${c.src} ${c.width}w`], []).join(','),
-        src,
-        width,
-        height
-      })
-    }
-  }
-  image = { ...groups.pop(), lqip }
-  sources = groups
+$: sources = src.sources || {}
+$: img = src.img || {}
+$: if (len(img)) {
+  const { lqip } = img
+  background = lqip ? lqipToBackground(lqip) : undefined
 }
 </script>
 
-{#if image.src}
-  <picture>
-    {#each sources as { format, srcset }}
-      <source type="image/{format}" {srcset} {sizes} />
-    {/each}
-    <!-- svelte-ignore a11y-missing-attribute -->
+{#if len(img)}
+  <Picture {sources} {sizes}>
+    <!-- svelte-ignore a11y-missing-attribute a11y-no-noninteractive-element-interactions -->
     <img
       {loading}
       {decoding}
-      {sizes}
-      width={width || image.width || undefined}
-      height={height || image.height || undefined}
-      style:background={image.lqip}
+      width={width || img.w || undefined}
+      height={height || img.h || undefined}
+      style:background
       bind:this={ref}
       on:click
       on:load
       {...$$restProps}
-      srcset={image.srcset}
-      src={image.src}
+      src={img.src}
     />
-  </picture>
+  </Picture>
 {/if}

src/lib/index.js

@@ -1,6 +1,7 @@
 import Img from './SvelteImg.svelte'
 import FxReveal from './FxReveal.svelte'
 import FxParallax from './FxParallax.svelte'
+import { observe } from './utils.js'
 
 export default Img
-export { FxReveal, FxParallax }
+export { FxReveal, FxParallax, observe }

src/lib/utils.js

@@ -19,4 +19,12 @@ function observe(node) {
   }
 }
 
-export { observe }
+function len(obj) {
+  return obj && Object.keys(obj).length
+}
+
+function lqipToBackground(lqip) {
+  return lqip[0] === '#' ? lqip : `url(data:image/webp;base64,${lqip}) no-repeat center/cover`
+}
+
+export { observe, len, lqipToBackground }

src/lib/vite.js

@@ -1,44 +1,40 @@
-// @ts-nocheck
+import { imagetools, pictureFormat } from 'vite-imagetools'
 
-import { imagetools } from 'vite-imagetools'
-import { resize, format, setMetadata, metadataFormat, resolveConfigs } from 'imagetools-core'
-
-function lqip(cfg, ctx) {
-  if (cfg.lqip) {
-    const r = resize({ width: cfg.lqip }, ctx)
-    const f = format({ format: 'webp', quality: '20' }, ctx)
-    return async function (image) {
-      const img = f(r(image))
-      const buffer = await img.toBuffer()
-      setMetadata(img, 'base64', `data:image/webp;base64,${buffer.toString('base64')}`)
-      return img
+function run(cfg) {
+  return async function (metadatas) {
+    const pic = pictureFormat()(metadatas)
+    const lqip = (cfg && parseInt(cfg)) ?? 16
+    if (lqip) {
+      const { image } = metadatas.find((i) => i.src === pic.img.src)
+      let data
+      if (lqip > 1) {
+        const buf = await image.resize({ width: lqip }).toFormat('webp', { quality: 20 }).toBuffer()
+        data = buf.toString('base64')
+      } else {
+        const { dominant } = await image.stats()
+        const { r, g, b } = dominant
+        data = `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`
+      }
+      pic.img.lqip = data
     }
+    return pic
   }
 }
 
-function main(overrides = {}) {
+function main({
+  runDefaultDirectives = new URLSearchParams('w=480;1024;1920&format=avif;webp;jpg'),
+  defaultDirectives = new URLSearchParams(),
+  exclude = '{build,dist,node_modules}/**/*',
+  extendOutputFormats = (i) => i, //noop
+  ...rest
+} = {}) {
   return imagetools({
     defaultDirectives: (url) =>
-      url.searchParams.has('run')
-        ? new URLSearchParams('width=480;1024;1920&format=avif;webp;jpg')
-        : new URLSearchParams(''),
-    extendTransforms: (builtins) => [...builtins, lqip],
-    extendOutputFormats: (builtinOutputFormats) => ({
-      ...builtinOutputFormats,
-      run: () => metadataFormat(['format', 'src', 'width', 'height', 'base64'])
-    }),
-    resolveConfigs: (e, f) => {
-      if (e.findIndex((i) => i[0] === 'run') > -1) {
-        const idx = e.findIndex((i) => i[0] === 'lqip')
-        const lqip = idx > -1 ? parseInt(e.splice(idx, 1)[0][1][0]) : 16
-        const merge = new Map()
-        for (const [key, val] of e) merge.set(key, val)
-        return [...resolveConfigs([...merge], f), ...(lqip ? [{ lqip }] : [])]
-      }
-      return resolveConfigs(e, f)
-    },
-    ...overrides
+      url.searchParams.get('as') === 'run' ? runDefaultDirectives : defaultDirectives,
+    extendOutputFormats: (builtins) => ({ ...extendOutputFormats(builtins), run }),
+    exclude,
+    ...rest
   })
 }
 
-export { main as imagetools, lqip }
+export { main as imagetools, run }