vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import UnocssVitePlugin from 'unocss/vite'
import Components from 'unplugin-vue-components/vite'
import Vue from 'unplugin-vue/rolldown'
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import Layouts from 'vite-plugin-vue-layouts-next'
import generateSitemap from 'vite-ssg-sitemap'
import VueRouter from 'vue-router/vite'

// Types
import type { ViteSSGOptions } from 'vite-ssg'

import { getApiSlugs } from './build/api-names'
import copyMarkdownPlugin from './build/copy-markdown'
import generateApiPlugin from './build/generate-api'
import generateApiWhitelistPlugin from './build/generate-api-whitelist'
import generateExamplesPlugin from './build/generate-examples'
import generateLlmsFullPlugin from './build/generate-llms-full'
import generateNavPlugin from './build/generate-nav'
import { generateOgImages } from './build/generate-og-images'
import generatePageDatesPlugin from './build/generate-page-dates'
import generateSearchIndexPlugin from './build/generate-search-index'
import Markdown from './build/markdown'
import { getSkillzSlugs } from './build/skillz-tours'
import pkg from './package.json' with { type: 'json' }

export default defineConfig({
  optimizeDeps: {
    exclude: ['@vue/repl', 'monaco-editor'],
  },
  ssr: {
    noExternal: ['@vue/repl'],
  },
  build: {
    sourcemap: true,
  },
  css: {
    transformer: 'postcss', // Use postcss instead of lightningcss to preserve color-mix syntax
  },
  ssgOptions: {
    // Disable beasties critical CSS extraction. Beasties inconsistently inlines
    // UnoCSS utilities (some classes get inlined, others don't) causing layout
    // shift when the external CSS loads. With this disabled, CSS loads as a
    // blocking resource - all styles available before first paint, zero CLS.
    beastiesOptions: false,
    dirStyle: 'nested',
    async includedRoutes (paths) {
      const [apiSlugs, skillzSlugs] = await Promise.all([
        getApiSlugs(),
        getSkillzSlugs(),
      ])
      const apiRoutes = apiSlugs.map(slug => `/api/${slug}`)
      const skillzRoutes = skillzSlugs.map(slug => `/skillz/${slug}`)
      return [...paths, ...apiRoutes, ...skillzRoutes]
    },
    async onFinished () {
      generateSitemap({
        hostname: 'https://0.vuetifyjs.com',
        generateRobotsTxt: false,
        changefreq: 'daily',
        priority: 0.7,
      })
      await generateOgImages()
    },
  } as ViteSSGOptions,
  plugins: [
    generateApiWhitelistPlugin(),
    VueRouter({
      dts: './src/typed-router.d.ts',
      extensions: ['.vue', '.md'],
    }),
    Vue({
      include: [/\.vue$/, /\.md$/],
    }),
    await Markdown(),
    Components({
      dirs: ['src/components'],
      extensions: ['vue'],
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: './src/components.d.ts',
    }),
    UnocssVitePlugin(),
    Layouts(),
    copyMarkdownPlugin(),
    generateApiPlugin(),
    generateExamplesPlugin(),
    generateLlmsFullPlugin(),
    generateSearchIndexPlugin(),
    generateNavPlugin(),
    generatePageDatesPlugin(),
    VitePWA({
      injectRegister: 'script-defer',
      registerType: 'autoUpdate',
      manifest: {
        name: 'Vuetify0',
        short_name: 'v0',
        description: 'Headless UI primitives and composables for Vue',
        theme_color: '#1867C0',
        background_color: '#121212',
        display: 'standalone',
        icons: [
          { src: '/pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: '/pwa-512x512.png', sizes: '512x512', type: 'image/png' },
          { src: '/pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
        ],
      },
      workbox: {
        globPatterns: ['**/*.{js,css,ico,png,svg,woff2}'],
        // Exclude mermaid diagram chunks from precache (loaded on demand)
        // Exclude large on-demand chunks from precache
        // - Mermaid/Cytoscape: diagram tools, loaded only when docs use them
        // - vue.worker/playground/jsx: Monaco editor assets, only needed in the playground
        globIgnores: ['**/*Diagram-*.js', '**/mermaid*.js', '**/cytoscape*.js', '**/vue.worker*.js', '**/playground-*.js', '**/jsx-*.js', '**/monaco-editor-*.js'],
        navigateFallback: null,
      },
    }),
  ],
  define: {
    'process.env': {},
    '__DEV__': process.env.NODE_ENV !== 'production',
    '__VERSION__': JSON.stringify(pkg.version),
    '__VITE_LOGGER_ENABLED__': process.env.VITE_LOGGER_ENABLED,
    '__VUE_OPTIONS_API__': 'true',
    '__VUE_PROD_DEVTOOLS__': 'false',
    '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false',
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('src', import.meta.url)),
      '@build': fileURLToPath(new URL('build', import.meta.url)),
      '@vuetify/v0': fileURLToPath(new URL('../../packages/0/src', import.meta.url)),
      '@vuetify/paper': fileURLToPath(new URL('../../packages/paper/src', import.meta.url)),
      // internal
      '#v0': fileURLToPath(new URL('../../packages/0/src', import.meta.url)),
      '#paper': fileURLToPath(new URL('../../packages/paper/src', import.meta.url)),
    },
  },
  server: {
    fs: {
      allow: ['../../packages/*', '../../node_modules', '.'],
    },
  },
})