feat: finish svelte5 migration (#5709)

Co-authored-by: Kiril Videlov <krlvi@users.noreply.github.com>
Co-authored-by: Scott Chacon <schacon@gmail.com>
Co-authored-by: Sebastian Thiel <sebastian.thiel@icloud.com>
Co-authored-by: Mattias Granlund <mtsgrd@gmail.com>

Author: 5 people

apps/desktop/src/lib/barmenuActions/FileMenuAction.svelte

@@ -36,4 +36,4 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />

apps/desktop/src/lib/barmenuActions/ReloadMenuAction.svelte

@@ -20,4 +20,4 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />

apps/desktop/src/lib/barmenuActions/SwitchThemeMenuAction.svelte

@@ -30,4 +30,4 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />

apps/desktop/src/lib/barmenuActions/ZoomInOutMenuAction.svelte

@@ -55,4 +55,4 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />

apps/desktop/src/lib/branch/BranchLane.svelte

@@ -83,7 +83,7 @@
 				readonly={selected instanceof RemoteFile}
 				selectable={$commitBoxOpen && commitId === undefined}
 				{commitId}
-				on:close={() => {
+				onClose={() => {
 					fileIdSelection.clear();
 				}}
 			/>
@@ -92,8 +92,8 @@
 				direction="right"
 				minWidth={400}
 				defaultLineColor="var(--clr-border-2)"
-				on:width={(e) => {
-					fileWidth = e.detail / (16 * $userSettings.zoom);
+				onWidth={(value) => {
+					fileWidth = value / (16 * $userSettings.zoom);
 					lscache.set(fileWidthKey + branch.id, fileWidth, 7 * 1440); // 7 day ttl
 					$defaultFileWidthRem = fileWidth;
 				}}

apps/desktop/src/lib/branch/BranchPreviewHeader.svelte

@@ -15,23 +15,27 @@
 	import type { BranchData } from '$lib/vbranches/types';
 	import { goto } from '$app/navigation';
 
-	export let localBranch: BranchData | undefined;
-	export let remoteBranch: BranchData | undefined;
-	export let pr: PullRequest | undefined;
+	interface Props {
+		localBranch: BranchData | undefined;
+		remoteBranch: BranchData | undefined;
+		pr: PullRequest | undefined;
+	}
+
+	const { localBranch, remoteBranch, pr }: Props = $props();
 
-	$: branch = remoteBranch || localBranch!;
-	$: upstream = remoteBranch?.givenName;
+	const branch = $derived(remoteBranch || localBranch!);
+	const upstream = $derived(remoteBranch?.givenName);
 
 	const branchController = getContext(BranchController);
 	const project = getContext(Project);
 	const forge = getForge();
 	const modeSerivce = getContext(ModeService);
 	const mode = modeSerivce.mode;
-	$: forgeBranch = upstream ? $forge?.branch(upstream) : undefined;
+	const forgeBranch = $derived(upstream ? $forge?.branch(upstream) : undefined);
 
-	let isApplying = false;
-	let isDeleting = false;
-	let deleteBranchModal: Modal;
+	let isApplying = $state(false);
+	let isDeleting = $state(false);
+	let deleteBranchModal = $state<Modal>();
 </script>
 
 <div class="header__wrapper">
@@ -132,7 +136,7 @@
 					disabled={!localBranch}
 					onclick={async () => {
 						if (localBranch) {
-							deleteBranchModal.show(branch);
+							deleteBranchModal?.show(branch);
 						}
 					}}
 				>

apps/desktop/src/lib/branch/BranchStatus.svelte

@@ -34,7 +34,7 @@
 {#if $mergedIncorrectly}
 	{#if hasParent && parentIsIntegrated}
 		<InfoMessage style="warning" filled outlined={false}>
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<p>
 					This branch appears to have been merged into an already merged branch. If this was a
 					mistake, you can change the branch name and create a new pull request from the branch
@@ -45,11 +45,11 @@
 						url: 'https://docs.gitbutler.com/features/stacked-branches#accidentally-merged-a-stack-branch-into-an-already-merged-branch-before-it'
 					})}
 				</p>
-			</svelte:fragment>
+			{/snippet}
 		</InfoMessage>
 	{:else}
 		<InfoMessage style="warning" filled outlined={false}>
-			<svelte:fragment slot="content">
+			{#snippet content()}
 				<p>
 					This branch has been merged into a branch different from your target. If this was not
 					intentional you can force push and create a new pull request from the branch context menu.
@@ -59,21 +59,21 @@
 						url: 'https://docs.gitbutler.com/features/stacked-branches#accidentally-merged-a-branch-into-a-branch-before-it-not-integrated-into-mainmaster-yet'
 					})}
 				</p>
-			</svelte:fragment>
+			{/snippet}
 		</InfoMessage>
 	{/if}
 {/if}
 
 {#if isPushed && hasParent && !parentIsPushed}
 	<InfoMessage style="warning" filled outlined={false}>
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<p>
 				This branch is based on a branch that has been deleted from the remote. If this was not
 				intentional you can force push to recreate the branch.
 			</p>
 			<p>
 				{@render links({ url: 'https://docs.gitbutler.com/features/stacked-branches' })}
 			</p>
-		</svelte:fragment>
+		{/snippet}
 	</InfoMessage>
 {/if}

apps/desktop/src/lib/branch/PassphraseBox.svelte

@@ -4,12 +4,16 @@
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import type { SystemPromptHandle } from '$lib/backend/prompt';
 
-	export let prompt: SystemPromptHandle | undefined;
-	export let error: any;
-	export let value: string = '';
+	interface Props {
+		prompt: SystemPromptHandle | undefined;
+		error: any;
+		value?: string;
+	}
+
+	let { prompt, error, value = $bindable('') }: Props = $props();
 
 	let submitDisabled: boolean = false;
-	let isSubmitting = false;
+	let isSubmitting = $state(false);
 
 	async function submit() {
 		if (!prompt) return;

apps/desktop/src/lib/commit/CommitDialog.svelte

@@ -11,9 +11,13 @@
 	import { tick } from 'svelte';
 	import type { Writable } from 'svelte/store';
 
-	export let projectId: string;
-	export let expanded: Writable<boolean>;
-	export let hasSectionsAfter: boolean;
+	interface Props {
+		projectId: string;
+		expanded: Writable<boolean>;
+		hasSectionsAfter: boolean;
+	}
+
+	const { projectId, expanded, hasSectionsAfter }: Props = $props();
 
 	const branchController = getContext(BranchController);
 	const selectedOwnership = getContextStore(SelectedOwnership);
@@ -22,10 +26,10 @@
 	const runCommitHooks = projectRunCommitHooks(projectId);
 	const commitMessage = persistedCommitMessage(projectId, $branch.id);
 
-	let commitMessageInput: CommitMessageInput;
-	let isCommitting = false;
-	let commitMessageValid = false;
-	let isInViewport = false;
+	let commitMessageInput = $state<CommitMessageInput>();
+	let isCommitting = $state(false);
+	let commitMessageValid = $state(false);
+	let isInViewport = $state(false);
 
 	async function commit() {
 		const message = $commitMessage;
@@ -51,7 +55,7 @@
 	export async function focus() {
 		$expanded = true;
 		await tick();
-		commitMessageInput.focus();
+		commitMessageInput?.focus();
 	}
 </script>
 

apps/desktop/src/lib/commit/CommitMessageInput.svelte

@@ -22,7 +22,7 @@
 	import Textarea from '@gitbutler/ui/Textarea.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import { isWhiteSpaceString } from '@gitbutler/ui/utils/string';
-	import { createEventDispatcher, onMount, tick } from 'svelte';
+	import { onMount, tick } from 'svelte';
 
 	interface Props {
 		existingCommit?: DetailedCommit | Commit;
@@ -48,10 +48,6 @@
 	const project = getContext(Project);
 	const promptService = getContext(PromptService);
 
-	const dispatch = createEventDispatcher<{
-		action: 'generate-branch-name';
-	}>();
-
 	const aiGenEnabled = projectAiGenEnabled(project.id);
 	const commitGenerationExtraConcise = projectCommitGenerationExtraConcise(project.id);
 	const commitGenerationUseEmojis = projectCommitGenerationUseEmojis(project.id);
@@ -62,7 +58,7 @@
 	let titleTextArea: HTMLTextAreaElement | undefined = $state();
 	let descriptionTextArea: HTMLTextAreaElement | undefined = $state();
 
-	let { title, description } = $derived(splitMessage(commitMessage));
+	const { title, description } = $derived(splitMessage(commitMessage));
 	$effect(() => {
 		valid = !!title;
 	});
@@ -95,14 +91,6 @@
 	async function generateCommitMessage() {
 		const diffInput = await getDiffInput();
 
-		// Branches get their names generated only if there are at least 4 lines of code
-		// If the change is a 'one-liner', the branch name is either left as "virtual branch"
-		// or the user has to manually trigger the name generation from the meatball menu
-		// This saves people this extra click
-		if ($branch.name.toLowerCase().includes('lane')) {
-			dispatch('action', 'generate-branch-name');
-		}
-
 		aiLoading = true;
 
 		const prompt = promptService.selectedCommitPrompt(project.id);