Image: Invalidation

<script>
  import { files } from './files.ts';
  import { getImageUrl } from 'mochi-framework';
  import RefreshCw from '@lucide/svelte/icons/refresh-cw';

  let { src, generation } = $props();

  const variants = [
    { size: 'hero', label: 'hero — 600×400', w: 600, h: 400 },
    { size: 'card', label: 'card — 400×267', w: 400, h: 267 },
    { size: 'thumb', label: 'thumb — 240×240', w: 240, h: 240 },
  ];

  // `invalidateImage()` clears the *server* cache; the `&g` nonce makes the browser
  // re-request the otherwise URL-stable images so the swap is visible immediately.
  const bust = (url) => `${url}&g=${generation}`;
  const originalUrl = bust(getImageUrl(src));

  const sources = await loadSources(files);
</script>

<p>
  The images below all derive from <strong>one shared cached original</strong>, fetched from our own
  <code>/demos/image-invalidation/source.jpg</code> route — a <code>Mochi.file()</code> endpoint that serves a random bundled photo on every request. Hit the button to
  <code>invalidateImage(src, &lbrace; hard: true &rbrace;)</code>: it <strong>hard-deletes</strong> the cached original and cascades to every named size, so the next request
  re-fetches the source and <strong>all sizes update to the same new photo in lockstep</strong>.
</p>

<div class="actions">
  <form method="POST">
    <button type="submit">
      <RefreshCw size={16} aria-hidden="true" />
      Invalidate &amp; re-fetch
    </button>
  </form>
  {#if generation > 0}
    <span class="count">Invalidated {generation} time{generation === 1 ? '' : 's'}</span>
  {/if}
</div>

<h3>Shared original</h3>
<div class="frame">
  <img src={originalUrl} alt="The shared cached original at full size" />
</div>

<h3>Named sizes off that original</h3>
<p>Shown at their relative sizes on one row, so the difference is visible at a glance:</p>
<div class="sizes">
  {#each variants as v (v.size)}
    <figure style:flex="{v.w} 1 0">
      <img src={bust(getImageUrl(src, v.size))} width={v.w} height={v.h} alt="{v.size} variant of the cached original" />
      <figcaption>{v.label}</figcaption>
    </figure>
  {/each}
</div>

<p class="note">
  <code>invalidateImage()</code> clears the cache on the <em>server</em>. A browser already holding a copy (via <code>Cache-Control</code> in production) keeps showing it until
  that lapses — so this demo appends a small <code>&amp;g=</code> nonce to force an immediate re-request. Pass <code>&lbrace; hard: false &rbrace;</code> (the default) instead to mark
  the original stale: the next request serves the cached bytes right away and re-fetches in the background.
</p>