feat: migration to Svelte 5

src/routes/core/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-    /** @type {import('./$types').PageData} */
-    export let data: any;
+    
     // console.log(`ae_core root +page.svelte data:`, data);
 
     // import { onMount } from 'svelte';
@@ -26,6 +25,12 @@
         slct,
         slct_trigger
     } from '$lib/stores/ae_stores';
+    interface Props {
+        /** @type {import('./$types').PageData} */
+        data: any;
+    }
+
+    let { data }: Props = $props();
     // import { events_loc, events_sess, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
     // import { events_func } from '$lib/ae_events_functions';
 
@@ -35,7 +40,7 @@
     let ae_acct = data[$slct.account_id];
     console.log(`ae_acct = `, ae_acct);
 
-    let person_id_random_li: string[] = [];
+    let person_id_random_li: string[] = $state([]);
 
     // let load_obj_li_results: Promise<any>|key_val;
     // let search_submit_results: Promise<any>|key_val;
@@ -46,7 +51,7 @@
 
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             console.log('Edit the POC person for the session.');
 
             // let params = {
@@ -110,7 +115,7 @@
 
     <button
         type="button"
-        on:click={async () => {
+        onclick={async () => {
             console.log('Add Person');
             if (
                 !confirm(
@@ -174,7 +179,7 @@
             <select
                 id="qry_limit__people"
                 bind:value={$ae_loc.person.qry_limit__people}
-                on:change={() => {
+                onchange={() => {
                     core_func
                         .load_ae_obj_li__person({
                             api_cfg: $ae_api,

src/routes/core/ae_comp__person_obj_tbl.svelte

@@ -18,14 +18,26 @@
     // import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
     // import { events_func } from '$lib/ae_events_functions';
 
-    // Exports
-    export let container_class_li: string | Array<string> = [];
-    export let person_id_random_li: Array<string> = [''];
-    export let allow_basic: boolean = false;
-    export let allow_moderator: boolean = false;
-    export let show_user_fields: boolean = false;
+    
 
-    export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+    interface Props {
+        // Exports
+        container_class_li?: string | Array<string>;
+        person_id_random_li?: Array<string>;
+        allow_basic?: boolean;
+        allow_moderator?: boolean;
+        show_user_fields?: boolean;
+        display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+    }
+
+    let {
+        container_class_li = [],
+        person_id_random_li = [''],
+        allow_basic = false,
+        allow_moderator = false,
+        show_user_fields = false,
+        display_mode = 'default'
+    }: Props = $props();
 
     // Variables
 

src/routes/core/person/[person_id]/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
     /** @type {import('./$types').PageData} */
     // import { page } from '$app/stores';
-    // console.log($page.params.slug);
-    export let data: any;
+    
 
     // Imports
     import type { key_val } from '$lib/stores/ae_stores';
@@ -28,6 +27,12 @@
     // import { events_func } from '$lib/ae_events_functions';
 
     import Person_view from './../../person_view.svelte';
+    interface Props {
+        // console.log($page.params.slug);
+        data: any;
+    }
+
+    let { data }: Props = $props();
 
     // Exports
     // export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
@@ -82,7 +87,7 @@
 
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     $ae_loc.person.show_content__person_page_help =
                         !$ae_loc.person.show_content__person_page_help;
                 }}
@@ -114,7 +119,7 @@
         <div>
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     $ae_loc.person.show_content__person_page_help =
                         !$ae_loc.person.show_content__person_page_help;
                 }}