Merge pull request #11 from FlorianLeChat/dependabot/npm_and_yarn/dep…

…endencies-ae8e1f54f9

Bump the dependencies group with 9 updates

.eslintrc.json

@@ -29,6 +29,7 @@
 		"no-shadow": "off", // -> @typescript-eslint/no-shadow
 		"camelcase": ["error", { "ignoreImports": true, "properties": "never" }],
 		"no-plusplus": "off",
+		"prefer-const": "off", // -> https://svelte.dev/docs/svelte/$props
 		"brace-style": ["error", "allman"],
 		"comma-dangle": ["error", "never"],
 		"no-unused-vars": "off", // -> @typescript-eslint/no-unused-vars

package.json

@@ -14,22 +14,22 @@
   },
   "devDependencies": {
     "vite": "~5.4",
-    "tslib": "~2.7",
+    "tslib": "~2.8",
     "husky": "~9.1",
-    "svelte": "~4.2",
+    "svelte": "~5.1",
     "prettier": "~3.3",
     "typescript": "~5.6",
     "lint-staged": "~15.2",
     "svelte-check": "~4.0",
     "@tsconfig/svelte": "~5.0",
     "svelte-preprocess": "~6.0",
     "eslint-config-airbnb": "~19.0",
-    "eslint-plugin-svelte": "~2.44",
+    "eslint-plugin-svelte": "~2.46",
     "eslint-plugin-jsx-a11y": "~6.10",
     "prettier-plugin-svelte": "~3.2",
     "@vitejs/plugin-basic-ssl": "~1.1",
-    "@sveltejs/vite-plugin-svelte": "~3.1",
-    "@typescript-eslint/eslint-plugin": "~8.8"
+    "@sveltejs/vite-plugin-svelte": "~4.0",
+    "@typescript-eslint/eslint-plugin": "~8.12"
   },
   "engines": {
     "node": ">=18.0",

src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// Importation des dépendances et composants.
-	import { onMount, afterUpdate } from "svelte";
+	import { onMount } from "svelte";
 	import type { HistoryEntry } from "./interfaces/HistoryEntry";
 	import TerminalScreen from "./components/TerminalScreen.svelte";
 	import TerminalInput from "./components/TerminalInput.svelte";
@@ -17,10 +17,10 @@
 	import projects from "./commands/projects";
 
 	// Initialisation des variables.
-	let history: HistoryEntry[] = [];
-	let userInput = "";
-	let historyIndex = 0;
-	let terminalInput: HTMLElement;
+	let history: HistoryEntry[] = $state( [] );
+	let userInput: string = $state( "" );
+	let historyIndex: number = $state( 0 );
+	let terminalInput: HTMLElement|undefined = $state();
 
 	// Ajout d'une entrée à l'historique.
 	const addToHistory = ( type: string, text: string ) =>
@@ -127,11 +127,9 @@
 	};
 
 	// Gestion de l'événement d'entrée.
-	const handleEnter = ( event: CustomEvent ) =>
+	const handleEnter = ( input: string ) =>
 	{
 		// Récupération de l'entrée utilisateur.
-		const { input } = event.detail as { input?: string };
-
 		if ( !input )
 		{
 			return;
@@ -203,7 +201,7 @@
 		// Message d'erreur sur les terminaux mobiles.
 		const media = window.matchMedia( "(max-width: 1024px)" );
 
-		if ( media.matches )
+		if ( media.matches && terminalInput )
 		{
 			addQueuedOutput( parseCommand( "error", true ) );
 			terminalInput.style.display = "none";
@@ -221,10 +219,13 @@
 	} );
 
 	// Mise à jour du composant.
-	afterUpdate( () =>
+	$effect( () =>
 	{
 		// Défilement automatique de la console.
-		terminalInput.scrollIntoView( { block: "end" } );
+		if ( history )
+		{
+			terminalInput?.scrollIntoView( { block: "end" } );
+		}
 	} );
 </script>
 
@@ -240,9 +241,9 @@
 	<TerminalInput
 		{userInput}
 		bind:terminalInput
-		on:enter={handleEnter}
-		on:historyForwards={historyForwards}
-		on:historyBackwards={historyBackwards}
+		enter={handleEnter}
+		historyForwards={historyForwards}
+		historyBackwards={historyBackwards}
 	/>
 </main>
 

src/components/OutputRow.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
+	// Déclaration des propriétés.
+	interface EntryProps {
+		entryText: string,
+		entryType: string
+	}
+
 	// Initialisation des variables.
-	export let entryText: string;
-	export let entryType: string;
+	const { entryText, entryType }: EntryProps = $props();
 </script>
 
 <li>

src/components/TerminalInput.svelte

@@ -1,30 +1,40 @@
 <script lang="ts">
-	// Importation des dépendances et composants.
-	import { createEventDispatcher } from "svelte";
+	// Déclaration des propriétés.
+	interface InputProps {
+		enter: ( input: string ) => void;
+		userInput?: string;
+		terminalInput?: HTMLElement;
+		historyForwards: () => void;
+		historyBackwards: () => void;
+	}
 
 	// Initialisation des variables.
-	export let userInput = "";
-	export let terminalInput: HTMLElement;
+	let {
+		enter,
+		userInput = $bindable( "" ),
+		terminalInput = $bindable(),
+		historyForwards,
+		historyBackwards
+	}: InputProps = $props();
 
 	// Gestion de l'événement de relâchement d'une touche.
-	const dispatch = createEventDispatcher();
 	const handleKeyUp = ( event: KeyboardEvent ) =>
 	{
 		if ( event.key === "Enter" )
 		{
 			// Envoi de l'événement d'entrée.
-			dispatch( "enter", { input: userInput } );
+			enter( userInput );
 			userInput = "";
 		}
 		else if ( event.key === "ArrowUp" )
 		{
 			// Envoi de l'événement de remontée dans l'historique.
-			dispatch( "historyBackwards" );
+			historyBackwards();
 		}
 		else if ( event.key === "ArrowDown" )
 		{
 			// Envoi de l'événement de descente dans l'historique.
-			dispatch( "historyForwards" );
+			historyForwards();
 		}
 	};
 </script>
@@ -34,14 +44,14 @@
 	<span>root@ns3086602:/$</span>
 
 	<!-- Champ de saisie -->
-	<!-- svelte-ignore a11y-autofocus -->
+	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		type="text"
+		onkeyup={handleKeyUp}
 		autofocus
 		spellcheck="false"
 		autocomplete="off"
 		autocapitalize="off"
-		on:keyup={handleKeyUp}
 		bind:value={userInput}
 	/>
 </section>

src/components/TerminalScreen.svelte

@@ -4,7 +4,7 @@
 	import type { HistoryEntry } from "../interfaces/HistoryEntry";
 
 	// Initialisation des variables.
-	export let history: HistoryEntry[] = [];
+	const { history = [] }: { history?: HistoryEntry[] } = $props();
 </script>
 
 <!-- Liste des sorties -->

src/main.ts

@@ -1,7 +1,8 @@
 import "./app.css";
+import { mount } from "svelte";
 import App from "./App.svelte";
 
-const app = new App( {
+const app = mount( App, {
 	target: document.querySelector( "body" ) as Element
 } );