feat: move calculation intensive part into a web worker

.github/workflows/test.yaml

@@ -34,6 +34,9 @@ jobs:
       - name: Shared tests
         run: pnpm --filter @cryptgeon/shared test
 
+      - name: Frontend type check
+        run: pnpm --filter @cryptgeon/web check
+
       - name: Run your tests
         run: pnpm test
 

README.md

@@ -115,7 +115,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     depends_on:
       - cache
     environment:

README_ES.md

@@ -103,7 +103,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     depends_on:
       - cache
     environment:

README_zh-CN.md

@@ -91,7 +91,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     depends_on:
       - cache
     environment:
@@ -131,7 +131,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     restart: unless-stopped
     depends_on:
       - cache

docker-compose.yaml

@@ -11,7 +11,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     depends_on:
       - cache
     environment:

docs/roadmap.md

@@ -2,7 +2,6 @@
 
 ## Todo
 
-- Localize i18n readmes: `README_ES.md`, `README_zh-CN.md` still reference `REDIS` / `/api/v1`-era endpoint names — align to `CACHE` / `/healthz` (also sweep `CONTRIBUTING.md`, `examples/*`, postman collection).
 - Add remaining shared tooling to the pnpm catalog (`vite`, `tsdown`).
 - Move formatting, linting and type-checking + git hooks onto `vite-plus` (oxlint, oxfmt, vitest).
 - Re-add CSP (`Content-Security-Policy`) wired into the axum router (was in `csp.rs`, removed as unused).

examples/nginx/docker-compose.yaml

@@ -12,7 +12,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     depends_on:
       - cache
 

examples/scratch/README.md

@@ -116,7 +116,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     restart: unless-stopped
     depends_on:
       - cache

examples/traefik/README.md

@@ -26,7 +26,7 @@ services:
       - /data
 
   app:
-    image: cupcakearmy/cryptgeon:latest
+    image: cupcakearmy/cryptgeon:v3
     restart: unless-stopped
     depends_on:
       - cache
@@ -70,7 +70,7 @@ services:
       - /data
 
   cryptgeon:
-    image: cupcakearmy/cryptgeon
+    image: cupcakearmy/cryptgeon:v3
     depends_on:
       - cache
     labels:

packages/backend/Cargo.lock

@@ -252,7 +252,7 @@ dependencies = [
 
 [[package]]
 name = "cryptgeon"
-version = "3.0.0-rc.2"
+version = "3.0.0-rc.3"
 dependencies = [
  "axum",
  "bs62",

packages/backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "cryptgeon"
-version = "3.0.0-rc.2"
+version = "3.0.0-rc.3"
 authors = ["cupcakearmy <hi@nicco.io>"]
 edition = "2024"
 rust-version = "1.95"

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cryptgeon",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.3",
   "homepage": "https://github.com/cupcakearmy/cryptgeon",
   "repository": {
     "type": "git",
@@ -24,16 +24,16 @@
     "prepublishOnly": "pnpm run build"
   },
   "devDependencies": {
+    "@commander-js/extra-typings": "^15.0.0",
     "@cryptgeon/shared": "workspace:*",
     "@msgpack/msgpack": "^3.1.3",
-    "@commander-js/extra-typings": "^12.1.0",
     "@tsconfig/strictest": "catalog:",
-    "@types/inquirer": "^9.0.9",
-    "@types/node": "^22.15.3",
-    "commander": "^12.1.0",
-    "inquirer": "^9.3.8",
+    "@types/inquirer": "^9.0.10",
+    "@types/node": "^22.20.1",
+    "commander": "^15.0.0",
+    "inquirer": "^14.2.1",
     "mime": "^4.1.0",
-    "pretty-bytes": "^6.1.1",
+    "pretty-bytes": "^7.1.3",
     "typescript": "catalog:",
     "vite-plus": "catalog:"
   },

packages/frontend/package.json

@@ -13,21 +13,22 @@
 	"type": "module",
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.61.1",
-		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@sveltejs/kit": "^2.70.3",
+		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"license-checker-rseidelsohn": "^5.0.1",
-		"svelte": "^5.55.9",
-		"svelte-check": "^4.4.8",
+		"svelte": "^5.57.0",
+		"svelte-check": "^4.7.6",
 		"svelte-intl-precompile": "^0.12.3",
 		"tslib": "^2.8.1",
 		"typescript": "^6.0.3",
-		"vite": "^8.0.14"
+		"vite": "^8.2.2"
 	},
 	"dependencies": {
 		"@cryptgeon/shared": "workspace:*",
-		"@fontsource/fira-mono": "^5.2.7",
-		"pretty-bytes": "^7.1.0",
+		"@fontsource/fira-mono": "^5.3.0",
+		"comlink": "^4.4.2",
+		"pretty-bytes": "^7.1.3",
 		"uqr": "^0.1.3"
 	}
 }

packages/frontend/src/lib/views/Create.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import {
-		bytesToHex,
 		create as apiCreate,
+		bytesToHex,
 		packContent,
-		type ServerNote
+		type FileDTO,
+		type NoteInput,
+		type ServerNote,
 	} from '@cryptgeon/shared'
 	import { t } from 'svelte-intl-precompile'
 	import { blur } from 'svelte/transition'
+	import { transfer } from 'comlink'
 
 	import { status } from '$lib/stores/status'
 	import { notify } from '$lib/toast'
@@ -15,10 +18,12 @@
 	import FileUpload from '$lib/ui/FileUpload.svelte'
 	import Loader from '$lib/ui/Loader.svelte'
 	import MaxSize from '$lib/ui/MaxSize.svelte'
-	import PastedFilesPreview from '$lib/ui/PastedFilesPreview.svelte'
 	import Result, { type NoteResult } from '$lib/ui/NoteResult.svelte'
+	import PastedFilesPreview from '$lib/ui/PastedFilesPreview.svelte'
 	import Switch from '$lib/ui/Switch.svelte'
 	import TextArea from '$lib/ui/TextArea.svelte'
+	import { createWorker } from '$lib/worker'
+	import { onMount } from 'svelte'
 
 	let note: { views: number; expiration: number } = $state({ views: 1, expiration: 60 })
 	let files: FileDTO[] = $state([])
@@ -53,6 +58,8 @@
 		if (!isFile) textContent = ''
 	})
 
+	const worker = createWorker()
+
 	async function handlePaste(e: ClipboardEvent) {
 		const data = e.clipboardData
 		if (!data) return
@@ -123,13 +130,21 @@
 				throw new EmptyContentError()
 			}
 
-			const payload = packContent(
-				isFile ? { type: 'files', files } : { type: 'text', text: textContent },
-				customPassword || undefined
+			const noteInput: NoteInput = isFile
+				? transfer(
+						{
+							type: 'files',
+							files: $state.snapshot(files),
+						},
+						files.map((f) => f.data.buffer)
 					)
+				: { type: 'text', text: textContent }
+			const payload = await worker.pack(noteInput, customPassword || undefined)
 			const serverNote: ServerNote = {
 				meta: {
-					...(timeExpiration ? { expiration: parseInt(note.expiration as any) } : { views: parseInt(note.views as any) }),
+					...(timeExpiration
+						? { expiration: parseInt(note.expiration as any) }
+						: { views: parseInt(note.views as any) }),
 					extra: payload.extra,
 				},
 				data: payload.data,

packages/frontend/src/lib/worker/index.ts

@@ -0,0 +1,14 @@
+import { wrap } from 'comlink'
+
+import CryptWorker from './worker?worker'
+import type { packContent, unpackContent } from '@cryptgeon/shared'
+
+export function createWorker() {
+	const worker = new CryptWorker()
+	return wrap<WorkerConract>(worker)
+}
+
+export type WorkerConract = {
+	pack: typeof packContent
+	unpack: typeof unpackContent
+}

packages/frontend/src/lib/worker/worker.ts

@@ -0,0 +1,19 @@
+import type { WorkerConract } from '$lib/worker'
+import { packContent, unpackContent } from '@cryptgeon/shared'
+import { expose, transfer } from 'comlink'
+
+const contract: WorkerConract = {
+	pack(input, password) {
+		const content = packContent(input, password)
+		return transfer(content, [content.data.buffer, content.extra.buffer, content.key.buffer])
+	},
+	unpack(data, key) {
+		const content = unpackContent(data, key)
+		return transfer(
+			content,
+			typeof content.data === 'string' ? [] : content.data.map((f) => f.data.buffer)
+		)
+	},
+}
+
+expose(contract)

packages/frontend/src/routes/note/[id]/+page.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
-	import { deriveKey, hexToBytes, decode, info, get as apiGet, unpackContent, type FileDTO } from '@cryptgeon/shared'
+	import {
+		deriveKey,
+		hexToBytes,
+		decode,
+		info,
+		get as apiGet,
+		unpackContent,
+		type FileDTO,
+	} from '@cryptgeon/shared'
 	import { onMount } from 'svelte'
 	import { t } from 'svelte-intl-precompile'
 
@@ -8,6 +16,7 @@
 	import ShowNote, { type DecryptedNote } from '$lib/ui/ShowNote.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
 	import type { PageData } from './$types'
+	import { createWorker } from '$lib/worker'
 
 	interface Props {
 		data: PageData
@@ -44,6 +53,8 @@
 		}
 	})
 
+	const worker = createWorker()
+
 	async function show(e: SubmitEvent) {
 		e.preventDefault()
 		try {
@@ -69,7 +80,7 @@
 				key = hexToBytes(password!)
 			}
 
-		const content = unpackContent(serverNote.data, key)
+			const content = await worker.unpack(serverNote.data, key)
 
 			switch (content.type) {
 				case 'text':
@@ -78,7 +89,7 @@
 						contents: content.data,
 					}
 					break
-case 'files':
+				case 'files':
 					const files = (content.data as any[]).map((f: any) => ({
 						...f,
 						data: f.data instanceof Uint8Array ? f.data : new Uint8Array(f.data as any),
@@ -87,7 +98,7 @@ case 'files':
 						meta: { type: 'file' },
 						contents: files,
 					}
-break
+					break
 				default:
 					error = $t('show.errors.unsupported_type')
 					return