Modern Web APIs

import { useEffect, useRef, useState } from "react"

function useInView(threshold = 0.5) {
  const ref = useRef<HTMLDivElement>(null!)
  const [inView, setInView] = useState(false)

  useEffect(() => {
    const el = ref.current
    if (!el) return

    const observer = new IntersectionObserver(
      ([entry]) => setInView(entry.isIntersecting),
      { threshold }
    )

    observer.observe(el)
    return () => observer.disconnect()
  }, [threshold])

  return { ref, inView }
}

function LazyImage({ src, alt }: { src: string; alt: string }) {
  const { ref, inView } = useInView(0.1)
  const [loaded, setLoaded] = useState(false)

  return (
    <div ref={ref} style={{ minHeight: 300, background: "#eee" }}>
      {inView && (
        <img
          src={src}
          alt={alt}
          onLoad={() => setLoaded(true)}
          style={{ opacity: loaded ? 1 : 0, transition: "opacity 0.3s" }}
        />
      )}
    </div>
  )
}

function InfiniteScroll({ loadMore }: { loadMore: () => Promise<void> }) {
  const { ref, inView } = useInView(0.1)

  useEffect(() => {
    if (inView) loadMore()
  }, [inView, loadMore])

  return <div ref={ref}>Loading more...</div>
}
// loadMore fires whenever the sentinel enters viewport
// No scroll event, no throttle, no math

import { useEffect, useRef, useState } from "react"

function useElementSize() {
  const ref = useRef<HTMLDivElement>(null!)
  const [size, setSize] = useState({ width: 0, height: 0 })

  useEffect(() => {
    const observer = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect
      setSize({ width, height })
    })

    observer.observe(ref.current)
    return () => observer.disconnect()
  }, [])

  return { ref, ...size }
}

function ResponsiveContainer() {
  const { ref, width, height } = useElementSize()

  return (
    <div ref={ref} style={{ resize: "both", overflow: "auto" }}>
      <p>
        Container: {width.toFixed(0)} x {height.toFixed(0)}px
      </p>
    </div>
  )
}

function useMutationLogger(target: HTMLElement | null) {
  useEffect(() => {
    if (!target) return

    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === "childList") {
          console.log("Nodes added/removed:", mutation.addedNodes.length)
        }
        if (mutation.type === "attributes") {
          console.log("Attribute changed:", mutation.attributeName)
        }
      })
    })

    observer.observe(target, {
      childList: true,
      attributes: true,
      subtree: true,
    })

    return () => observer.disconnect()
  }, [target])
}

function useGeolocation() {
  const [position, setPosition] = useState<GeolocationPosition | null>(null)
  const [error, setError] = useState<string | null>(null)

  const requestLocation = useCallback(() => {
    if (!navigator.geolocation) {
      setError("Geolocation not supported")
      return
    }

    navigator.geolocation.getCurrentPosition(
      (pos) => setPosition(pos),
      (err) => setError(err.message),
      { enableHighAccuracy: true, timeout: 5000 }
    )
  }, [])

  return { position, error, requestLocation }
}

// worker.ts — runs in separate thread
self.onmessage = (event: MessageEvent<number[]>) => {
  const numbers = event.data
  // Heavy computation — doesn't block UI
  const sorted = numbers.sort((a, b) => a - b)
  self.postMessage(sorted)
}

// Component — communicates with worker
function useSortWorker() {
  const workerRef = useRef<Worker | null>(null)
  const [result, setResult] = useState<number[] | null>(null)

  useEffect(() => {
    workerRef.current = new Worker(new URL("./worker.ts", import.meta.url))
    workerRef.current.onmessage = (e) => setResult(e.data)
    return () => workerRef.current?.terminate()
  }, [])

  const sort = (numbers: number[]) => {
    workerRef.current?.postMessage(numbers)
  }

  return { result, sort }
}

// sw.ts — intercepts fetch, serves from cache
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll(["/", "/index.html", "/styles.css", "/app.js"])
      )
  )
})

self.addEventListener("activate", (event) => {
  // Clean old caches
  event.waitUntil(
    caches
      .keys()
      .then((keys) =>
        Promise.all(keys.filter((k) => k !== "v1").map((k) => caches.delete(k)))
      )
  )
})

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then(
      (cached) =>
        cached ??
        fetch(event.request).then((response) => {
          // Cache new requests
          const clone = response.clone()
          caches.open("v1").then((cache) => cache.put(event.request, clone))
          return response
        })
    )
  )
})