From dda52424a3e7a69a01bb745033185429c8d11941 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Thu, 22 Jan 2026 22:26:53 -0800 Subject: fix(notifications): Replace svelte-notifications with custom store for Svelte 5 --- package-lock.json | 21 ++++++++++----- package.json | 1 - src/lib/List/Anime/CompletedAnimeList.svelte | 4 +-- src/lib/List/Anime/DueAnimeList.svelte | 4 +-- src/lib/List/Anime/UpcomingAnimeList.svelte | 4 +-- src/lib/List/Manga/MangaListTemplate.svelte | 4 +-- src/lib/Notification/NotificationsProvider.svelte | 31 ++++++++++++++++++++++ src/lib/Notification/store.ts | 32 +++++++++++++++++++++++ src/lib/Settings/Categories/Debug.svelte | 4 +-- src/lib/Settings/Categories/RSSFeeds.svelte | 4 +-- src/lib/Settings/Categories/SettingSync.svelte | 4 +-- src/routes/+layout.svelte | 7 +++-- 12 files changed, 87 insertions(+), 33 deletions(-) create mode 100644 src/lib/Notification/NotificationsProvider.svelte create mode 100644 src/lib/Notification/store.ts diff --git a/package-lock.json b/package-lock.json index 20d62ed8..c974f5dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,6 @@ "sortablejs": "^1.15.2", "string-similarity": "^4.0.4", "svelte-i18n": "^4.0.0", - "svelte-notifications": "^0.9.98", "uuid": "^10.0.0", "wanakana": "^5.3.1", "web-push": "^3.6.7" @@ -741,6 +740,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", + "dev": true, "inBundle": true, "license": "MIT", "engines": { @@ -11038,6 +11038,19 @@ } } }, + "node_modules/svelte-check/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "extraneous": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/svelte-eslint-parser": { "version": "0.43.0", "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz", @@ -11117,12 +11130,6 @@ "svelte": "^3 || ^4 || ^5" } }, - "node_modules/svelte-notifications": { - "version": "0.9.98", - "resolved": "https://registry.npmjs.org/svelte-notifications/-/svelte-notifications-0.9.98.tgz", - "integrity": "sha512-w7/sqnQtEjM5uzjb3HfB50RE6KMuuWEQZxfBw86IykslHFJRcTuRvaUv503UMqY/LaioOu6w9mjJTO+ejiReSQ==", - "license": "MIT" - }, "node_modules/sveltekit-graphql": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/sveltekit-graphql/-/sveltekit-graphql-0.4.3.tgz", diff --git a/package.json b/package.json index 413a6abc..67815cfa 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,6 @@ "string-similarity": "^4.0.4", "svelte-i18n": "^4.0.0", "@humanspeak/svelte-markdown": "^0.8.14", - "svelte-notifications": "^0.9.98", "uuid": "^10.0.0", "wanakana": "^5.3.1", "web-push": "^3.6.7" diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte index 4245525d..8e914ef6 100644 --- a/src/lib/List/Anime/CompletedAnimeList.svelte +++ b/src/lib/List/Anime/CompletedAnimeList.svelte @@ -6,7 +6,7 @@ import lastPruneTimes from '$stores/lastPruneTimes'; import settings from '$stores/settings'; import AnimeList from './AnimeListTemplate.svelte'; - import { getNotificationsContext } from 'svelte-notifications'; + import { addNotification } from '$lib/Notification/store'; import locale from '$stores/locale'; import identity from '$stores/identity'; import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json'; @@ -19,8 +19,6 @@ }; export let dummy = false; export let disableFilter = false; - - const { addNotification } = getNotificationsContext(); let animeLists: Promise; let startTime: number; let endTime: number; diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte index 95be3b6c..2db8da65 100644 --- a/src/lib/List/Anime/DueAnimeList.svelte +++ b/src/lib/List/Anime/DueAnimeList.svelte @@ -8,13 +8,11 @@ import AnimeList from './AnimeListTemplate.svelte'; import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease'; import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match'; - import { getNotificationsContext } from 'svelte-notifications'; + import { addNotification } from '$lib/Notification/store'; import locale from '$stores/locale'; import identity from '$stores/identity'; export let user: AniListAuthorisation; - - const { addNotification } = getNotificationsContext(); let animeLists: Promise; let startTime: number; let endTime: number; diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte index 7b01af86..a0645320 100644 --- a/src/lib/List/Anime/UpcomingAnimeList.svelte +++ b/src/lib/List/Anime/UpcomingAnimeList.svelte @@ -7,15 +7,13 @@ import AnimeList from './AnimeListTemplate.svelte'; import settings from '$stores/settings'; import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease'; - import { getNotificationsContext } from 'svelte-notifications'; + import { addNotification } from '$lib/Notification/store'; import locale from '$stores/locale'; import identity from '$stores/identity'; import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match'; import revalidateAnime from '$stores/revalidateAnime'; export let user: AniListAuthorisation; - - const { addNotification } = getNotificationsContext(); let animeLists: Promise; let startTime: number; let endTime: number; diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte index b2d95dc5..83c491c8 100644 --- a/src/lib/List/Manga/MangaListTemplate.svelte +++ b/src/lib/List/Manga/MangaListTemplate.svelte @@ -13,7 +13,7 @@ import Error from '$lib/Error/RateLimited.svelte'; import CleanMangaList from './CleanMangaList.svelte'; import { incrementMediaProgress } from '$lib/Media/Anime/cache'; - import { getNotificationsContext } from 'svelte-notifications'; + import { addNotification } from '$lib/Notification/store'; import { options } from '$lib/Notification/options'; import Skeleton from '$lib/Loading/Skeleton.svelte'; import locale from '$stores/locale'; @@ -32,8 +32,6 @@ export let due: boolean; export let dummy = $settings.debugDummyLists || false; export let disableFilter = false; - - const { addNotification } = getNotificationsContext(); const authorised = privilegedUser($identity.id); let mangaLists: Promise; let startTime: number; diff --git a/src/lib/Notification/NotificationsProvider.svelte b/src/lib/Notification/NotificationsProvider.svelte new file mode 100644 index 00000000..964317e9 --- /dev/null +++ b/src/lib/Notification/NotificationsProvider.svelte @@ -0,0 +1,31 @@ + + +
+ {#each $notifications as notification (notification.id)} + handleRemove(notification.id)} /> + {/each} +
+ + + + diff --git a/src/lib/Notification/store.ts b/src/lib/Notification/store.ts new file mode 100644 index 00000000..0cb4cf96 --- /dev/null +++ b/src/lib/Notification/store.ts @@ -0,0 +1,32 @@ +import { writable } from 'svelte/store'; + +export interface Notification { + id: string; + heading: string; + description?: string; + duration?: number; +} + +function createNotificationStore() { + const { subscribe, update } = writable([]); + + return { + subscribe, + add: (notification: Omit) => { + const id = crypto.randomUUID(); + + update((notifications) => [...notifications, { ...notification, id }]); + + return id; + }, + remove: (id: string) => { + update((notifications) => notifications.filter((n) => n.id !== id)); + } + }; +} + +export const notifications = createNotificationStore(); + +export function addNotification(notification: Omit) { + return notifications.add(notification); +} diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte index 379b27d0..852db4f3 100644 --- a/src/lib/Settings/Categories/Debug.svelte +++ b/src/lib/Settings/Categories/Debug.svelte @@ -1,6 +1,6 @@