From b2e8ffaf7add1baa4a6755888a5f476df734976c Mon Sep 17 00:00:00 2001
From: Christoph Stockinger <christoph@morethings.digital>
Date: Tue, 25 Feb 2025 21:28:25 +0100
Subject: [PATCH 1/6] Move to custom declariton file for tsconfig

---
 resources/js/app.ts          | 13 -------------
 resources/js/types/vite.d.ts | 11 +++++++++++
 2 files changed, 11 insertions(+), 13 deletions(-)
 create mode 100644 resources/js/types/vite.d.ts

diff --git a/resources/js/app.ts b/resources/js/app.ts
index a8496e2..be73c27 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -7,19 +7,6 @@ import { createApp, h } from 'vue';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import { initializeTheme } from './composables/useAppearance';
 
-// Extend ImportMeta interface for Vite...
-declare module 'vite/client' {
-    interface ImportMetaEnv {
-        readonly VITE_APP_NAME: string;
-        [key: string]: string | boolean | undefined;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-        readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
-    }
-}
-
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
diff --git a/resources/js/types/vite.d.ts b/resources/js/types/vite.d.ts
new file mode 100644
index 0000000..09cdd83
--- /dev/null
+++ b/resources/js/types/vite.d.ts
@@ -0,0 +1,11 @@
+declare module 'vite/client' {
+    interface ImportMetaEnv {
+        readonly VITE_APP_NAME: string;
+        [key: string]: string | boolean | undefined;
+    }
+
+    interface ImportMeta {
+        readonly env: ImportMetaEnv;
+        readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
+    }
+}

From e0ed5a0289da8f6d52e74b67f05dccf3fddfcbd4 Mon Sep 17 00:00:00 2001
From: Christoph Stockinger <christoph@morethings.digital>
Date: Tue, 25 Feb 2025 21:29:25 +0100
Subject: [PATCH 2/6] Modify tsconfig

---
 tsconfig.json | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index b5df0b3..87a26af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,9 +40,7 @@
         // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
         // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
         "types": [
-            "vite/client",
-            "vue/tsx",
-            "./resources/js/types"
+            "vite/client"
         ] /* Specify type package names to be included without being referenced in a source file. */,
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
         // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
@@ -119,5 +117,11 @@
         // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
         "skipLibCheck": true /* Skip type checking all .d.ts files. */
     },
-    "include": ["resources/js/**/*.ts", "resources/js/**/*.d.ts", "resources/js/**/*.tsx", "resources/js/**/*.vue"]
+    "include": [
+        "resources/js/**/*.ts",
+        "resources/js/**/*.d.ts",
+        "resources/js/**/*.tsx",
+        "resources/js/**/*.vue",
+        "node_modules/vite/client.d.ts"
+    ]
 }

From c4671671260056c6cd95719c52ed83e395e501f8 Mon Sep 17 00:00:00 2001
From: Christoph Stockinger <christoph@morethings.digital>
Date: Tue, 25 Feb 2025 21:29:45 +0100
Subject: [PATCH 3/6] Fix typescript build error

---
 resources/js/components/AppHeader.vue         |  4 ++--
 resources/js/components/AppSidebarHeader.vue  |  2 +-
 resources/js/components/TextLink.vue          |  9 +++------
 resources/js/components/UserInfo.vue          |  8 ++------
 resources/js/layouts/auth/AuthSplitLayout.vue |  5 +++--
 resources/js/pages/Welcome.vue                | 10 +++++++++-
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 3248c48..5cf6e29 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -16,7 +16,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/co
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { getInitials } from '@/composables/useInitials';
-import type { BreadcrumbItem, NavItem } from '@/types';
+import type { BreadcrumbItem, NavItem, SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
 import { computed } from 'vue';
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 
-const page = usePage();
+const page = usePage<SharedData>();
 const auth = computed(() => page.props.auth);
 
 const isCurrentRoute = (url: string) => {
diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue
index 1ff2baa..d2f8859 100644
--- a/resources/js/components/AppSidebarHeader.vue
+++ b/resources/js/components/AppSidebarHeader.vue
@@ -14,7 +14,7 @@ defineProps<{
     >
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />
-            <template v-if="breadcrumbs.length > 0">
+            <template v-if="breadcrumbs && breadcrumbs.length > 0">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>
         </div>
diff --git a/resources/js/components/TextLink.vue b/resources/js/components/TextLink.vue
index 9bc6d4b..1a5a22d 100644
--- a/resources/js/components/TextLink.vue
+++ b/resources/js/components/TextLink.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { InertiaLinkProps, Link } from '@inertiajs/vue3';
 
-interface Props {
-    href: string;
+interface Props extends Pick<InertiaLinkProps, "href" | "method" | "as"> {
     tabindex?: number;
-    method?: string;
-    as?: string;
-}
+};
 
 defineProps<Props>();
 </script>
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
index 077c395..d2b1bf1 100644
--- a/resources/js/components/UserInfo.vue
+++ b/resources/js/components/UserInfo.vue
@@ -2,26 +2,22 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/composables/useInitials';
 import type { User } from '@/types';
-import { computed } from 'vue';
 
 interface Props {
     user: User;
     showEmail?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     showEmail: false,
 });
 
 const { getInitials } = useInitials();
-
-// Compute whether we should show the avatar image
-const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '');
 </script>
 
 <template>
     <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar" :alt="user.name" />
+        <AvatarImage v-if="user.avatar && user.avatar !== ''" :src="user.avatar" :alt="user.name" />
         <AvatarFallback class="rounded-lg text-black dark:text-white">
             {{ getInitials(user.name) }}
         </AvatarFallback>
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index 8bd6d78..31933e4 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 
-const page = usePage();
+const page = usePage<SharedData>();
 const name = page.props.name;
 const quote = page.props.quote;
 
@@ -20,7 +21,7 @@ defineProps<{
                 <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
                 {{ name }}
             </Link>
-            <div v-if="quote" class="relative z-20 mt-auto">
+            <div v-if="quote && quote" class="relative z-20 mt-auto">
                 <blockquote class="space-y-2">
                     <p class="text-lg">&ldquo;{{ quote.message }}&rdquo;</p>
                     <footer class="text-sm text-neutral-300">{{ quote.author }}</footer>
diff --git a/resources/js/pages/Welcome.vue b/resources/js/pages/Welcome.vue
index d9b033c..9d3e692 100644
--- a/resources/js/pages/Welcome.vue
+++ b/resources/js/pages/Welcome.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { SharedData } from '@/types';
 import { Head, Link } from '@inertiajs/vue3';
+
+const props = defineProps<SharedData>();
 </script>
 
 <template>
@@ -11,7 +14,7 @@ import { Head, Link } from '@inertiajs/vue3';
         <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
             <nav class="flex items-center justify-end gap-4">
                 <Link
-                    v-if="$page.props.auth.user"
+                    v-if="props.auth.user"
                     :href="route('dashboard')"
                     class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                 >
@@ -214,6 +217,11 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
+                        <!-- Workaround: -->
+                        <!-- 'plus-darker' is a valid value for the mixBlendMode key according to MDN -->
+                        <!-- However, the csstype library, which is used by @vue/runtime-dom, does not support this value. -->
+                        <!-- @see https://developer.mozilla.org/de/docs/Web/CSS/mix-blend-mode -->
+                        <!-- @vue-ignore -->
                         <g
                             :style="{ mixBlendMode: 'plus-darker' }"
                             class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"

From e9210f45ff65ce777f1b7a5f64bb91c4862f9171 Mon Sep 17 00:00:00 2001
From: Christoph Stockinger <christoph@morethings.digital>
Date: Tue, 25 Feb 2025 21:29:57 +0100
Subject: [PATCH 4/6] Update npm scripts

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 608af0e..45049a7 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,9 @@
     "private": true,
     "type": "module",
     "scripts": {
+        "prebuild": "vue-tsc",
         "build": "vite build",
-        "build:ssr": "vite build && vite build --ssr",
+        "build:ssr": "npm run build && vite build --ssr",
         "dev": "vite",
         "format": "prettier --write resources/",
         "format:check": "prettier --check resources/",

From 94de69c7c60614fb3924a1bed8aa9e2f1300540f Mon Sep 17 00:00:00 2001
From: Christoph Stockinger <christoph@morethings.digital>
Date: Tue, 25 Feb 2025 21:31:49 +0100
Subject: [PATCH 5/6] Change steps order

---
 .github/workflows/tests.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index ab25934..379803e 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -31,9 +31,6 @@ jobs:
           node-version: '22'
           cache: 'npm'
 
-      - name: Install Node Dependencies
-        run: npm ci
-
       - name: Create SQLite Database
         run: touch database/database.sqlite
 
@@ -49,6 +46,9 @@ jobs:
       - name: Publish Ziggy Configuration
         run: php artisan ziggy:generate
 
+      - name: Install Node Dependencies
+        run: npm ci
+
       - name: Build Assets
         run: npm run build
 

From d3cbb54d4ac1b3d6996a805aef7a2c0e35a88f2c Mon Sep 17 00:00:00 2001
From: Christoph Stockinger <christoph@morethings.digital>
Date: Wed, 26 Feb 2025 09:19:12 +0100
Subject: [PATCH 6/6] Remove vite client type declaration

---
 resources/js/types/vite.d.ts | 11 -----------
 tsconfig.json                |  4 +---
 2 files changed, 1 insertion(+), 14 deletions(-)
 delete mode 100644 resources/js/types/vite.d.ts

diff --git a/resources/js/types/vite.d.ts b/resources/js/types/vite.d.ts
deleted file mode 100644
index 09cdd83..0000000
--- a/resources/js/types/vite.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-declare module 'vite/client' {
-    interface ImportMetaEnv {
-        readonly VITE_APP_NAME: string;
-        [key: string]: string | boolean | undefined;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-        readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
-    }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 87a26af..e73c2bb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,9 +39,7 @@
         },
         // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
         // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-        "types": [
-            "vite/client"
-        ] /* Specify type package names to be included without being referenced in a source file. */,
+        //"types": [] /* Specify type package names to be included without being referenced in a source file. */,
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
         // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
         // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */