remix -> react-router

apps/studio/.gitignore

@@ -8,9 +8,8 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
+# react-router
+/.react-router/
 
 # production
 /build

apps/studio/app/entry.client.tsx

@@ -1,12 +0,0 @@
-import { RemixBrowser } from '@remix-run/react'
-import { startTransition, StrictMode } from 'react'
-import { hydrateRoot } from 'react-dom/client'
-
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>
-  )
-})

apps/studio/app/root.tsx

@@ -19,15 +19,7 @@ import 'ui/build/css/themes/light.css'
 
 import { loader } from '@monaco-editor/react'
 import { TooltipProvider } from '@radix-ui/react-tooltip'
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  UIMatch,
-  useMatches,
-} from '@remix-run/react'
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, UIMatch, useMatches } from 'react-router'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { ThemeProvider, useThemeSandbox } from 'common'

apps/studio/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from '@react-router/dev/routes'
+import { flatRoutes } from '@react-router/fs-routes'
+
+export default flatRoutes() satisfies RouteConfig

apps/studio/app/routes/project.$ref._index.tsx

@@ -1,7 +1,5 @@
 import Page from 'pages/project/[ref]/index'
 
-// testing, remove
-
 export const handle = {
   getLayout: Page.getLayout,
 }

apps/studio/components/layouts/WizardLayout.tsx

@@ -1,4 +1,4 @@
-import { useParams } from '@remix-run/react'
+import { useParams } from 'react-router'
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'
 

apps/studio/components/ui/Flag/FlagProvider.tsx

@@ -1,5 +1,5 @@
 import type { User } from '@supabase/supabase-js'
-import { FlagValues } from '@vercel/flags/react'
+// import { FlagValues } from '@vercel/flags/react'
 import { PropsWithChildren, useEffect, useState } from 'react'
 
 import { useUser } from 'lib/auth'
@@ -69,7 +69,7 @@ const FlagProvider = ({ children }: PropsWithChildren<{}>) => {
         [Joshen] Just support configcat flags in Vercel flags for now for simplicity
         although I think it should be fairly simply to support PH too 
       */}
-      <FlagValues values={store.configcat} />
+      {/* <FlagValues values={store.configcat} /> */}
       {children}
     </Provider>
   )

apps/studio/lib/next-compat/link.tsx

@@ -1,4 +1,4 @@
-import { Link as RemixLink } from '@remix-run/react'
+import { Link as RemixLink } from 'react-router'
 
 export default function Link({
   children,

apps/studio/lib/next-compat/next-router.d.ts

@@ -69,7 +69,7 @@ declare module 'next/router' {
   }
 
   /**
-   * @deprecated use functions from `@remix-run/react` instead
+   * @deprecated use functions from `react-router` instead
    */
   export function useRouter(): NextRouter
 }

apps/studio/lib/next-compat/router.ts

@@ -1,4 +1,4 @@
-import { useLocation, useParams, useSearchParams, useNavigate } from '@remix-run/react'
+import { useLocation, useParams, useSearchParams, useNavigate } from 'react-router'
 import { BASE_PATH } from 'lib/constants'
 import { NextRouter } from 'next/router'
 import { parse } from 'querystring'

apps/studio/package.json

@@ -5,9 +5,9 @@
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "remix vite:dev",
+    "dev": "react-router dev",
     "dev:secrets:pull": "AWS_PROFILE=supabase-dev node ../../scripts/getSecrets.js -n local/studio",
-    "build": "remix vite:build",
+    "build": "NODE_ENV=production react-router build",
     "start": "vite preview",
     "clean": "rimraf node_modules tsconfig.tsbuildinfo .vite .turbo",
     "test": "vitest --run",
@@ -16,7 +16,7 @@
     "test:update": "vitest --run --update",
     "test:update:watch": "vitest --watch --update",
     "deploy:staging": "VERCEL_ORG_ID=team_E6KJ1W561hMTjon1QSwOh0WO VERCEL_PROJECT_ID=QmcmhbiAtCMFTAHCuGgQscNbke4TzgWULECctNcKmxWCoT vercel --prod -A .vercel/staging.json",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "react-router typegen && tsc --noEmit",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write ."
   },
@@ -33,8 +33,9 @@
     "@number-flow/react": "^0.3.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remix-run/node": "^2.15.2",
-    "@remix-run/react": "^2.15.2",
+    "@react-router/fs-routes": "^7.1.1",
+    "@react-router/node": "^7.1.1",
+    "@react-router/serve": "^7.1.1",
     "@stripe/react-stripe-js": "^2.5.0",
     "@stripe/stripe-js": "^3.0.5",
     "@supabase/auth-js": "2.64.2",
@@ -67,6 +68,7 @@
     "icons": "workspace:*",
     "immutability-helper": "^3.1.1",
     "ip-num": "^1.5.1",
+    "isbot": "^5.1.20",
     "json-logic-js": "^2.0.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.436.0",
@@ -101,6 +103,7 @@
     "react-inlinesvg": "^4.0.4",
     "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.3",
+    "react-router": "^7.1.1",
     "react-simple-maps": "4.0.0-beta.6",
     "react-tracked": "^1.7.11",
     "react-use": "^17.5.0",
@@ -121,7 +124,6 @@
     "use-debounce": "^7.0.1",
     "uuid": "^9.0.1",
     "valtio": "^1.12.0",
-    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^1.6.0",
     "yup": "^1.4.0",
     "yup-password": "^0.3.0",
@@ -133,7 +135,7 @@
     "@aws-sdk/client-secrets-manager": "^3.410.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@radix-ui/react-use-escape-keydown": "^1.0.3",
-    "@remix-run/dev": "^2.15.2",
+    "@react-router/dev": "^7.1.1",
     "@supabase/postgres-meta": "^0.64.4",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.4.6",
@@ -167,7 +169,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/ui": "^1.6.0",
     "api-types": "workspace:*",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "common": "workspace:*",
     "config": "workspace:*",
     "date-fns": "^2.30.0",
@@ -179,12 +181,13 @@
     "postcss": "^8.4.31",
     "prettier": "3.2.4",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "sass": "^1.77.6",
+    "sass": "^1.83.1",
     "storybook-dark-mode": "^3.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.5.0",
     "vite": "^6.0.7",
     "vite-plugin-circular-dependency": "^0.5.0",
-    "vite-plugin-cjs-interop": "^2.1.6"
+    "vite-plugin-cjs-interop": "^2.1.6",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

apps/studio/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from '@react-router/dev/config'
+
+export default {
+  basename: process.env.NEXT_PUBLIC_BASE_PATH ?? '/',
+  ssr: false,
+} satisfies Config

apps/studio/tsconfig.json

@@ -1,18 +1,19 @@
 {
   "compilerOptions": {
-    "target": "ES2021",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES2023",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "rootDirs": [".", "./.react-router/types"],
     "baseUrl": ".",
     "downlevelIteration": true,
     "incremental": true,
@@ -20,20 +21,15 @@
       "@ui/*": ["./../../packages/ui/src/*"] // handle ui package paths
     },
     "useDefineForClassFields": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    "types": ["node", "vite/client"]
   },
   "include": [
-    "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "**/*.js",
     "**/*.jsx",
-    ".next/types/**/*.ts",
-    "./../../packages/ui/src/**/*.d.ts"
+    "./../../packages/ui/src/**/*.d.ts",
+    ".react-router/types/**/*"
   ],
   "exclude": ["node_modules"]
 }

apps/studio/vite.config.ts

@@ -1,5 +1,5 @@
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
-import { vitePlugin as remix } from '@remix-run/dev'
+import { reactRouter } from '@react-router/dev/vite'
 import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
 import circleDependency from 'vite-plugin-circular-dependency'
@@ -70,15 +70,7 @@ export default defineConfig(({ mode }) => {
           'react-copy-to-clipboard',
         ],
       }),
-      remix({
-        basename: process.env.NEXT_PUBLIC_BASE_PATH ?? '/',
-        ssr: false,
-        future: {
-          v3_fetcherPersist: true,
-          v3_relativeSplatPath: true,
-          v3_throwAbortReason: true,
-        },
-      }),
+      reactRouter(),
     ],
     optimizeDeps: {
       esbuildOptions: {