xdev/vite.config.ts at main · DevResults/xdev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { NodeGlobalsPolyfillPlugin as nodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill"
import { reactRouter } from "@react-router/dev/vite"
import { type Options as AutoImportOptions } from "unplugin-auto-import/types"
import autoImport from "unplugin-auto-import/vite"
import iconsResolver from "unplugin-icons/resolver"
import icons from "unplugin-icons/vite"
import { type Plugin } from "vite"
import { VitePWA as vitePWA, type VitePWAOptions } from "vite-plugin-pwa"
import wasm from "vite-plugin-wasm"
import tsconfigPaths from "vite-tsconfig-paths"
import { defineConfig } from "vitest/config"

const pwaOptions: Partial<VitePWAOptions> = {
  includeAssets: ["favicon.ico"],
  srcDir: "app",
  filename: "sw.ts",
  registerType: "autoUpdate",
  strategies: "injectManifest",
  injectManifest: { globPatterns: ["**/*.{js,css,html,ico,wasm}"] },
  manifest: {
    name: "XDev",
    short_name: "XDev",
    description: "DevResults local-first team app",
    theme_color: "#ffffff",
    background_color: "#FFFFFF",
    display: "standalone",
    icons: [
      { src: "icon-128x128.png", sizes: "128x128", type: "image/png", purpose: "any maskable" },
      { src: "icon-192x192.png", sizes: "192x192", type: "image/png", purpose: "any maskable" },
      { src: "icon-256x256.png", sizes: "256x256", type: "image/png", purpose: "any maskable" },
      { src: "icon-512x512.png", sizes: "512x512", type: "image/png", purpose: "any maskable" },
    ],
  },
}

// auto-import setup for icons
const autoImportOptions: AutoImportOptions = {
  dts: false,
  resolvers: [
    iconsResolver({
      prefix: false,
      extension: "jsx",
      enabledCollections: ["tabler"],
      alias: { icon: "tabler" },
    }),
  ],
}

// Don't load remix plugin when vite is being used by storybook
// https://github.com/remix-run/remix/issues/7953#issuecomment-1805649822
const isStorybook = process.argv[1].includes("storybook")

export default defineConfig({
  plugins: [
    !isStorybook && reactRouter(),
    tsconfigPaths(),
    wasm() as Plugin,
    vitePWA(pwaOptions),
    autoImport(autoImportOptions) as Plugin,
    icons({ compiler: "jsx", jsx: "react" }),
  ],
  worker: { format: "es", plugins: () => [wasm() as Plugin] },
  optimizeDeps: {
    // use route files as entry points when crawling for dependencies
    entries: ["**/routes/**/*.tsx"],
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: { global: "globalThis" },
      // Enable esbuild polyfill plugins
      plugins: [nodeGlobalsPolyfillPlugin({ buffer: true })],
    },
  },
  build: { target: "esnext" },
  test: { include: ["app/**/*.test.ts"] },
})