public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-29 14:39:48 +09:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

chore: svelte 5 🎉 (#13738)

Browse Source 
chore: svelte 5

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
This commit is contained in:
Daniel Dietzler
2024-11-02 16:49:07 +01:00
committed by GitHub
parent fed882a28a
commit eadcbd52fb
61 changed files with 287 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
View File

@@ -79,6 +79,8 @@ describe('NotificationCard component', () => {
});
expect(sut.getByTestId('title')).toHaveTextContent('info');
expect(sut.getByTestId('message').innerHTML).toEqual('Notification <b>message</b> with <a href="link">link</a>');
expect(sut.getByTestId('message').innerHTML.replaceAll('<!---->', '')).toEqual(
'Notification <b>message</b> with <a href="link">link</a>',
);
});
});

8
web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
View File

@@ -1,3 +1,4 @@
import { getAnimateMock } from '$lib/__mocks__/animate.mock';
import '@testing-library/jest-dom';
import { render, waitFor, type RenderResult } from '@testing-library/svelte';
import { get } from 'svelte/store';
@@ -10,10 +11,7 @@ function _getNotificationListElement(sut: RenderResult<NotificationList>): HTMLA
describe('NotificationList component', () => {
beforeAll(() => {
// https://testing-library.com/docs/svelte-testing-library/faq#why-arent-transition-events-running
vi.stubGlobal('requestAnimationFrame', (fn: FrameRequestCallback) => {
setTimeout(() => fn(Date.now()), 16);
});
Element.prototype.animate = getAnimateMock();
});
afterAll(() => {
@@ -21,7 +19,7 @@ describe('NotificationList component', () => {
});
it('shows a notification when added and closes it automatically after the delay timeout', async () => {
const sut: RenderResult<NotificationList> = render(NotificationList);
const sut: RenderResult<NotificationList> = render(NotificationList, { intro: false });
const status = await sut.findAllByRole('status');
expect(status).toHaveLength(1);

1
web/src/lib/components/shared-components/notification/notification-card.svelte
View File

@@ -15,6 +15,7 @@
export let notification: Notification | ComponentNotification;
// svelte-ignore reactive_declaration_non_reactive_property
$: icon = notification.type === NotificationType.Error ? mdiCloseCircleOutline : mdiInformationOutline;
$: hoverStyle = notification.action.type === 'discard' ? 'hover:cursor-pointer' : '';

21
web/src/lib/components/shared-components/notification/notification.ts
View File

@@ -1,4 +1,4 @@
import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';
import type { Component as ComponentType } from 'svelte';
import { writable } from 'svelte/store';
export enum NotificationType {
@@ -28,27 +28,26 @@ type NoopAction = { type: 'noop' };
export type NotificationAction = DiscardAction | NoopAction;
type Component<T extends ComponentType> = {
type: T;
props: ComponentProps<InstanceType<T>>;
type Props = Record<string, unknown>;
type Component<T extends Props> = {
type: ComponentType<T>;
props: T;
};
type BaseNotificationOptions<T, R extends keyof T> = Partial<Omit<T, 'id'>> & Pick<T, R>;
export type NotificationOptions = BaseNotificationOptions<Notification, 'message'>;
export type ComponentNotificationOptions<T extends ComponentType> = BaseNotificationOptions<
export type ComponentNotificationOptions<T extends Props> = BaseNotificationOptions<
ComponentNotification<T>,
'component'
>;
export type ComponentNotification<T extends ComponentType = ComponentType<SvelteComponent>> = Omit<
Notification,
'message'
> & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type ComponentNotification<T extends Props = any> = Omit<Notification, 'message'> & {
component: Component<T>;
};
export const isComponentNotification = <T extends ComponentType>(
export const isComponentNotification = <T extends Props>(
notification: Notification | ComponentNotification<T>,
): notification is ComponentNotification<T> => {
return 'component' in notification;
@@ -58,7 +57,7 @@ function createNotificationList() {
const notificationList = writable<(Notification | ComponentNotification)[]>([]);
let count = 1;
const show = <T>(options: T extends ComponentType ? ComponentNotificationOptions<T> : NotificationOptions) => {
const show = <T>(options: T extends Props ? ComponentNotificationOptions<T> : NotificationOptions) => {
notificationList.update((currentList) => {
currentList.push({
id: count++,