From 9add01cda20acee42e9d09ae2dc98fcdb2551795 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Wed, 23 Oct 2024 21:03:34 +0900
Subject: [PATCH] Refactor svelte/legacy functions to svelte 5 syntax

---
 src/lib/ChatScreens/AdvancedChatEditor.svelte | 186 +++++++++---------
 src/lib/ChatScreens/AssetInput.svelte         |   4 +-
 src/lib/ChatScreens/Chat.svelte               |  14 +-
 src/lib/ChatScreens/ChatScreen.svelte         |   4 +-
 src/lib/ChatScreens/DefaultChatScreen.svelte  |  11 +-
 src/lib/ChatScreens/Suggestion.svelte         |   7 +-
 src/lib/ChatScreens/TransitionImage.svelte    |   4 +-
 src/lib/Others/AlertComp.svelte               |  39 ++--
 src/lib/Others/WelcomeRisu.svelte             |   5 +-
 src/lib/Setting/Pages/BotSettings.svelte      |  22 +--
 .../Setting/Pages/Module/ModuleMenu.svelte    |   6 +-
 src/lib/Setting/Pages/OtherBotSettings.svelte |   6 +-
 src/lib/Setting/Pages/PromptSettings.svelte   |  14 +-
 src/lib/SideBars/CharConfig.svelte            |  14 +-
 src/lib/SideBars/Sidebar.svelte               |   2 -
 src/lib/UI/GUI/MultiLangDisplay.svelte        |   7 +-
 src/lib/UI/GUI/MultiLangInput.svelte          |   4 +-
 src/lib/UI/GUI/TextAreaInput.svelte           |   6 +-
 src/lib/UI/ModelList.svelte                   |   1 -
 src/lib/UI/Realm/RealmHubIcon.svelte          |  17 +-
 src/lib/UI/Realm/RealmLicense.svelte          |   5 +-
 src/lib/UI/Realm/RealmMain.svelte             |  11 +-
 src/lib/UI/Realm/RealmPopUp.svelte            |  24 ++-
 src/lib/VisualNovel/VisualNovelMain.svelte    |   4 +-
 24 files changed, 201 insertions(+), 216 deletions(-)

diff --git a/src/lib/ChatScreens/AdvancedChatEditor.svelte b/src/lib/ChatScreens/AdvancedChatEditor.svelte
index 6f5ef3e6..7abffe4d 100644
--- a/src/lib/ChatScreens/AdvancedChatEditor.svelte
+++ b/src/lib/ChatScreens/AdvancedChatEditor.svelte
@@ -1,115 +1,113 @@
 <script>
-    import { run } from 'svelte/legacy';
-
-import { onMount, createEventDispatcher } from 'svelte';
-import { EditIcon, LanguagesIcon } from "lucide-svelte";
-import { DataBase } from "../../ts/storage/database";
-import CodeMirror from 'codemirror';
-import 'codemirror/lib/codemirror.css';
+    import { onMount, createEventDispatcher } from 'svelte';
+    import { EditIcon, LanguagesIcon } from "lucide-svelte";
+    import { DataBase } from "../../ts/storage/database";
+    import CodeMirror from 'codemirror';
+    import 'codemirror/lib/codemirror.css';
 
     /** @type {{value: any, translate: any}} */
     let { value = $bindable(), translate = $bindable() } = $props();
 
-const dispatch = createEventDispatcher();
-let toggleTranslate = $state(!$DataBase.useAutoTranslateInput);
-let velement = $state(), veditor = $state();
-let telement = $state(), teditor = $state();
-let _value = $state(value);
-let _translate = $state(translate);
+    const dispatch = createEventDispatcher();
+    let toggleTranslate = $state(!$DataBase.useAutoTranslateInput);
+    let velement = $state(), veditor = $state();
+    let telement = $state(), teditor = $state();
+    let _value = $state(value);
+    let _translate = $state(translate);
 
-const markdowns = [
-    {
-        regex: /["“”](.*?)(["“”]|$)/gs,
-        className: "ci-quote",
-    },
-    {
-        regex: /`([^`]+)`/gs,
-        className: "ci-backtick",
-    },
-    {
-        regex: /\*\*\*([^*]+)(\*\*\*|$)/gs,
-        className: "ci-asterisk3",
-    },
-    {
-        regex: /(?<!\*)\*\*([^*]+)(\*\*(?!\*)|$)/gs,
-        className: "ci-asterisk2",
-    },
-    {
-        regex: /(?<!\*)\*([^*]+)(\*(?!\*)|$)/gs,
-        className: "ci-asterisk1",
-    },
-];
+    const markdowns = [
+        {
+            regex: /["“”](.*?)(["“”]|$)/gs,
+            className: "ci-quote",
+        },
+        {
+            regex: /`([^`]+)`/gs,
+            className: "ci-backtick",
+        },
+        {
+            regex: /\*\*\*([^*]+)(\*\*\*|$)/gs,
+            className: "ci-asterisk3",
+        },
+        {
+            regex: /(?<!\*)\*\*([^*]+)(\*\*(?!\*)|$)/gs,
+            className: "ci-asterisk2",
+        },
+        {
+            regex: /(?<!\*)\*([^*]+)(\*(?!\*)|$)/gs,
+            className: "ci-asterisk1",
+        },
+    ];
 
-onMount(() => {
-    veditor = initEditor(velement, value);
-    teditor = initEditor(telement, translate);
-    veditor.on('change', (_, evt) => {
-        if(evt.origin != 'setValue' && !toggleTranslate) {
-            const input = veditor.getValue('\r\n');
-            if(input != value) {
-                value = _value = input;
-                dispatch('change', { translate: false, value: input });
+    onMount(() => {
+        veditor = initEditor(velement, value);
+        teditor = initEditor(telement, translate);
+        veditor.on('change', (_, evt) => {
+            if(evt.origin != 'setValue' && !toggleTranslate) {
+                const input = veditor.getValue('\r\n');
+                if(input != value) {
+                    value = _value = input;
+                    dispatch('change', { translate: false, value: input });
+                }
             }
-        }
-    });
-    teditor.on('change', (_, evt) => {
-        if(evt.origin != 'setValue' && toggleTranslate) {
-            const input = teditor.getValue('\r\n');
-            if(input != translate) {
-                translate = _translate = input;
-                dispatch('change', { translate: true, value: input });
+        });
+        teditor.on('change', (_, evt) => {
+            if(evt.origin != 'setValue' && toggleTranslate) {
+                const input = teditor.getValue('\r\n');
+                if(input != translate) {
+                    translate = _translate = input;
+                    dispatch('change', { translate: true, value: input });
+                }
             }
-        }
+        });
+        toggleTranslateText();
     });
-    toggleTranslateText();
-});
 
-run(() => {
+    $effect.pre(() => {
         if(value != _value) {
-        veditor.setValue(_value = value);
-    }
+            veditor.setValue(_value = value);
+        }
     });
-run(() => {
+    $effect.pre(() => {
         if(translate != _translate) {
-        teditor.setValue(_translate = translate);
-    }
+            teditor.setValue(_translate = translate);
+        }
     });
 
-function toggleTranslateText() {
-    toggleTranslate = !toggleTranslate;
-    if(toggleTranslate) {
-        velement.style.display = "none";
-        telement.style.display = null;
-        teditor.refresh();
-    } else {
-        velement.style.display = null;
-        telement.style.display = "none";
-        veditor.refresh();
-    }
-}
-
-function initEditor(element, value) {
-    const editor = CodeMirror(element, {
-        lineNumbers: true,
-        value: value,
-    });
-    editor.on('change', (sender) => updateMarks(sender.doc));
-    return editor;   
-}
-
-function updateMarks(doc) {
-    const text = doc.getValue();
-    for (const mark of doc.getAllMarks()) {
-        mark.clear();
-    }
-    for(const markdown of markdowns) {
-        for (const match of text.matchAll(markdown.regex)) {
-            const start = doc.posFromIndex(match.index);
-            const end = doc.posFromIndex(match.index + match[0].length);
-            doc.markText(start, end, { className: markdown.className });
+    function toggleTranslateText() {
+        toggleTranslate = !toggleTranslate;
+        if(toggleTranslate) {
+            velement.style.display = "none";
+            telement.style.display = null;
+            teditor.refresh();
+        } else {
+            velement.style.display = null;
+            telement.style.display = "none";
+            veditor.refresh();
+        }
+    }
+
+    function initEditor(element, value) {
+        const editor = CodeMirror(element, {
+            lineNumbers: true,
+            value: value,
+        });
+        editor.on('change', (sender) => updateMarks(sender.doc));
+        return editor;   
+    }
+
+    function updateMarks(doc) {
+        const text = doc.getValue();
+        for (const mark of doc.getAllMarks()) {
+            mark.clear();
+        }
+        for(const markdown of markdowns) {
+            for (const match of text.matchAll(markdown.regex)) {
+                const start = doc.posFromIndex(match.index);
+                const end = doc.posFromIndex(match.index + match[0].length);
+                doc.markText(start, end, { className: markdown.className });
+            }
         }
     }
-}
 </script>
 
 <div class="flex flex-1 items-end ml-2 mr-2">
diff --git a/src/lib/ChatScreens/AssetInput.svelte b/src/lib/ChatScreens/AssetInput.svelte
index 0ab0e7f9..7d751712 100644
--- a/src/lib/ChatScreens/AssetInput.svelte
+++ b/src/lib/ChatScreens/AssetInput.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
 	import { get } from 'svelte/store';
     import { FileAudioIcon, PlusIcon } from "lucide-svelte";
     import { DataBase, setDatabase, type character, type groupChat } from "src/ts/storage/database";
@@ -15,7 +13,7 @@
     let assetFileExtensions:string[] = $state([])
     let assetFilePath:string[] = $state([])
 
-    run(() => {
+    $effect.pre(() => {
         if(currentCharacter.type ==='character'){
             if(currentCharacter.additionalAssets){
                 for(let i = 0; i < currentCharacter.additionalAssets.length; i++){
diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index 8840f088..9ae07da3 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { ArrowLeft, ArrowRight, PencilIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon, Volume2Icon, BotIcon, ArrowLeftRightIcon, UserIcon } from "lucide-svelte";
     import { type CbsConditions, ParseMarkdown, postTranslationParse, type simpleCharacterArgument } from "../../ts/parser";
     import AutoresizeArea from "../UI/GUI/TextAreaResizable.svelte";
@@ -114,11 +112,13 @@
         }, timeout)
     }
 
-    let lastParsed = $state('')
+    // Since in svelte 5, @html isn
+    // svelte-ignore non_reactive_update
+    let lastParsed = ''
     let lastCharArg:string|simpleCharacterArgument = null
     let lastChatId = -10
     let blankMessage = $state((message === '{{none}}' || message === '{{blank}}' || message === '') && idx === -1)
-    run(() => {
+    $effect.pre(() => {
         blankMessage = (message === '{{none}}' || message === '{{blank}}' || message === '') && idx === -1
     });
     const markParsing = async (data: string, charArg?: string | simpleCharacterArgument, mode?: "normal" | "back", chatID?: number, translateText?:boolean, tries?:number) => {
@@ -172,13 +172,11 @@
             return await markParsing(data, charArg, mode, chatID, translateText, (tries ?? 0) + 1)
         }
         finally{
-            setTimeout(() => {
-                lastParsed = lastParsedQueue
-            }, 1)
+            lastParsed = lastParsedQueue
         }
     }
 
-    run(() => {
+    $effect.pre(() => {
         displaya(message)
     });
 
diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index 19f804fb..fa92f0a4 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { getCustomBackground, getEmotion } from "../../ts/util";
     import { DataBase } from "../../ts/storage/database";
     import { CharEmotion, ShowVN, selectedCharID } from "../../ts/stores";
@@ -24,7 +22,7 @@
         +   ($DataBase.textScreenBorder ? `border: 0.3rem solid ${$DataBase.textScreenBorder};` : '')
     let bgImg= $state('')
     let lastBg = $state('')
-    run(() => {
+    $effect.pre(() => {
         (async () =>{
             if($DataBase.customBackground !== lastBg){
                 lastBg = $DataBase.customBackground
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 45c957c5..7afd7d8f 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
 
 	import Suggestion from './Suggestion.svelte';
 	import AdvancedChatEditor from './AdvancedChatEditor.svelte';
@@ -27,7 +26,7 @@
     import { postChatFile } from 'src/ts/process/files/multisend';
     import { getInlayImage } from 'src/ts/process/files/image';
     import PlaygroundMenu from '../Playground/PlaygroundMenu.svelte';
-  import { ConnectionOpenStore } from 'src/ts/sync/multiuser';
+    import { ConnectionOpenStore } from 'src/ts/sync/multiuser';
 
     let messageInput:string = $state('')
     let messageInputTranslate:string = $state('')
@@ -293,9 +292,9 @@
         }
     }
 
-    run(() => {
-    updateInputSizeAll()
-  });
+    $effect.pre(() => {
+        updateInputSizeAll()
+    });
 
     async function updateInputTransateMessage(reverse: boolean) {
         if(isExpTranslator()){
@@ -396,7 +395,7 @@
         }
     }
 
-    run(() => {
+    $effect.pre(() => {
         currentCharacter = $DataBase.characters[$selectedCharID]
     });
 </script>
diff --git a/src/lib/ChatScreens/Suggestion.svelte b/src/lib/ChatScreens/Suggestion.svelte
index 0c362a4d..1175e636 100644
--- a/src/lib/ChatScreens/Suggestion.svelte
+++ b/src/lib/ChatScreens/Suggestion.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
 	import { requestChatData } from "src/ts/process/request";
     import { doingChat, type OpenAIChat } from "../../ts/process/index";
     import { DataBase, setDatabase, type character, type Message, type groupChat, type Database } from "../../ts/storage/database";
@@ -11,7 +9,6 @@
     import { language } from "src/lang";
     import { getUserName, replacePlaceholders } from "../../ts/util";
     import { onDestroy } from 'svelte';
-    import { processScript } from "src/ts/process/scripts";
     import { get } from "svelte/store";
     import { ParseMarkdown } from "src/ts/parser";
 
@@ -112,13 +109,13 @@
 
     onDestroy(unsub)
 
-    run(() => {
+    $effect.pre(() => {
         $selectedCharID
         //FIXME add selectedChatPage for optimize render
         chatPage = $DataBase.characters[$selectedCharID].chatPage
         updateSuggestions()
     });
-    run(() => {translateSuggest(toggleTranslate, suggestMessages)});
+    $effect.pre(() => {translateSuggest(toggleTranslate, suggestMessages)});
 </script>
 
 <div class="ml-4 flex flex-wrap">
diff --git a/src/lib/ChatScreens/TransitionImage.svelte b/src/lib/ChatScreens/TransitionImage.svelte
index 32d32367..6cd827cf 100644
--- a/src/lib/ChatScreens/TransitionImage.svelte
+++ b/src/lib/ChatScreens/TransitionImage.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     let currentSrc:string[] = $state([])
     let oldSrc:string[] = $state([]);
     let showOldImage = $state(false);
@@ -44,7 +42,7 @@
         }
     }
 
-    run(() => {
+    $effect.pre(() => {
         processSrc(src)
     });
 
diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index 9ece5471..317546cd 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run, preventDefault, stopPropagation } from 'svelte/legacy';
-
     import { alertStore, alertGenerationInfoStore } from "../../ts/alert";
     import { DataBase } from '../../ts/storage/database';
     import { getCharImage } from '../../ts/characters';
@@ -28,7 +26,7 @@
     let cardExportType2 = $state('')
     let cardLicense = $state('')
     let generationInfoMenuIndex = $state(0)
-    run(() => {
+    $effect.pre(() => {
         if(btn){
             btn.focus()
         }
@@ -315,12 +313,14 @@
             {:else if $alertStore.type === 'addchar'}
                 <div class="w-2xl flex flex-col max-w-full">
 
-                    <button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" onclick={stopPropagation(preventDefault((e) => {
+                    <button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" onclick={(e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
                         alertStore.set({
                             type: 'none',
                             msg: 'importFromRealm'
                         })
-                    }))}>
+                    }}>
                         <div class="flex flex-col justify-start items-start">
                             <span class="text-2xl font-bold">{language.importFromRealm}</span>
                             <span class="text-textcolor2">{language.importFromRealmDesc}</span>
@@ -329,12 +329,14 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={((e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
                         alertStore.set({
                             type: 'none',
                             msg: 'importCharacter'
                         })
-                    }))}>
+                    })}>
                         <div class="flex flex-col justify-start items-start">
                             <span>{language.importCharacter}</span>
                         </div>
@@ -342,12 +344,14 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={(e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
                         alertStore.set({
                             type: 'none',
                             msg: 'createfromScratch'
                         })
-                    }))}>
+                    }}>
                         <div class="flex flex-col justify-start items-start">
                             <span>{language.createfromScratch}</span>
                         </div>
@@ -355,12 +359,14 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={(e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
                         alertStore.set({
                             type: 'none',
                             msg: 'createGroup'
                         })
-                    }))}>
+                    }}>
                         <div class="flex flex-col justify-start items-start">
                             <span>{language.createGroup}</span>
                         </div>
@@ -368,12 +374,14 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={stopPropagation(preventDefault(() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={(e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
                         alertStore.set({
                             type: 'none',
                             msg: 'cancel'
                         })
-                    }))}>
+                    }}>
                         <div class="flex flex-col justify-start items-start">
                             <span>{language.cancel}</span>
                         </div>
@@ -442,7 +450,10 @@
 
 {:else if $alertStore.type === 'cardexport'}
     <div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" onclick={close}>
-        <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" onclick={stopPropagation(onclick)}>
+        <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" onclick={(e) => {
+            e.stopPropagation()
+            onclick(e)
+        }}>
             <h1 class="font-bold text-2xl w-full">
                 <span>
                     {language.shareExport}
diff --git a/src/lib/Others/WelcomeRisu.svelte b/src/lib/Others/WelcomeRisu.svelte
index 7154d71e..d1456333 100644
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
-
     import { ArrowBigLeftIcon, Send } from "lucide-svelte";
     import { changeLanguage, language } from "src/lang";
     import { DataBase, setPreset } from "src/ts/storage/database";
@@ -62,7 +59,7 @@
         }
     }
 
-    run(() => {
+    $effect.pre(() => {
         if(step === 10){
             setTimeout(() => {
                 $DataBase = setPreset($DataBase, prebuiltPresets.OAI2)
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 6795be2d..0f13fa00 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
 
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
@@ -26,8 +25,7 @@
     import ChatFormatSettings from "./ChatFormatSettings.svelte";
     import PromptSettings from "./PromptSettings.svelte";
     import { openPresetList } from "src/ts/stores";
-  import { selectSingleFile } from "src/ts/util";
-  import { isArray } from "lodash";
+    import { selectSingleFile } from "src/ts/util";
 
     let tokens = $state({
         mainPrompt: 0,
@@ -35,11 +33,11 @@
         globalNote: 0,
     })
 
-  interface Props {
-    goPromptTemplate?: any;
-  }
+    interface Props {
+        goPromptTemplate?: any;
+    }
 
-  let { goPromptTemplate = () => {} }: Props = $props();
+    let { goPromptTemplate = () => {} }: Props = $props();
 
     async function loadTokenize(){
         tokens.mainPrompt = await tokenizeAccurate($DataBase.mainPrompt, true)
@@ -47,11 +45,11 @@
         tokens.globalNote = await tokenizeAccurate($DataBase.globalNote, true)
     }
 
-    run(() => {
-    if($DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'mancer'){
-          $DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
-      }
-  });
+    $effect.pre(() => {
+        if($DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'mancer'){
+            $DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
+        }
+    });
 
     let submenu = $state($DataBase.useLegacyGUI ? -1 : 0)
 </script>
diff --git a/src/lib/Setting/Pages/Module/ModuleMenu.svelte b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
index adfac196..f2e7cf5f 100644
--- a/src/lib/Setting/Pages/Module/ModuleMenu.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
@@ -1,6 +1,4 @@
-<script type="ts" lang="ts">
-    import { run } from 'svelte/legacy';
-
+<script lang="ts">
     import { language } from "src/lang";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import LoreBookData from "src/lib/SideBars/LoreBook/LoreBookData.svelte";
@@ -28,7 +26,7 @@
     let assetFileExtensions:string[] = $state([])
     let assetFilePath:string[] = $state([])
 
-    run(() => {
+    $effect.pre(() => {
         if($DataBase.useAdditionalAssetsPreview){
             if(currentModule?.assets){
                 for(let i = 0; i < currentModule.assets.length; i++){
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index 1157faf7..ee62cf46 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
@@ -15,8 +13,8 @@
     import Button from "src/lib/UI/GUI/Button.svelte";
     import { getCharImage } from "src/ts/characters";
     import Arcodion from "src/lib/UI/Arcodion.svelte";
-  import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
-    run(() => {
+    import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
+    $effect.pre(() => {
         $DataBase.NAIImgConfig ??= {
             width: 512,
             height: 512,
diff --git a/src/lib/Setting/Pages/PromptSettings.svelte b/src/lib/Setting/Pages/PromptSettings.svelte
index 9fb17932..94d83142 100644
--- a/src/lib/Setting/Pages/PromptSettings.svelte
+++ b/src/lib/Setting/Pages/PromptSettings.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
     import { ArrowLeft, PlusIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import PromptDataItem from "src/lib/UI/PromptDataItem.svelte";
@@ -10,10 +8,10 @@
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
-  import Help from "src/lib/Others/Help.svelte";
-  import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
-  import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
-  import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+    import Help from "src/lib/Others/Help.svelte";
+    import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
+    import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
+    import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
 
     let sorted = 0
     let opened = 0
@@ -34,10 +32,10 @@
         extokens = await tokenizePreset(prest, false)
     }
 
-    run(() => {
+    $effect.pre(() => {
     warns = templateCheck($DataBase)
   });
-    run(() => {
+  $effect.pre(() => {
     executeTokenize($DataBase.promptTemplate)
   });
 </script>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index 077468e8..a191de42 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { language } from "../../lang";
     import { tokenizeAccurate } from "../../ts/tokenizer";
     import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database";
@@ -126,7 +124,7 @@
     let assetFilePath:string[] = $state([])
     let licensed = $state((currentChar.type === 'character') ? currentChar.data.license : '')
 
-    run(() => {
+    $effect.pre(() => {
         if(database.characters[$selectedCharID].chaId === currentChar.data.chaId){
             database.characters[$selectedCharID] = currentChar.data
         }
@@ -156,10 +154,10 @@
     onDestroy(unsub);
 
 
-    run(() => {
+    $effect.pre(() => {
         licensed = (currentChar.type === 'character') ? currentChar.data.license : ''
     });
-    run(() => {
+    $effect.pre(() => {
         if (currentChar.data.ttsMode === 'novelai' && (currentChar.data as character).naittsConfig === undefined) {
             (currentChar.data as character).naittsConfig = {
                 customvoice: false,
@@ -168,7 +166,7 @@
             };
         }
     });
-    run(() => {
+    $effect.pre(() => {
         if (currentChar.data.ttsMode === 'gptsovits' && (currentChar.data as character).gptSoVitsConfig === undefined) {
             (currentChar.data as character).gptSoVitsConfig = {
                 url: '',
@@ -199,7 +197,7 @@
         description:string
     }[] = $state([])
 
-    run(() => {
+    $effect.pre(() => {
         if (currentChar.data.ttsMode === 'fishspeech' && (currentChar.data as character).fishSpeechConfig === undefined) {
             (currentChar.data as character).fishSpeechConfig = {
                 model: {
@@ -213,7 +211,7 @@
         }
     });
 
-    run(() => {
+    $effect.pre(() => {
         if(currentChar.type === 'group' && ($CharConfigSubMenu === 4 || $CharConfigSubMenu === 5)){
             $CharConfigSubMenu = 0
         }
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 8ded45f0..4db06145 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
     import {
     CharEmotion,
     DynamicGUI,
diff --git a/src/lib/UI/GUI/MultiLangDisplay.svelte b/src/lib/UI/GUI/MultiLangDisplay.svelte
index 54a4d6f3..a75c55c5 100644
--- a/src/lib/UI/GUI/MultiLangDisplay.svelte
+++ b/src/lib/UI/GUI/MultiLangDisplay.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run, stopPropagation } from 'svelte/legacy';
-
     import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
     import { ParseMarkdown } from "src/ts/parser";
     import { parseMultilangString, toLangName } from "src/ts/util";
@@ -16,7 +14,7 @@
     if(valueObject["en"] === undefined){
         selectedLang = "xx"
     }
-    run(() => {
+    $effect.pre(() => {
         valueObject = parseMultilangString(value)
     });
 </script>
@@ -25,7 +23,8 @@
     <div class="flex flex-wrap max-w-fit p-1 gap-2">
         {#each Object.keys(valueObject) as lang}
             {#if lang !== 'xx' || Object.keys(valueObject).length === 1}
-                <button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} onclick={stopPropagation(() => {
+                <button class="bg-bgcolor py-2 rounded-lg px-4" class:ring-1={selectedLang === lang} onclick={((e) => {
+                    e.stopPropagation()
                     selectedLang = lang
                 })}>{toLangName(lang)}</button>
             {/if}
diff --git a/src/lib/UI/GUI/MultiLangInput.svelte b/src/lib/UI/GUI/MultiLangInput.svelte
index e4713cc9..55f7c214 100644
--- a/src/lib/UI/GUI/MultiLangInput.svelte
+++ b/src/lib/UI/GUI/MultiLangInput.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { encodeMultilangString, languageCodes, parseMultilangString, toLangName } from "src/ts/util";
     import TextAreaInput from "./TextAreaInput.svelte";
     let addingLang = $state(false)
@@ -33,7 +31,7 @@
         delete valueObject["xx"]
         updateValue()
     }
-    run(() => {
+    $effect.pre(() => {
         valueObject = parseMultilangString(value)
     });
 </script>
diff --git a/src/lib/UI/GUI/TextAreaInput.svelte b/src/lib/UI/GUI/TextAreaInput.svelte
index 33c5287c..ba51c4c1 100644
--- a/src/lib/UI/GUI/TextAreaInput.svelte
+++ b/src/lib/UI/GUI/TextAreaInput.svelte
@@ -114,8 +114,6 @@
     </div>
 </div>
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
     import { highlighter, getNewHighlightId, removeHighlight, AllCBS } from 'src/ts/gui/highlight'
     import { isMobile } from 'src/ts/storage/globalApi';
@@ -311,10 +309,10 @@
         } catch (error) {}
     }
         
-    run(() => {
+    $effect.pre(() => {
         optiValue = value
     });
-    run(() => {
+    $effect.pre(() => {
         highlightChange(value, highlightId)
     });
 
diff --git a/src/lib/UI/ModelList.svelte b/src/lib/UI/ModelList.svelte
index 8d1de61d..233e17a9 100644
--- a/src/lib/UI/ModelList.svelte
+++ b/src/lib/UI/ModelList.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { stopPropagation } from 'svelte/legacy';
     import { DataBase } from "src/ts/storage/database";
     import { getHordeModels } from "src/ts/horde/getModels";
     import Arcodion from "./Arcodion.svelte";
diff --git a/src/lib/UI/Realm/RealmHubIcon.svelte b/src/lib/UI/Realm/RealmHubIcon.svelte
index fd77c621..c678db6e 100644
--- a/src/lib/UI/Realm/RealmHubIcon.svelte
+++ b/src/lib/UI/Realm/RealmHubIcon.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { stopPropagation } from 'svelte/legacy';
-
     import { BookIcon, ImageIcon, SmileIcon } from "lucide-svelte";
     import { alertNormal } from "src/ts/alert";
     import { hubURL, type hubType } from "src/ts/characterCards";
@@ -35,13 +33,22 @@
         <div class="flex-grow"></div>
         <div class="flex flex-wrap w-full flex-row-reverse gap-1">
             {#if chara.hasEmotion}
-                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes emotion images")})}><SmileIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                    e.stopPropagation()
+                    alertNormal("This character includes emotion images")
+                })}><SmileIcon /></button>
             {/if}
             {#if chara.hasAsset}
-                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes additional assets")})}><ImageIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                    e.stopPropagation()
+                    alertNormal("This character includes additional assets")
+                })}><ImageIcon /></button>
             {/if}
             {#if chara.hasLore}
-                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes lorebook")})}><BookIcon /></button>
+                <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                    e.stopPropagation()
+                    alertNormal("This character includes lorebook")
+                })}><BookIcon /></button>
             {/if}
         </div>
     </div>
diff --git a/src/lib/UI/Realm/RealmLicense.svelte b/src/lib/UI/Realm/RealmLicense.svelte
index 3e69ecba..dea14089 100644
--- a/src/lib/UI/Realm/RealmLicense.svelte
+++ b/src/lib/UI/Realm/RealmLicense.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { stopPropagation } from 'svelte/legacy';
-
     import { CCLicenseData } from "src/ts/creation/license";
     import { tooltip } from "src/ts/gui/tooltip";
     import { openURL } from "src/ts/storage/globalApi";
@@ -15,7 +13,8 @@
 {#if Object.keys(CCLicenseData).includes(license)}
     <div class="w-full flex flex-row">
         <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={stopPropagation(() => {
+        <div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={((e) => {
+            e.stopPropagation();
             openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
         })}>
             <img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />
diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte
index 4d0df6fc..644d789a 100644
--- a/src/lib/UI/Realm/RealmMain.svelte
+++ b/src/lib/UI/Realm/RealmMain.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { stopPropagation } from 'svelte/legacy';
-
     import { downloadRisuHub, getRisuHub, hubAdditionalHTML, type hubType } from "src/ts/characterCards";
     import { ArrowLeft, ArrowRight, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
     import { alertInput } from "src/ts/alert";
@@ -9,9 +7,9 @@
     import TextInput from "../GUI/TextInput.svelte";
     import { MobileGUI, SizeStore } from "src/ts/stores";
     import { Capacitor } from "@capacitor/core";
-  import RealmPopUp from "./RealmPopUp.svelte";
-  import { googleBuild } from "src/ts/storage/globalApi";
-  import { split } from "lodash";
+    import RealmPopUp from "./RealmPopUp.svelte";
+    import { googleBuild } from "src/ts/storage/globalApi";
+    import { split } from "lodash";
 
     let openedData:null|hubType = $state(null)
 
@@ -182,7 +180,8 @@
                 </button>
             </h1>
             <div class=" mt-2 w-full border-t-2 border-t-bgcolor"></div>
-            <button class="w-full hover:bg-selected p-4" onclick={stopPropagation(async () => {
+            <button class="w-full hover:bg-selected p-4" onclick={(async (e) => {
+                e.stopPropagation()
                 menuOpen = false
                 const input = await alertInput('Input URL or ID')
                 if(input.startsWith("http")){
diff --git a/src/lib/UI/Realm/RealmPopUp.svelte b/src/lib/UI/Realm/RealmPopUp.svelte
index 7b083972..28b1433b 100644
--- a/src/lib/UI/Realm/RealmPopUp.svelte
+++ b/src/lib/UI/Realm/RealmPopUp.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-    import { stopPropagation } from 'svelte/legacy';
-
     import { BookIcon, FlagIcon, ImageIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
     import { hubURL, type hubType, downloadRisuHub, getRealmInfo } from "src/ts/characterCards";
-    import { parseMarkdownSafe } from "src/ts/parser";
     import { DataBase } from "src/ts/storage/database";
     import RealmLicense from "./RealmLicense.svelte";
     import MultiLangDisplay from "../GUI/MultiLangDisplay.svelte";
@@ -54,19 +51,26 @@
                 </span>
                 <div class="border-l-selected border-l ml-1 mr-1"></div>
                 {#if openedData.hasEmotion}
-                    <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes emotion images")})}><SmileIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                        alertNormal("This character includes emotion images")
+                    })}><SmileIcon /></button>
                 {/if}
                 {#if openedData.hasAsset}
-                    <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes additional Assets")})}><ImageIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                        alertNormal("This character includes additional Assets")
+                    })}><ImageIcon /></button>
                 {/if}
                 {#if openedData.hasLore}
-                    <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes lorebook")})}><BookIcon /></button>
+                    <button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={((e) => {
+                        alertNormal("This character includes lorebook")
+                    })}><BookIcon /></button>
                 {/if}
             </div>
 
         </div>
         <div class="flex flex-row-reverse gap-2">
-            <button class="text-textcolor2 hover:text-red-500" onclick={stopPropagation(async () => {
+            <button class="text-textcolor2 hover:text-red-500" onclick={(async (e) => {
+                e.stopPropagation()
                 const conf = await alertConfirm('Report this character?')
                 if(conf){
                     const report = await alertInput('Write a report text that would be sent to the admin (for copywrite issues, use email)')
@@ -83,7 +87,8 @@
                 <FlagIcon />
             </button>
             {#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
-                <button class="text-textcolor2 hover:text-red-500" onclick={stopPropagation(async () => {
+                <button class="text-textcolor2 hover:text-red-500" onclick={(async (e) => {
+                    e.stopPropagation()
                     const conf = await alertConfirm('Do you want to remove this character from Realm?')
                     if(conf){
                         const da = await fetch(hubURL + '/hub/remove', {
@@ -99,7 +104,8 @@
                     <TrashIcon />
                 </button>
             {/if}
-            <button class="text-textcolor2 hover:text-green-500" onclick={stopPropagation(async () => {
+            <button class="text-textcolor2 hover:text-green-500" onclick={(async (e) => {
+                e.stopPropagation()
                 await navigator.clipboard.writeText(`https://realm.risuai.net/character/${openedData.id}`)
                 alertNormal(language.clipboardSuccess)
             })}>
diff --git a/src/lib/VisualNovel/VisualNovelMain.svelte b/src/lib/VisualNovel/VisualNovelMain.svelte
index 86d095c5..857a9a8a 100644
--- a/src/lib/VisualNovel/VisualNovelMain.svelte
+++ b/src/lib/VisualNovel/VisualNovelMain.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { getCustomBackground, getEmotion } from "../../ts/util";
     import { DataBase } from "../../ts/storage/database";
     import BackgroundDom from "../ChatScreens/BackgroundDom.svelte";
@@ -12,7 +10,7 @@
     let forceRender:() => void = $state()
     let bgImg= $state('')
     let lastBg = $state('')
-    run(() => {
+    $effect.pre(() => {
         (async () =>{
             if($DataBase.customBackground !== lastBg){
                 lastBg = $DataBase.customBackground