vite.config.ts

import { sentryVitePlugin } from "@sentry/vite-plugin"
/// <reference types="vitest" />
import react from "@vitejs/plugin-react"
import path, { resolve } from "path"
import { defineConfig } from "vite"
import addHmr from "./utils/plugins/add-hmr"
import customDynamicImport from "./utils/plugins/custom-dynamic-import"
import makeManifest from "./utils/plugins/make-manifest"
import watchRebuild from "./utils/plugins/watch-rebuild"

const rootDir = resolve(__dirname)
const srcDir = resolve(rootDir, "src")
const pagesDir = resolve(srcDir, "pages")
const assetsDir = resolve(srcDir, "assets")
const outDir = resolve(rootDir, "dist")
const publicDir = resolve(rootDir, "public")

const isDev = process.env.__DEV__ === "true"
const isProduction = !isDev

// ENABLE HMR IN BACKGROUND SCRIPT
const enableHmrInBackgroundScript = true
const cacheInvalidationKeyRef = { current: generateKey() }

export default defineConfig({
  resolve: {
    alias: {
      "@root": rootDir,
      "@src": srcDir,
      "@assets": assetsDir,
      "@pages": pagesDir,
    },
  },
  plugins: [
    makeManifest({
      getCacheInvalidationKey,
    }),
    react(),
    customDynamicImport(),
    addHmr({ background: enableHmrInBackgroundScript, view: true }),
    isDev && watchRebuild({ afterWriteBundle: regenerateCacheInvalidationKey }),
    isProduction &&
      sentryVitePlugin({
        org: "shanxiao",
        project: "canger-extension",
      }),
  ],
  publicDir,
  build: {
    outDir,

    /** Can slow down build speed. */
    // sourcemap: isDev,
    minify: isProduction,

    modulePreload: false,
    reportCompressedSize: isProduction,
    emptyOutDir: !isDev,

    rollupOptions: {
      input: {
        panel: resolve(pagesDir, "panel", "index.html"),
        content: resolve(pagesDir, "content", "index.ts"),
        background: resolve(pagesDir, "background", "index.ts"),
        contentStyle: resolve(pagesDir, "content", "style.scss"),
        popup: resolve(pagesDir, "popup", "index.html"),
        newtab: resolve(pagesDir, "newtab", "index.html"),
        options: resolve(pagesDir, "options", "index.html"),
      },
      output: {
        entryFileNames: "src/pages/[name]/index.js",
        chunkFileNames: isDev ? "assets/js/[name].js" : "assets/js/[name].[hash].js",
        assetFileNames: assetInfo => {
          const { name } = path.parse(assetInfo.name)
          const assetFileName = name === "contentStyle" ? `${name}${getCacheInvalidationKey()}` : name
          return `assets/[ext]/${assetFileName}.chunk.[ext]`
        },
      },
      onwarn(warning, warn) {
        if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes(`"use client"`)) {
          return
        }
        warn(warning)
      },
    },

    sourcemap: true,
  },
  test: {
    globals: true,
    environment: "jsdom",
    include: ["**/*.test.ts", "**/*.test.tsx"],
    setupFiles: "./test-utils/vitest.setup.js",
  },
})

function getCacheInvalidationKey() {
  return cacheInvalidationKeyRef.current
}
function regenerateCacheInvalidationKey() {
  cacheInvalidationKeyRef.current = generateKey()
  return cacheInvalidationKeyRef
}

function generateKey(): string {
  return `${Date.now().toFixed()}`
}