Switch from Tauri backend to new Backend interface

Replace all usage of the old Tauri backend instance with the new unified IBackend interface, as returned from createBackend().

Update all affected services, dependency injections, and imports so they now adhere to the new backend abstraction. Remove references to tauri where possible, and update service constructors and API calls accordingly.

Author: estib-vega

apps/desktop/src/components/AppUpdater.test.ts

@@ -1,29 +1,29 @@
 import AppUpdater from '$components/AppUpdater.svelte';
 import { EventContext } from '$lib/analytics/eventContext';
 import { PostHogWrapper } from '$lib/analytics/posthog';
-import { Tauri } from '$lib/backend/tauri';
+import createBackend, { type Update } from '$lib/backend';
 import { ShortcutService } from '$lib/shortcuts/shortcutService';
 import { getSettingsdServiceMock } from '$lib/testing/mockSettingsdService';
 import { UPDATER_SERVICE, UpdaterService } from '$lib/updater/updater';
 import { render, screen } from '@testing-library/svelte';
+import { get } from 'svelte/store';
 import { expect, test, describe, vi, beforeEach, afterEach } from 'vitest';
-import type { Update } from '@tauri-apps/plugin-updater';
 
 describe('AppUpdater', () => {
 	let updater: UpdaterService;
 	let context: Map<any, any>;
-	const tauri = new Tauri();
-	const shortcuts = new ShortcutService(tauri);
+	const backend = createBackend();
+	const shortcuts = new ShortcutService(backend);
 	const MockSettingsService = getSettingsdServiceMock();
 	const settingsService = new MockSettingsService();
 	const eventContext = new EventContext();
 	const posthog = new PostHogWrapper(settingsService, eventContext);
 
 	beforeEach(() => {
 		vi.useFakeTimers();
-		updater = new UpdaterService(tauri, posthog, shortcuts);
+		updater = new UpdaterService(backend, posthog, shortcuts);
 		context = new Map([[UPDATER_SERVICE._key, updater]]);
-		vi.spyOn(tauri, 'listen').mockReturnValue(async () => {});
+		vi.spyOn(backend, 'listen').mockReturnValue(async () => {});
 		vi.mock('$env/dynamic/public', () => {
 			return {
 				env: {
@@ -39,23 +39,18 @@ describe('AppUpdater', () => {
 	});
 
 	test('should be hidden if no update', async () => {
-		vi.spyOn(tauri, 'checkUpdate').mockReturnValue(
-			mockUpdate({
-				version: '1'
-			})
-		);
+		vi.spyOn(backend, 'checkUpdate').mockReturnValue(mockUpdate(null));
 
 		render(AppUpdater, { context });
 		await vi.advanceTimersToNextTimerAsync();
 
 		const updateBanner = screen.queryByTestId('update-banner');
-		expect(updateBanner).toBeNull();
+		expect(updateBanner).toBe(null);
 	});
 
 	test('should display download button', async () => {
-		vi.spyOn(tauri, 'checkUpdate').mockReturnValue(
+		vi.spyOn(backend, 'checkUpdate').mockReturnValue(
 			mockUpdate({
-				available: true,
 				version: '1',
 				body: 'release notes'
 			})
@@ -68,24 +63,19 @@ describe('AppUpdater', () => {
 		expect(button).toBeVisible();
 	});
 
-	test('should display up-to-date on manaul check', async () => {
-		vi.spyOn(tauri, 'checkUpdate').mockReturnValue(
-			mockUpdate({
-				available: false
-			})
-		);
-		render(AppUpdater, { context });
+	test('should display up-to-date on manual check', async () => {
+		vi.spyOn(backend, 'checkUpdate').mockReturnValue(mockUpdate(null));
+		const { getByTestId, component } = render(AppUpdater, { context });
 		updater.checkForUpdate(true);
 		await vi.advanceTimersToNextTimerAsync();
 
-		const button = screen.getByTestId('got-it');
+		const button = getByTestId('got-it');
 		expect(button).toBeVisible();
 	});
 
 	test('should display restart button on install complete', async () => {
-		vi.spyOn(tauri, 'checkUpdate').mockReturnValue(
+		vi.spyOn(backend, 'checkUpdate').mockReturnValue(
 			mockUpdate({
-				available: true,
 				version: '2',
 				body: 'release notes'
 			})
@@ -102,7 +92,11 @@ describe('AppUpdater', () => {
 	});
 });
 
-async function mockUpdate(update: Partial<Update>): Promise<Update> {
+async function mockUpdate(update: Partial<Update> | null): Promise<Update | null> {
+	if (update === null) {
+		return await Promise.resolve(null);
+	}
+
 	return await Promise.resolve({
 		download: () => {},
 		install: () => {},

apps/desktop/src/components/CloneForm.svelte

@@ -3,7 +3,7 @@
 	import InfoMessage, { type MessageStyle } from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import { POSTHOG_WRAPPER } from '$lib/analytics/posthog';
-	import { invoke } from '$lib/backend/ipc';
+	import { GIT_SERVICE } from '$lib/git/gitService';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import { projectPath } from '$lib/routes/routes.svelte';
 	import { parseRemoteUrl } from '$lib/url/gitUrl';
@@ -18,6 +18,7 @@
 	import { onMount } from 'svelte';
 
 	const projectsService = inject(PROJECTS_SERVICE);
+	const gitService = inject(GIT_SERVICE);
 	const posthog = inject(POSTHOG_WRAPPER);
 
 	let loading = $state(false);
@@ -84,10 +85,7 @@
 
 			const targetDir = await join(targetDirPath, remoteUrl.name);
 
-			await invoke('git_clone_repository', {
-				repositoryUrl,
-				targetDir
-			});
+			await gitService.cloneRepo(repositoryUrl, targetDir);
 
 			posthog.capture('Repository Cloned', { protocol: remoteUrl.protocol });
 			const project = await projectsService.addProject(targetDir);

apps/desktop/src/components/CommitSigningForm.svelte

@@ -2,8 +2,8 @@
 	import InfoMessage from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import SectionCardDisclaimer from '$components/SectionCardDisclaimer.svelte';
-	import { invoke } from '$lib/backend/ipc';
 	import { GIT_CONFIG_SERVICE } from '$lib/config/gitConfigService';
+	import { GIT_SERVICE } from '$lib/git/gitService';
 	import { inject } from '@gitbutler/shared/context';
 	import { Button, Link, SectionCard, Select, SelectItem, Textbox, Toggle } from '@gitbutler/ui';
 
@@ -12,6 +12,7 @@
 	const { projectId }: { projectId: string } = $props();
 
 	const gitConfig = inject(GIT_CONFIG_SERVICE);
+	const gitService = inject(GIT_SERVICE);
 
 	let signCommits = $state(false);
 
@@ -57,8 +58,9 @@
 		errorMessage = '';
 		checked = true;
 		loading = true;
-		await invoke('check_signing_settings', { projectId: projectId })
-			.then((_) => {
+		await gitService
+			.checkSigningSettings(projectId)
+			.then(() => {
 				signCheckResult = true;
 			})
 			.catch((err) => {

apps/desktop/src/components/Feed.svelte

@@ -4,7 +4,7 @@
 	import CliSymLink from '$components/profileSettings/CliSymLink.svelte';
 	import { ACTION_SERVICE } from '$lib/actions/actionService.svelte';
 	import laneNewSvg from '$lib/assets/empty-state/lane-new.svg?raw';
-	import { invoke } from '$lib/backend/ipc';
+	import { CLI_MANAGER } from '$lib/cli/cli';
 	import { SETTINGS_SERVICE } from '$lib/config/appSettingsV2';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { FEED_FACTORY } from '$lib/feed/feed';
@@ -26,6 +26,9 @@
 	const settingsService = inject(SETTINGS_SERVICE);
 	const settingsStore = $derived(settingsService.appSettings);
 
+	const cliManager = inject(CLI_MANAGER);
+	const [instalCLI, installingCLI] = cliManager.install;
+
 	const combinedEntries = $derived(feed.combined);
 	const lastAddedId = $derived(feed.lastAddedId);
 
@@ -202,7 +205,8 @@
 											kind="outline"
 											icon="play"
 											size="tag"
-											onclick={async () => await invoke('install_cli')}>Install But CLI</Button
+											loading={installingCLI.current.isLoading}
+											onclick={async () => await instalCLI()}>Install But CLI</Button
 										>
 										<span class="clr-text-2">(requires admin)</span>
 										or

apps/desktop/src/components/FileContextMenu.svelte

@@ -6,6 +6,7 @@
 	import { writeClipboard } from '$lib/backend/clipboard';
 	import { changesToDiffSpec } from '$lib/commits/utils';
 	import { projectAiExperimentalFeaturesEnabled, projectAiGenEnabled } from '$lib/config/config';
+	import { FILE_SERVICE } from '$lib/files/fileService';
 	import { isTreeChange, type TreeChange } from '$lib/hunks/change';
 	import { platformName } from '$lib/platform/platform';
 	import { vscodePath } from '$lib/project/project';
@@ -15,7 +16,7 @@
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { computeChangeStatus } from '$lib/utils/fileStatus';
-	import { getEditorUri, openExternalUrl, showFileInFolder } from '$lib/utils/url';
+	import { getEditorUri, openExternalUrl } from '$lib/utils/url';
 	import { inject } from '@gitbutler/shared/context';
 
 	import {
@@ -61,6 +62,7 @@
 	const idSelection = inject(ID_SELECTION);
 	const aiService = inject(AI_SERVICE);
 	const actionService = inject(ACTION_SERVICE);
+	const fileService = inject(FILE_SERVICE);
 	const [autoCommit, autoCommitting] = actionService.autoCommit;
 	const [branchChanges, branchingChanges] = actionService.branchChanges;
 	const [absorbChanges, absorbingChanges] = actionService.absorb;
@@ -441,7 +443,7 @@
 							const projectPath = project?.path;
 							if (projectPath) {
 								const absPath = await join(projectPath, item.changes[0]!.path);
-								await showFileInFolder(absPath);
+								await fileService.showFileInFolder(absPath);
 							}
 							contextMenu.close();
 						}}

apps/desktop/src/components/ProjectSettingsMenuAction.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { FILE_SERVICE } from '$lib/files/fileService';
 	import { vscodePath } from '$lib/project/project';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import { newProjectSettingsPath } from '$lib/routes/routes.svelte';
 	import { historyPath } from '$lib/routes/routes.svelte';
 	import { SETTINGS } from '$lib/settings/userSettings';
 	import { SHORTCUT_SERVICE } from '$lib/shortcuts/shortcutService';
-	import { getEditorUri, openExternalUrl, showFileInFolder } from '$lib/utils/url';
+	import { getEditorUri, openExternalUrl } from '$lib/utils/url';
 	import { inject } from '@gitbutler/shared/context';
 	import { mergeUnlisten } from '@gitbutler/ui/utils/mergeUnlisten';
 
@@ -16,6 +17,7 @@
 
 	const userSettings = inject(SETTINGS);
 	const shortcutService = inject(SHORTCUT_SERVICE);
+	const fileService = inject(FILE_SERVICE);
 
 	$effect(() =>
 		mergeUnlisten(
@@ -44,7 +46,7 @@
 					throw new Error(`Project not found: ${projectId}`);
 				}
 				// Show the project directory in the default file manager (cross-platform)
-				await showFileInFolder(project.path);
+				await fileService.showFileInFolder(project.path);
 			})
 		)
 	);

apps/desktop/src/components/ShareIssueModal.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { invoke } from '$lib/backend/ipc';
+	import { FILE_SERVICE } from '$lib/files/fileService';
+	import { GIT_SERVICE } from '$lib/git/gitService';
 	import { SHORTCUT_SERVICE } from '$lib/shortcuts/shortcutService';
-	import * as zip from '$lib/support/dataSharing';
+	import { DATA_SHARING_SERVICE } from '$lib/support/dataSharing';
 	import { USER } from '$lib/user/user';
 	import { inject } from '@gitbutler/shared/context';
 	import { HTTP_CLIENT } from '@gitbutler/shared/network/httpClient';
@@ -21,16 +22,17 @@
 
 	const shortcutService = inject(SHORTCUT_SERVICE);
 	const httpClient = inject(HTTP_CLIENT);
+	const fileService = inject(FILE_SERVICE);
+	const dataSharingService = inject(DATA_SHARING_SERVICE);
+	const gitService = inject(GIT_SERVICE);
 	const user = inject(USER);
 
 	export function show() {
 		modal?.show();
 	}
 
 	async function gitIndexLength() {
-		return await invoke<void>('git_index_size', {
-			projectId: projectId
-		});
+		return await gitService.indexSize(projectId);
 	}
 
 	let modal: ReturnType<typeof Modal> | undefined = $state();
@@ -49,9 +51,8 @@
 	}
 
 	async function readZipFile(path: string, filename?: string): Promise<File | Blob> {
-		const { readFile } = await import('@tauri-apps/plugin-fs');
 		// Using `new Uint8Array` to get an `ArrayBuffer` rather than `ArrayBufferLike`.
-		const file = new Uint8Array(await readFile(path));
+		const file = new Uint8Array(await fileService.readFile(path));
 		const fileName = filename ?? path.split('/').pop();
 		return fileName
 			? new File([file], fileName, { type: 'application/zip' })
@@ -73,10 +74,12 @@
 
 		chipToasts.promise(
 			Promise.all([
-				sendLogs ? zip.logs().then(async (path) => await readZipFile(path, 'logs.zip')) : undefined,
+				sendLogs
+					? dataSharingService.logs().then(async (path) => await readZipFile(path, 'logs.zip'))
+					: undefined,
 				sendProjectRepository
-					? zip
-							.projectData({ projectId })
+					? dataSharingService
+							.projectData(projectId)
 							.then(async (path) => await readZipFile(path, 'project.zip'))
 					: undefined
 			]).then(

apps/desktop/src/components/profileSettings/CliSymLink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { invoke } from '$lib/backend/ipc';
+	import { CLI_MANAGER } from '$lib/cli/cli';
 	import { copyToClipboard } from '@gitbutler/shared/clipboard';
+	import { inject } from '@gitbutler/shared/context';
 	import { Icon } from '@gitbutler/ui';
 
 	interface Props {
@@ -9,20 +10,23 @@
 
 	const { class: classes = '' }: Props = $props();
 
-	async function cli_command(): Promise<string> {
-		const path: string = await invoke('cli_path');
+	const cliManager = inject(CLI_MANAGER);
+	const cliPath = cliManager.path();
+
+	function cliCommand(path: string): string {
 		const command = "sudo ln -sf '" + path + "' /usr/local/bin/but";
 		return command;
 	}
 </script>
 
 <div class="symlink-copy-box {classes}">
-	{#await cli_command() then command}
+	{#if cliPath.current?.data}
+		{@const command = cliCommand(cliPath.current.data)}
 		<p>{command}</p>
 		<button type="button" class="symlink-copy-icon" onclick={() => copyToClipboard(command)}>
 			<Icon name="copy" />
 		</button>
-	{/await}
+	{/if}
 </div>
 
 <style lang="postcss">

apps/desktop/src/components/profileSettings/GeneralSettings.svelte

@@ -3,7 +3,7 @@
 	import Login from '$components/Login.svelte';
 	import WelcomeSigninAction from '$components/WelcomeSigninAction.svelte';
 	import CliSymLink from '$components/profileSettings/CliSymLink.svelte';
-	import { invoke } from '$lib/backend/ipc';
+	import { CLI_MANAGER } from '$lib/cli/cli';
 	import { SETTINGS_SERVICE } from '$lib/config/appSettingsV2';
 	import { showError } from '$lib/notifications/toasts';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
@@ -34,6 +34,9 @@
 	const updaterService = inject(UPDATER_SERVICE);
 	const disableAutoChecks = updaterService.disableAutoChecks;
 
+	const cliManager = inject(CLI_MANAGER);
+	const [instalCLI, installingCLI] = cliManager.install;
+
 	const fileTypes = ['image/jpeg', 'image/png'];
 
 	let saving = $state(false);
@@ -235,7 +238,12 @@
 
 	<div class="flex flex-col gap-16">
 		<div class="flex gap-8 justify-end">
-			<Button style="pop" icon="play" onclick={async () => await invoke('install_cli')}
+			<Button
+				style="pop"
+				icon="play"
+				onclick={async () => await instalCLI()}
+				loading={installingCLI.current.isLoading}
+			>
 				>Install But CLI</Button
 			>
 			<Button