Merge pull request #118 from Suwayomi/main

FF fix a readQuery structuredClone

src/lib/MountTitleAction.ts

@@ -5,9 +5,23 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 import { afterUpdate, onDestroy } from 'svelte';
-import { action as actionStore, title as titleStore, type ComponentWritable } from './simpleStores';
+import type { ComponentType, ComponentProps } from 'svelte';
+import { readonly, writable, type Writable } from 'svelte/store';
 
-export function AppBarData(title: string, action?: ComponentWritable<null>) {
+type actionStoreT<T extends ComponentType = ComponentType> = {
+	component: T;
+	props?: ComponentProps<InstanceType<T>>;
+};
+
+// i dont really like that i cant type this nicely, AppBarData is typed good though
+const actionStore: Writable<actionStoreT | null> = writable(null);
+
+const titleStore: Writable<string> = writable('loading...');
+
+export const action = readonly(actionStore);
+export const title = readonly(titleStore);
+
+export function AppBarData<T extends ComponentType>(title: string, action: actionStoreT<T>) {
 	afterUpdate(() => {
 		if (action) actionStore.set(action);
 		titleStore.set(title);

src/lib/simpleStores.ts

@@ -4,9 +4,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-import { get, writable, type Writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import { localStorageStore } from '@skeletonlabs/skeleton';
-import type { ComponentType } from 'svelte';
 import {
 	metas,
 	MetasDoc,
@@ -26,20 +25,10 @@ import { getObjectEntries, getObjectKeys, type TriState } from './util';
 import type { ApolloQueryResult } from '@apollo/client';
 import type { ToastStore } from './components/Toast/types';
 
-export const toastStore = writable<ToastStore | null>();
-
-export type ComponentWritable<T> =
-	| {
-			component: ComponentType;
-			props?: Record<string, unknown>;
-	  }
-	| T;
+export const toastStore = writable<ToastStore | null>(null);
 
 type Themes = (typeof presetConst)[number]['name'];
 
-export const title: Writable<string> = writable('loading...');
-export const action: Writable<ComponentWritable<null>> = writable(null);
-
 export enum ChapterTitle {
 	'Source Title' = 'Source Title',
 	'Chapter Number' = 'Chapter Number'
@@ -218,25 +207,25 @@ export const Meta = GlobalMeta();
 
 function MangaMetaUpdater(cache: ApolloCache<unknown>, key: string, value: string, id: number) {
 	const query = GetMangaDoc;
-	const { manga } = {
-		...cache.readQuery<GetMangaQuery>({
+	const mangaData = structuredClone(
+		cache.readQuery<GetMangaQuery>({
 			query,
 			variables: { id }
 		})
-	};
-	if (!manga) return;
+	);
+	if (!mangaData) return;
 
-	const updatedMeta = manga.meta.filter((e) => e.key !== key);
+	const updatedMeta = mangaData.manga.meta.filter((e) => e.key !== key);
 	updatedMeta.push({
 		key,
 		value
 	});
 
-	const updatedManga = { ...manga, meta: updatedMeta };
+	mangaData.manga.meta = updatedMeta;
 
 	cache.writeQuery({
 		query,
-		data: { manga: updatedManga },
+		data: mangaData,
 		variables: { id }
 	});
 }

src/routes/(app)/+layout.svelte

@@ -7,11 +7,11 @@
 -->
 
 <script lang="ts">
+	import { action, title } from '$lib/MountTitleAction';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import MainAppRail from '$lib/components/MainAppRail.svelte';
 	import MediaQuery from '$lib/components/MediaQuery.svelte';
 	import { screens } from '$lib/screens';
-	import { action, title } from '$lib/simpleStores';
 	import { AppBar, AppShell } from '@skeletonlabs/skeleton';
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
 

src/routes/(app)/browse/extensions/ExtensionCard.svelte

@@ -36,10 +36,12 @@
 	): void {
 		if (!data) return;
 		try {
-			const extensionsData = cache.readQuery<ExtensionsQuery>({
-				query: ExtensionsDoc,
-				variables: { isNsfw: $Meta.nsfw ? null : false }
-			});
+			const extensionsData = structuredClone(
+				cache.readQuery<ExtensionsQuery>({
+					query: ExtensionsDoc,
+					variables: { isNsfw: $Meta.nsfw ? null : false }
+				})
+			);
 			if (!extensionsData) throw new Error('failed to read extensions');
 			const { extensions } = extensionsData;
 
@@ -52,10 +54,12 @@
 				variables: { isNsfw: $Meta.nsfw ? null : false }
 			});
 		} catch {}
-		const sourcesData = cache.readQuery<SourcesQuery>({
-			query: SourcesDoc,
-			variables: { isNsfw: $Meta.nsfw ? null : false }
-		});
+		const sourcesData = structuredClone(
+			cache.readQuery<SourcesQuery>({
+				query: SourcesDoc,
+				variables: { isNsfw: $Meta.nsfw ? null : false }
+			})
+		);
 		if (!sourcesData) return;
 		const { sources } = sourcesData;
 

src/routes/(app)/browse/source/[sourceID]/Grid.svelte

@@ -7,7 +7,6 @@
 -->
 
 <script lang="ts">
-	import { getToastStore } from '$lib/components/Toast/stores';
 	import {
 		FetchSourceMangaType,
 		fetchSourceManga,
@@ -31,7 +30,6 @@
 	export let filters: InputMaybe<FilterChangeInput | FilterChangeInput[]> | undefined = undefined;
 
 	let sause = data.sause;
-	const toastStore = getToastStore();
 	const modalStore = getModalStore();
 
 	let page = 1;
@@ -79,10 +77,10 @@
 					all.hasNextPage = false;
 				}
 				mainerror = error;
-				errortoast(toastStore, 'failed to load page', error.message);
+				errortoast('failed to load page', error.message);
 				return;
 			}
-			errortoast(toastStore, 'failed to load page', JSON.stringify(error));
+			errortoast('failed to load page', JSON.stringify(error));
 		} finally {
 			isLoading = false;
 		}

src/routes/(app)/manga/[MangaID]/(manga)/+page.svelte

@@ -65,9 +65,6 @@
 			...$manga.data.manga,
 			...data.fetchManga.manga
 		};
-
-		console.log(magna, $manga.data.manga, data.fetchManga.manga);
-
 		cache.writeQuery({
 			query: GetMangaDoc,
 			variables: { id: magna.id },