refactor(msw): use TS mock files

msw/README.md

@@ -21,8 +21,8 @@ You can read more about the use cases of MSW [here](https://mswjs.io/docs/#when-
 
 ## Relevant files
 
-- [mocks](./mocks/index.cjs) - registers the Node HTTP mock server
-- [handlers](./mocks/handlers.cjs) - describes the HTTP mocks
+- [mocks](./mocks/index.ts) - registers the Node HTTP mock server
+- [handlers](./mocks/handlers.ts) - describes the HTTP mocks
 - [package.json](./package.json)
 
 ## Related Links

msw/mocks/handlers.ts

@@ -0,0 +1,8 @@
+import type { HttpHandler }  from "msw";
+import { http, HttpResponse }  from "msw";
+
+export const handlers = [
+  http.get("https://my-mock-api.com", () => {
+    return HttpResponse.json({ message: "from msw" });
+  }),
+] satisfies HttpHandler[];

msw/mocks/index.cjs → msw/mocks/index.ts

@@ -1,6 +1,5 @@
-const { setupServer } = require("msw/node");
-
-const handlers = require("./handlers.cjs");
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers.js";
 
 const server = setupServer(...handlers);
 server.listen({ onUnhandledRequest: "warn" });

msw/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "remix vite:build",
-    "dev": "binode --require ./mocks/index.cjs -- @remix-run/dev:remix vite:dev",
+    "dev": "binode --import=tsx --import ./mocks/index.ts -- @remix-run/dev:remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
@@ -32,6 +32,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "msw": "^2.3",
+    "tsx": "^4.19.1",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"