vite.config.ts

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import type { Plugin } from 'vite'

/**
 * A deliberately slow upload endpoint, run inside the dev server.
 *
 * A progress bar is not much of a demo against localhost, where a 10MB file
 * lands instantly. This reads the request body in small sips, and TCP
 * backpressure paces the browser's upload to match — so the bar moves at a
 * speed you can actually watch. It also means the example needs no second
 * process and no dependencies.
 *
 * `/api/upload-fail` demos the error and retry states, and `?ms=` overrides how
 * long the upload should take.
 */
function mockUploadServer(): Plugin {
  /** Roughly how long any upload should take, whatever the file size. */
  const TARGET_UPLOAD_MS = 6000

  return {
    name: 'mock-upload-server',
    configureServer(server) {
      // Mounted at /api rather than /api/upload: connect only treats a mount
      // path as matching when the next character is '/' or '?', so an exact
      // '/api/upload' mount would never see '/api/upload-fail' at all.
      server.middlewares.use('/api', (req, res, next) => {
        const url = new URL(req.url ?? '/', 'http://localhost')
        if (!url.pathname.startsWith('/upload')) {
          next()
          return
        }
        if (req.method !== 'POST' && req.method !== 'PUT') {
          res.statusCode = 405
          res.end()
          return
        }

        const shouldFail = url.pathname.includes('fail')
        const targetMs = Math.min(
          60000,
          Math.max(500, Number(url.searchParams.get('ms')) || TARGET_UPLOAD_MS)
        )
        const declared = Number(req.headers['content-length'] ?? 0)
        let received = 0

        req.on('data', (chunk: Buffer) => {
          received += chunk.length

          // Pace by the declared size so a 2MB file and a 60MB file both take
          // about the same few seconds. A fixed per-chunk delay would make small
          // files finish instantly and large ones take minutes — neither of
          // which shows a progress bar off well.
          const chunks = declared > 0 ? Math.max(1, declared / chunk.length) : 100
          const perChunk = Math.min(250, Math.max(6, targetMs / chunks))

          req.pause()
          setTimeout(() => req.resume(), perChunk)
        })

        req.on('end', () => {
          if (shouldFail) {
            res.statusCode = 500
            res.setHeader('Content-Type', 'application/json')
            res.end(JSON.stringify({ error: 'Storage backend unavailable' }))
            return
          }
          res.statusCode = 200
          res.setHeader('Content-Type', 'application/json')
          res.end(JSON.stringify({ ok: true, bytes: received }))
        })
      })
    }
  }
}

export default defineConfig({
  plugins: [react(), mockUploadServer()],
  // relative asset paths, so `npm run deploy` works from a gh-pages subpath
  base: './',
  resolve: {
    // The library is linked via `file:..` and lists react as a peer dependency.
    // Without deduping, Vite can pull a second React through the link and hooks
    // blow up at runtime.
    dedupe: ['react', 'react-dom']
  },
  optimizeDeps: {
    // Always read the freshly built dist/ rather than a prebundled copy.
    exclude: ['react-file-progress']
  }
})