Type checking in the build process

.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
 

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/",

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({

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) => {

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>

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>

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>

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>

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"

tsconfig.json

@@ -39,11 +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",
-            "vue/tsx",
-            "./resources/js/types"
-        ] /* 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. */
@@ -119,5 +115,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"
+    ]
 }