helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
61 changed files with 287 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/lib/components/shared-components/__test__/number-range-input.spec.ts
View file

@ -1,5 +1,5 @@
import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
import { act, render, type RenderResult } from '@testing-library/svelte';
import { render, type RenderResult } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
describe('NumberRangeInput component', () => {
@ -8,13 +8,18 @@ describe('NumberRangeInput component', () => {
let input: HTMLInputElement;
beforeEach(() => {
sut = render(NumberRangeInput, { id: '', min: -90, max: 90, onInput: () => {} });
sut = render(NumberRangeInput, {
id: '',
min: -90,
max: 90,
onInput: () => {},
});
input = sut.getByRole('spinbutton') as HTMLInputElement;
});
it('updates value', async () => {
expect(input.value).toBe('');
await act(() => sut.component.$set({ value: 10 }));
await sut.rerender({ value: 10 });
expect(input.value).toBe('10');
});

8
web/src/lib/components/shared-components/album-selection-modal.svelte
View file

@ -51,12 +51,12 @@
{#if loading}
{#each { length: 3 } as _}
<div class="flex animate-pulse gap-4 px-6 py-2">
<div class="h-12 w-12 rounded-xl bg-slate-200" />
<div class="h-12 w-12 rounded-xl bg-slate-200"></div>
<div class="flex flex-col items-start justify-center gap-2">
<span class="h-4 w-36 animate-pulse bg-slate-200" />
<span class="h-4 w-36 animate-pulse bg-slate-200"></span>
<div class="flex animate-pulse gap-1">
<span class="h-3 w-8 bg-slate-200" />
<span class="h-3 w-20 bg-slate-200" />
<span class="h-3 w-8 bg-slate-200"></span>
<span class="h-3 w-20 bg-slate-200"></span>
</div>
</div>
</div>

1
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View file

@ -52,6 +52,7 @@
})),
];
// svelte-ignore reactive_declaration_non_reactive_property
$: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
$: {
if (!showMetadata) {

1
web/src/lib/components/shared-components/map/map.svelte
View file

@ -57,6 +57,7 @@
let map: maplibregl.Map;
let marker: maplibregl.Marker | null = null;
// svelte-ignore reactive_declaration_non_reactive_property
$: style = (async () => {
const config = await getServerConfig();
const theme = $mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT;

2
web/src/lib/components/shared-components/navigation-loading-bar.svelte
View file

@ -27,6 +27,6 @@
{#if showing}
<div class="absolute left-0 top-0 z-[999999999] h-[3px] w-screen bg-white">
<span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`} />
<span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`}></span>
</div>
{/if}

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++,

2
web/src/lib/components/shared-components/password-field.svelte
View file

@ -6,7 +6,7 @@
interface $$Props extends HTMLInputAttributes {
password: string;
autocomplete: string;
autocomplete: AutoFill;
required?: boolean;
onInput?: (value: string) => void;
}

2
web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
View file

@ -86,5 +86,5 @@
</script>
{#if !hidden}
<span class="absolute left-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`} />
<span class="absolute left-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`}></span>
{/if}

2
web/src/lib/components/shared-components/purchasing/purchase-content.svelte
View file

@ -50,7 +50,7 @@
<p>
{$t('purchase_panel_info_2')}
</p>
<div />
<div></div>
</div>
{/if}

4
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View file

@ -257,7 +257,7 @@
{/if}
<div id="lead-in" class="relative" style:height={relativeTopOffset + 'px'} data-label={segments.at(0)?.dateFormatted}>
{#if relativeTopOffset > 6}
<div class="absolute right-[0.75rem] h-[4px] w-[4px] rounded-full bg-gray-300" />
<div class="absolute right-[0.75rem] h-[4px] w-[4px] rounded-full bg-gray-300"></div>
{/if}
</div>
<!-- Time Segment -->
@ -282,7 +282,7 @@
<div
aria-label={segment.dateFormatted + ' ' + segment.count}
class="absolute right-[0.75rem] bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"
/>
></div>
{/if}
</div>
{/each}

2
web/src/lib/components/shared-components/settings/setting-input-field.svelte
View file

@ -28,7 +28,7 @@
export let disabled = false;
export let isEdited = false;
export let autofocus = false;
export let passwordAutocomplete: string = 'current-password';
export let passwordAutocomplete: AutoFill = 'current-password';
let input: HTMLInputElement;

2
web/src/lib/components/shared-components/settings/setting-textarea.svelte
View file

@ -50,5 +50,5 @@
{value}
on:input={handleInput}
{disabled}
/>
></textarea>
</div>

4
web/src/lib/components/shared-components/side-bar/server-status.svelte
View file

@ -38,12 +38,12 @@
>
{#if $connected}
<div class="flex gap-2 place-items-center place-content-center">
<div class="w-[7px] h-[7px] bg-green-500 rounded-full" />
<div class="w-[7px] h-[7px] bg-green-500 rounded-full"></div>
<p class="dark:text-immich-gray">{$t('server_online')}</p>
</div>
{:else}
<div class="flex gap-2 place-items-center place-content-center">
<div class="w-[7px] h-[7px] bg-red-500 rounded-full" />
<div class="w-[7px] h-[7px] bg-red-500 rounded-full"></div>
<p class="text-red-500">{$t('server_offline')}</p>
</div>
{/if}

2
web/src/lib/components/shared-components/side-bar/storage-space.svelte
View file

@ -63,7 +63,7 @@
</p>
<div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%" />
<div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
</div>
{:else}
<div class="mt-2">

3
web/src/lib/components/shared-components/theme-button.svelte
View file

@ -5,8 +5,11 @@
import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
import { t } from 'svelte-i18n';
// svelte-ignore reactive_declaration_non_reactive_property
$: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
// svelte-ignore reactive_declaration_non_reactive_property
$: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
// svelte-ignore reactive_declaration_non_reactive_property
$: isDark = $colorTheme.value === Theme.DARK;
export let padding: Padding = '3';

2
web/src/lib/components/shared-components/upload-asset-preview.svelte
View file

@ -92,7 +92,7 @@
{#if uploadAsset.state === UploadState.STARTED}
<div class="text-black relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 dark:bg-immich-dark-gray">
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
<div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
<p class="absolute top-0 h-full w-full text-center text-[10px]">
{#if uploadAsset.message}
{uploadAsset.message}