chore: migrate Dexa to SvelteKit 3

.gitignore

@@ -27,3 +27,4 @@ vite.config.ts.timestamp-*
 
 # PokéAPI response cache for scripts/sync-pokedex.ts
 /.cache
+.vitest/

README.md

@@ -2,11 +2,12 @@
 
 The last Pokédex you will ever need.
 
-Built with SvelteKit, Tailwind CSS, shadcn-svelte, and data from [PokéAPI](https://pokeapi.co). Deployed on Vercel.
+Built with SvelteKit 3, Tailwind CSS, shadcn-svelte, and data from [PokéAPI](https://pokeapi.co). Deployed on Vercel.
 
 ## Getting started
 
 This project uses [Vite+](https://viteplus.dev) (`vp`) with bun as the package manager.
+Node.js 22.17 or newer is required; CI and Vercel use Node.js 24.
 
 ```sh
 vp install
@@ -16,6 +17,7 @@ vp dev
 ## Database
 
 Accounts, collections and saved teams are stored in [Neon](https://neon.tech) Postgres through Drizzle ORM. Everything else works without a database.
+Server environment variables are declared in `src/env.ts` and read at runtime through `$app/env/private`. They remain optional so the public Pokédex can run without account credentials.
 
 1. Create a Neon project and copy its pooled connection string.
 2. `cp .env.example .env` and set `DATABASE_URL`.

components.json

@@ -5,11 +5,11 @@
     "baseColor": "slate"
   },
   "aliases": {
-    "components": "$lib/components",
-    "utils": "$lib/utils",
-    "ui": "$lib/components/ui",
-    "hooks": "$lib/hooks",
-    "lib": "$lib"
+    "components": "#lib/components",
+    "utils": "#lib/utils",
+    "ui": "#lib/components/ui",
+    "hooks": "#lib/hooks",
+    "lib": "#lib"
   },
   "typescript": true,
   "registry": "https://shadcn-svelte.com/registry"

package.json

@@ -3,6 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "type": "module",
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
+  },
   "scripts": {
     "dev": "vp dev",
     "build": "vp build",
@@ -26,28 +30,28 @@
     "@fontsource-variable/archivo": "^5.3.0",
     "@internationalized/date": "^3.12.4",
     "@lucide/svelte": "^1.48.0",
-    "@sveltejs/adapter-vercel": "^6.3.4",
-    "@sveltejs/kit": "^2.63.0",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@sveltejs/adapter-vercel": "^7.0.0",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.6.2",
     "bits-ui": "^2.19.3",
     "cn": "^0.4.0",
     "drizzle-kit": "^0.31.11",
     "mode-watcher": "^1.1.0",
     "shadcn-svelte": "^1.7.0",
-    "svelte": "^5.56.1",
-    "svelte-check": "^4.6.0",
+    "svelte": "^5.57.1",
+    "svelte-check": "^4.7.6",
     "svelte-sonner": "^1.2.1",
     "tailwind-variants": "^3.3.1",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
-    "vite-plus": "0.3.1"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
+    "vite-plus": "1.0.0"
   },
   "overrides": {
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1"
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0"
   },
   "devEngines": {
     "packageManager": {

scripts/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["node"]
+    "types": ["node", "$app/types"]
   },
-  "include": ["./**/*.ts", "../src/lib/**/*.ts", "../.svelte-kit/ambient.d.ts"]
+  "include": ["./**/*.ts", "../src/lib/**/*.ts", "../src/app.d.ts"]
 }

src/app.d.ts

@@ -1,6 +1,6 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
-import type { Auth } from "$lib/server/auth.js";
+import type { Auth } from "#lib/server/auth.js";
 
 type SessionResult = NonNullable<Awaited<ReturnType<Auth["api"]["getSession"]>>>;
 

src/env.ts

@@ -0,0 +1,9 @@
+import { defineEnvVars } from "@sveltejs/kit/env";
+
+export const variables = defineEnvVars({
+  DATABASE_URL: { schema: (input) => input },
+  BETTER_AUTH_SECRET: { schema: (input) => input },
+  BETTER_AUTH_URL: { schema: (input) => input },
+  GITHUB_CLIENT_ID: { schema: (input) => input },
+  GITHUB_CLIENT_SECRET: { schema: (input) => input },
+});

src/hooks.server.ts

@@ -1,7 +1,7 @@
-import type { Handle } from "@sveltejs/kit";
+import type { Handle } from "@sveltejs/kit/hooks";
 import { svelteKitHandler } from "better-auth/svelte-kit";
-import { building } from "$app/environment";
-import { getAuth, isAuthConfigured } from "$lib/server/auth.js";
+import { building } from "$app/env";
+import { getAuth, isAuthConfigured } from "#lib/server/auth.js";
 
 export const handle: Handle = async ({ event, resolve }) => {
   event.locals.user = null;

src/lib/components/atlas/atlas-chart.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import PokemonPeek from "$lib/components/pokemon/pokemon-peek.svelte";
-	import { AXIS_LABELS, axisValue, isLog, makeScale, type Axis } from "$lib/dex/atlas.js";
-	import type { DexListEntry } from "$lib/dex/list.js";
-	import { STAT_KEYS } from "$lib/pokemon/types.js";
+	import PokemonPeek from "#lib/components/pokemon/pokemon-peek.svelte";
+	import { AXIS_LABELS, axisValue, isLog, makeScale, type Axis } from "#lib/dex/atlas.js";
+	import type { DexListEntry } from "#lib/dex/list.js";
+	import { STAT_KEYS } from "#lib/pokemon/types.js";
 
 	let {
 		entries,

src/lib/components/compare/stat-comparison.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { MAX_BASE_STAT } from "$lib/pokemon/stats.js";
-	import { STAT_KEYS, STAT_LABELS, type BaseStats } from "$lib/pokemon/types.js";
+	import { MAX_BASE_STAT } from "#lib/pokemon/stats.js";
+	import { STAT_KEYS, STAT_LABELS, type BaseStats } from "#lib/pokemon/types.js";
 
 	let { series }: { series: { name: string; stats: BaseStats; color: string }[] } = $props();
 

src/lib/components/daily/guess-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Input } from "$lib/components/ui/input/index.js";
-	import { DEFAULT_QUERY, queryDex, type DexListEntry } from "$lib/dex/list.js";
-	import { cn } from "$lib/utils.js";
+	import { Input } from "#lib/components/ui/input/index.js";
+	import { DEFAULT_QUERY, queryDex, type DexListEntry } from "#lib/dex/list.js";
+	import { cn } from "#lib/utils.js";
 
 	let {
 		pool,

src/lib/components/dex/dex-table.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
 	import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
-	import PokemonArt from "$lib/components/pokemon/pokemon-art.svelte";
-	import StatShape from "$lib/components/pokemon/stat-shape.svelte";
-	import TypeBadge from "$lib/components/pokemon/type-badge.svelte";
-	import { statTotal, type DexListEntry, type DexQuery, type SortKey } from "$lib/dex/list.js";
-	import { dexNumber } from "$lib/pokemon/format.js";
-	import { STAT_KEYS, STAT_LABELS, type StatKey } from "$lib/pokemon/types.js";
-	import { cn } from "$lib/utils.js";
+	import PokemonArt from "#lib/components/pokemon/pokemon-art.svelte";
+	import StatShape from "#lib/components/pokemon/stat-shape.svelte";
+	import TypeBadge from "#lib/components/pokemon/type-badge.svelte";
+	import { statTotal, type DexListEntry, type DexQuery, type SortKey } from "#lib/dex/list.js";
+	import { dexNumber } from "#lib/pokemon/format.js";
+	import { STAT_KEYS, STAT_LABELS, type StatKey } from "#lib/pokemon/types.js";
+	import { cn } from "#lib/utils.js";
 
 	let {
 		entries,

src/lib/components/dex/dex-tile.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import PokemonArt from "$lib/components/pokemon/pokemon-art.svelte";
-	import StatShape from "$lib/components/pokemon/stat-shape.svelte";
-	import TypeBadge from "$lib/components/pokemon/type-badge.svelte";
-	import type { DexListEntry } from "$lib/dex/list.js";
-	import { dexNumber } from "$lib/pokemon/format.js";
+	import PokemonArt from "#lib/components/pokemon/pokemon-art.svelte";
+	import StatShape from "#lib/components/pokemon/stat-shape.svelte";
+	import TypeBadge from "#lib/components/pokemon/type-badge.svelte";
+	import type { DexListEntry } from "#lib/dex/list.js";
+	import { dexNumber } from "#lib/pokemon/format.js";
 
 	let {
 		entry,

src/lib/components/dex/dex-wall.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
-	import PokemonPeek from "$lib/components/pokemon/pokemon-peek.svelte";
-	import type { DexListEntry } from "$lib/dex/list.js";
-	import { heatBand, type WallColor } from "$lib/dex/wall.js";
-	import { dexNumber, titleCase } from "$lib/pokemon/format.js";
-	import { GENERATIONS } from "$lib/pokemon/generations.js";
-	import type { TypeName } from "$lib/pokemon/types.js";
-	import { cn } from "$lib/utils.js";
+	import PokemonPeek from "#lib/components/pokemon/pokemon-peek.svelte";
+	import type { DexListEntry } from "#lib/dex/list.js";
+	import { heatBand, type WallColor } from "#lib/dex/wall.js";
+	import { dexNumber, titleCase } from "#lib/pokemon/format.js";
+	import { GENERATIONS } from "#lib/pokemon/generations.js";
+	import type { TypeName } from "#lib/pokemon/types.js";
+	import { cn } from "#lib/utils.js";
 
 	let {
 		types,

src/lib/components/dex/filter-controls.svelte

@@ -2,15 +2,15 @@
 	import ArrowDownWideNarrowIcon from "@lucide/svelte/icons/arrow-down-wide-narrow";
 	import ArrowUpNarrowWideIcon from "@lucide/svelte/icons/arrow-up-narrow-wide";
 	import SlidersHorizontalIcon from "@lucide/svelte/icons/sliders-horizontal";
-	import { Button } from "$lib/components/ui/button/index.js";
-	import { Label } from "$lib/components/ui/label/index.js";
-	import * as Popover from "$lib/components/ui/popover/index.js";
-	import * as Select from "$lib/components/ui/select/index.js";
-	import { Switch } from "$lib/components/ui/switch/index.js";
-	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
-	import { SORT_KEYS, TAGS, TAG_LABELS, type DexQuery, type SortKey, type Tag } from "$lib/dex/list.js";
-	import { GENERATIONS } from "$lib/pokemon/generations.js";
-	import { STAT_LABELS, type StatKey } from "$lib/pokemon/types.js";
+	import { Button } from "#lib/components/ui/button/index.js";
+	import { Label } from "#lib/components/ui/label/index.js";
+	import * as Popover from "#lib/components/ui/popover/index.js";
+	import * as Select from "#lib/components/ui/select/index.js";
+	import { Switch } from "#lib/components/ui/switch/index.js";
+	import * as ToggleGroup from "#lib/components/ui/toggle-group/index.js";
+	import { SORT_KEYS, TAGS, TAG_LABELS, type DexQuery, type SortKey, type Tag } from "#lib/dex/list.js";
+	import { GENERATIONS } from "#lib/pokemon/generations.js";
+	import { STAT_LABELS, type StatKey } from "#lib/pokemon/types.js";
 
 	let { query, onchange }: { query: DexQuery; onchange: (next: Partial<DexQuery>) => void } =
 		$props();

src/lib/components/dex/search-filters.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import XIcon from "@lucide/svelte/icons/x";
-	import { describeFilter, parseSearch, removeToken } from "$lib/dex/filters.js";
+	import { describeFilter, parseSearch, removeToken } from "#lib/dex/filters.js";
 
 	let { q, onchange }: { q: string; onchange: (q: string) => void } = $props();
 

src/lib/components/dex/search-tips.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button/index.js";
-	import * as Popover from "$lib/components/ui/popover/index.js";
-	import { SEARCH_EXAMPLES } from "$lib/dex/filters.js";
+	import { Button } from "#lib/components/ui/button/index.js";
+	import * as Popover from "#lib/components/ui/popover/index.js";
+	import { SEARCH_EXAMPLES } from "#lib/dex/filters.js";
 
 	let { onpick }: { onpick: (query: string) => void } = $props();
 

src/lib/components/dex/type-filter.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { titleCase } from "$lib/pokemon/format.js";
-	import { TYPES, typeTextClass, type TypeName } from "$lib/pokemon/types.js";
-	import { cn } from "$lib/utils.js";
+	import { titleCase } from "#lib/pokemon/format.js";
+	import { TYPES, typeTextClass, type TypeName } from "#lib/pokemon/types.js";
+	import { cn } from "#lib/utils.js";
 
 	let { selected, onchange }: { selected: TypeName[]; onchange: (types: TypeName[]) => void } =
 		$props();

src/lib/components/pokemon/collection-buttons.svelte

@@ -3,10 +3,10 @@
 	import HeartIcon from "@lucide/svelte/icons/heart";
 	import SparklesIcon from "@lucide/svelte/icons/sparkles";
 	import { page } from "$app/state";
-	import { collection } from "$lib/collection/store.svelte.js";
-	import type { CollectionFlag } from "$lib/collection/types.js";
-	import { Button } from "$lib/components/ui/button/index.js";
-	import { cn } from "$lib/utils.js";
+	import { collection } from "#lib/collection/store.svelte.js";
+	import type { CollectionFlag } from "#lib/collection/types.js";
+	import { Button } from "#lib/components/ui/button/index.js";
+	import { cn } from "#lib/utils.js";
 
 	let { pokemonId, name }: { pokemonId: number; name: string } = $props();
 

src/lib/components/pokemon/counter-list.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { DexListEntry } from "$lib/dex/list.js";
-	import { titleCase } from "$lib/pokemon/format.js";
-	import type { Counter } from "$lib/pokemon/insights.js";
-	import { formatMultiplier } from "$lib/pokemon/matchups.js";
-	import type { TypeName } from "$lib/pokemon/types.js";
+	import type { DexListEntry } from "#lib/dex/list.js";
+	import { titleCase } from "#lib/pokemon/format.js";
+	import type { Counter } from "#lib/pokemon/insights.js";
+	import { formatMultiplier } from "#lib/pokemon/matchups.js";
+	import type { TypeName } from "#lib/pokemon/types.js";
 	import PokemonArt from "./pokemon-art.svelte";
 	import TypeBadge from "./type-badge.svelte";
 

src/lib/components/pokemon/cry-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Volume2Icon from "@lucide/svelte/icons/volume-2";
 	import { toast } from "svelte-sonner";
-	import { Button } from "$lib/components/ui/button/index.js";
+	import { Button } from "#lib/components/ui/button/index.js";
 
 	let { url, name }: { url: string | null; name: string } = $props();
 

src/lib/components/pokemon/damage-class-icon.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { DamageClass } from "$lib/data/types.js";
-	import { cn } from "$lib/utils.js";
+	import type { DamageClass } from "#lib/data/types.js";
+	import { cn } from "#lib/utils.js";
 
 	let { value, class: className }: { value: DamageClass; class?: string } = $props();
 

src/lib/components/pokemon/evolution-chain.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
-	import type { EvolutionNode } from "$lib/pokemon/evolution-tree.js";
-	import { dexNumber } from "$lib/pokemon/format.js";
-	import { cn } from "$lib/utils.js";
+	import type { EvolutionNode } from "#lib/pokemon/evolution-tree.js";
+	import { dexNumber } from "#lib/pokemon/format.js";
+	import { cn } from "#lib/utils.js";
 	import PokemonArt from "./pokemon-art.svelte";
 	import TypeBadge from "./type-badge.svelte";
 

src/lib/components/pokemon/fitted-name.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { nameFit } from "$lib/pokemon/name-fit.js";
+	import { nameFit } from "#lib/pokemon/name-fit.js";
 
 	let { name }: { name: string } = $props();
 

src/lib/components/pokemon/flavor-text.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
 	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { Button } from "$lib/components/ui/button/index.js";
-	import type { FlavorEntry } from "$lib/pokemon/detail.js";
+	import { Button } from "#lib/components/ui/button/index.js";
+	import type { FlavorEntry } from "#lib/pokemon/detail.js";
 
 	let { entries }: { entries: FlavorEntry[] } = $props();
 

src/lib/components/pokemon/form-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { DexListEntry } from "$lib/dex/list.js";
-	import { cn } from "$lib/utils.js";
+	import type { DexListEntry } from "#lib/dex/list.js";
+	import { cn } from "#lib/utils.js";
 	import PokemonArt from "./pokemon-art.svelte";
 	import TypeBadge from "./type-badge.svelte";
 

src/lib/components/pokemon/gender-ratio.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { formatPercent, genderRatio } from "$lib/pokemon/format.js";
+	import { formatPercent, genderRatio } from "#lib/pokemon/format.js";
 
 	let { rate }: { rate: number } = $props();
 	const ratio = $derived(genderRatio(rate));

src/lib/components/pokemon/learnset-table.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { toast } from "svelte-sonner";
-	import * as Select from "$lib/components/ui/select/index.js";
-	import { Spinner } from "$lib/components/ui/spinner/index.js";
-	import * as Tabs from "$lib/components/ui/tabs/index.js";
+	import * as Select from "#lib/components/ui/select/index.js";
+	import { Spinner } from "#lib/components/ui/spinner/index.js";
+	import * as Tabs from "#lib/components/ui/tabs/index.js";
 	import {
 		LEARN_METHOD_LABELS,
 		type LearnMethod,
 		type Learnset,
 		type LearnsetMove,
-	} from "$lib/pokemon/learnset.js";
-	import type { TypeName } from "$lib/pokemon/types.js";
+	} from "#lib/pokemon/learnset.js";
+	import type { TypeName } from "#lib/pokemon/types.js";
 	import DamageClassIcon from "./damage-class-icon.svelte";
 	import TypeBadge from "./type-badge.svelte";
 

src/lib/components/pokemon/pokemon-about.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PokemonDetail } from "$lib/pokemon/detail.js";
+	import type { PokemonDetail } from "#lib/pokemon/detail.js";
 	import FlavorText from "./flavor-text.svelte";
 	import GenderRatio from "./gender-ratio.svelte";
 	import SizeComparison from "./size-comparison.svelte";