Initial testing with Svelte version 3.

package.json

@@ -18,38 +18,41 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.28.1",
-    "@skeletonlabs/skeleton": "^2.8.0",
+    "@skeletonlabs/skeleton": "^3.0.0-next.5",
+    "@skeletonlabs/skeleton-svelte": "^1.0.0-next.10",
     "@skeletonlabs/tw-plugin": "^0.4.0",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^5.0.0",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/eslint": "^9.0.0",
     "@types/node": "^22.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.24.0",
-    "flowbite": "^2.5.1",
+    "eslint-plugin-svelte": "^2.36.0-next",
+    "flowbite": "^2.5.2",
+    "flowbite-svelte": "^0.46.23",
+    "flowbite-svelte-icons": "^1.6.2",
     "highlight.js": "^11.10.0",
     "postcss": "^8.4.41",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.0",
+    "svelte": "^5.0.0-next",
     "svelte-check": "^4.0.0",
     "svelte-highlight": "^7.7.0",
     "tailwindcss": "^3.4.10",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "typescript-svelte-plugin": "^0.3.41",
-    "vite": "^5.1.0",
+    "vite": "^5.4.0",
     "vite-plugin-tailwind-purgecss": "^0.3.3",
-    "vitest": "^2.0.2"
+    "vitest": "^2.1.0"
   },
   "type": "module",
   "dependencies": {
@@ -58,8 +61,8 @@
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "dexie": "^4.0.1-beta.14",
-    "flowbite-svelte": "^0.46.16",
     "html5-qrcode": "^2.3.8",
-    "tailwind-merge": "^2.5.2"
+    "svelte-persisted-store": "^0.11.0",
+    "tailwind-merge": "^2.5.0"
   }
 }

src/lib/element_data_store.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-// import type { Writable } from 'svelte/store';
-// import { localStorageStore } from '@skeletonlabs/skeleton';
 
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores';
@@ -72,7 +70,6 @@ if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
     ae_ds_tmp = ds_code_obj;
 }
 
-//  Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj);
 // console.log(`ae_e_data_store cached: ${ds_code} = `, ae_ds_tmp);
 console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`);
 

src/routes/+layout.svelte

@@ -226,15 +226,6 @@ if (browser) {
     // console.log(`$ae_sess.site_appshell_header = `, $ae_sess.site_appshell_header);
 }
 
-// We want to loop through all of the data store (ds) key value pairs and set them to localStorage
-// $: if (ae_acct.ds) {
-//     console.log(`ae_ds__ data:`, ae_acct.ds)
-//     for (let [key, value] of Object.entries(ae_acct.ds)) {
-//         console.log(`ae_ds__ key: ${key}, value:`, value);
-//         localStorageStore(`ae_ds__${key}`, value);
-//     }
-// }
-
 
 
 onMount(() => {

src/routes/admin/+layout.svelte

@@ -4,8 +4,6 @@ export let data: any;
 
 import { goto } from '$app/navigation';
 import { onMount } from 'svelte';
-import type { Writable } from 'svelte/store';
-import { localStorageStore } from '@skeletonlabs/skeleton';
 
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';

src/routes/core/+layout.svelte

@@ -4,8 +4,6 @@ export let data: any;
 
 import { goto } from '$app/navigation';
 import { onMount } from 'svelte';
-// import type { Writable } from 'svelte/store';
-// import { localStorageStore } from '@skeletonlabs/skeleton';
 
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';

src/routes/core/+page.svelte

@@ -6,8 +6,6 @@ export let data: any;
 // import { onMount } from 'svelte';
 import { goto, invalidate, pushState, replaceState } from '$app/navigation';
 
-// import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
-
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
 // import { api } from '$lib/api';

src/routes/events_badges/+layout.svelte

@@ -4,8 +4,6 @@ export let data: any;
 
 import { goto } from '$app/navigation';
 import { onMount } from 'svelte';
-import type { Writable } from 'svelte/store';
-import { localStorageStore } from '@skeletonlabs/skeleton';
 
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { fade } from 'svelte/transition';
-import Editor from '@tinymce/tinymce-svelte';
+// import {Tipex} from "@friendofsvelte/tipex";
+// import "@friendofsvelte/tipex/styles/Tipex.css";
+// import "@friendofsvelte/tipex/styles/ProseMirror.css";
+// import "@friendofsvelte/tipex/styles/Controls.css";
+// import "@friendofsvelte/tipex/styles/EditLink.css";
+// import "@friendofsvelte/tipex/styles/CodeBlock.css";
 
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api';
@@ -625,12 +630,12 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
         </label>
 
-        <Editor
-            id="description"
-            bind:value={$idaa_slct.event_obj.description}
-            licenseKey="gpl"
-            license_key="gpl"
-            ></Editor>
+        <!-- <Tipex
+            htmlContent={$idaa_slct.event_obj.description}
+            floatingMenu
+            style="margin-top: 1rem; margin-bottom: 0;"
+            className="h-[70vh] border border-neutral-200"
+            /> -->
 
         <div>
             <label class="">

src/routes/sponsorships/+layout.svelte

@@ -3,7 +3,6 @@
 export let data: any;
 
 import { onMount } from 'svelte';
-import { localStorageStore } from '@skeletonlabs/skeleton';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
@@ -28,14 +27,6 @@ $ae_loc.mod.sponsorships.level_guest_max_li = {
 // Setting the sponsorship_cfg_obj here seems to be important. It does not behave correctly if you navigate from the main (root) page for the site. The sponsorship level drop down is missing (probably more). - 2024-04-01
 $slct.sponsorship_cfg_obj = ae_acct.slct.sponsorship_cfg_obj;
 
-// We want to loop through all of the data store (ds) key value pairs and set them to localStorage
-// if (ae_acct.ds) {
-//     for (let [key, value] of Object.entries(ae_acct.ds)) {
-//         console.log(`ae_ds__ key: ${key}, value:`, value);
-//         localStorageStore(`ae_ds__${key}`, value);
-//     }
-// }
-
 
 onMount(() => {
 	// console.log($slct.sponsorship_cfg_obj);