chore: Use TypeScript + React config from webteam MAASENG-4188 WD-175…

…37 (#5572) - Extended [@canonical/typescript-config-react](https://www.npmjs.com/package/@canonical/typescript-config-react) in our `tsconfig.json` - Removed configs that were implemented specified upstream, except for `module` and `moduleResolution` (see notes) - Added `@/` before imports of `websocket-client` (I don't know how this was working previously) - Upgraded dependencies: - `typescript` v5.4.5 --> v5.6.3 - `vite-tsconfig-paths` v4.3.1 --> v5.1.3 - `cypress-wait-until` v3.0.1 --> v3.0.2 Resolves [MAASENG-4188](https:/warthogs.atlassian.net/browse/MAASENG-4188) Resolves [WD-17537](https:/warthogs.atlassian.net/browse/WD-17537) Co-authored-by: Julie Muzina <[email protected]>
canonical · Jan 9, 2025 · c628849 · c628849
1 parent 192e5d9
commit c628849
Show file tree

Hide file tree

Showing 10 changed files with 230 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -79,14 +79,15 @@
     "redux-first-history": "5.2.0",
     "redux-saga": "1.3.0",
     "typed-redux-saga": "1.5.0",
-    "typescript": "5.4.5",
+    "typescript": "5.6.3",
     "vanilla-framework": "4.16.0",
     "vite": "5.2.14",
     "vite-plugin-svgr": "4.2.0",
-    "vite-tsconfig-paths": "4.3.2",
+    "vite-tsconfig-paths": "5.1.3",
     "yup": "0.32.11"
   },
   "devDependencies": {
+    "@canonical/typescript-config-react": "0.4.0-experimental.0",
     "@percy/cli": "1.28.8",
     "@percy/cypress": "3.1.2",
     "@playwright/test": "1.45.0",
@@ -128,7 +129,7 @@
     "cooky-cutter": "1.5.4",
     "cypress": "13.12.0",
     "cypress-axe": "1.5.0",
-    "cypress-wait-until": "3.0.1",
+    "cypress-wait-until": "3.0.2",
     "dotenv-flow": "4.1.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
@@ -198,4 +199,4 @@
       "prefer-alphabetical-devDependencies": "error"
     }
   }
-}
+}
diff --git a/src/app/base/sagas/websockets/handlers/file-context-requests.ts b/src/app/base/sagas/websockets/handlers/file-context-requests.ts
@@ -6,7 +6,7 @@ import type {
   WebSocketAction,
   WebSocketRequest,
   WebSocketResponseResult,
-} from "websocket-client";
+} from "@/websocket-client";
 
 // A store of websocket requests that need to store their responses in the file
 // context. The map is between request id and redux action object.

diff --git a/src/app/base/sagas/websockets/handlers/loaded-endpoints.ts b/src/app/base/sagas/websockets/handlers/loaded-endpoints.ts
@@ -1,4 +1,4 @@
-import type { WebSocketEndpoint } from "websocket-client";
+import type { WebSocketEndpoint } from "@/websocket-client";
 
 let loadedEndpoints: WebSocketEndpoint[] = [];
 

diff --git a/src/app/base/sagas/websockets/handlers/next-actions.ts b/src/app/base/sagas/websockets/handlers/next-actions.ts
@@ -6,7 +6,7 @@ import type { NextActionCreator } from "../../actions";
 import type {
   WebSocketRequest,
   WebSocketResponseResult,
-} from "websocket-client";
+} from "@/websocket-client";
 
 // A map of request ids to action creators. This is used to dispatch actions
 // when a response is received.

diff --git a/src/app/base/sagas/websockets/handlers/polling-requests.ts b/src/app/base/sagas/websockets/handlers/polling-requests.ts
@@ -2,7 +2,7 @@ import type { AnyAction } from "redux";
 import { cancel, cancelled, delay, fork, put, take } from "typed-redux-saga";
 import type { SagaGenerator } from "typed-redux-saga/macro";
 
-import type { WebSocketAction } from "websocket-client";
+import type { WebSocketAction } from "@/websocket-client";
 
 const DEFAULT_POLL_INTERVAL = 10000;
 

diff --git a/src/app/base/sagas/websockets/handlers/unsubscribe.ts b/src/app/base/sagas/websockets/handlers/unsubscribe.ts
@@ -4,7 +4,7 @@ import { select, type SagaGenerator, put } from "typed-redux-saga";
 import { machineActions } from "@/app/store/machine";
 import machineSelectors from "@/app/store/machine/selectors";
 import { MachineMeta } from "@/app/store/machine/types";
-import type { WebSocketAction } from "websocket-client";
+import type { WebSocketAction } from "@/websocket-client";
 
 /**
  * Handle unsubscribing from unused entities and cleaning up the request.

diff --git a/src/app/store/machine/utils/hooks.test.tsx b/src/app/store/machine/utils/hooks.test.tsx
@@ -415,7 +415,7 @@ describe("machine hook utils", () => {
           wrapper: generateWrapper(store),
         }
       );
-      rerender(null);
+      rerender({});
       const expected = machineActions.fetch(mockCallId);
       const getDispatches = store
         .getActions()

diff --git a/src/root-saga.ts b/src/root-saga.ts
@@ -17,7 +17,7 @@ import {
 } from "./app/base/sagas";
 
 import type { MessageHandler } from "@/app/base/sagas/actions";
-import type WebSocketClient from "websocket-client";
+import type WebSocketClient from "@/websocket-client";
 
 export default function* rootSaga(
   websocketClient: WebSocketClient

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,9 +1,8 @@
 {
+  "extends": "@canonical/typescript-config-react",
   "compilerOptions": {
-    "baseUrl": "src",
-    "paths": { "@/*": ["./*"] },
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] },
     "allowJs": true,
     "noUnusedParameters": true,
     "noUnusedLocals": true,
@@ -12,16 +11,18 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "alwaysStrict": true,
-    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
-    "types": ["vite/client", "vite-plugin-svgr/client", "node", "vitest/globals"]
+    "types": [
+      "vite/client",
+      "vite-plugin-svgr/client",
+      "node",
+      "vitest/globals"
+    ]
   },
   "exclude": ["dist", "public", "node_modules"],
   "include": ["src"]