Clean up client dependencies (#1954)

Co-authored-by: samfreund <techguy763@gmail.com> Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com>
2026-06-19 00:41:41 +00:00 · 2025-05-07 12:06:07 -04:00
parent bec8092660
commit 74322affde
13 changed files with 3250 additions and 1537 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -26,7 +26,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version: 22
      - name: Install Dependencies
        run: npm ci
      - name: Build Production Client
--- a/.github/workflows/lint-format.yml
+++ b/.github/workflows/lint-format.yml
@@ -68,7 +68,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version: 22
      - name: Install Dependencies
        run: npm ci
      - name: Check Linting
--- a/.github/workflows/photon-api-docs.yml
+++ b/.github/workflows/photon-api-docs.yml
@@ -32,7 +32,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version: 22
      - name: Install Dependencies
        run: npm ci
      - name: Build Production Client
--- a/docs/source/docs/contributing/building-photon.md
+++ b/docs/source/docs/contributing/building-photon.md
@@ -12,17 +12,7 @@ This section contains the build instructions from the source code available at [

 **Node JS:**

- The UI is written in Node JS. To compile the UI, Node 18.20.4 to Node 20.0.0 is required. To install Node JS follow the instructions for your platform [on the official Node JS website](https://nodejs.org/en/download/).  However, modify this line
-
-```bash
-nvm install 20
-```
-
-so that it instead reads
-
-```javascript
-nvm install 18.20.4
-```
+ The UI is written in Node JS. To compile the UI, Node 22.15.0 is required. To install Node JS follow the instructions for your platform [on the official Node JS website](https://nodejs.org/en/download/).

 ## Compiling Instructions

--- a/photon-client/.eslintrc.json
+++ b/photon-client/.eslintrc.json
@@ -1,23 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "plugin:vue/vue3-recommended",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript",
-    "@vue/eslint-config-prettier/skip-formatting",
-    "plugin:vuetify/base"
-
-  ],
-  "rules": {
-    "quotes": ["error", "double"],
-    "comma-dangle": ["error", "never"],
-    "comma-spacing": ["error", { "before": false, "after": true }],
-    "semi": ["error", "always"],
-    "eol-last": "error",
-    "object-curly-spacing": ["error", "always"],
-    "quote-props": ["error", "as-needed"],
-    "no-case-declarations": "off",
-    "vue/require-default-prop": "off",
-    "vue/v-on-event-hyphenation": "off"
-  }
-}
--- a/photon-client/eslint.config.mjs
+++ b/photon-client/eslint.config.mjs
@@ -0,0 +1,38 @@
+import pluginVue from "eslint-plugin-vue";
+import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
+
+import skipFormattingConfig from "@vue/eslint-config-prettier/skip-formatting";
+
+export default defineConfigWithVueTs(
+  pluginVue.configs["flat/recommended"],
+  vueTsConfigs.recommended,
+  skipFormattingConfig,
+  {
+    ignores: ["**/dist/**"]
+  },
+  {
+    //extends: ["js/recommended"],
+    rules: {
+      quotes: ["error", "double"],
+      "comma-dangle": ["error", "never"],
+
+      "comma-spacing": [
+        "error",
+        {
+          before: false,
+          after: true
+        }
+      ],
+
+      semi: ["error", "always"],
+      "eol-last": "error",
+      "object-curly-spacing": ["error", "always"],
+      "quote-props": ["error", "as-needed"],
+      "no-case-declarations": "off",
+      "vue/require-default-prop": "off",
+      "vue/v-on-event-hyphenation": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "vue/valid-v-slot": ["error", { allowModifiers: true }]
+    }
+  }
+);
--- a/photon-client/package-lock.json
+++ b/photon-client/package-lock.json
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -9,44 +9,39 @@
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "build-demo": "vite build --mode demo",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "format": "prettier --write src/",
-    "lint-ci": "eslint . --max-warnings 0 --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint-ci": "eslint . --max-warnings 0 --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "format-ci": "prettier --check src/"
  },
  "dependencies": {
-    "@fontsource/prompt": "^5.0.9",
+    "@eslint/js": "^9.26.0",
+    "@fontsource/prompt": "^5.2.6",
    "@mdi/font": "^7.4.47",
-    "@msgpack/msgpack": "^3.0.0-beta2",
+    "@msgpack/msgpack": "^3.1.1",
    "@vitejs/plugin-vue": "^5.2.3",
-    "axios": "^1.6.3",
-    "jspdf": "^2.5.1",
-    "lodash": "^4.17.21",
+    "axios": "^1.9.0",
+    "jspdf": "^3.0.1",
    "pinia": "^3.0.2",
-    "three": "^0.160.0",
+    "three": "^0.176.0",
    "vite-plugin-vuetify": "^2.1.1",
    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "vue-virtual-scroll-list": "^2.3.5",
+    "vue-router": "^4.5.1",
    "vue3-virtual-scroll-list": "^0.2.1",
-    "vuetify": "^3.8.1"
+    "vuetify": "^3.8.3"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@types/node": "^18.19.45",
-    "@types/three": "^0.160.0",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "deepmerge": "^4.3.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "eslint-plugin-vuetify": "^2.5.2",
+    "@types/node": "^22.15.14",
+    "@types/three": "^0.176.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.26.0",
+    "eslint-plugin-vue": "^10.1.0",
    "npm-run-all": "^4.1.5",
-    "prettier": "3.2.2",
-    "sass": "^1.86.3",
-    "terser": "^5.14.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.4.2"
+    "prettier": "^3.5.3",
+    "sass": "^1.87.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
  }
 }
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -101,9 +101,8 @@ const downloadCalibBoard = () => {

  switch (boardType.value) {
    case CalibrationBoardTypes.Chessboard:
-      // eslint-disable-next-line no-case-declarations
      const chessboardStartX = (paperWidth - patternWidth.value * squareSizeIn.value) / 2;
-      // eslint-disable-next-line no-case-declarations
+
      const chessboardStartY = (paperHeight - patternWidth.value * squareSizeIn.value) / 2;

      for (let squareY = 0; squareY < patternHeight.value; squareY++) {
@@ -203,10 +202,10 @@ const endCalibration = () => {
    });
 };

-let drawAllSnapshots = ref(true);
+const drawAllSnapshots = ref(true);

-let showCalDialog = ref(false);
-let selectedVideoFormat = ref<VideoFormat | undefined>(undefined);
+const showCalDialog = ref(false);
+const selectedVideoFormat = ref<VideoFormat | undefined>(undefined);
 const setSelectedVideoFormat = (format: VideoFormat) => {
  selectedVideoFormat.value = format;
  showCalDialog.value = true;
--- a/photon-client/src/components/common/pv-camera-match-card.vue
+++ b/photon-client/src/components/common/pv-camera-match-card.vue
@@ -1,6 +1,19 @@
 <script setup lang="ts">
 import { PVCameraInfo } from "@/types/SettingTypes";
-import _ from "lodash";
+
+function isEqual<T>(a: T, b: T): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  const bothAreObjects = a && b && typeof a === "object" && typeof b === "object";
+
+  return (
+    bothAreObjects &&
+    Object.keys(a).length === Object.keys(b).length &&
+    Object.entries(a).every(([k, v]) => isEqual(v, b[k as keyof T]))
+  );
+}

 const { saved, current } = defineProps({
  saved: {
@@ -105,7 +118,7 @@ const cameraInfoFor = (camera: PVCameraInfo): any => {
        </tr>
        <tr
          v-if="cameraInfoFor(saved).otherPaths !== undefined && cameraInfoFor(saved).otherPaths !== null"
-          :class="!_.isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? 'mismatch' : ''"
+          :class="isEqual(cameraInfoFor(saved).otherPaths, cameraInfoFor(current).otherPaths) ? '' : 'mismatch'"
        >
          <td>Other Paths:</td>
          <td>{{ cameraInfoFor(saved).otherPaths }}</td>
--- a/photon-client/src/components/dashboard/tabs/ObjectDetectionTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ObjectDetectionTab.vue
@@ -42,9 +42,7 @@ const selectedModel = computed({
    const index = supportedModels.value.indexOf(currentPipelineSettings.value.model);
    return index === -1 ? undefined : index;
  },
-  set: (v) => {
-    v && useCameraSettingsStore().changeCurrentPipelineSetting({ model: supportedModels.value[v] }, false);
-  }
+  set: (v) => v && useCameraSettingsStore().changeCurrentPipelineSetting({ model: supportedModels.value[v] }, false)
 });
 </script>

--- a/photon-client/src/stores/settings/CameraSettingsStore.ts
+++ b/photon-client/src/stores/settings/CameraSettingsStore.ts
@@ -159,7 +159,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
     */
    updateCameraSettings(
      data: CameraSettingsChangeRequest,
-      cameraUniqueName: String = useStateStore().currentCameraUniqueName
+      cameraUniqueName: string = useStateStore().currentCameraUniqueName
    ) {
      // The camera settings endpoint doesn't actually require all data, instead, it needs key data such as the FOV
      const payload = {
@@ -179,7 +179,7 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
    createNewPipeline(
      newPipelineName: string,
      pipelineType: Exclude<WebsocketPipelineType, WebsocketPipelineType.Calib3d | WebsocketPipelineType.DriverMode>,
-      cameraUniqueName: String = useStateStore().currentCameraUniqueName
+      cameraUniqueName: string = useStateStore().currentCameraUniqueName
    ) {
      const payload = {
        addNewPipeline: [newPipelineName, pipelineType],
--- a/photon-client/vite.config.ts
+++ b/photon-client/vite.config.ts
@@ -25,6 +25,9 @@ export default defineConfig({
    }
  },
  build: {
+    rollupOptions: {
+      external: ["html2canvas", "dompurify", "canvg"]
+    },
    sourcemap: true
  }
 });