Merge pull request #471 from Kitware/vite-8

Author: brianhelba

.github/workflows/ci.yaml

@@ -1,34 +1,28 @@
 name: CI
 on:
   pull_request:
-    # types: [opened, synchronize]
-    # TODO: why is this here?
   push:
     branches:
       - "main"
 permissions:
   contents: read
 jobs:
-  lint-node:
-    strategy:
-      fail-fast: false
-      matrix:
-        linter: [eslint, typescript]
-    name: Lint [${{ matrix.linter }}]
+  lint-client:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
-      - name: Setup Node environment
+      - name: Install npm
         uses: actions/setup-node@v6
         with:
+          node-version: 24.14.0
           cache: npm
           cache-dependency-path: client/package-lock.json
       - name: Install packages
         run: npm ci
         working-directory: client
-      - name: Run ${{ matrix.linter }}
-        run: npm run lint:${{ matrix.linter }}
+      - name: Run client tests
+        run: npm run test
         working-directory: client
   test-python:
     name: Test Python

client/src/vite-env.d.ts client/env.d.tsclient/src/vite-env.d.ts renamed to client/env.d.ts

@@ -5,12 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
     "preview": "vite preview",
+    "build": "vite build",
     "format": "eslint --fix src",
-    "lint:eslint": "eslint src",
-    "lint": "eslint src && vue-tsc --noEmit",
-    "lint:typescript": "vue-tsc --noEmit"
+    "test:lint": "eslint --no-fix src",
+    "test:type": "vue-tsc --build",
+    "test": "npm-run-all test:lint test:type"
   },
   "dependencies": {
     "@jamescoyle/vue-icon": "0.1.2",
@@ -31,12 +31,16 @@
   },
   "devDependencies": {
     "@sentry/vite-plugin": "5.1.1",
+    "@tsconfig/node24": "^24.0.4",
     "@types/geojson": "7946.0.16",
     "@types/lodash": "4.17.24",
+    "@types/node": "^25.5.0",
     "@vitejs/plugin-vue": "6.0.5",
     "@vue/eslint-config-typescript": "14.7.0",
+    "@vue/tsconfig": "^0.9.0",
     "eslint": "10.1.0",
     "eslint-plugin-vue": "10.8.0",
+    "npm-run-all2": "^8.0.4",
     "sass-embedded": "1.98.0",
     "typescript": "5.9.3",
     "vite": "8.0.3",

client/package-lock.json

@@ -1,4 +1,4 @@
-import { axiosInstance, FileAnnotation, FileAnnotationDetails, ProcessingTask, Spectrogram, UpdateFileAnnotation } from "./api";
+import { axiosInstance, type FileAnnotation, type FileAnnotationDetails, type ProcessingTask, type Spectrogram, type UpdateFileAnnotation } from "./api";
 
 export interface NABatRecordingCompleteResponse {
     error?: string;

client/package.json

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { AxiosError } from "axios";
-import { SpectroInfo } from "@components/geoJS/geoJSUtils";
+import type { SpectroInfo } from "@components/geoJS/geoJSUtils";
 import type { FeatureCollection, Point } from "geojson";
 
 export interface Recording {

client/src/api/NABatApi.ts

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
-import { SpectroInfo } from './geoJS/geoJSUtils';
-import { deleteAnnotation, deleteSequenceAnnotation, patchAnnotation, patchSequenceAnnotation, Species, SpectrogramAnnotation, SpectrogramSequenceAnnotation } from "../api/api";
+import { computed, defineComponent, type PropType, ref, type Ref, watch } from "vue";
+import type { SpectroInfo } from './geoJS/geoJSUtils';
+import { deleteAnnotation, deleteSequenceAnnotation, patchAnnotation, patchSequenceAnnotation, type Species, type SpectrogramAnnotation, type SpectrogramSequenceAnnotation } from "../api/api";
 import useState from "@use/useState";
 import SpeciesInfo from "./SpeciesInfo.vue";
 export default defineComponent({

client/src/api/api.ts

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { computed, defineComponent, PropType, CSSProperties } from "vue";
-import { SpectroInfo } from './geoJS/geoJSUtils';
+import { computed, defineComponent, type PropType, type CSSProperties } from "vue";
+import type { SpectroInfo } from './geoJS/geoJSUtils';
 import useState from "@use/useState";
 import { watch, ref } from "vue";
 import AnnotationEditor from "./AnnotationEditor.vue";
-import { Species, SpectrogramAnnotation, SpectrogramSequenceAnnotation } from "../api/api";
+import type { Species, SpectrogramAnnotation, SpectrogramSequenceAnnotation } from "../api/api";
 import RecordingAnnotations from "./RecordingAnnotations.vue";
 export default defineComponent({
   name: "AnnotationList",

client/src/components/AnnotationEditor.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, Ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type Ref, watch } from "vue";
 import { RecordingMimeTypes } from "../constants";
 import { getCellLocation, getCellfromLocation, getGuanoMetadata } from "../api/api";
 import MapLocation from "./MapLocation.vue";

client/src/components/AnnotationList.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import { computed, defineComponent, ref, Ref, watch } from 'vue';
+import { computed, defineComponent, ref, type Ref, watch } from 'vue';
 import { RecordingMimeTypes } from '../constants';
 import useRequest from '@use/useRequest';
-import { UploadLocation, uploadRecordingFile, getCellLocation, RecordingFileParameters, getGuanoMetadata } from '../api/api';
-import BatchRecordingElement, { BatchRecording } from './BatchRecordingElement.vue';
+import { type UploadLocation, uploadRecordingFile, getCellLocation, type RecordingFileParameters, getGuanoMetadata } from '../api/api';
+import BatchRecordingElement, { type BatchRecording } from './BatchRecordingElement.vue';
 import { cloneDeep } from 'lodash';
 import { extractDateTimeComponents, getCurrentTime } from '@use/useUtils';
 import useState from '@use/useState';