fix(fe): bring back ts type check

Author: jog1t

.github/workflows/fe-pull-request.yml

@@ -4,7 +4,8 @@ on:
   pull_request:
     paths:
       - frontend/**
-      - sdks/typescript/runner/**
+      - engine/sdks/typescript/**
+      - rivetkit-typescript/**
 
 jobs:
   quality:
@@ -15,4 +16,20 @@ jobs:
         with:
           version: latest
       - name: Run Biome
-        run: biome check . --reporter=github
+        run: biome check . --reporter=github
+        working-directory: ./frontend
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+      - name: Install Dependencies
+        run: pnpm install 
+        working-directory: ./frontend
+      - name: Run TypeScript Compiler
+        run: pnpm ts-check
+        working-directory: ./frontend

frontend/package.json

@@ -86,8 +86,8 @@
 		"@types/lodash": "^4.17.20",
 		"@types/mdx": "^2.0.13",
 		"@types/node": "^20.19.13",
-		"@types/react": "^18.3.24",
-		"@types/react-dom": "^18.3.7",
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
 		"@uiw/codemirror-extensions-basic-setup": "^4.25.1",
 		"@uiw/codemirror-theme-github": "^4.25.1",
 		"@uiw/react-codemirror": "^4.25.1",

frontend/src/app.tsx

@@ -2,26 +2,18 @@ import type { Clerk } from "@clerk/clerk-js";
 import * as Sentry from "@sentry/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { createRouter, Link, RouterProvider } from "@tanstack/react-router";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { Suspense } from "react";
 import {
-	Button,
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
 	ConfigProvider,
 	FullscreenLoading,
 	getConfig,
-	H2,
 	ThirdPartyProviders,
 	Toaster,
 	TooltipProvider,
 } from "@/components";
 import { NotFoundCard } from "./app/not-found-card";
 import { RouteLayout } from "./app/route-layout";
-import { RootLayout } from "./components/layout";
 import { clerk } from "./lib/auth";
 import { queryClient } from "./queries/global";
 import { routeTree } from "./routeTree.gen";

frontend/src/app/data-providers/cloud-data-provider.tsx

@@ -1,7 +1,7 @@
 import type { Clerk } from "@clerk/clerk-js";
 import { type Rivet, RivetClient } from "@rivet-gg/cloud";
 import { type FetchFunction, fetcher } from "@rivetkit/engine-api-full/core";
-import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
+import { infiniteQueryOptions, QueryKey, QueryOptions, queryOptions, UseQueryOptions } from "@tanstack/react-query";
 import { cloudEnv } from "@/lib/env";
 import { queryClient } from "@/queries/global";
 import { RECORDS_PER_PAGE } from "./default-data-provider";
@@ -360,7 +360,7 @@ export const createNamespaceContext = ({
 		currentNamespaceAccessTokenQueryOptions() {
 			return parent.accessTokenQueryOptions({ namespace });
 		},
-		engineAdminTokenQueryOptions() {
+		engineAdminTokenQueryOptions(): UseQueryOptions<string> {
 			return queryOptions({
 				staleTime: 5 * 60 * 1000, // 5 minutes
 				gcTime: 5 * 60 * 1000, // 5 minutes
@@ -372,7 +372,7 @@ export const createNamespaceContext = ({
 					},
 					"tokens",
 					"engine-admin",
-				],
+				] as QueryKey,
 				queryFn: async () => {
 					const f = parent.client.namespaces.createSecretToken(
 						parent.project,

frontend/src/app/data-providers/default-data-provider.tsx

@@ -1,7 +1,10 @@
 import {
 	infiniteQueryOptions,
+	mutationOptions,
 	type MutationOptions,
+	QueryKey,
 	queryOptions,
+	UseInfiniteQueryOptions,
 } from "@tanstack/react-query";
 import type {
 	ActorId,
@@ -73,7 +76,7 @@ const defaultContext = {
 	},
 	actorsQueryOptions(opts: ActorQueryOptions) {
 		return infiniteQueryOptions({
-			queryKey: ["actors", opts],
+			queryKey: ["actors", opts] as QueryKey,
 			initialPageParam: undefined as string | undefined,
 			enabled: false,
 			refetchInterval: 2000,
@@ -101,7 +104,7 @@ const defaultContext = {
 
 	buildsQueryOptions() {
 		return infiniteQueryOptions({
-			queryKey: ["actors", "builds"],
+			queryKey: ["actors", "builds"] as QueryKey,
 			enabled: false,
 			initialPageParam: undefined as string | undefined,
 			refetchInterval: 2000,
@@ -159,7 +162,7 @@ const defaultContext = {
 			queryFn: async () => {
 				return {} as Actor;
 			},
-			queryKey: ["actor", actorId],
+			queryKey: ["actor", actorId] as QueryKey,
 		});
 	},
 
@@ -217,7 +220,7 @@ const defaultContext = {
 	},
 	actorBuildQueryOptions(actorId: ActorId) {
 		return queryOptions({
-			queryKey: ["actor", actorId, "build"],
+			queryKey: ["actor", actorId, "build"] as QueryKey,
 			queryFn: async () => {
 				throw new Error("Not implemented");
 				return {} as Build;
@@ -227,7 +230,7 @@ const defaultContext = {
 	},
 	actorMetricsQueryOptions(actorId: ActorId) {
 		return queryOptions({
-			queryKey: ["actor", actorId, "metrics"],
+			queryKey: ["actor", actorId, "metrics"] as QueryKey,
 			queryFn: async () => {
 				throw new Error("Not implemented");
 				return {} as ActorMetrics;
@@ -249,7 +252,7 @@ const defaultContext = {
 	},
 	actorDestroyMutationOptions(actorId: ActorId) {
 		return {
-			mutationKey: ["actor", actorId, "destroy"],
+			mutationKey: ["actor", actorId, "destroy"] as QueryKey,
 			mutationFn: async () => {
 				return;
 			},
@@ -267,7 +270,7 @@ const defaultContext = {
 	},
 	actorLogsQueryOptions(actorId: ActorId) {
 		return infiniteQueryOptions({
-			queryKey: ["actor", actorId, "logs"],
+			queryKey: ["actor", actorId, "logs"] as QueryKey,
 			initialPageParam: null as string | null,
 			queryFn: async () => {
 				throw new Error("Not implemented");
@@ -316,7 +319,7 @@ const defaultContext = {
 	// #endregion
 	regionsQueryOptions() {
 		return infiniteQueryOptions({
-			queryKey: ["actor", "regions"],
+			queryKey: ["actor", "regions"] as QueryKey,
 			initialPageParam: null as string | null,
 			queryFn: async () => {
 				throw new Error("Not implemented");
@@ -328,7 +331,7 @@ const defaultContext = {
 	},
 	regionQueryOptions(regionId: string | undefined) {
 		return queryOptions({
-			queryKey: ["actor", "region", regionId],
+			queryKey: ["actor", "region", regionId] as QueryKey,
 			enabled: !!regionId,
 			queryFn: async () => {
 				throw new Error("Not implemented");
@@ -338,7 +341,7 @@ const defaultContext = {
 	},
 	statusQueryOptions() {
 		return queryOptions({
-			queryKey: ["status"],
+			queryKey: ["status"] as QueryKey,
 			refetchInterval: 1000,
 			enabled: false,
 			retry: 0,
@@ -349,8 +352,8 @@ const defaultContext = {
 		});
 	},
 	createActorMutationOptions() {
-		return {
-			mutationKey: ["createActor"],
+		return mutationOptions({
+			mutationKey: ["createActor"] as QueryKey,
 			mutationFn: async (_: CreateActor) => {
 				throw new Error("Not implemented");
 				return "";
@@ -365,7 +368,7 @@ const defaultContext = {
 					},
 				});
 			},
-		};
+		});
 	},
 };