feat: split codes even more

src/frontend/package.json

@@ -60,7 +60,6 @@
 		"globals": "^17.5.0",
 		"hash-wasm": "^4.12.0",
 		"heic-to": "^1.4.3",
-		"idb": "^8.0.3",
 		"layerchart": "^2.0.0-next.48",
 		"mode-watcher": "^1.1.0",
 		"nprogress": "^0.2.0",
@@ -88,13 +87,11 @@
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2",
 		"tailwindcss": "^4.2.4",
-		"terser": "^5.46.2",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.59.1",
 		"unified": "^11.0.5",
 		"uuid": "^14.0.0",
-		"valibot": "^1.3.1",
 		"vite": "^8.0.9",
 		"vitest": "^4.1.4",
 		"zod": "^4.3.6"

src/frontend/src/lib/components/CodeViewer.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-	import { EditorView, lineNumbers, highlightActiveLine } from '@codemirror/view';
-	import { EditorState, Compartment } from '@codemirror/state';
-	import {
+	import { onDestroy } from 'svelte';
+
+	const { EditorView, lineNumbers, highlightActiveLine } = await import('@codemirror/view');
+	const { EditorState, Compartment } = await import('@codemirror/state');
+	const {
 		LanguageDescription,
 		syntaxHighlighting,
 		HighlightStyle,
 		bracketMatching,
 		foldGutter
-	} from '@codemirror/language';
-	import { tags } from '@lezer/highlight';
-	import { languages } from '@codemirror/language-data';
-	import { onDestroy } from 'svelte';
+	} = await import('@codemirror/language');
+	const { tags } = await import('@lezer/highlight');
+	const { languages } = await import('@codemirror/language-data');
 
 	let { text, filename } = $props<{
 		text: string;
 		filename: string;
 	}>();
 
 	let container: HTMLDivElement;
-	let view: EditorView | undefined;
-	const langCompartment = new Compartment();
+	let view: any | undefined;
 
 	// Material Ocean palette
 	const bg = '#0F111A';
@@ -142,6 +142,8 @@
 		{ tag: tags.invalid, color: red }
 	]);
 
+	const langCompartment = new Compartment();
+
 	$effect(() => {
 		if (!container) return;
 
@@ -172,6 +174,10 @@
 				});
 			});
 		}
+
+		return () => {
+			view?.destroy();
+		};
 	});
 
 	onDestroy(() => {

src/frontend/src/lib/components/QRCode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
-	import QRCode from 'qrcode';
+
+	const { default: QRCode } = await import('qrcode');
 
 	interface Props {
 		value: string;

src/frontend/src/lib/functions/download.ts

@@ -1,6 +1,7 @@
 import { Api } from '#consts/backend';
 import { createDecryptedStream } from '#functions/streams';
-import { ZipReader } from '@zip.js/zip.js';
+
+const { ZipReader } = await import('@zip.js/zip.js');
 
 export class PasswordRequiredError extends Error {
 	constructor() {

src/frontend/src/lib/functions/encryption.ts

@@ -3,7 +3,8 @@ import {
 	DEFAULT_ARGON2_MEMORY_KIB,
 	MAX_ARGON2_MEMORY_KIB
 } from '#consts/encryption';
-import { argon2id } from 'hash-wasm';
+
+const { argon2id } = await import('hash-wasm');
 
 export function bytesToBase64(u8: Uint8Array) {
 	let binary = '';

src/frontend/src/lib/functions/streams.ts

@@ -2,7 +2,9 @@ import { WORKER_CONCURRENCY } from '#consts/concurrency';
 import { HKDF_IV_STR, HKDF_SALT_STR } from '#consts/encryption';
 import DecryptWorker from '#workers/decrypt.worker?worker';
 import EncryptWorker from '#workers/encrypt.worker?worker';
+
 import { ZipWriter } from '@zip.js/zip.js';
+
 import {
 	CHUNK_SIZE,
 	argon2Derive,

src/frontend/src/lib/markdown/markdown.ts

@@ -1,10 +1,11 @@
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeStringify from 'rehype-stringify';
-import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
-import { unified } from 'unified';
 import rehypeEmailMangle from './plugins/email-obfuscate';
 
+const { unified } = await import('unified');
+const { default: remarkParse } = await import('remark-parse');
+const { default: remarkRehype } = await import('remark-rehype');
+const { default: rehypeSanitize } = await import('rehype-sanitize');
+const { default: rehypeStringify } = await import('rehype-stringify');
+
 export async function markdown_to_html(markdown: string) {
 	const result = await unified()
 		.use(remarkParse)

src/frontend/src/routes/(needs_onboarding)/(navbar_and_footer)/(ignore_slash)/view/[slug]/+page.svelte

@@ -30,11 +30,13 @@
 	import { Progress } from '$lib/components/ui/progress';
 	import { cubicOut } from 'svelte/easing';
 	import { Tween } from 'svelte/motion';
-	import { ZipReader, BlobReader, BlobWriter, type Entry } from '@zip.js/zip.js';
+	import type { Entry } from '@zip.js/zip.js';
 	import { detectMimeFromBlob } from '#functions/mime';
 	import { createViewableText } from '$lib/functions/viewer';
 	import FileViewerOverlay from '$lib/components/FileViewerOverlay.svelte';
 
+	const { ZipReader, BlobReader, BlobWriter } = await import('@zip.js/zip.js');
+
 	let key = $derived(page.url.hash ? page.url.hash.slice(1).trim() : null);
 	let slug = $derived(page.params.slug);
 	let fileParam = $derived(page.url.searchParams.get('file'));

src/frontend/src/routes/(needs_onboarding)/(navbar_and_footer)/upload/recent_upload.svelte

@@ -4,6 +4,7 @@
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { Trash2, History, Copy, Check, Download } from '@lucide/svelte';
 	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 	import {
 		deleteHistoryEntry,
 		cleanupExpiredEntries,
@@ -34,35 +35,38 @@
 		return res.json();
 	};
 
-	onMount(() => {
-		const init = async () => {
-			await cleanupExpiredEntries();
-			const entries = get(recentUploads);
+	const init = async () => {
+		await cleanupExpiredEntries();
+		const entries = get(recentUploads);
 
-			await Promise.all(
-				entries.map(async (entry) => {
-					try {
-						const info = await fetchFileInformation(entry.id);
-						if (info.expired) {
-							await deleteHistoryEntry(entry.id);
-							return;
-						}
-						await updateHistoryEntry(entry.id, {
-							name: info.filename,
-							size: formatFileSize(info.size),
-							expiry: new Date(info.expires_at).getTime(),
-							createdAt: new Date(info.created_at).getTime(),
-							downloadCount: info.download_count
-						});
-					} catch (error) {
-						console.error(`Failed to update info for ${entry.id}`, error);
+		await Promise.all(
+			entries.map(async (entry) => {
+				try {
+					const info = await fetchFileInformation(entry.id);
+					if (info.expired) {
 						await deleteHistoryEntry(entry.id);
+						return;
 					}
-				})
-			);
-		};
+					await updateHistoryEntry(entry.id, {
+						name: info.filename,
+						size: formatFileSize(info.size),
+						expiry: new Date(info.expires_at).getTime(),
+						createdAt: new Date(info.created_at).getTime(),
+						downloadCount: info.download_count
+					});
+				} catch (error) {
+					console.error(`Failed to update info for ${entry.id}`, error);
+					await deleteHistoryEntry(entry.id);
+				}
+			})
+		);
+	};
+
+	if (browser) {
 		init();
+	}
 
+	onMount(() => {
 		const interval = setInterval(cleanupExpiredEntries, 60000);
 		return () => clearInterval(interval);
 	});

src/frontend/src/routes/(needs_onboarding)/(navbar_and_footer)/upload/stage_2.svelte

@@ -9,7 +9,6 @@
 	import { formatSeconds } from '#functions/times';
 	import { createZipStream, createEncryptedStream } from '#functions/streams';
 	import * as Tooltip from '$lib/components/ui/tooltip/index';
-	import { v7 as uuidv7 } from 'uuid';
 	import { Api } from '#consts/backend';
 	import { Progress } from '$lib/components/ui/progress';
 	import { addHistoryEntry } from '$lib/database';
@@ -45,6 +44,8 @@
 
 	let fileInput = $state<HTMLInputElement>();
 
+	const { v7: uuidv7 } = await import('uuid');
+
 	// Flattened settings
 	let downloadLimit = $state('1');
 	let timeLimit = $state('86400');
@@ -66,7 +67,9 @@
 		if (files.length === 1) {
 			folderName = files[0].name;
 		} else if (files.length === 0) {
-			folderName = uuidv7();
+			import('uuid').then(({ v7: uuidv7 }) => {
+				folderName = uuidv7();
+			});
 		}
 	});
 

src/frontend/src/routes/+layout.svelte

@@ -3,10 +3,8 @@
 	import '#css/nprogress.scss';
 	import '#css/tailwind.css';
 
-	import { configure } from '@zip.js/zip.js';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { page } from '$app/state';
-	import NProgress from 'nprogress';
 	import favicon from '$lib/assets/logo.svg';
 	import { ModeWatcher } from 'mode-watcher';
 	import { QueryClientProvider } from '@tanstack/svelte-query';
@@ -16,6 +14,9 @@
 	import { MetaTags, deepMerge } from 'svelte-meta-tags';
 	import { WORKER_CONCURRENCY } from '#consts/concurrency';
 
+	const { default: NProgress } = await import('nprogress');
+	const { configure } = await import('@zip.js/zip.js');
+
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 
 	async function loadDevtools() {

src/frontend/vite.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
 
 	build: {
 		sourcemap: true,
-		minify: 'terser',
+		// minify: 'terser',
 		rolldownOptions: {
 			output: {
 				generatedCode: {