Asset Versioning and Cache Busting

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Include hash in filenames
        entryFileNames: '[name]-[hash].js',
        chunkFileNames: '[name]-[hash].js',
        assetFileNames: '[name]-[hash][extname]',
      },
    },
  },
});

import { readFileSync, writeFileSync, readdirSync } from 'fs';
import { join } from 'path';

interface Manifest {
  [key: string]: string;
}

function generateManifest() {
  const distDir = 'dist';
  const files = readdirSync(distDir);

  const manifest: Manifest = {};

  // Map unhashed names to hashed names
  for (const file of files) {
    if (file.endsWith('.js') || file.endsWith('.css')) {
      // Extract base name: main-abc123.js -> main
      const match = file.match(/^(.+?)-[a-f0-9]+\.(js|css)$/);
      if (match) {
        const baseName = match[1];
        const ext = match[2];
        manifest[`${baseName}.${ext}`] = file;
      }
    }
  }

  // Write manifest
  writeFileSync(
    'theme/snippets/asset-manifest.liquid',
    generateLiquidManifest(manifest)
  );

  console.log('Generated asset manifest:', manifest);
}

function generateLiquidManifest(manifest: Manifest): string {
  let liquid = '{%- comment -%}\n  Auto-generated asset manifest\n  Do not edit manually\n{%- endcomment -%}\n\n';

  liquid += '{%- liquid\n';

  for (const [key, value] of Object.entries(manifest)) {
    const varName = key.replace('.', '_').replace('-', '_');
    liquid += `  assign ${varName} = '${value}'\n`;
  }

  liquid += '-%}\n';

  return liquid;
}

generateManifest();

import { readFileSync, writeFileSync } from 'fs';
import { execSync } from 'child_process';

// Get version from package.json or git
const packageJson = JSON.parse(readFileSync('package.json', 'utf-8'));
const version = packageJson.version;

// Or use git commit hash
const gitHash = execSync('git rev-parse --short HEAD').toString().trim();

// Update Liquid snippet
const template = `{%- comment -%}
  Auto-generated during build
  Version: ${version}
  Git: ${gitHash}
  Built: ${new Date().toISOString()}
{%- endcomment -%}
{%- assign asset_version = '${version}-${gitHash}' -%}
`;

writeFileSync('theme/snippets/asset-version.liquid', template);
console.log(`Injected version: ${version}-${gitHash}`);

const CACHE_NAME = 'theme-v1.0.0';

const PRECACHE_ASSETS = [
  '/assets/main.js',
  '/assets/vendor-react.js',
  '/assets/main.css',
];

// Install: precache critical assets
self.addEventListener('install', (event: ExtendableEvent) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(PRECACHE_ASSETS);
    })
  );
});

// Activate: clean up old caches
self.addEventListener('activate', (event: ExtendableEvent) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    })
  );
});

// Fetch: serve from cache, fall back to network
self.addEventListener('fetch', (event: FetchEvent) => {
  // Only cache same-origin requests
  if (!event.request.url.startsWith(self.location.origin)) {
    return;
  }

  // Cache-first for assets
  if (event.request.url.includes('/assets/')) {
    event.respondWith(
      caches.match(event.request).then((cached) => {
        return cached || fetch(event.request).then((response) => {
          // Cache the new response
          const clone = response.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, clone);
          });
          return response;
        });
      })
    );
  }
});

if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/assets/service-worker.js');
  });
}

export function checkForUpdates() {
  if (!('serviceWorker' in navigator)) return;

  navigator.serviceWorker.addEventListener('controllerchange', () => {
    // New service worker activated - page should refresh
    showUpdateNotification();
  });
}

function showUpdateNotification() {
  // Create a toast/banner
  const notification = document.createElement('div');
  notification.className = 'update-notification';
  notification.innerHTML = `
    <p>A new version is available!</p>
    <button onclick="window.location.reload()">Refresh</button>
    <button onclick="this.parentElement.remove()">Later</button>
  `;
  document.body.appendChild(notification);
}

export function debugCacheStatus() {
  // Check what's in the browser cache
  if ('caches' in window) {
    caches.keys().then((names) => {
      console.log('Cache names:', names);

      names.forEach((name) => {
        caches.open(name).then((cache) => {
          cache.keys().then((requests) => {
            console.log(`Cache "${name}" contains:`, requests.map(r => r.url));
          });
        });
      });
    });
  }

  // Check resource timing for cache hits
  const resources = performance.getEntriesByType('resource') as PerformanceResourceTiming[];
  const cached = resources.filter((r) => r.transferSize === 0);

  console.log('Cached resources:', cached.map((r) => r.name));
  console.log('Downloaded resources:', resources.filter(r => r.transferSize > 0).map(r => ({
    name: r.name.split('/').pop(),
    size: r.transferSize,
  })));
}

// Run in console: debugCacheStatus()
if (typeof window !== 'undefined') {
  (window as any).debugCacheStatus = debugCacheStatus;
}