chore(web): improve type checking (#2644)

* fix(web): use id instead of assetId

* chore(web): improve type checking

* fix test jobs

* improve type checking and resolve errors
This commit is contained in:
Michel Heusschen 2023-06-02 15:55:08 +02:00 committed by GitHub
parent 47673dd773
commit 9807f76aff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 149 additions and 129 deletions

View file

@ -96,7 +96,11 @@ jobs:
if: ${{ !cancelled() }}
- name: Run svelte checks
run: npm run check
run: npm run check:svelte
if: ${{ !cancelled() }}
- name: Run tsc
run: npm run check:typescript
if: ${{ !cancelled() }}
- name: Run unit tests & coverage

View file

@ -6,9 +6,10 @@
"build": "vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"check": "svelte-check --no-tsconfig --fail-on-warnings --ignore \"src/api/open-api\"",
"check:watch": "npm run check -- --watch",
"check:code": "npm run format && npm run lint && npm run check",
"check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --ignore \"src/api/open-api\"",
"check:typescript": "tsc --noEmit",
"check:watch": "npm run check:svelte -- --watch",
"check:code": "npm run format && npm run lint && npm run check:svelte && npm run check:typescript",
"check:all": "npm run check:code && npm run test:cov",
"lint": "eslint . --max-warnings 0",
"lint:fix": "npm run lint -- --fix",

View file

@ -1,6 +1,6 @@
import { AxiosError, AxiosPromise } from 'axios';
import type { AxiosError, AxiosPromise } from 'axios';
import { api } from './api';
import { UserResponseDto } from './open-api';
import type { UserResponseDto } from './open-api';
export type ApiError = AxiosError<{ message: string }>;

View file

@ -1,6 +1,6 @@
import type { Handle, HandleServerError } from '@sveltejs/kit';
import { AxiosError, AxiosResponse } from 'axios';
import { env } from '$env/dynamic/public';
import type { Handle, HandleServerError } from '@sveltejs/kit';
import type { AxiosError, AxiosResponse } from 'axios';
import { ImmichApi } from './api/api';
export const handle = (async ({ event, resolve }) => {

View file

@ -3,10 +3,11 @@
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
import type { ComponentType } from 'svelte';
import Icon from 'svelte-material-icons/DotsVertical.svelte';
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
import FaceRecognition from 'svelte-material-icons/FaceRecognition.svelte';
import FileJpgBox from 'svelte-material-icons/FileJpgBox.svelte';
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
@ -19,7 +20,6 @@
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
import JobTile from './job-tile.svelte';
import StorageMigrationDescription from './storage-migration-description.svelte';
import { AppRoute } from '$lib/constants';
export let jobs: AllJobStatusResponseDto;

View file

@ -1,11 +1,11 @@
<script lang="ts">
import { ServerStatsResponseDto } from '@api';
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
import Memory from 'svelte-material-icons/Memory.svelte';
import StatsCard from './stats-card.svelte';
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
import { locale } from '$lib/stores/preferences.store';
import type { ServerStatsResponseDto } from '@api';
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
import Memory from 'svelte-material-icons/Memory.svelte';
import PlayCircle from 'svelte-material-icons/PlayCircle.svelte';
import { asByteUnitString, getBytesWithUnit } from '../../../utils/byte-units';
import StatsCard from './stats-card.svelte';
export let stats: ServerStatsResponseDto = {
photos: 0,

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { SystemConfigTemplateStorageOptionDto } from '@api';
import type { SystemConfigTemplateStorageOptionDto } from '@api';
import * as luxon from 'luxon';
export let options: SystemConfigTemplateStorageOptionDto;

View file

@ -37,7 +37,7 @@ describe('AlbumCard component', () => {
])(
'shows album data without thumbnail with count $count - shared: $shared',
async ({ album, count, shared }) => {
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, user: album.owner });
const albumImgElement = sut.getByTestId('album-image');
const albumNameElement = sut.getByTestId('album-name');
@ -58,10 +58,10 @@ describe('AlbumCard component', () => {
);
it('shows album data and and loads the thumbnail image when available', async () => {
const thumbnailBlob = new Blob();
const thumbnailFile = new File([new Blob()], 'fileThumbnail');
const thumbnailUrl = 'blob:thumbnailUrlOne';
apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
data: thumbnailBlob,
data: thumbnailFile,
config: {},
headers: {},
status: 200,
@ -74,7 +74,7 @@ describe('AlbumCard component', () => {
shared: false,
albumName: 'some album name'
});
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, user: album.owner });
const albumImgElement = sut.getByTestId('album-image');
const albumNameElement = sut.getByTestId('album-name');
@ -92,7 +92,7 @@ describe('AlbumCard component', () => {
},
{ responseType: 'blob' }
);
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailBlob);
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
expect(albumNameElement).toHaveTextContent('some album name');
expect(albumDetailsElement).toHaveTextContent('0 items');
@ -102,7 +102,7 @@ describe('AlbumCard component', () => {
const album = Object.freeze(albumFactory.build({ albumThumbnailAssetId: null }));
beforeEach(async () => {
sut = render(AlbumCard, { album });
sut = render(AlbumCard, { album, user: album.owner });
const albumImgElement = sut.getByTestId('album-image');
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));

View file

@ -1,23 +1,11 @@
<script lang="ts" context="module">
type OnShowContextMenu = {
showalbumcontextmenu: OnShowContextMenuDetail;
};
type OnClick = {
click: OnClickDetail;
};
export type OnShowContextMenuDetail = { x: number; y: number };
export type OnClickDetail = AlbumResponseDto;
</script>
<script lang="ts">
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
import { locale } from '$lib/stores/preferences.store';
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
import { locale } from '$lib/stores/preferences.store';
import IconButton from '../elements/buttons/icon-button.svelte';
import type { OnClick, OnShowContextMenu } from './album-card';
export let album: AlbumResponseDto;
export let isSharingView = false;

View file

@ -0,0 +1,12 @@
import type { AlbumResponseDto } from '@api';
export type OnShowContextMenu = {
showalbumcontextmenu: OnShowContextMenuDetail;
};
export type OnClick = {
click: OnClickDetail;
};
export type OnShowContextMenuDetail = { x: number; y: number };
export type OnClickDetail = AlbumResponseDto;

View file

@ -1,18 +1,18 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { AssetResponseDto } from '@api';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import {
assetInteractionStore,
assetsInAlbumStoreState,
selectedAssets
} from '$lib/stores/asset-interaction.store';
import { locale } from '$lib/stores/preferences.store';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import type { AssetResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Button from '../elements/buttons/button.svelte';
import AssetGrid from '../photos-page/asset-grid.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
const dispatch = createEventDispatcher();

View file

@ -1,11 +1,11 @@
<script lang="ts">
import { AlbumResponseDto, AssetResponseDto } from '@api';
import type { AlbumResponseDto, AssetResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import Button from '../elements/buttons/button.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
export let album: AlbumResponseDto;

View file

@ -1,23 +1,21 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import { clickOutside } from '$lib/utils/click-outside';
import type { AssetResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import Heart from 'svelte-material-icons/Heart.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import Heart from 'svelte-material-icons/Heart.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import { page } from '$app/stores';
import { AssetResponseDto } from '../../../api';
export let asset: AssetResponseDto;
export let showCopyButton: boolean;

View file

@ -1,9 +1,9 @@
<script lang="ts">
import { APIKeyResponseDto } from '@api';
import type { APIKeyResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
export let apiKey: Partial<APIKeyResponseDto>;
export let title = 'API Key';

View file

@ -1,15 +1,6 @@
<script lang="ts" context="module">
export interface MapSettings {
allowDarkMode: boolean;
onlyFavorites: boolean;
relativeDate: string;
dateAfter: string;
dateBefore: string;
}
</script>
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import type { MapSettings } from '$lib/stores/preferences.store';
import { Duration } from 'luxon';
import { createEventDispatcher } from 'svelte';
import { fly } from 'svelte/transition';

View file

@ -1,10 +1,4 @@
<script lang="ts">
import { assetStore } from '$lib/stores/assets.store';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import { fly } from 'svelte/transition';
import { AssetResponseDto } from '@api';
import lodash from 'lodash-es';
import {
assetInteractionStore,
assetsInAlbumStoreState,
@ -12,9 +6,15 @@
selectedAssets,
selectedGroup
} from '$lib/stores/asset-interaction.store';
import { assetStore } from '$lib/stores/assets.store';
import { locale } from '$lib/stores/preferences.store';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import type { AssetResponseDto } from '@api';
import lodash from 'lodash-es';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import { flip } from 'svelte/animate';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
export let assets: AssetResponseDto[];
export let bucketDate: string;

View file

@ -1,22 +1,21 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { UserResponseDto } from '@api';
import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum } from '@api';
import AssetDateGroup from './asset-date-group.svelte';
import Portal from '../shared-components/portal/portal.svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import {
assetInteractionStore,
isViewingAssetStoreState,
viewingAssetStoreState
} from '$lib/stores/asset-interaction.store';
import { assetGridState, assetStore, loadingBucketState } from '$lib/stores/assets.store';
import type { UserResponseDto } from '@api';
import { AssetCountByTimeBucketResponseDto, AssetResponseDto, TimeGroupEnum, api } from '@api';
import { onDestroy, onMount } from 'svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
import Portal from '../shared-components/portal/portal.svelte';
import Scrollbar, {
OnScrollbarClickDetail,
OnScrollbarDragDetail
} from '../shared-components/scrollbar/scrollbar.svelte';
import AssetDateGroup from './asset-date-group.svelte';
export let user: UserResponseDto | undefined = undefined;
export let isAlbumSelectionMode = false;

View file

@ -17,7 +17,7 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { AssetResponseDto } from '@api';
import type { AssetResponseDto } from '@api';
import Close from 'svelte-material-icons/Close.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';

View file

@ -1,23 +1,23 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import BaseModal from '../base-modal.svelte';
import Link from 'svelte-material-icons/Link.svelte';
import {
AlbumResponseDto,
api,
AssetResponseDto,
SharedLinkResponseDto,
SharedLinkType
} from '@api';
import { notificationController, NotificationType } from '../notification/notification';
import { ImmichDropDownOption } from '../dropdown-button.svelte';
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
import DropdownButton from '../dropdown-button.svelte';
import SettingInputField, {
SettingInputFieldType
} from '$lib/components/admin-page/settings/setting-input-field.svelte';
import { handleError } from '$lib/utils/handle-error';
import SettingSwitch from '$lib/components/admin-page/settings/setting-switch.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { handleError } from '$lib/utils/handle-error';
import {
AlbumResponseDto,
AssetResponseDto,
SharedLinkResponseDto,
SharedLinkType,
api
} from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import Link from 'svelte-material-icons/Link.svelte';
import BaseModal from '../base-modal.svelte';
import type { ImmichDropDownOption } from '../dropdown-button.svelte';
import DropdownButton from '../dropdown-button.svelte';
import { NotificationType, notificationController } from '../notification/notification';
export let shareType: SharedLinkType;
export let sharedAssets: AssetResponseDto[] = [];

View file

@ -10,7 +10,7 @@
</script>
<script lang="ts">
import { MapMarkerResponseDto } from '@api';
import type { MapMarkerResponseDto } from '@api';
import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
import 'leaflet.markercluster';
import { createEventDispatcher, onDestroy, onMount } from 'svelte';

View file

@ -1,12 +1,12 @@
<script lang="ts">
import { UserResponseDto } from '@api';
import Button from '$lib/components/elements/buttons/button.svelte';
import { AppRoute } from '$lib/constants';
import type { UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { fade } from 'svelte/transition';
import UserAvatar from '../user-avatar.svelte';
import { AppRoute } from '$lib/constants';
export let user: UserResponseDto;

View file

@ -1,9 +1,9 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { asByteUnitString } from '$lib/utils/byte-units';
import { UploadAsset } from '$lib/models/upload-asset';
import ImmichLogo from './immich-logo.svelte';
import type { UploadAsset } from '$lib/models/upload-asset';
import { locale } from '$lib/stores/preferences.store';
import { asByteUnitString } from '$lib/utils/byte-units';
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
export let uploadAsset: UploadAsset;

View file

@ -1,6 +1,6 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { AuthDeviceResponseDto } from '@api';
import type { AuthDeviceResponseDto } from '@api';
import { DateTime, ToRelativeCalendarOptions } from 'luxon';
import { createEventDispatcher } from 'svelte';
import Android from 'svelte-material-icons/Android.svelte';

View file

@ -1,4 +1,4 @@
import { AssetResponseDto } from '@api';
import type { AssetResponseDto } from '@api';
export class AssetBucket {
/**

View file

@ -1,4 +1,4 @@
import { AssetResponseDto } from '@api';
import type { AssetResponseDto } from '@api';
import { writable } from 'svelte/store';
export const archivedAsset = writable<AssetResponseDto[]>([]);

View file

@ -1,5 +1,4 @@
import { browser } from '$app/environment';
import { MapSettings } from '$lib/components/map-page/map-settings-modal.svelte';
import { persisted } from 'svelte-local-storage-store';
const initialTheme =
@ -21,6 +20,14 @@ export const locale = persisted<string | undefined>('locale', undefined, {
}
});
export interface MapSettings {
allowDarkMode: boolean;
onlyFavorites: boolean;
relativeDate: string;
dateAfter: string;
dateBefore: string;
}
export const mapSettings = persisted<MapSettings>('map-settings', {
allowDarkMode: true,
onlyFavorites: false,

View file

@ -1,13 +1,13 @@
import { uploadAssetsStore } from '$lib/stores/upload';
import { addAssetsToAlbum, getFileMimeType, getFilenameExtension } from '$lib/utils/asset-utils';
import type { AssetFileUploadResponseDto } from '@api';
import axios from 'axios';
import { combineLatestAll, filter, firstValueFrom, from, mergeMap, of } from 'rxjs';
import type { UploadAsset } from '../models/upload-asset';
import {
notificationController,
NotificationType
} from './../components/shared-components/notification/notification';
import { uploadAssetsStore } from '$lib/stores/upload';
import type { UploadAsset } from '../models/upload-asset';
import { AssetFileUploadResponseDto } from '@api';
import { addAssetsToAlbum, getFileMimeType, getFilenameExtension } from '$lib/utils/asset-utils';
import { mergeMap, filter, firstValueFrom, from, of, combineLatestAll } from 'rxjs';
import axios from 'axios';
export const openFileUploadDialog = async (
albumId: string | undefined = undefined,

View file

@ -1,4 +1,4 @@
import { ApiError } from '../../api';
import type { ApiError } from '@api';
import {
notificationController,
NotificationType

View file

@ -1,10 +1,10 @@
import type { OnShowContextMenuDetail } from '$lib/components/album-page/album-card';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { AlbumResponseDto, api } from '@api';
import { OnShowContextMenuDetail } from '$lib/components/album-page/album-card.svelte';
import { writable, derived, get } from 'svelte/store';
import { derived, get, writable } from 'svelte/store';
type AlbumsProps = { albums: AlbumResponseDto[] };

View file

@ -12,7 +12,7 @@
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { AssetResponseDto } from '@api';
import type { AssetResponseDto } from '@api';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';

View file

@ -1,6 +1,7 @@
import { AlbumResponseDto } from '@api';
import { Sync } from 'factory.ts';
import type { AlbumResponseDto } from '@api';
import { faker } from '@faker-js/faker';
import { Sync } from 'factory.ts';
import { userFactory } from './user-factory';
export const albumFactory = Sync.makeFactory<AlbumResponseDto>({
albumName: Sync.each(() => faker.commerce.product()),
@ -8,8 +9,10 @@ export const albumFactory = Sync.makeFactory<AlbumResponseDto>({
assetCount: Sync.each((i) => i % 5),
assets: [],
createdAt: Sync.each(() => faker.date.past().toISOString()),
updatedAt: Sync.each(() => faker.date.past().toISOString()),
id: Sync.each(() => faker.datatype.uuid()),
ownerId: Sync.each(() => faker.datatype.uuid()),
owner: userFactory.build(),
shared: false,
sharedUsers: []
});

View file

@ -0,0 +1,18 @@
import type { UserResponseDto } from '@api';
import { faker } from '@faker-js/faker';
import { Sync } from 'factory.ts';
export const userFactory = Sync.makeFactory<UserResponseDto>({
id: Sync.each(() => faker.datatype.uuid()),
email: Sync.each(() => faker.internet.email()),
firstName: Sync.each(() => faker.name.firstName()),
lastName: Sync.each(() => faker.name.lastName()),
storageLabel: Sync.each(() => faker.random.alphaNumeric()),
profileImagePath: '',
shouldChangePassword: Sync.each(() => faker.datatype.boolean()),
isAdmin: true,
createdAt: Sync.each(() => faker.date.past().toISOString()),
deletedAt: null,
updatedAt: Sync.each(() => faker.date.past().toISOString()),
oauthId: ''
});

View file

@ -16,7 +16,6 @@
"sourceMap": true,
"strict": true,
"target": "es2020",
"importsNotUsedAsValues": "preserve",
"preserveValueImports": false,
"paths": {
"$lib": [