Progressive Enhancement

// Only runs if JavaScript is available
const form = document.querySelector('form');
const emailInput = form.querySelector('#email');
const emailError = document.querySelector('#email-error');

// Real-time validation
emailInput.addEventListener('blur', () => {
  if (!emailInput.value.includes('@')) {
    emailError.textContent = 'Please enter a valid email';
    emailInput.setAttribute('aria-invalid', 'true');
  } else {
    emailError.textContent = '';
    emailInput.setAttribute('aria-invalid', 'false');
  }
});

// AJAX submission
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(form);
  const button = form.querySelector('button');

  button.textContent = 'Sending...';
  button.disabled = true;

  try {
    const response = await fetch('/contact', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      form.innerHTML = '<p role="status">✓ Message sent!</p>';
    } else {
      throw new Error('Submission failed');
    }
  } catch (error) {
    // Fallback to normal form submission
    button.textContent = 'Send Message';
    button.disabled = false;
    form.submit();
  }
});

// Enhance with client-side routing (Next.js example)
import Link from 'next/link';

export function Navigation() {
  return (
    <nav aria-label="Main navigation">
      <ul>
        <li><Link href="/">Home</Link></li>
        <li><Link href="/products">Products</Link></li>
        <li><Link href="/about">About</Link></li>
        <li><Link href="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

// Next.js Link components:
// - Render as <a> tags (work without JS)
// - Add client-side routing (faster with JS)
// - Prefetch pages on hover
// - Progressive enhancement built-in!

// Add infinite scroll for modern browsers
const productsContainer = document.querySelector('#products');
const nextLink = document.querySelector('a[href*="page=2"]');

if (nextLink && 'IntersectionObserver' in window) {
  // Hide the next page link (we'll load automatically)
  nextLink.style.display = 'none';

  const observer = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting) {
      const response = await fetch(nextLink.href);
      const html = await response.text();
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      const newProducts = doc.querySelector('#products').children;

      Array.from(newProducts).forEach(product => {
        productsContainer.appendChild(product);
      });

      // Update next link
      const newNextLink = doc.querySelector('a[href*="page="]');
      if (newNextLink) {
        nextLink.href = newNextLink.href;
      } else {
        observer.disconnect();
      }
    }
  });

  // Observe the last product
  observer.observe(productsContainer.lastElementChild);
}

// Add proper ARIA for screen readers
const nav = document.querySelector('nav');
const heading = nav.querySelector('h2');
const menu = document.querySelector('#products-menu');

// Convert heading to button
const button = document.createElement('button');
button.textContent = heading.textContent;
button.setAttribute('aria-expanded', 'false');
button.setAttribute('aria-controls', 'products-menu');
heading.replaceWith(button);

// Add menu role
menu.setAttribute('role', 'menu');
menu.hidden = true;

// Toggle on click
button.addEventListener('click', () => {
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !isExpanded);
  menu.hidden = isExpanded;
});

// app/subscribe/page.tsx
export default function SubscribePage() {
  async function subscribe(formData: FormData) {
    'use server'; // Server Action

    const email = formData.get('email');
    // Process subscription server-side
    await saveSubscription(email);
    redirect('/success');
  }

  return (
    <form action={subscribe}>
      <input type="email" name="email" required />
      <button type="submit">Subscribe</button>
    </form>
  );
}

// This form:
// ✓ Works without JavaScript (server action)
// ✓ Gets enhanced with JS (no page reload)
// ✓ Perfect Progressive Enhancement!

// app/routes/subscribe.tsx
import { Form } from "@remix-run/react";

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const email = formData.get('email');

  await saveSubscription(email);
  return redirect('/success');
}

export default function Subscribe() {
  return (
    <Form method="post">
      <input type="email" name="email" required />
      <button type="submit">Subscribe</button>
    </Form>
  );
}

// Remix Form component:
// ✓ Regular form submission without JS
// ✓ AJAX submission with JS
// ✓ Built for Progressive Enhancement

<!-- src/routes/subscribe/+page.svelte -->
<script>
  import { enhance } from '$app/forms';
</script>

<form method="POST" use:enhance>
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

<!-- +page.server.ts -->
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');

    await saveSubscription(email);
    return { success: true };
  }
};

// use:enhance provides:
// ✓ Server-side form handling (no JS needed)
// ✓ Client-side enhancement (with JS)
// ✓ Progressive Enhancement pattern