chore: upgrade to vite 8

.github/workflows/part-build.yml

@@ -148,6 +148,10 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24.x
+
       - run: npm ci
         working-directory: ${{ github.workspace }}
 

.vscode/settings.json

@@ -17,5 +17,6 @@
   "xml.format.maxLineWidth": 0,
   "chat.tools.terminal.autoApprove": {
     "npx vitest": true
-  }
+  },
+  "cSpell.words": ["rolldown"]
 }

package.json

@@ -9,8 +9,8 @@
   ],
   "devDependencies": {
     "@types/node": "^22.15.3",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.10",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.0",
     "@vitest/eslint-plugin": "^1.3.23",
     "@vue/eslint-config-typescript": "14.6.0",
     "@vue/test-utils": "~2.4.6",
@@ -23,8 +23,8 @@
     "sass": "^1.93.2",
     "typescript": "5.9.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^7.1.11",
-    "vitest": "^4.0.10",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0",
     "vue-tsc": "^3.1.0"
   }
 }

playground/Coalesce.Web.Vue3/package.json

@@ -11,7 +11,7 @@
     "dev": "vite",
     "lint:fix": "eslint src --fix",
     "test": "vitest",
-    "coalesce": "dotnet run --project ../../src/IntelliTect.Coalesce.DotnetTool --framework net8.0 -- ../../coalesce-vue3.json"
+    "coalesce": "dotnet run --project ../../src/IntelliTect.Coalesce.DotnetTool --framework net10.0 -- ../../coalesce-vue3.json"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
@@ -26,7 +26,6 @@
     "vue": "^3.5.4"
   },
   "devDependencies": {
-    "vite-plugin-inspect": "^11.3.3",
-    "vite-plugin-vuetify": "^2.1.2"
+    "vite-plugin-vuetify": "^2.1.3"
   }
 }

playground/Coalesce.Web.Vue3/tsconfig.json

@@ -4,7 +4,7 @@
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,

playground/Coalesce.Web.Vue3/vite.config.ts

@@ -15,7 +15,7 @@ const libRoot = path.resolve(__dirname, "../../src/") + "/";
 export default defineConfig({
   build: {
     outDir: "wwwroot",
-    rollupOptions: {
+    rolldownOptions: {
       output: {
         manualChunks(id) {
           // Chunk all styles together so that there aren't problems
@@ -34,7 +34,9 @@ export default defineConfig({
   },
 
   plugins: [
-    (await import("vite-plugin-inspect")).default(),
+    // vite-plugin-inspect is not compatible with Vite 8 yet
+    // See: https://github.com/antfu-collective/vite-plugin-inspect/issues/167
+    // (await import("vite-plugin-inspect")).default(),
 
     createVuePlugin({
       template: { transformAssetUrls },
@@ -88,22 +90,6 @@ export default defineConfig({
     },
   },
 
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: "modern",
-      },
-      sass: {
-        api: "modern",
-      },
-    },
-  },
-
-  esbuild: {
-    // vue-class-component uses the original names of classes as the component name.
-    keepNames: true,
-  },
-
   optimizeDeps: {
     include: ["vuetify"],
   },

src/coalesce-vue-vuetify3/package.json

@@ -6,8 +6,8 @@
   "author": "IntelliTect",
   "license": "Apache-2.0",
   "private": false,
-  "main": "./dist/coalesce-vue-vuetify.js",
-  "module": "./dist/coalesce-vue-vuetify.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "styles": "./dist/coalesce-vue-vuetify.css",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -18,7 +18,7 @@
     ".": {
       "style": "./dist/coalesce-vue-vuetify.css",
       "types": "./dist/index.d.ts",
-      "default": "./dist/coalesce-vue-vuetify3.js"
+      "default": "./dist/index.js"
     },
     "./build": {
       "types": "./dist/build.d.ts",
@@ -63,10 +63,8 @@
     "vue-router": "^4.4.1"
   },
   "devDependencies": {
-    "@types/node": "^20.14.11",
-    "@vitejs/plugin-vue-jsx": "^5.1.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "coalesce-vue": "../coalesce-vue",
-    "sass": "^1.69.7",
     "vue-router": "^4.4.1",
     "vuetify": "3.10.3"
   }

src/coalesce-vue-vuetify3/src/build.ts

@@ -2,19 +2,29 @@ import { existsSync, readFileSync } from "node:fs";
 
 /** Component name resolver for unplugin-vue-components that resolves coalesce-vue-vuetify3 components. */
 export function CoalesceVuetifyResolver() {
-  // Read the actual component names from the source code
+  // Read the actual component names and their file paths from the source code
   // so that we can never have a false match.
-  const componentExports = ["./components/index.d.ts", "./components/index.ts"]
+  const componentIndex = ["./components/index.d.ts", "./components/index.ts"]
     .map((f) => new URL(f, import.meta.url))
     .filter(existsSync)
     .map((f) => readFileSync(f, { encoding: "utf-8" }))[0];
 
-  const components = new Set(componentExports.match(/C[A-Z][A-Za-z]+/g));
+  // Build a map from component name to its direct subpath,
+  // e.g. "CSelect" -> "coalesce-vue-vuetify3/components/input/c-select.js"
+  const componentMap = new Map<string, string>();
+  const exportRegex =
+    /export\s*\{\s*default\s+as\s+(C[A-Z][A-Za-z]+)\s*\}\s*from\s*"\.\/(.+?)\.vue"/g;
+  let match: RegExpExecArray | null;
+  while ((match = exportRegex.exec(componentIndex)) !== null) {
+    const [, name, relPath] = match;
+    componentMap.set(name, `coalesce-vue-vuetify3/components/${relPath}.js`);
+  }
 
   return {
     type: "component",
     resolve: (name: string) => {
-      if (components.has(name)) return { name, from: "coalesce-vue-vuetify3" };
+      const from = componentMap.get(name);
+      if (from) return { name: "default", as: name, from };
     },
   } as const;
 }

src/coalesce-vue-vuetify3/vite.config.ts

@@ -1,4 +1,5 @@
 import path from "path";
+import fs from "fs";
 import { defineConfig } from "vite";
 
 import vue from "@vitejs/plugin-vue";
@@ -9,23 +10,41 @@ import { Vuetify3Resolver } from "unplugin-vue-components/resolvers";
 
 import pkg from "./package.json" with { type: "json" };
 
+const entries: Record<string, string> = {
+  index: path.resolve(__dirname, "src/index.ts"),
+};
+for (const file of fs.globSync("src/**/*.{ts,vue}", {
+  exclude: (name) => /\.spec\.|\.d\.ts$|env\.d\.ts$|build\.ts$/.test(name),
+})) {
+  // e.g. "src/components/admin/c-admin-table.vue" -> "components/admin/c-admin-table"
+  const key = file
+    .replaceAll("\\", "/")
+    .replace(/^src\//, "")
+    .replace(/\.(ts|vue)$/, "");
+  if (key !== "index") {
+    entries[key] = path.resolve(__dirname, file);
+  }
+}
+
 export default defineConfig({
   build: {
     minify: false,
     sourcemap: true,
     lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
+      entry: entries,
       formats: ["es"],
     },
     outDir: "dist",
-    rollupOptions: {
+    rolldownOptions: {
+      preserveEntrySignatures: 'allow-extension',
       external: [
         ...Object.keys(pkg.dependencies),
         ...Object.keys(pkg.peerDependencies),
         ...Object.keys(pkg.optionalDependencies),
       ].map((pkg) => new RegExp("^" + pkg)),
       output: {
         assetFileNames: `coalesce-vue-vuetify.[ext]`,
+        entryFileNames: "[name].js",
       },
     },
   },

src/coalesce-vue/src/build.ts

@@ -3,6 +3,7 @@ import MagicString from "magic-string";
 
 import * as path from "node:path";
 import * as fs from "node:fs";
+import * as process from "node:process";
 import { readFile, writeFile } from "node:fs/promises";
 import { spawn, exec } from "node:child_process";
 import { TLSSocket } from "node:tls";

src/coalesce-vue/tsconfig.json

@@ -12,7 +12,7 @@
     "stripInternal": true,
 
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "target": "ES2022",
     "declaration": true,
     "lib": ["es2015", "es2017", "dom", "ES2021.WeakRef"],