mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor svelte/legacy functions to svelte 5 syntax

Browse Source
This commit is contained in:
kwaroran
2024-10-23 21:03:34 +09:00
parent f078292843
commit 9add01cda2
24 changed files with 201 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/lib/ChatScreens/AdvancedChatEditor.svelte
View File

@@ -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">

4
src/lib/ChatScreens/AssetInput.svelte
View File

@@ -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++){

14
src/lib/ChatScreens/Chat.svelte
View File

@@ -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)
});

4
src/lib/ChatScreens/ChatScreen.svelte
View File

@@ -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

11
src/lib/ChatScreens/DefaultChatScreen.svelte
View File

@@ -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>

7
src/lib/ChatScreens/Suggestion.svelte
View File

@@ -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">

4
src/lib/ChatScreens/TransitionImage.svelte
View File

@@ -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)
});