migrate to svelte 5

.github/workflows/pr-preview-footer.yaml

@@ -9,11 +9,11 @@ jobs:
 
     name: Add preview footer to PR
     steps:
-    - name: Add preview footer to PR
-      uses: devindford/[email protected]
-      with:
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
-        body-template: |
-          ---
-          See preview on Cloudflare Pages: https://preview-${{ github.event.number }}.developer-wiki.pages.dev
-        body-update-action: 'suffix'
+      - name: Add preview footer to PR
+        uses: devindford/[email protected]
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          body-template: |
+            ---
+            See preview on Cloudflare Pages: https://preview-${{ github.event.number }}.developer-wiki.pages.dev
+          body-update-action: "suffix"

.github/workflows/pr-preview.yaml

@@ -27,4 +27,3 @@ jobs:
           name: website-html
           path: build
           retention-days: 1
-

.prettierrc

@@ -3,6 +3,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from "eslint-config-prettier";
+import js from "@eslint/js";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import ts from "typescript-eslint";
+
+export default ts.config(
+	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
+			}
+		}
+	},
+	{
+		ignores: ["build/", ".svelte-kit/", "dist/"]
+	}
+);

l10n/fr.ftl

@@ -72,7 +72,7 @@ introduction = Introduction
 # Items
 items = Items
     .armor = Ajouter une Armure
-    .first-item = Créer votre Premier Ite
+    .first-item = Créer votre Premier Item
     .food = Ajouter de la Nourriture
     .tools = Ajouter des Outils Personnalisés
 

l10n/index.ts

@@ -1,11 +1,9 @@
-import translationsEn from "./en.ftl?raw";
-import translationsFr from "./fr.ftl?raw";
+// @ts-expect-error the svelte-fluent vite plugin allows to import ftl files
+import resourceEn from "./en.ftl";
+// @ts-expect-error but it seams like typescript dosn´t know that
+import resourceFr from "./fr.ftl";
 
-import { FluentResource, FluentBundle } from "@fluent/bundle";
-import { negotiateLanguages } from "@fluent/langneg";
-import { derived, writable, type Readable, type Writable } from "svelte/store";
-
-import { browser } from "$app/environment";
+import { FluentResource } from "@fluent/bundle";
 
 /**
  * List of all supported locales
@@ -21,65 +19,33 @@ export function isLocale(maybeLocale: string): maybeLocale is Locale {
 
 export const defaultLocale: Locale = "en";
 
-export const currentLocale: Writable<Locale> = writable(defaultLocale);
-
-/**
- * List of supported locales that are rtl (none for now)
- */
-const rtlLocales: Locale[] = [];
-
-export function isRtl(locale: Locale): boolean {
-	return rtlLocales.includes(locale);
-}
-
-export const currentDir: Readable<"ltr" | "rtl"> = derived(currentLocale, ($currentLocale, set) => {
-	set(isRtl($currentLocale) ? "rtl" : "ltr");
-});
-
 /**
- * The prefered locales of the user
- * with the current locale as the first element
+ * The text direction of each supported locale
  */
-export const currentLocales: Readable<Locale[]> = derived(currentLocale, ($currentLocale, set) => {
-	if (browser) {
-		const fallbackLocales = negotiateLanguages(navigator.languages, supportedLocales, {
-			defaultLocale
-		}).filter((locale) => locale !== $currentLocale) as Locale[]; // Remove the current locale to not add it twice
-
-		set([
-			$currentLocale,
-			// Add the user's prefered languages as fallback
-			...fallbackLocales
-		]);
-	} else if ($currentLocale != defaultLocale) {
-		// Only add the default locale when generating on the server
-		set([$currentLocale, defaultLocale]);
-	} else {
-		set([defaultLocale]);
-	}
-});
+export const localesDir: Record<Locale, "ltr" | "rtl"> = {
+	en: "ltr",
+	fr: "ltr"
+};
 
 /**
- * All the translations as fluent resources
+ * The fluent resource for each locale
  */
-const resources: { [L in Locale]: FluentResource } = {
-	en: new FluentResource(translationsEn),
-	fr: new FluentResource(translationsFr)
+export const resources: Record<Locale, FluentResource> = {
+	en: resourceEn,
+	fr: resourceFr
 };
 
 /**
- * The bundle with the translations resource
- * of the current locales
+ * Removes the locale from the given pathname (if a locale is found)
  */
-export const currentBundle: Readable<FluentBundle> = derived(
-	[currentLocales],
-	([$currentLocales], set) => {
-		const bundle = new FluentBundle($currentLocales);
+export function extractRoute(pathname: string): string {
+	const routeExtractor = new RegExp(`^/([^/]+)?(/.+)?$`);
+
+	const routeMatch = pathname.match(routeExtractor);
 
-		$currentLocales.forEach((locale) => {
-			bundle.addResource(resources[locale]);
-		});
+	// Locale found, return path without the locale, defaulting to homepage
+	if (routeMatch && routeMatch[1] && isLocale(routeMatch[1])) return routeMatch[2] ?? "/";
 
-		set(bundle);
-	}
-);
+	// Just return the pathname in all other cases
+	return pathname;
+}

package.json

@@ -2,52 +2,54 @@
 	"name": "developer-wiki",
 	"version": "0.0.1",
 	"private": true,
+	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write . && eslint . --fix"
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write . && eslint . --fix"
+	},
+	"dependencies": {
+		"jsdom": "^25.0.1"
 	},
 	"devDependencies": {
 		"@fluent/bundle": "^0.18.0",
 		"@fluent/langneg": "^0.7.0",
 		"@hbsnow/rehype-sectionize": "^1.0.7",
-		"@iconify-json/fa6-brands": "^1.1.19",
-		"@iconify-json/fa6-solid": "^1.1.21",
-		"@iconify-json/tabler": "^1.1.113",
+		"@iconify-json/fa6-brands": "^1.2.1",
+		"@iconify-json/fa6-solid": "^1.2.1",
+		"@iconify-json/tabler": "^1.2.7",
 		"@jsdevtools/rehype-toc": "^3.0.2",
-		"@nubolab-ffwd/svelte-fluent": "^0.8.0",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.10",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
-		"@types/node": "^20.14.0",
-		"@types/prismjs": "^1.26.4",
-		"@typescript-eslint/eslint-plugin": "^5.62.0",
-		"@typescript-eslint/parser": "^5.62.0",
-		"@unocss/extractor-svelte": "^0.57.7",
-		"eslint": "^8.57.0",
-		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-svelte": "^2.39.0",
-		"jsdom": "^24.1.0",
-		"mdsvex": "^0.11.0",
-		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.10.1",
+		"@nubolab-ffwd/svelte-fluent": "^1.0.0",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.7.4",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.1",
+		"@types/node": "^20.17.3",
+		"@types/prismjs": "^1.26.5",
+		"@unocss/extractor-svelte": "^0.63.6",
+		"eslint": "^9.14.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.46.0",
+		"globals": "^15.11.0",
+		"mdsvex": "^0.12.3",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
 		"prismjs": "^1.29.0",
-		"quilt-bulma": "^0.0.23",
-		"rehype-autolink-headings": "^6.1.1",
-		"rehype-rewrite": "^3.0.6",
+		"quilt-bulma": "^0.0.24",
+		"rehype-autolink-headings": "^7.1.0",
+		"rehype-rewrite": "^4.0.2",
 		"rehype-slug": "^6.0.0",
-		"svelte": "^4.2.17",
-		"svelte-check": "^3.8.0",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
-		"unocss": "^0.57.7",
-		"vite": "^5.2.12",
-		"yaml": "^2.4.3"
-	},
-	"type": "module"
+		"svelte": "^5.1.9",
+		"svelte-check": "^4.0.5",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.12.2",
+		"unocss": "^0.63.6",
+		"vite": "^5.4.10",
+		"yaml": "^2.6.0"
+	}
 }