TypeCheck Frontend

.github/workflows/build.yml

@@ -91,19 +91,34 @@ jobs:
         run: |
           ./gradlew build
           ./gradlew clean
-
+  typecheck-client:
+    name: "Typecheck Client"
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+          cache-dependency-path: photon-client/pnpm-lock.yaml
+      - name: Typecheck Client
+        working-directory: photon-client
+        run: |
+          pnpm install
+          pnpm type-check
   playwright-tests:
     name: "Playwright E2E tests"
     runs-on: ubuntu-24.04
     needs: [validation]
     steps:
-      # Checkout code.
       - name: Checkout code
         uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-      - name: Fetch tags
-        run: git fetch --tags --force
       - name: Install Java 17
         uses: actions/setup-java@v5
         with:
@@ -138,7 +153,6 @@ jobs:
     runs-on: ubuntu-24.04
     needs: [validation]
     steps:
-      # Checkout code.
       - name: Checkout code
         uses: actions/checkout@v6
         with:

photon-client/env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+
+declare module "vue3-virtual-scroll-list";

photon-client/eslint.config.mjs

@@ -5,7 +5,7 @@ import skipFormattingConfig from "@vue/eslint-config-prettier/skip-formatting";
 
 export default defineConfigWithVueTs(
   pluginVue.configs["flat/recommended-error"],
-  vueTsConfigs.recommended,
+  vueTsConfigs.recommendedTypeChecked,
   skipFormattingConfig,
   {
     ignores: ["**/dist/**", "playwright-report"]
@@ -45,7 +45,9 @@ export default defineConfigWithVueTs(
       "vue/require-default-prop": "off",
       "vue/v-for-delimiter-style": "error",
       "vue/v-on-event-hyphenation": "off",
-      "@typescript-eslint/no-explicit-any": "off",
+      "vue/require-typed-ref": "error",
+      "@typescript-eslint/no-empty-object-type": "error",
+      "@typescript-eslint/no-explicit-any": "error",
       "vue/valid-v-slot": ["error", { allowModifiers: true }]
     }
   }

photon-client/package.json

@@ -14,8 +14,8 @@
     "format-ci": "prettier --check src/",
     "test": "playwright test",
     "test-ui": "playwright test --ui",
-    "test-setup": "playwright install --with-deps"
-
+    "test-setup": "playwright install --with-deps",
+    "type-check": "vue-tsc"
   },
   "dependencies": {
     "@fontsource/prompt": "^5.2.6",
@@ -28,6 +28,7 @@
     "three": "^0.178.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1",
+    "vue-tsc": "^3.2.5",
     "vue3-virtual-scroll-list": "^0.2.1",
     "vuetify": "^3.8.3"
   },

photon-client/src/App.vue

@@ -11,9 +11,10 @@ import { useTheme } from "vuetify";
 import { restoreThemeConfig } from "@/lib/ThemeManager";
 
 const is_demo = import.meta.env.MODE === "demo";
+const backendHost = inject<string>("backendHost");
 if (!is_demo) {
   const websocket = new AutoReconnectingWebsocket(
-    `ws://${inject("backendHost")}/websocket_data`,
+    `ws://${backendHost}/websocket_data`,
     () => {
       useStateStore().$patch({ backendConnected: true });
     },