Merge pull request #371 from braden-w:braden-w/whi-148-chore-move-bac…

…k-to-prettier-for-formatting-svelte-files chore: use prettier and eslint on app folder, use biome for everything else
braden-w · Dec 17, 2024 · 8225f44 · 8225f44
2 parents 78e4894 + 459b9c6
commit 8225f44
Show file tree

Hide file tree

Showing 88 changed files with 2,447 additions and 1,338 deletions.
diff --git a/apps/app/.prettierignore b/apps/app/.prettierignore
@@ -0,0 +1,7 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+# Tauri
+src-tauri/
diff --git a/apps/app/.prettierrc b/apps/app/.prettierrc
@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"printWidth": 80,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}
diff --git a/apps/app/eslint.config.js b/apps/app/eslint.config.js
@@ -0,0 +1,34 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+		},
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser,
+			},
+		},
+	},
+);
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "app",
+	"name": "@repo/app",
 	"version": "5.1.2",
 	"private": true,
 	"scripts": {
@@ -8,9 +8,12 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"tauri": "cross-env BUILD_TARGET=native tauri"
+		"tauri": "cross-env BUILD_TARGET=native tauri",
+		"lint": "eslint . && prettier --check .",
+		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@eslint/compat": "^1.2.3",
 		"@sveltejs/adapter-static": "3.0.2",
 		"@sveltejs/adapter-vercel": "^5.5.2",
 		"@sveltejs/kit": "^2.12.1",
@@ -20,15 +23,22 @@
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "1.0.0-next.72",
 		"clsx": "^2.1.1",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
 		"lucide-svelte": "^0.424.0",
 		"postcss": "^8.4.47",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
 		"svelte": "^5.14.2",
 		"svelte-check": "^4.1.1",
 		"tailwind-merge": "^2.4.0",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.16",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.0.0",
 		"vite": "^6.0.3"
 	},
 	"type": "module",

diff --git a/apps/app/src/lib/components/CancelOrEndRecordingSessionButton.svelte b/apps/app/src/lib/components/CancelOrEndRecordingSessionButton.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-import WhisperingButton from '$lib/components/WhisperingButton.svelte';
-import { Button } from '$lib/components/ui/button/index.js';
-import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-import { mediaStreamManager } from '$lib/services/MediaRecorderService.svelte';
-import { recorder } from '$lib/stores/recorder.svelte';
-import { fasterRerecordExplainedDialog } from './FasterRerecordExplainedDialog.svelte';
+	import WhisperingButton from '$lib/components/WhisperingButton.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+	import { mediaStreamManager } from '$lib/services/MediaRecorderService.svelte';
+	import { recorder } from '$lib/stores/recorder.svelte';
+	import { fasterRerecordExplainedDialog } from './FasterRerecordExplainedDialog.svelte';
 
-let { class: className }: { class?: string | undefined } = $props();
+	let { class: className }: { class?: string | undefined } = $props();
 </script>
 
 {#if recorder.recorderState === 'RECORDING'}

diff --git a/apps/app/src/lib/components/CopyableCode.svelte b/apps/app/src/lib/components/CopyableCode.svelte
@@ -1,25 +1,26 @@
 <script lang="ts">
-import WhisperingButton from '$lib/components/WhisperingButton.svelte';
-import { MainLive } from '$lib/services';
-import { ClipboardService } from '$lib/services/ClipboardService';
-import { toast } from '$lib/services/ToastService';
-import { renderErrorAsToast } from '$lib/services/renderErrorAsToast';
-import { Effect } from 'effect';
-import { CheckIcon, CopyIcon } from 'lucide-svelte';
+	import WhisperingButton from '$lib/components/WhisperingButton.svelte';
+	import { MainLive } from '$lib/services';
+	import { ClipboardService } from '$lib/services/ClipboardService';
+	import { toast } from '$lib/services/ToastService';
+	import { renderErrorAsToast } from '$lib/services/renderErrorAsToast';
+	import { Effect } from 'effect';
+	import { CheckIcon, CopyIcon } from 'lucide-svelte';
 
-const { codeText }: { codeText: string } = $props();
-let hasCopied = $state(false);
+	const { codeText }: { codeText: string } = $props();
+	let hasCopied = $state(false);
 
-$effect(() => {
-	if (hasCopied) {
-		setTimeout(() => {
-			hasCopied = false;
-		}, 2000);
-	}
-});
+	$effect(() => {
+		if (hasCopied) {
+			setTimeout(() => {
+				hasCopied = false;
+			}, 2000);
+		}
+	});
 </script>
 
-<pre class="bg-muted relative whitespace-normal rounded p-4 pr-12 font-mono text-sm font-semibold">
+<pre
+	class="bg-muted relative whitespace-normal rounded p-4 pr-12 font-mono text-sm font-semibold">
   <WhisperingButton
 		tooltipText="Copy to clipboard"
 		size="icon"
@@ -36,7 +37,11 @@ $effect(() => {
 					descriptionClass: 'line-clamp-2',
 				});
 				hasCopied = true;
-			}).pipe(Effect.catchAll(renderErrorAsToast), Effect.provide(MainLive), Effect.runPromise);
+			}).pipe(
+				Effect.catchAll(renderErrorAsToast),
+				Effect.provide(MainLive),
+				Effect.runPromise,
+			);
 		}}>
 			<span class="sr-only">Copy</span>
     {#if hasCopied}

diff --git a/apps/app/src/lib/components/FasterRerecordExplainedDialog.svelte b/apps/app/src/lib/components/FasterRerecordExplainedDialog.svelte
@@ -1,15 +1,15 @@
 <script module lang="ts">
-export const fasterRerecordExplainedDialog = (() => {
-	let isOpen = $state(false);
-	return {
-		get isOpen() {
-			return isOpen;
-		},
-		set isOpen(v) {
-			isOpen = v;
-		},
-	};
-})();
+	export const fasterRerecordExplainedDialog = (() => {
+		let isOpen = $state(false);
+		return {
+			get isOpen() {
+				return isOpen;
+			},
+			set isOpen(v) {
+				isOpen = v;
+			},
+		};
+	})();
 </script>
 
 <script lang="ts">
@@ -23,20 +23,21 @@ export const fasterRerecordExplainedDialog = (() => {
 			<Dialog.Description>Faster re-recording explained</Dialog.Description>
 		</Dialog.Header>
 		<p class="text-sm leading-7">
-			Whispering can allow the media stream to remain active after you start recording, enabling
-			faster re-recording with reduced latency.
+			Whispering can allow the media stream to remain active after you start
+			recording, enabling faster re-recording with reduced latency.
 		</p>
 		<p class="text-sm leading-7">
-			This feature is particularly beneficial if you need to record multiple takes in quick
-			succession or if the delay between activation and the start of recording feels too long.
+			This feature is particularly beneficial if you need to record multiple
+			takes in quick succession or if the delay between activation and the start
+			of recording feels too long.
 		</p>
 		<p class="text-sm leading-7">
-			However, while using this feature, your computer will indicate that this tab is still
-			accessing the microphone during the recording session.
+			However, while using this feature, your computer will indicate that this
+			tab is still accessing the microphone during the recording session.
 		</p>
 		<p class="text-sm leading-7">
-			When finished, click the 🔴 button to close the stream, end the session, and end microphone
-			access.
+			When finished, click the 🔴 button to close the stream, end the session,
+			and end microphone access.
 		</p>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/apps/app/src/lib/components/MoreDetailsDialog.svelte b/apps/app/src/lib/components/MoreDetailsDialog.svelte
@@ -1,42 +1,45 @@
 <script module lang="ts">
-export const errorMoreDetailsDialog = (() => {
-	let isOpen = $state(false);
-	let error = $state<unknown>(null);
-	return {
-		get isOpen() {
-			return isOpen;
-		},
-		set isOpen(value: boolean) {
-			isOpen = value;
-		},
-		get error() {
-			if (typeof error === 'string') {
-				return error;
-			}
-			if (error instanceof Error) {
-				return error.message;
-			}
-			return JSON.stringify(error, null, 2);
-		},
-		openWithError: (e: unknown) => {
-			error = e;
-			isOpen = true;
-		},
-	};
-})();
+	export const errorMoreDetailsDialog = (() => {
+		let isOpen = $state(false);
+		let error = $state<unknown>(null);
+		return {
+			get isOpen() {
+				return isOpen;
+			},
+			set isOpen(value: boolean) {
+				isOpen = value;
+			},
+			get error() {
+				if (typeof error === 'string') {
+					return error;
+				}
+				if (error instanceof Error) {
+					return error.message;
+				}
+				return JSON.stringify(error, null, 2);
+			},
+			openWithError: (e: unknown) => {
+				error = e;
+				isOpen = true;
+			},
+		};
+	})();
 </script>
 
 <script lang="ts">
-  import * as Dialog from "$lib/components/ui/dialog"
+	import * as Dialog from '$lib/components/ui/dialog';
 </script>
 
 <Dialog.Root bind:open={errorMoreDetailsDialog.isOpen}>
-  <Dialog.Content class="sm:max-w-xl">
-    <Dialog.Header>
-      <Dialog.Title>More details</Dialog.Title>
-			<Dialog.Description>The following is the raw error message.</Dialog.Description>
+	<Dialog.Content class="sm:max-w-xl">
+		<Dialog.Header>
+			<Dialog.Title>More details</Dialog.Title>
+			<Dialog.Description
+				>The following is the raw error message.</Dialog.Description
+			>
 		</Dialog.Header>
-		<pre class="bg-muted relative whitespace-normal rounded p-4 pr-12 font-mono text-sm font-semibold">
+		<pre
+			class="bg-muted relative whitespace-normal rounded p-4 pr-12 font-mono text-sm font-semibold">
 		{errorMoreDetailsDialog.error}
 		</pre>
 	</Dialog.Content>

diff --git a/apps/app/src/lib/components/NavItems.svelte b/apps/app/src/lib/components/NavItems.svelte
@@ -1,25 +1,38 @@
 <script lang="ts">
-import WhisperingButton from '$lib/components/WhisperingButton.svelte';
-import {
-	GithubIcon,
-	ListIcon,
-	Minimize2Icon,
-	MoonIcon,
-	SlidersVerticalIcon,
-	SunIcon,
-} from '$lib/components/icons';
-import { cn } from '$lib/utils';
-import { LogicalSize, getCurrentWindow } from '@tauri-apps/api/window';
-import { toggleMode } from 'mode-watcher';
+	import WhisperingButton from '$lib/components/WhisperingButton.svelte';
+	import {
+		GithubIcon,
+		ListIcon,
+		Minimize2Icon,
+		MoonIcon,
+		SlidersVerticalIcon,
+		SunIcon,
+	} from '$lib/components/icons';
+	import { cn } from '$lib/utils';
+	import { LogicalSize, getCurrentWindow } from '@tauri-apps/api/window';
+	import { toggleMode } from 'mode-watcher';
 
-let { class: className }: { class?: string } = $props();
+	let { class: className }: { class?: string } = $props();
 </script>
 
-<nav class={cn('flex items-center', className)} style="view-transition-name: nav">
-	<WhisperingButton tooltipText="Recordings" href="/recordings" variant="ghost" size="icon">
+<nav
+	class={cn('flex items-center', className)}
+	style="view-transition-name: nav"
+>
+	<WhisperingButton
+		tooltipText="Recordings"
+		href="/recordings"
+		variant="ghost"
+		size="icon"
+	>
 		<ListIcon class="h-4 w-4" aria-hidden="true" />
 	</WhisperingButton>
-	<WhisperingButton tooltipText="Settings" href="/settings" variant="ghost" size="icon">
+	<WhisperingButton
+		tooltipText="Settings"
+		href="/settings"
+		variant="ghost"
+		size="icon"
+	>
 		<SlidersVerticalIcon class="h-4 w-4" aria-hidden="true" />
 	</WhisperingButton>
 	<WhisperingButton
@@ -32,7 +45,12 @@ let { class: className }: { class?: string } = $props();
 	>
 		<GithubIcon class="h-4 w-4" aria-hidden="true" />
 	</WhisperingButton>
-	<WhisperingButton tooltipText="Toggle dark mode" onclick={toggleMode} variant="ghost" size="icon">
+	<WhisperingButton
+		tooltipText="Toggle dark mode"
+		onclick={toggleMode}
+		variant="ghost"
+		size="icon"
+	>
 		<SunIcon
 			class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 		/>