feat: migration to Svelte 5

src/lib/app_components/analytics.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-    export let log_lvl: number = 0;
 
-    export let site_google_tracking_id: string = '';
+    interface Props {
+        log_lvl?: number;
+        site_google_tracking_id?: string;
+    }
+
+    let { log_lvl = 0, site_google_tracking_id = '' }: Props = $props();
     if (log_lvl) {
         console.log(`AE Analytics: site_google_tracking_id = `, site_google_tracking_id);
     }

src/lib/app_components/e_app_codemirror_v5.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run } from 'svelte/legacy';
+
     // This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
     // WARNING: This has not been fully updated to Svelte version 5. It is a work in progress.
     // *** Import Svelte version 5 specific
@@ -7,30 +9,49 @@
     import { onMount, onDestroy } from 'svelte';
     import { ensureCodeMirrorModules } from '../elements/codemirror_modules';
 
-    // Props
-    export let content: string = 'test test test test';
-    export let new_content: string = '';
+    
 
-    // export let language: Extension = markdown(); // javascript()
-    export let theme_mode: string = 'light'; // 'dark' | 'light'
-    export let extensions: any[] = []; // Changed to any[] because Extension type is not directly available here
+    
 
-    export let editable: boolean = true;
-    export let readonly: boolean = false;
 
-    export let placeholder: string = 'Start typing...';
 
-    export let show_line_numbers: boolean = false;
-    export let wrap_lines: boolean = true;
-    export let use_tab: boolean = true;
-    export let tab_size: number = 4;
-    let classes = '';
-    export { classes as class };
+    interface Props {
+        // Props
+        content?: string;
+        new_content?: string;
+        // export let language: Extension = markdown(); // javascript()
+        theme_mode?: string; // 'dark' | 'light'
+        extensions?: any[]; // Changed to any[] because Extension type is not directly available here
+        editable?: boolean;
+        readonly?: boolean;
+        placeholder?: string;
+        show_line_numbers?: boolean;
+        wrap_lines?: boolean;
+        use_tab?: boolean;
+        tab_size?: number;
+        class?: string;
+    }
 
-    let editor_element: HTMLDivElement;
-    let editorView: any; // Changed to any
+    let {
+        content = 'test test test test',
+        new_content = $bindable(''),
+        theme_mode = 'light',
+        extensions = [],
+        editable = true,
+        readonly = false,
+        placeholder = 'Start typing...',
+        show_line_numbers = false,
+        wrap_lines = true,
+        use_tab = true,
+        tab_size = 4,
+        class: classes = ''
+    }: Props = $props();
+    
 
-    let cm_modules: any; // To hold the dynamically loaded CodeMirror modules
+    let editor_element: HTMLDivElement = $state();
+    let editorView: any = $state(); // Changed to any
+
+    let cm_modules: any = $state(); // To hold the dynamically loaded CodeMirror modules
 
     async function initializeCodeMirror() {
         if (!browser) return;
@@ -108,14 +129,16 @@
     });
 
     // Update editor content when `content` prop changes
-    $: if (cm_modules && editorView && editorView.state.doc.toString() !== content) {
-        editorView.setState(
-            cm_modules.EditorState.create({
-                doc: content,
-                extensions: editor_extensions // Use the reactive extensions
-            })
-        );
-    }
+    run(() => {
+        if (cm_modules && editorView && editorView.state.doc.toString() !== content) {
+            editorView.setState(
+                cm_modules.EditorState.create({
+                    doc: content,
+                    extensions: editor_extensions // Use the reactive extensions
+                })
+            );
+        }
+    });
 </script>
 
 {#if browser}