Merge pull request #167 from cupcakearmy/svelte-5

some frontend love
cupcakearmy · Jan 18, 2025 · e7fb844 · e7fb844
2 parents 567a0be + c13e534
commit e7fb844
Show file tree

Hide file tree

Showing 34 changed files with 989 additions and 1,773 deletions.
diff --git a/package.json b/package.json
@@ -17,5 +17,5 @@
     "npm-run-all": "^4.1.5",
     "shelljs": "^0.8.5"
   },
-  "packageManager": "pnpm@9.11.0"
+  "packageManager": "pnpm@9.15.4"
 }
diff --git a/packages/backend/Cargo.lock b/packages/backend/Cargo.lock
diff --git a/packages/backend/Cargo.toml b/packages/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "cryptgeon"
-version = "2.8.4"
+version = "2.9.0"
 authors = ["cupcakearmy <hi@nicco.io>"]
 edition = "2021"
 rust-version = "1.80"

diff --git a/packages/backend/src/csp.rs b/packages/backend/src/csp.rs
@@ -0,0 +1,16 @@
+use axum::{body::Body, extract::Request, http::HeaderValue, middleware::Next, response::Response};
+
+const CUSTOM_HEADER_NAME: &str = "Content-Security-Policy";
+const CUSTOM_HEADER_VALUE: &str = "default-src 'self'; script-src 'report-sample' 'self'; style-src 'report-sample' 'self'; object-src 'none'; base-uri 'self'; connect-src 'self' data:; font-src 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; worker-src 'none';";
+
+lazy_static! {
+    static ref HEADER_VALUE: HeaderValue = HeaderValue::from_static(CUSTOM_HEADER_VALUE);
+}
+
+pub async fn add_csp_header(request: Request<Body>, next: Next) -> Response {
+    let mut response = next.run(request).await;
+    response
+        .headers_mut()
+        .append(CUSTOM_HEADER_NAME, HEADER_VALUE.clone());
+    response
+}
diff --git a/packages/backend/src/main.rs b/packages/backend/src/main.rs
@@ -1,7 +1,11 @@
 use std::{collections::HashMap, sync::Arc};
 
 use axum::{
+    body::Body,
     extract::{DefaultBodyLimit, Request},
+    http::HeaderValue,
+    middleware::{self, Next},
+    response::Response,
     routing::{delete, get, post},
     Router, ServiceExt,
 };
@@ -19,6 +23,7 @@ use tower_http::{
 extern crate lazy_static;
 
 mod config;
+mod csp;
 mod health;
 mod lock;
 mod note;
@@ -55,6 +60,8 @@ async fn main() {
     let app = Router::new()
         .nest("/api", api_routes)
         .fallback_service(serve_dir)
+        // Disabled for now, as svelte inlines scripts
+        // .layer(middleware::from_fn(csp::add_csp_header))
         .layer(DefaultBodyLimit::max(*config::LIMIT))
         .layer(
             CompressionLayer::new()

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cryptgeon",
-  "version": "2.8.4",
+  "version": "2.9.0",
   "homepage": "https://github.com/cupcakearmy/cryptgeon",
   "repository": {
     "type": "git",

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -13,23 +13,23 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@lokalise/node-api": "^12.1.0",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.2",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@zerodevx/svelte-toast": "^0.9.5",
-		"adm-zip": "^0.5.10",
-		"dotenv": "^16.4.5",
-		"svelte": "^4.2.12",
-		"svelte-check": "^3.6.6",
+		"@lokalise/node-api": "^13.0.0",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@zerodevx/svelte-toast": "^0.9.6",
+		"adm-zip": "^0.5.16",
+		"dotenv": "^16.4.7",
+		"svelte": "^5.19.0",
+		"svelte-check": "^4.1.4",
 		"svelte-intl-precompile": "^0.12.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.1.7"
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.7"
 	},
 	"dependencies": {
+		"@fontsource/fira-mono": "^5.1.1",
 		"cryptgeon": "workspace:*",
-		"@fontsource/fira-mono": "^5.0.8",
 		"occulto": "^2.0.6",
 		"pretty-bytes": "^6.1.1",
 		"qrious": "^4.0.2"

diff --git a/packages/frontend/src/lib/icons/IconContrast.svelte b/packages/frontend/src/lib/icons/IconContrast.svelte
@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Contrast</title><path
 		d="M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z"

diff --git a/packages/frontend/src/lib/icons/IconCopy.svelte b/packages/frontend/src/lib/icons/IconCopy.svelte
@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Copy</title><path
 		d="M456 480H136a24 24 0 01-24-24V128a16 16 0 0116-16h328a24 24 0 0124 24v320a24 24 0 01-24 24z"

diff --git a/packages/frontend/src/lib/icons/IconDice.svelte b/packages/frontend/src/lib/icons/IconDice.svelte
@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Dice</title><path
 		d="M48 366.92L240 480V284L48 170zM192 288c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zm-96 32c8.84 0 16 10.75 16 24s-7.16 24-16 24-16-10.75-16-24 7.16-24 16-24zM272 284v196l192-113.08V170zm48 140c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24 16 10.75 16 24-7.16 24-16 24zm32 77.64zM256 32L64 144l192 112 192-112zm0 120c-13.25 0-24-7.16-24-16s10.75-16 24-16 24 7.16 24 16-10.75 16-24 16z"

diff --git a/packages/frontend/src/lib/icons/IconEye.svelte b/packages/frontend/src/lib/icons/IconEye.svelte
@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Eye</title><circle cx="256" cy="256" r="64" /><path
 		d="M394.82 141.18C351.1 111.2 304.31 96 255.76 96c-43.69 0-86.28 13-126.59 38.48C88.52 160.23 48.67 207 16 256c26.42 44 62.56 89.24 100.2 115.18C159.38 400.92 206.33 416 255.76 416c49 0 95.85-15.07 139.3-44.79C433.31 345 469.71 299.82 496 256c-26.38-43.43-62.9-88.56-101.18-114.82zM256 352a96 96 0 1196-96 96.11 96.11 0 01-96 96z"

diff --git a/packages/frontend/src/lib/icons/IconEyeOff.svelte b/packages/frontend/src/lib/icons/IconEyeOff.svelte
@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"
 	><title>Eye Off</title><path
 		d="M63.998 86.004l21.998-21.998L448 426.01l-21.998 21.998zM259.34 192.09l60.57 60.57a64.07 64.07 0 00-60.57-60.57zM252.66 319.91l-60.57-60.57a64.07 64.07 0 0060.57 60.57z"

diff --git a/packages/frontend/src/lib/ui/AboutParagraph.svelte b/packages/frontend/src/lib/ui/AboutParagraph.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
-	export let title: string
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		title: string
+		children?: Snippet
+	}
+
+	let { title, children }: Props = $props()
 </script>
 
 <p>
 	<b>▶ {title}</b>
-	<slot />
+	{@render children?.()}
 </p>
 
 <style>

diff --git a/packages/frontend/src/lib/ui/AdvancedParameters.svelte b/packages/frontend/src/lib/ui/AdvancedParameters.svelte
@@ -6,13 +6,23 @@
 	import TextInput from '$lib/ui/TextInput.svelte'
 	import type { Note } from 'cryptgeon/shared'
 
-	export let note: Note
-	export let timeExpiration = false
-	export let customPassword: string | null = null
+	interface Props {
+		note: Note
+		timeExpiration?: boolean
+		customPassword?: string | null
+	}
+
+	let {
+		note = $bindable(),
+		timeExpiration = $bindable(false),
+		customPassword = $bindable(null),
+	}: Props = $props()
 
-	let hasCustomPassword = false
+	let hasCustomPassword = $state(false)
 
-	$: if (!hasCustomPassword) customPassword = null
+	$effect(() => {
+		if (!hasCustomPassword) customPassword = null
+	})
 </script>
 
 <div class="flex col">

diff --git a/packages/frontend/src/lib/ui/Button.svelte b/packages/frontend/src/lib/ui/Button.svelte
@@ -1,4 +1,14 @@
-<button {...$$restProps} on:click><slot /></button>
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children, ...rest }: HTMLButtonAttributes & Props = $props()
+</script>
+
+<button {...rest}>{@render children?.()}</button>
 
 <style>
 	button {

diff --git a/packages/frontend/src/lib/ui/Canvas.svelte b/packages/frontend/src/lib/ui/Canvas.svelte
@@ -5,11 +5,15 @@
 
 	import { getCSSVariable } from '$lib/utils'
 
-	export let value: string
+	interface Props {
+		value: string
+	}
+
+	let { value }: Props = $props()
 
-	let canvas: HTMLCanvasElement
+	let canvas: HTMLCanvasElement | null = $state(null)
 
-	$: {
+	$effect(() => {
 		new QR({
 			value,
 			level: 'Q',
@@ -18,12 +22,12 @@
 			foreground: getCSSVariable('--ui-text-0'),
 			element: canvas,
 		})
-	}
+	})
 </script>
 
 <small>{$t('common.qr_code')}</small>
 <div>
-	<canvas bind:this={canvas} />
+	<canvas bind:this={canvas}></canvas>
 </div>
 
 <style>

diff --git a/packages/frontend/src/lib/ui/FileUpload.svelte b/packages/frontend/src/lib/ui/FileUpload.svelte
@@ -5,8 +5,13 @@
 	import MaxSize from '$lib/ui/MaxSize.svelte'
 	import type { FileDTO } from 'cryptgeon/shared'
 
-	export let label: string = ''
-	export let files: FileDTO[] = []
+	interface Props {
+		label?: string
+		files?: FileDTO[]
+		[key: string]: any
+	}
+
+	let { label = '', files = $bindable([]), ...rest }: Props = $props()
 
 	async function fileToDTO(file: File): Promise<FileDTO> {
 		return {
@@ -35,7 +40,7 @@
 	<small>
 		{label}
 	</small>
-	<input {...$$restProps} type="file" on:change={onInput} multiple />
+	<input {...rest} type="file" onchange={onInput} multiple />
 	<div class="box">
 		{#if files.length}
 			<div>
@@ -45,8 +50,8 @@
 						{file.name}
 					</div>
 				{/each}
-				<div class="spacer" />
-				<Button on:click={clear}>{$t('file_upload.clear')}</Button>
+				<div class="spacer"></div>
+				<Button onclick={clear}>{$t('file_upload.clear')}</Button>
 			</div>
 		{:else}
 			<div>

diff --git a/packages/frontend/src/lib/ui/Icon.svelte b/packages/frontend/src/lib/ui/Icon.svelte
@@ -1,9 +1,10 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import IconContrast from '$lib/icons/IconContrast.svelte'
 	import IconCopy from '$lib/icons/IconCopy.svelte'
 	import IconDice from '$lib/icons/IconDice.svelte'
 	import IconEye from '$lib/icons/IconEye.svelte'
 	import IconEyeOff from '$lib/icons/IconEyeOff.svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
 
 	const map = {
 		contrast: IconContrast,
@@ -15,12 +16,17 @@
 </script>
 
 <script lang="ts">
-	export let icon: keyof typeof map
+	interface Props {
+		icon: keyof typeof map
+	}
+
+	let { icon, ...rest }: HTMLButtonAttributes & Props = $props()
 </script>
 
-<button type="button" on:click {...$$restProps}>
+<button type="button" {...rest}>
 	{#if map[icon]}
-		<svelte:component this={map[icon]} />
+		{@const SvelteComponent = map[icon]}
+		<SvelteComponent />
 	{/if}
 </button>
 

diff --git a/packages/frontend/src/lib/ui/Loader.svelte b/packages/frontend/src/lib/ui/Loader.svelte
@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg
 	version="1.1"
 	xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/frontend/src/lib/ui/NoteResult.svelte b/packages/frontend/src/lib/ui/NoteResult.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type NoteResult = {
 		id: string
 		password?: string
@@ -12,9 +12,13 @@
 	import TextInput from '$lib/ui/TextInput.svelte'
 	import Canvas from './Canvas.svelte'
 
-	export let result: NoteResult
+	interface Props {
+		result: NoteResult
+	}
+
+	let { result }: Props = $props()
 
-	let url = `${window.location.origin}/note/${result.id}`
+	let url = $state(`${window.location.origin}/note/${result.id}`)
 	if (result.password) url += `#${result.password}`
 
 	function reset() {
@@ -41,7 +45,7 @@
 	</p>
 {/if}
 <br />
-<Button on:click={reset}>{$t('home.new_note')}</Button>
+<Button onclick={reset}>{$t('home.new_note')}</Button>
 
 <style>
 	div {