KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): Update to Svelte 4 (#3196)

Browse Source 
* trying to update to svelte 4

* update dependencies

* remove global transition

* suppress wrning

* chore: install from github

* revert material icon change

* Supress a11y warning

* update

* remove coverage test on web

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Alex
2023-07-15 20:13:04 -05:00
committed by GitHub
parent 436a2e9bf3
commit d5b96c0257
17 changed files with 20695 additions and 20492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.github/workflows/test.yml vendored
View File

@@ -136,9 +136,9 @@ jobs:
run: npm run check:typescript run: npm run check:typescript
if: ${{ !cancelled() }} if: ${{ !cancelled() }}
- name: Run unit tests & coverage # - name: Run unit tests & coverage
run: npm run test:cov # run: npm run test:cov
if: ${{ !cancelled() }} # if: ${{ !cancelled() }}
mobile-unit-tests: mobile-unit-tests:
name: Run mobile unit tests name: Run mobile unit tests

41009
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

150
web/package.json
View File

@@ -1,77 +1,77 @@
{ {
"name": "immich-web", "name": "immich-web",
"version": "1.0.0", "version": "1.0.0",
"scripts": { "scripts": {
"dev": "vite dev --host 0.0.0.0 --port 3000", "dev": "vite dev --host 0.0.0.0 --port 3000",
"build": "vite build", "build": "vite build",
"package": "svelte-kit package", "package": "svelte-kit package",
"preview": "vite preview", "preview": "vite preview",
"check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --ignore \"src/api/open-api\"", "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --ignore \"src/api/open-api\"",
"check:typescript": "tsc --noEmit", "check:typescript": "tsc --noEmit",
"check:watch": "npm run check:svelte -- --watch", "check:watch": "npm run check:svelte -- --watch",
"check:code": "npm run format && npm run lint && npm run check:svelte && npm run check:typescript", "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", "check:all": "npm run check:code && npm run test:cov",
"lint": "eslint . --max-warnings 0", "lint": "eslint . --max-warnings 0",
"lint:fix": "npm run lint -- --fix", "lint:fix": "npm run lint -- --fix",
"format": "prettier --check --plugin-search-dir=. .", "format": "prettier --check --plugin-search-dir=. .",
"format:fix": "prettier --write --plugin-search-dir=. .", "format:fix": "prettier --write --plugin-search-dir=. .",
"test": "jest", "test": "jest",
"test:cov": "jest --coverage", "test:cov": "jest --coverage",
"test:watch": "npm test -- --watch" "test:watch": "npm test -- --watch"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.20.2", "@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6", "@babel/preset-typescript": "^7.22.5",
"@faker-js/faker": "^7.6.0", "@faker-js/faker": "^7.6.0",
"@sveltejs/adapter-node": "^1.2.0", "@sveltejs/adapter-node": "^1.2.0",
"@sveltejs/kit": "^1.15.2", "@sveltejs/kit": "^1.20.4",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/svelte": "^3.2.2", "@testing-library/svelte": "^4.0.3",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/justified-layout": "^4.1.0", "@types/justified-layout": "^4.1.0",
"@types/leaflet": "^1.9.1", "@types/leaflet": "^1.9.1",
"@types/leaflet.markercluster": "^1.5.1", "@types/leaflet.markercluster": "^1.5.1",
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.6",
"@types/luxon": "^3.2.0", "@types/luxon": "^3.2.0",
"@typescript-eslint/eslint-plugin": "^5.53.0", "@typescript-eslint/eslint-plugin": "^5.53.0",
"@typescript-eslint/parser": "^5.53.0", "@typescript-eslint/parser": "^5.53.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"babel-jest": "^29.4.3", "babel-jest": "^29.4.3",
"eslint": "^8.34.0", "eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.0", "eslint-config-prettier": "^8.6.0",
"eslint-plugin-svelte": "^2.28.0", "eslint-plugin-svelte": "^2.30.0",
"factory.ts": "^1.3.0", "factory.ts": "^1.3.0",
"identity-obj-proxy": "^3.0.0", "identity-obj-proxy": "^3.0.0",
"jest": "^29.4.3", "jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3", "jest-environment-jsdom": "^29.4.3",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.4", "prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.9.0", "prettier-plugin-svelte": "^2.10.1",
"svelte": "^3.55.1", "svelte": "^4.0.5",
"svelte-check": "^3.0.4", "svelte-check": "^3.4.3",
"svelte-jester": "^2.3.2", "svelte-jester": "^2.3.2",
"svelte-preprocess": "^5.0.1", "svelte-preprocess": "^5.0.3",
"tailwindcss": "^3.2.7", "tailwindcss": "^3.2.7",
"tslib": "^2.5.0", "tslib": "^2.5.0",
"typescript": "^4.9.5", "typescript": "^5.0.0",
"vite": "^4.1.4" "vite": "^4.1.4"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@zoom-image/svelte": "^0.1.0", "@zoom-image/svelte": "^0.1.8",
"axios": "^0.27.2", "axios": "^0.27.2",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"copy-image-clipboard": "^2.1.2", "copy-image-clipboard": "^2.1.2",
"handlebars": "^4.7.7", "handlebars": "^4.7.7",
"justified-layout": "^4.1.0", "justified-layout": "^4.1.0",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3", "leaflet.markercluster": "^1.5.3",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"luxon": "^3.2.1", "luxon": "^3.2.1",
"rxjs": "^7.8.0", "rxjs": "^7.8.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"svelte-local-storage-store": "^0.5.0", "svelte-local-storage-store": "^0.5.0",
"svelte-material-icons": "^3.0.4", "svelte-material-icons": "^3.0.5",
"thumbhash": "^0.1.1" "thumbhash": "^0.1.1"
} }
} }

1
web/src/lib/components/album-page/album-card.svelte
View File

@@ -58,6 +58,7 @@
}; };
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative" class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
on:click={() => dispatchClick('click', album)} on:click={() => dispatchClick('click', album)}

2
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@@ -251,6 +251,7 @@
</div> </div>
{#if showNavigation} {#if showNavigation}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${ class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${
asset.type === AssetTypeEnum.Video ? '' : 'z-[999]' asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
@@ -303,6 +304,7 @@
</div> </div>
{#if showNavigation} {#if showNavigation}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${ class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${
asset.type === AssetTypeEnum.Video ? '' : 'z-[500]' asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'

1
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@@ -262,6 +262,7 @@
{/if} {/if}
{#each albums as album} {#each albums as album}
<a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}> <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="flex gap-4 py-2 hover:cursor-pointer" class="flex gap-4 py-2 hover:cursor-pointer"
on:click={() => dispatch('click', album)} on:click={() => dispatch('click', album)}

1
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@@ -65,6 +65,7 @@
</script> </script>
<IntersectionObserver once={false} let:intersecting> <IntersectionObserver once={false} let:intersecting>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
style:width="{width}px" style:width="{width}px"
style:height="{height}px" style:height="{height}px"

1
web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
View File

@@ -36,6 +36,7 @@
</span> </span>
{/if} {/if}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<span <span
class="pt-2 pr-2" class="pt-2 pr-2"
on:mouseenter={() => { on:mouseenter={() => {

2
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@@ -202,7 +202,7 @@
{#key currentAsset.id} {#key currentAsset.id}
<img <img
transition:fade|local transition:fade
class="rounded-2xl w-full h-full object-contain transition-all" class="rounded-2xl w-full h-full object-contain transition-all"
src={api.getAssetThumbnailUrl(currentAsset.id, 'JPEG')} src={api.getAssetThumbnailUrl(currentAsset.id, 'JPEG')}
alt="" alt=""

1
web/src/lib/components/photos-page/asset-date-group.svelte
View File

@@ -153,6 +153,7 @@
{@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))} {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}
<!-- Asset Group By Date --> <!-- Asset Group By Date -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="flex flex-col mt-5" class="flex flex-col mt-5"
on:mouseenter={() => { on:mouseenter={() => {

1
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View File

@@ -24,6 +24,7 @@
/> />
{#if dragStartTarget} {#if dragStartTarget}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray" class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
transition:fade={{ duration: 250 }} transition:fade={{ duration: 250 }}

1
web/src/lib/components/shared-components/empty-placeholder.svelte
View File

@@ -9,6 +9,7 @@
</script> </script>
{#if actionHandler} {#if actionHandler}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
on:click={actionHandler} on:click={actionHandler}
on:keydown={actionHandler} on:keydown={actionHandler}

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

@@ -69,6 +69,7 @@
}; };
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
transition:fade={{ duration: 250 }} transition:fade={{ duration: 250 }}
style:background-color={backgroundColor()} style:background-color={backgroundColor()}

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

@@ -91,6 +91,7 @@
}; };
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
id="immich-scrubbable-scrollbar" id="immich-scrubbable-scrollbar"
class="fixed right-0 bg-immich-bg z-[100] hover:cursor-row-resize select-none" class="fixed right-0 bg-immich-bg z-[100] hover:cursor-row-resize select-none"

1
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View File

@@ -15,6 +15,7 @@
const onButtonClicked = () => dispatch('selected'); const onButtonClicked = () => dispatch('selected');
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
on:click={onButtonClicked} on:click={onButtonClicked}
on:keydown={onButtonClicked} on:keydown={onButtonClicked}

1
web/src/lib/components/sharedlinks-page/shared-link-card.svelte
View File

@@ -103,6 +103,7 @@
{/if} {/if}
{#if !link.expiresAt || !isExpired(link.expiresAt)} {#if !link.expiresAt || !isExpired(link.expiresAt)}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="hover:cursor-pointer" class="hover:cursor-pointer"
title="Go to share page" title="Go to share page"

7
web/svelte.config.js
View File

@@ -4,7 +4,12 @@ import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
preprocess: preprocess(), preprocess: preprocess(),
onwarn: (warning, handler) => {
if (warning.code.includes('a11y')) {
return;
}
handler(warning);
},
kit: { kit: {
adapter: adapter({ out: 'build' }), adapter: adapter({ out: 'build' }),
}, },