From 7e433d619420615df79e74fba102d8eea8effc28 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Thu, 24 Oct 2024 10:18:00 +0200
Subject: [PATCH] fix: script in app.html

---
 web/src/app.html                              | 31 +------------------
 web/src/hooks.server.ts                       | 12 ++++++-
 .../onboarding-page/onboarding-theme.svelte   |  2 +-
 .../shared-components/immich-logo.svelte      |  2 +-
 .../shared-components/map/map.svelte          |  2 +-
 .../shared-components/theme-button.svelte     |  2 +-
 web/src/lib/constants.ts                      |  6 ----
 web/src/lib/stores/preferences.store.ts       | 11 ++-----
 web/src/lib/utils.ts                          |  8 +++++
 web/src/lib/utils/fouc.ts                     | 12 +++++++
 web/src/lib/utils/theme.ts                    | 11 +++++++
 web/src/routes/+layout.svelte                 |  6 ++--
 12 files changed, 52 insertions(+), 53 deletions(-)
 create mode 100644 web/src/lib/utils/fouc.ts
 create mode 100644 web/src/lib/utils/theme.ts

diff --git a/web/src/app.html b/web/src/app.html
index 6fd02dc9f8..677891592e 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -66,37 +66,8 @@
         background-color: black;
       }
     </style>
-    <script>
-      /**
-       * Prevent FOUC on page load.
-       */
-      const colorThemeKeyName = 'color-theme';
 
-      let theme = localStorage.getItem(colorThemeKeyName);
-      if (!theme) {
-        theme = { value: 'light', system: true };
-      } else if (theme === 'dark' || theme === 'light') {
-        theme = { value: theme, system: false };
-        localStorage.setItem(colorThemeKeyName, JSON.stringify(theme));
-      } else {
-        theme = JSON.parse(theme);
-      }
-
-      let themeValue = theme.value;
-      if (theme.system) {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          themeValue = 'dark';
-        } else {
-          themeValue = 'light';
-        }
-      }
-
-      if (themeValue === 'light') {
-        document.documentElement.classList.remove('dark');
-      } else {
-        document.documentElement.classList.add('dark');
-      }
-    </script>
+    %app.fouc%
 
     <link rel="stylesheet" href="/custom.css" />
   </head>
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
index 1606f92796..9f8d22cd98 100644
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@@ -1,12 +1,22 @@
 import overpass from '$lib/assets/fonts/overpass/Overpass.ttf?url';
 import overpassMono from '$lib/assets/fonts/overpass/OverpassMono.ttf?url';
+import { transpileFile } from '$lib/utils';
+import fouc from '$lib/utils/fouc?raw';
+import theme from '$lib/utils/theme?raw';
 import type { Handle } from '@sveltejs/kit';
 
 // only used during the build to replace the variables from app.html
 export const handle = (async ({ event, resolve }) => {
   return resolve(event, {
     transformPageChunk: ({ html }) => {
-      return html.replace('%app.font%', overpass).replace('%app.monofont%', overpassMono);
+      const themePrepared = theme.replaceAll(/^export\s+/gm, '');
+      const foucPrepared = fouc.replaceAll(/^import.*$/gm, themePrepared);
+      const scriptFouc = `<script>${transpileFile(foucPrepared)}</script>`;
+
+      return html
+        .replace('%app.font%', overpass)
+        .replace('%app.monofont%', overpassMono)
+        .replace('%app.fouc%', scriptFouc);
     },
   });
 }) satisfies Handle;
diff --git a/web/src/lib/components/onboarding-page/onboarding-theme.svelte b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
index 975dbd1ec3..f16f9b8be2 100644
--- a/web/src/lib/components/onboarding-page/onboarding-theme.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
@@ -5,7 +5,7 @@
   import OnboardingCard from './onboarding-card.svelte';
   import { colorTheme } from '$lib/stores/preferences.store';
   import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import { Theme } from '$lib/constants';
+  import { Theme } from '$lib/utils/theme';
   import { t } from 'svelte-i18n';
 
   export let onDone: () => void;
diff --git a/web/src/lib/components/shared-components/immich-logo.svelte b/web/src/lib/components/shared-components/immich-logo.svelte
index 952960ef3f..cb77f40ca0 100644
--- a/web/src/lib/components/shared-components/immich-logo.svelte
+++ b/web/src/lib/components/shared-components/immich-logo.svelte
@@ -3,7 +3,7 @@
   import logoLightUrl from '$lib/assets/immich-logo-inline-light.svg';
   import logoNoText from '$lib/assets/immich-logo.svg';
   import { content as alternativeLogo } from '$lib/assets/immich-logo.json';
-  import { Theme } from '$lib/constants';
+  import { Theme } from '$lib/utils/theme';
   import { colorTheme } from '$lib/stores/preferences.store';
   import { DateTime } from 'luxon';
   import type { HTMLImgAttributes } from 'svelte/elements';
diff --git a/web/src/lib/components/shared-components/map/map.svelte b/web/src/lib/components/shared-components/map/map.svelte
index 60d7f0e755..036da41e1e 100644
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@@ -4,9 +4,9 @@
 
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { Theme } from '$lib/constants';
   import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
+  import { Theme } from '$lib/utils/theme';
   import { getServerConfig, type MapMarkerResponseDto } from '@immich/sdk';
   import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
   import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index 5a78a7005e..8fee1b2bed 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
   import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { Theme } from '$lib/constants';
   import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
+  import { Theme } from '$lib/utils/theme';
   import { t } from 'svelte-i18n';
 
   $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index aa1d976b6f..ad51935465 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -102,12 +102,6 @@ export const timeBeforeShowLoadingSpinner: number = 100;
 
 export const timeDebounceOnSearch: number = 300;
 
-// should be the same values as the ones in the app.html
-export enum Theme {
-  LIGHT = 'light',
-  DARK = 'dark',
-}
-
 export const fallbackLocale = {
   code: 'en-US',
   name: 'English (US)',
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index de80702b95..11ae70e56b 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -1,14 +1,10 @@
 import { browser } from '$app/environment';
-import { Theme, defaultLang } from '$lib/constants';
+import { defaultLang } from '$lib/constants';
 import { getPreferredLocale } from '$lib/utils/i18n';
+import { colorThemeKeyName, Theme, type ThemeSetting } from '$lib/utils/theme';
 import { persisted } from 'svelte-local-storage-store';
 import { get } from 'svelte/store';
 
-export interface ThemeSetting {
-  value: Theme;
-  system: boolean;
-}
-
 export const handleToggleTheme = () => {
   const theme = get(colorTheme);
   theme.value = theme.value === Theme.DARK ? Theme.LIGHT : Theme.DARK;
@@ -24,8 +20,7 @@ const initTheme = (): ThemeSetting => {
 
 const initialTheme = initTheme();
 
-// The 'color-theme' key is also used by app.html to prevent FOUC on page load.
-export const colorTheme = persisted<ThemeSetting>('color-theme', initialTheme, {
+export const colorTheme = persisted<ThemeSetting>(colorThemeKeyName, initialTheme, {
   serializer: {
     parse: (text: string): ThemeSetting => {
       const parsedText: ThemeSetting = JSON.parse(text);
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 113e31925b..d4e8f5e570 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -25,6 +25,7 @@ import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiHeadSyncOutline, md
 import { sortBy } from 'lodash-es';
 import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
+import { ModuleKind, transpileModule } from 'typescript';
 
 interface DownloadRequestOptions<T = unknown> {
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
@@ -337,3 +338,10 @@ export const suggestDuplicateByFileSize = (assets: AssetResponseDto[]): AssetRes
 
 // eslint-disable-next-line unicorn/prefer-code-point
 export const decodeBase64 = (data: string) => Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+
+export const transpileFile = (content: string) => {
+  const result = transpileModule(content, {
+    compilerOptions: { module: ModuleKind.ES2020, removeComments: true },
+  });
+  return result.outputText;
+};
diff --git a/web/src/lib/utils/fouc.ts b/web/src/lib/utils/fouc.ts
new file mode 100644
index 0000000000..96e9a0adf0
--- /dev/null
+++ b/web/src/lib/utils/fouc.ts
@@ -0,0 +1,12 @@
+/*
+ * we don't want to deal with imports so that import should be
+ * replaced by the actual content of the file before fouc.ts is transpiled
+ *
+ */
+import { colorThemeKeyName, Theme, type ThemeSetting } from '$lib/utils/theme';
+
+const storedTheme = localStorage.getItem(colorThemeKeyName);
+const theme: ThemeSetting = storedTheme ? JSON.parse(storedTheme) : { value: Theme.LIGHT, system: true };
+const themeValue = theme.system && window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : theme.value;
+
+document.documentElement.classList.toggle('dark', themeValue === Theme.DARK);
diff --git a/web/src/lib/utils/theme.ts b/web/src/lib/utils/theme.ts
new file mode 100644
index 0000000000..8f4a9db658
--- /dev/null
+++ b/web/src/lib/utils/theme.ts
@@ -0,0 +1,11 @@
+export interface ThemeSetting {
+  value: Theme;
+  system: boolean;
+}
+
+export enum Theme {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+export const colorThemeKeyName = 'color-theme';
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 8f7f372efd..cc2f821537 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -8,11 +8,9 @@
   import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
-  import { Theme } from '$lib/constants';
-  import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
-
+  import { Theme, type ThemeSetting } from '$lib/utils/theme';
+  import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
-
   import { user } from '$lib/stores/user.store';
   import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
   import { copyToClipboard, setKey } from '$lib/utils';