chore(deps): Migrate to Vite+ (#67)

Author: rijkvanzanten

.github/workflows/conventional.yml

@@ -12,4 +12,4 @@ jobs:
         uses: ytanikin/pr-conventional-commits@1.4.0
         with:
           add_label: false
-          task_types: '["feat","fix","docs","test","ci","refactor","perf","chore","revert"]'
+          task_types: '["feat","fix","docs","test","ci","refactor","perf","chore","revert"]'

.github/workflows/release.yml

@@ -6,7 +6,7 @@ permissions:
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:

.github/workflows/unit-test.yml

@@ -15,26 +15,33 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4.1.0
-        with:
-          version: 10
 
       - name: Set node LTS
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: pnpm
 
-      - name: Install
-        run: pnpm install
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm -F '!docs' run build
 
       - name: Lint
         run: pnpm -F '!docs' run lint
 
-      - name: Typecheck
-        run: pnpm -F '!docs' run typecheck
-
       - name: Test
         run: pnpm -F '!docs' run test

.vscode/settings.json

@@ -38,4 +38,4 @@
 		"css",
 		"scss"
 	]
-}
+}

CLAUDE.md

@@ -0,0 +1,54 @@
+<!--VITE PLUS START-->
+
+# Using Vite+, the Unified Toolchain for the Web
+
+This project is using Vite+, a modern toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, and Oxfmt. Vite+ wraps these tools and package manager commands in a single, global CLI called `vite`. Vite+ is distinct from Vite, but it invokes Vite through `vite dev` and `vite build`.
+
+## Vite+ Workflow
+
+`vite` is a global binary that handles the full development lifecycle. Run `vite help` to print a list of commands and `vite <command> --help` for information about a specific command.
+
+### Vite+ Commands
+
+- dev - Run the development server
+- build - Build for production
+- lint - Lint code
+- test - Run tests
+- fmt - Format code
+- lib - Build library
+- migrate - Migrate an existing project to Vite+
+- new - Create a new monorepo package (in-project) or a new project (global)
+- run - Run tasks from `package.json` scripts
+
+These commands map to their corresponding tools. For example, `vite dev --port 3000` runs Vite's dev server and works the same as Vite. `vite test` runs JavaScript tests through the bundled Vitest. The version of all tools can be checked using `vite --version`. This is useful when researching documentation, features, and bugs.
+
+### Package Manager Commands
+
+Vite+ automatically detects and wraps the underlying package manager such as pnpm, npm, or Yarn through the `packageManager` field in `package.json` or package manager-specific lockfiles.
+
+- install - Install all dependencies, or add packages if package names are provided
+- add - Add packages to dependencies
+- remove - Remove packages from dependencies
+- dlx - Execute a package binary without installing it as a dependency
+- info - View package information from the registry, including latest versions
+- link - Link packages for local development
+- outdated - Check for outdated packages
+- pm - Forward a command to the package manager
+- unlink - Unlink packages
+- update - Update packages to their latest versions
+- why - Show why a package is installed
+
+## Common Pitfalls
+
+- **Using the package manager directly:** Do not use pnpm, npm, or Yarn directly. Vite+ can handle all package manager operations.
+- **Always use Vite commands to run tools:** Don't attempt to run `vite vitest` or `vite oxlint`. They do not exist. Use `vite test` and `vite lint` instead.
+- **Running scripts:** Vite+ commands take precedence over `package.json` scripts. If there is a `test` script defined in `scripts` that conflicts with the built-in `vite test` command, run it using `vite run test`.
+- **Do not install Vitest, Oxlint, Oxfmt, or tsdown directly:** Vite+ wraps these tools. They must not be installed directly. You cannot upgrade these tools by installing their latest versions. Always use Vite+ commands.
+- **Import JavaScript modules from `vite-plus`:** Instead of importing from `vite` or `vitest`, all modules should be imported from the project's `vite-plus` dependency. For example, `import { defineConfig } from 'vite-plus';` or `import { expect, test, vi } from 'vite-plus/test';`. You must not install `vitest` to import test utilities.
+- **Type-Aware Linting:** There is no need to install `oxlint-tsgolint`, `vite lint --type-aware` works out of the box.
+
+## Review Checklist for Agents
+
+- [ ] Run `vite install` after pulling remote changes and before getting started.
+- [ ] Run `vite lint`, `vite fmt`, and `vite test` to validate changes.
+<!--VITE PLUS END-->

docs/app.config.ts

@@ -1,5 +1,5 @@
 export default defineAppConfig({
 	header: {
-		title: 'Vue Split Panel',
+		title: "Vue Split Panel",
 	},
 });

docs/components/example/ExampleBasic.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import { SplitPanel } from '@directus/vue-split-panel';
+import { SplitPanel } from "@directus/vue-split-panel";
 </script>
 
 <template>
 	<SplitPanel class="w-full">
 		<template #start>
-			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>
+			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
+				Panel A
+			</div>
 		</template>
-		
+
 		<template #end>
 			<div class="h-16 bg-blue-100 dark:bg-blue-900 flex items-center justify-center">Panel B</div>
 		</template>

docs/components/example/ExampleCollapsible.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { SplitPanel } from '@directus/vue-split-panel';
+import { SplitPanel } from "@directus/vue-split-panel";
 </script>
 
 <template>
@@ -13,7 +13,9 @@ import { SplitPanel } from '@directus/vue-split-panel';
 		:collapse-threshold="50"
 	>
 		<template #start>
-			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>
+			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
+				Panel A
+			</div>
 		</template>
 
 		<template #end>

docs/components/example/ExampleDivider.vue

@@ -1,18 +1,13 @@
 <script lang="ts" setup>
-import { SplitPanel } from '@directus/vue-split-panel';
+import { SplitPanel } from "@directus/vue-split-panel";
 </script>
 
 <template>
-	<SplitPanel
-		class="w-full"
-		collapsible
-		size-unit="px"
-		:min-size="200"
-		:size="350"
-		:max-size="500"
-	>
+	<SplitPanel class="w-full" collapsible size-unit="px" :min-size="200" :size="350" :max-size="500">
 		<template #start>
-			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>
+			<div class="h-16 bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
+				Panel A
+			</div>
 		</template>
 
 		<template #divider>

docs/components/example/ExampleNested.vue

@@ -1,21 +1,29 @@
 <script lang="ts" setup>
-import { SplitPanel } from '@directus/vue-split-panel';
+import { SplitPanel } from "@directus/vue-split-panel";
 </script>
 
 <template>
 	<SplitPanel primary="start" class="h-128 w-full">
 		<template #start>
-			<div class="w-full h-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center">Panel A</div>
+			<div class="w-full h-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
+				Panel A
+			</div>
 		</template>
-		
+
 		<template #end>
 			<SplitPanel orientation="vertical" class="h-full">
 				<template #start>
-					<div class="w-full h-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">Panel B</div>
+					<div class="w-full h-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+						Panel B
+					</div>
 				</template>
-				
+
 				<template #end>
-					<div class="w-full h-full bg-green-100 dark:bg-green-900 flex items-center justify-center">Panel C</div>
+					<div
+						class="w-full h-full bg-green-100 dark:bg-green-900 flex items-center justify-center"
+					>
+						Panel C
+					</div>
 				</template>
 			</SplitPanel>
 		</template>