chore: modernize and optimize tsconfig architecture for Vite

OmarBrbutovic · OmarBrbutovic · commit 48983727e636 · 2026-04-07T14:54:45.000+02:00
Refactored the TypeScript configuration to use a more modern setup,
splitting the configuration to properly isolate browser and
Node environments.

Key changes:
- Remove deprecated options for `moduleResolution` and `baseUrl`
- `tsconfig.json`: Converted to a pure solution file that
delegates to project-specific references (`app` and `node`).
- Environment Isolation:
    - `tsconfig.app.json` now exclusively governs the browser code
    - `tsconfig.node.json` governs the build tooling
- Upgraded Module Resolution: Changed `moduleResolution` from
`node` to `bundler`
- Modern Build Flags: Introduced `allowImportingTsExtensions`
and `useDefineForClassFields` for strictly standard ES module generation.
- Strict Type-Checking: Enabled `strict`, `noUnusedLocals`,
`noUnusedParameters`, and `noFallthroughCasesInSwitch` to enforce
higher code quality and prevent dead code.

- audit fix

Used commands:
```
npm audit fix
```

Signed-off-by: Omar &lt;omar.brbutovic@secomind.com&gt;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,7 +72,7 @@
     "init": "npm run relay:compile && npm run i18n:compile",
     "start": "vite",
     "prestart": "npm run init",
-    "build": "tsc -P tsconfig.build.json && vite build",
+    "build": "tsc -p tsconfig.build.json && vite build",
     "prebuild": "npm run init",
     "preview": "vite preview",
     "relay:generate-schema": "cd ../backend && mix absinthe.schema.sdl --schema EdgehogWeb.Schema ../frontend/src/api/schema.graphql",
@@ -81,7 +81,7 @@
     "check-format": "prettier --check .",
     "lint": "eslint --fix src",
     "check-lint": "eslint src",
-    "check-types": "tsc --noEmit",
+    "check-types": "tsc --noEmit -p tsconfig.app.json",
     "precheck-types": "npm run init",
     "test": "TZ=UTC vitest",
     "pretest": "npm run init",
diff --git a/frontend/src/components/ConnectionStatus.tsx b/frontend/src/components/ConnectionStatus.tsx
@@ -18,7 +18,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from "react";
 import { useIntl } from "react-intl";
 
 import Icon from "@/components/Icon";
diff --git a/frontend/src/components/DeleteApplicationModal.tsx b/frontend/src/components/DeleteApplicationModal.tsx
@@ -59,7 +59,7 @@ const DeleteApplicationModal = <A extends Application>({
   const handleDeleteApplication = useCallback(() => {
     deleteApplication({
       variables: { id: applicationToDelete.id },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (errors) {
           const errorFeedback = errors
             .map((error) => error.message)
diff --git a/frontend/src/components/DeleteReleaseModal.tsx b/frontend/src/components/DeleteReleaseModal.tsx
@@ -59,7 +59,7 @@ const DeleteReleaseModal = <R extends Release>({
   const handleDeleteRelease = useCallback(() => {
     deleteRelease({
       variables: { id: releaseToDelete.id },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (errors) {
           const errorFeedback = errors
             .map((error) => error.message)
diff --git a/frontend/src/components/DeployedApplicationsTable.tsx b/frontend/src/components/DeployedApplicationsTable.tsx
@@ -400,7 +400,7 @@ const DeployedApplicationsTable = ({
       if (isOnline) {
         sendDeployment({
           variables: { id: deploymentId },
-          onCompleted: (data, errors) => {
+          onCompleted: (_data, errors) => {
             if (errors) {
               const errorFeedback = errors
                 .map(({ fields, message }) =>
@@ -438,7 +438,7 @@ const DeployedApplicationsTable = ({
       if (isOnline) {
         startDeployment({
           variables: { id: deploymentId },
-          onCompleted: (data, errors) => {
+          onCompleted: (_data, errors) => {
             if (errors) {
               const errorFeedback = errors
                 .map(({ fields, message }) =>
@@ -476,7 +476,7 @@ const DeployedApplicationsTable = ({
       if (isOnline) {
         stopDeployment({
           variables: { id: deploymentId },
-          onCompleted: (data, errors) => {
+          onCompleted: (_data, errors) => {
             if (errors) {
               const errorFeedback = errors
                 .map(({ fields, message }) =>
@@ -513,7 +513,7 @@ const DeployedApplicationsTable = ({
     (deploymentId: string) => {
       deleteDeployment({
         variables: { id: deploymentId },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (
             !errors ||
             errors.length === 0 ||
@@ -562,7 +562,7 @@ const DeployedApplicationsTable = ({
           id: deploymentId,
           input: { target: upgradeTargetReleaseId },
         },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (
             !errors ||
             errors.length === 0 ||
diff --git a/frontend/src/components/LedBehaviorDropdown.tsx b/frontend/src/components/LedBehaviorDropdown.tsx
@@ -1,7 +1,7 @@
 /*
  * This file is part of Edgehog.
  *
- * Copyright 2022-2025 SECO Mind Srl
+ * Copyright 2022-2026 SECO Mind Srl
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -121,7 +121,7 @@ const LedBehaviorDropdown = ({ deviceId, disabled, onError }: Props) => {
             behavior: ledBehavior,
           },
         },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
diff --git a/frontend/src/pages/BaseImageCollection.tsx b/frontend/src/pages/BaseImageCollection.tsx
@@ -207,7 +207,7 @@ const BaseImageCollectionContent = ({
   const handleDeleteBaseImageCollection = useCallback(() => {
     deleteBaseImageCollection({
       variables: { baseImageCollectionId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({ route: Route.baseImageCollections });
         }
@@ -265,7 +265,7 @@ const BaseImageCollectionContent = ({
           input: changes,
           first: 10_000,
         },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
diff --git a/frontend/src/pages/Channel.tsx b/frontend/src/pages/Channel.tsx
@@ -1,7 +1,7 @@
 /*
  * This file is part of Edgehog.
  *
- * Copyright 2023-2025 SECO Mind Srl
+ * Copyright 2023-2026 SECO Mind Srl
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -138,7 +138,7 @@ const ChannelContent = ({ queryRef, channel }: ChannelContentProps) => {
   const handleDeleteChannel = useCallback(() => {
     deleteChannel({
       variables: { channelId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({ route: Route.channels });
         }
diff --git a/frontend/src/pages/DeploymentCampaign.tsx b/frontend/src/pages/DeploymentCampaign.tsx
@@ -175,7 +175,7 @@ const CampaignActions = ({
   const handlePauseCampaign = useCallback(() => {
     pauseCampaign({
       variables: { id: deploymentCampaignId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           setErrorFeedback(null);
           return;
@@ -202,7 +202,7 @@ const CampaignActions = ({
   const handleResumeCampaign = useCallback(() => {
     resumeCampaign({
       variables: { id: deploymentCampaignId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           setErrorFeedback(null);
           return;
diff --git a/frontend/src/pages/Device.tsx b/frontend/src/pages/Device.tsx
@@ -312,7 +312,7 @@ const DeviceConnectionFormRows = ({
 function timeoutPromise<T>(promise: Promise<T>, millis: number) {
   return Promise.race([
     promise,
-    new Promise((resolve, reject) => setTimeout(() => reject(), millis)),
+    new Promise((_resolve, reject) => setTimeout(() => reject(), millis)),
   ]);
 }
 
@@ -486,7 +486,7 @@ const DeviceContent = ({
         (newDeviceName: string) => {
           updateDevice({
             variables: { deviceId, input: { name: newDeviceName } },
-            onCompleted(data, errors) {
+            onCompleted(_data, errors) {
               if (errors) {
                 handleAPIErrors(errors);
                 return;
@@ -532,7 +532,7 @@ const DeviceContent = ({
           deviceId,
           input: { tags },
         },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             handleAPIErrors(errors);
             return;
@@ -590,7 +590,7 @@ const DeviceContent = ({
           deviceId,
           input: { tags },
         },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             handleAPIErrors(errors);
             return;
diff --git a/frontend/src/pages/DeviceGroup.tsx b/frontend/src/pages/DeviceGroup.tsx
@@ -1,7 +1,7 @@
 /*
  * This file is part of Edgehog.
  *
- * Copyright 2022-2025 SECO Mind Srl
+ * Copyright 2022-2026 SECO Mind Srl
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -116,7 +116,7 @@ const DeviceGroupContent = ({ deviceGroup }: DeviceGroupContentProps) => {
   const handleDeleteDeviceGroup = useCallback(() => {
     deleteDeviceGroup({
       variables: { deviceGroupId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({ route: Route.deviceGroups });
         }
@@ -223,7 +223,7 @@ const DeviceGroupContent = ({ deviceGroup }: DeviceGroupContentProps) => {
       const newDeviceGroup = { ...deviceGroup };
       updateDeviceGroup({
         variables: { deviceGroupId, input: newDeviceGroup },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
diff --git a/frontend/src/pages/FileDownloadCampaign.tsx b/frontend/src/pages/FileDownloadCampaign.tsx
@@ -164,7 +164,7 @@ const CampaignActions = ({
   const handlePauseCampaign = useCallback(() => {
     pauseCampaign({
       variables: { id: fileDownloadCampaignId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           setErrorFeedback(null);
           return;
@@ -191,7 +191,7 @@ const CampaignActions = ({
   const handleResumeCampaign = useCallback(() => {
     resumeCampaign({
       variables: { id: fileDownloadCampaignId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           setErrorFeedback(null);
           return;
diff --git a/frontend/src/pages/HardwareType.tsx b/frontend/src/pages/HardwareType.tsx
@@ -107,7 +107,7 @@ const HardwareTypeContent = ({ hardwareType }: HardwareTypeContentProps) => {
   const handleDeleteHardwareType = useCallback(() => {
     deleteHardwareType({
       variables: { hardwareTypeId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({ route: Route.hardwareTypes });
         }
@@ -160,7 +160,7 @@ const HardwareTypeContent = ({ hardwareType }: HardwareTypeContentProps) => {
     (hardwareType: HardwareTypeOutputData) => {
       updateHardwareType({
         variables: { hardwareTypeId, input: hardwareType },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
diff --git a/frontend/src/pages/Repository.tsx b/frontend/src/pages/Repository.tsx
@@ -200,7 +200,7 @@ const RepositoryContent = ({ repository }: RepositoryContentProps) => {
   const handleDeleteRepository = useCallback(() => {
     deleteRepository({
       variables: { repositoryId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({ route: Route.repositories });
         }
@@ -253,7 +253,7 @@ const RepositoryContent = ({ repository }: RepositoryContentProps) => {
     (repository: RepositoryOutputData) => {
       updateRepository({
         variables: { repositoryId, input: repository },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
diff --git a/frontend/src/pages/SystemModel.tsx b/frontend/src/pages/SystemModel.tsx
@@ -108,7 +108,7 @@ const SystemModelContent = ({
     (systemModelChanges: SystemModelOutputData) => {
       updateSystemModel({
         variables: { systemModelId, input: systemModelChanges },
-        onCompleted(data, errors) {
+        onCompleted(_data, errors) {
           if (errors) {
             const errorFeedback = errors
               .map(({ fields, message }) =>
@@ -167,7 +167,7 @@ const SystemModelContent = ({
   const handleDeleteSystemModel = useCallback(() => {
     deleteSystemModel({
       variables: { systemModelId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           return navigate({ route: Route.systemModels });
         }
diff --git a/frontend/src/pages/UpdateCampaign.tsx b/frontend/src/pages/UpdateCampaign.tsx
@@ -173,7 +173,7 @@ const CampaignActions = ({
   const handlePauseCampaign = useCallback(() => {
     pauseCampaign({
       variables: { id: updateCampaignId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           setErrorFeedback(null);
           return;
@@ -200,7 +200,7 @@ const CampaignActions = ({
   const handleResumeCampaign = useCallback(() => {
     resumeCampaign({
       variables: { id: updateCampaignId },
-      onCompleted(data, errors) {
+      onCompleted(_data, errors) {
         if (!errors || errors.length === 0 || errors[0].code === "not_found") {
           setErrorFeedback(null);
           return;
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
@@ -1,14 +1,23 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["vite.config.ts"]
+  "include": ["src"]
 }
diff --git a/frontend/tsconfig.app.json.license b/frontend/tsconfig.app.json.license
@@ -1,3 +1,3 @@
-SPDX-FileCopyrightText: 2025 SECO Mind Srl
+SPDX-FileCopyrightText: 2025-2026 SECO Mind Srl
 
 SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/tsconfig.build.json b/frontend/tsconfig.build.json
@@ -1,4 +1,4 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.app.json",
   "exclude": ["src/setupTests.tsx", "src/mocks/*", "**/*.test.tsx"]
 }
diff --git a/frontend/tsconfig.build.json.license b/frontend/tsconfig.build.json.license
@@ -1,3 +1,3 @@
-SPDX-FileCopyrightText: 2023 SECO Mind Srl
+SPDX-FileCopyrightText: 2023-2026 SECO Mind Srl
 
 SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
diff --git a/frontend/tsconfig.json.license b/frontend/tsconfig.json.license
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
diff --git a/frontend/tsconfig.node.json.license b/frontend/tsconfig.node.json.license

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/*`
`2`	`2`	`* This file is part of Edgehog.`
`3`	`3`	`*`
`4`		`- * Copyright 2023-2025 SECO Mind Srl`
	`4`	`+ * Copyright 2023-2026 SECO Mind Srl`
`5`	`5`	`*`
`6`	`6`	`* Licensed under the Apache License, Version 2.0 (the "License");`
`7`	`7`	`* you may not use this file except in compliance with the License.`
`@@ -138,7 +138,7 @@ const ChannelContent = ({ queryRef, channel }: ChannelContentProps) => {`
`138`	`138`	`const handleDeleteChannel = useCallback(() => {`
`139`	`139`	`deleteChannel({`
`140`	`140`	`variables: { channelId },`
`141`		`- onCompleted(data, errors) {`
	`141`	`+ onCompleted(_data, errors) {`
`142`	`142`	`if (!errors \|\| errors.length === 0 \|\| errors[0].code === "not_found") {`
`143`	`143`	`return navigate({ route: Route.channels });`
`144`	`144`	`}`