Migrated to Svelte 5

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
 	"files.associations": {
 		"*.css": "tailwindcss"
-	}
+	},
+	"typescript.enablePromptUseWorkspaceTsdk": true,
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

package.json

@@ -15,25 +15,25 @@
 		"drizzle:migrate": "bun ./src/contrib/migrate.ts"
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.5.21",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@sveltejs/kit": "^2.5.22",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
 		"bun-types": "^1.1.22",
-		"drizzle-kit": "^0.23.2",
+		"drizzle-kit": "^0.24.0",
 		"eslint": "^9.9.0",
 		"eslint-plugin-svelte": "^2.43.0",
 		"globals": "^15.9.0",
 		"postcss": "^8.4.41",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.6",
-		"svelte": "^4.2.18",
+		"svelte": "^5.0.0-next.218",
 		"svelte-adapter-bun": "^0.5.2",
 		"svelte-check": "^3.8.5",
 		"tailwindcss": "^3.4.9",
-		"typescript": "^5.5.4",
-		"typescript-eslint": "^8.0.1",
+		"typescript": "^5.6.0-dev.20240812",
+		"typescript-eslint": "^8.1.0",
 		"vite": "^5.4.0"
 	},
 	"type": "module",
@@ -45,11 +45,11 @@
 	"dependencies": {
 		"bits-ui": "^0.21.13",
 		"clsx": "^2.1.1",
-		"drizzle-orm": "^0.32.2",
-		"lucide-svelte": "^0.424.0",
+		"drizzle-orm": "^0.33.0",
+		"lucide-svelte": "^0.427.0",
 		"mode-watcher": "^0.4.1",
 		"svelte-radix": "^1.1.0",
-		"tailwind-merge": "^2.5.0",
+		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"
 	}
 }

src/lib/components/headers/app-header.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { APPLICATION_NAME, APPLICATION_ICON } from ".";
+
+	import ThemeToggle from "@/theme-toggle.svelte";
+	import Icons from "$lib/icons";
+</script>
+
+<header
+	class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div class="container mx-auto flex h-14 max-w-screen-2xl items-center px-4">
+		<div class="flex md:mr-4">
+			<!-- This is apparently svelte 5, this is cursed -->
+			<APPLICATION_ICON />
+			<span class="ml-2 font-bold sm:inline-block">{APPLICATION_NAME}</span>
+		</div>
+
+		<div
+			class="hidden flex-1 items-center justify-between space-x-2 md:flex md:justify-end"
+		>
+			<ThemeToggle />
+		</div>
+	</div>
+</header>

src/lib/components/headers/index.ts

@@ -0,0 +1,4 @@
+import Icons from "../../icons";
+
+export const APPLICATION_NAME = "Jail Bird";
+export const APPLICATION_ICON = Icons.Lock;

src/lib/components/headers/landing-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { APPLICATION_NAME, APPLICATION_ICON } from ".";
+
+	import ThemeToggle from "@/theme-toggle.svelte";
+</script>
+
+<header
+	class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div class="container mx-auto flex h-24 max-w-screen-2xl items-center px-4">
+		<div class="flex md:mr-4">
+			<!-- This is apparently svelte 5, this is cursed -->
+			<APPLICATION_ICON />
+			<span class="ml-2 font-bold sm:inline-block">{APPLICATION_NAME}</span>
+		</div>
+
+		<div
+			class="hidden flex-1 items-center justify-between space-x-2 md:flex md:justify-end"
+		>
+			<ThemeToggle />
+		</div>
+	</div>
+</header>

src/lib/components/main.svelte

@@ -1,3 +1,10 @@
+<!-- 
+	@component
+	
+	This is a reusable `<main>` tag, it has all of the classes to be nice and 
+	usable and can be expanded later to also work on mobile.
+-->
+
 <main class="mx-auto max-w-screen-2xl py-4">
 	<slot />
 </main>

src/lib/components/theme-toggle.svelte

@@ -8,6 +8,13 @@
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 </script>
 
+<!-- 
+	@component
+
+	A component that allows the user to select a theme, 
+	**the default set in the root `+layout.svelte` is "dark".**
+-->
+
 <DropdownMenu.Root>
 	<!-- 
 		Theme Button
@@ -27,10 +34,7 @@
 		Theme Options
 	-->
 	<DropdownMenu.Content align="end">
-		<DropdownMenu.Item
-			on:click={() => setMode("light")}
-			class="data-[highlighted]:bg-destructive"
-		>
+		<DropdownMenu.Item on:click={() => setMode("light")}>
 			<Sun size="0.8rem" class="mr-4" /> Light
 		</DropdownMenu.Item>
 		<DropdownMenu.Item on:click={() => setMode("dark")}>

src/lib/components/ui/button/button.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
 	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { type Props, buttonVariants } from "./index.js";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = Props;
-	type $$Events = Events;
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
-	export { className as class };
+	let {
+		class: className = undefined,
+		variant,
+		size,
+		builders,
+		children,
+	}: Props = $props();
 </script>
 
+<!--
+	@component
+
+	> **NOTE**
+	> 
+	> For some unknown dumbass reason, typescript screams in 
+	> pain when i use `...rest` in the `props`. So for now, we'll limit 
+	> our stuff to this.
+-->
+
 <ButtonPrimitive.Root
 	{builders}
 	class={cn(buttonVariants({ variant, size, className }))}
 	type="button"
-	{...$$restProps}
 	on:click
 	on:keydown
 >
-	<slot />
+	{@render children()}
 </ButtonPrimitive.Root>

src/lib/components/ui/button/index.ts

@@ -1,5 +1,6 @@
 import type { Button as ButtonPrimitive } from "bits-ui";
 import { type VariantProps, tv } from "tailwind-variants";
+import type { Snippet } from "svelte";
 import Root from "./button.svelte";
 
 const buttonVariants = tv({
@@ -34,6 +35,7 @@ type Size = VariantProps<typeof buttonVariants>["size"];
 type Props = ButtonPrimitive.Props & {
 	variant?: Variant;
 	size?: Size;
+	children: Snippet;
 };
 
 type Events = ButtonPrimitive.Events;

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -3,12 +3,14 @@
 	import Check from "lucide-svelte/icons/check";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
-	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
+	import type { CheckBoxItemProps } from ".";
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
-	export { className as class };
+	let {
+		class: className = undefined,
+		checked = $bindable(undefined),
+		children,
+		...rest
+	}: CheckBoxItemProps = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
@@ -17,7 +19,7 @@
 		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
 		className,
 	)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -31,5 +33,5 @@
 			<Check class="h-4 w-4" />
 		</DropdownMenuPrimitive.CheckboxIndicator>
 	</span>
-	<slot />
+	{@render children()}
 </DropdownMenuPrimitive.CheckboxItem>

src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -2,14 +2,16 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn, flyAndScale } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.ContentProps;
-	type $$Events = DropdownMenuPrimitive.ContentEvents;
+	import type { ContentProps } from ".";
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export { className as class };
+	const {
+		class: className = undefined,
+		sideOffset = 4,
+		transition = flyAndScale,
+		transitionConfig = undefined,
+		children,
+		...rest
+	}: ContentProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Content
@@ -20,8 +22,8 @@
 		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
 		className,
 	)}
-	{...$$restProps}
+	{...rest}
 	on:keydown
 >
-	<slot />
+	{@render children()}
 </DropdownMenuPrimitive.Content>

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -2,14 +2,14 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.ItemProps & {
-		inset?: boolean;
-	};
-	type $$Events = DropdownMenuPrimitive.ItemEvents;
+	import type { ItemProps } from ".";
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	const {
+		class: className = undefined,
+		inset = false,
+		children,
+		...rest
+	}: ItemProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Item
@@ -18,7 +18,7 @@
 		inset && "pl-8",
 		className,
 	)}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -27,5 +27,5 @@
 	on:pointerleave
 	on:pointermove
 >
-	<slot />
+	{@render children()}
 </DropdownMenuPrimitive.Item>

src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -2,18 +2,19 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.LabelProps & {
-		inset?: boolean;
-	};
+	import type { LabelProps } from ".";
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	const {
+		class: className = undefined,
+		inset = false,
+		children,
+		...rest
+	}: LabelProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Label
 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children()}
 </DropdownMenuPrimitive.Label>

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { RadioGroupProps } from ".";
 
-	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
+	let {
+		value = $bindable(undefined),
+		children,
+		...rest
+	}: RadioGroupProps = $props();
 </script>
 
-<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
+<DropdownMenuPrimitive.RadioGroup {...rest} bind:value>
+	{@render children()}
 </DropdownMenuPrimitive.RadioGroup>

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -3,12 +3,14 @@
 	import Circle from "lucide-svelte/icons/circle";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.RadioItemProps;
-	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
+	import type { RadioItemProps } from ".";
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
+	let {
+		class: className = undefined,
+		value = $bindable(),
+		children,
+		...rest
+	}: RadioItemProps = $props();
 </script>
 
 <DropdownMenuPrimitive.RadioItem
@@ -17,7 +19,7 @@
 		className,
 	)}
 	{value}
-	{...$$restProps}
+	{...rest}
 	on:click
 	on:keydown
 	on:focusin
@@ -31,5 +33,5 @@
 			<Circle class="h-2 w-2 fill-current" />
 		</DropdownMenuPrimitive.RadioIndicator>
 	</span>
-	<slot />
+	{@render children()}
 </DropdownMenuPrimitive.RadioItem>