Switch to React Router (#119)

Signed-off-by: Nik Nasr <[email protected]>

apps/web-ui/.gitignore

@@ -2,3 +2,4 @@
 build
 public/build
 .env
+.react-router

apps/web-ui/app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from '@remix-run/react';
+import { HydratedRouter } from 'react-router/dom';
 import { startTransition, StrictMode } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { register } from '@restate/data-access/middleware-service-worker';
@@ -8,7 +8,7 @@ register().then(() => {
     hydrateRoot(
       document,
       <StrictMode>
-        <RemixBrowser />
+        <HydratedRouter />
       </StrictMode>
     );
   });

apps/web-ui/app/root.tsx

@@ -6,9 +6,9 @@ import {
   Scripts,
   ScrollRestoration,
   useNavigate,
-} from '@remix-run/react';
+} from 'react-router';
 import styles from './tailwind.css?url';
-import type { LinksFunction } from '@remix-run/node';
+import type { LinksFunction } from 'react-router';
 import { LayoutOutlet, LayoutProvider, LayoutZone } from '@restate/ui/layout';
 import { RouterProvider } from 'react-aria-components';
 import { Button, Spinner } from '@restate/ui/button';
@@ -34,6 +34,11 @@ export const links: LinksFunction = () => [
     rel: 'preconnect',
     href: 'https://rsms.me/',
   },
+  // TODO: move to the its own lib
+  {
+    rel: 'stylesheet',
+    href: 'https://unpkg.com/@stoplight/elements/styles.min.css',
+  },
   { rel: 'stylesheet', href: styles },
   { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
   {
@@ -85,6 +90,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
         </RouterProvider>
         <ScrollRestoration />
         <Scripts />
+        {/* TODO: move to its own lib */}
+        <script
+          src="https://unpkg.com/@stoplight/elements/web-components.min.js"
+          async
+          defer
+        ></script>
       </body>
     </html>
   );

apps/web-ui/app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, route, index } from '@react-router/dev/routes';
+
+export default [
+  index('routes/_index.tsx'),
+  route('overview', 'routes/overview.tsx'),
+  route('invocations', 'routes/invocations.tsx'),
+] satisfies RouteConfig;

apps/web-ui/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import { redirect } from '@remix-run/react';
+import { redirect } from 'react-router';
 
 export const clientLoader = () => redirect('/overview');
 export default () => null;

apps/web-ui/app/tailwind.css

@@ -1,5 +1,4 @@
-@import '@stoplight/elements/styles.min.css';
-
+/* @import 'https://unpkg.com/@stoplight/elements/styles.min.css'; */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/web-ui/constants.ts

@@ -0,0 +1 @@
+export const BASE_URL = '/ui/';

apps/web-ui/package.json

@@ -6,15 +6,13 @@
   "scripts": {},
   "type": "module",
   "dependencies": {
-    "@remix-run/node": "^2.8.1",
-    "@remix-run/react": "^2.8.1",
-    "@remix-run/serve": "^2.8.1",
+    "@react-router/node": "7.0.0",
     "isbot": "^4.4.0",
     "react": "19.0.0-rc-65903583-20240805",
-    "react-dom": "19.0.0-rc-65903583-20240805"
+    "react-dom": "19.0.0-rc-65903583-20240805",
+    "react-router": "7.0.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.8.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "eslint": "^8.56.0",

apps/web-ui/project.json

@@ -11,7 +11,7 @@
       "options": {
         "commands": [
           {
-            "command": "cd apps/web-ui && ../../node_modules/.bin/remix vite:dev --port=4300"
+            "command": "cd apps/web-ui && ../../node_modules/.bin/react-router dev --port=4300"
           }
         ]
       },
@@ -22,7 +22,7 @@
               "command": "nx serve mock-admin-api"
             },
             {
-              "command": "cd apps/web-ui && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/remix vite:dev --port=4300"
+              "command": "cd apps/web-ui && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/react-router dev --port=4300"
             }
           ],
           "parallel": true
@@ -33,7 +33,7 @@
               "command": "nx serve mock-admin-api -c proxy"
             },
             {
-              "command": "cd apps/web-ui && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/remix vite:dev --port=4300"
+              "command": "cd apps/web-ui && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/react-router dev --port=4300"
             }
           ],
           "parallel": true
@@ -45,7 +45,7 @@
       "options": {
         "commands": [
           "rm -R -f dist/apps/web-ui",
-          "cd apps/web-ui && ../../node_modules/.bin/remix vite:build",
+          "cd apps/web-ui && NODE_ENV=production ../../node_modules/.bin/react-router build",
           "mkdir -p dist/apps/web-ui",
           "mv apps/web-ui/build/client/* dist/apps/web-ui",
           "rm -R apps/web-ui/build"
@@ -57,7 +57,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          "cd apps/web-ui && ../../node_modules/.bin/remix vite:build && ../../node_modules/.bin/vite preview --port=4300"
+          "cd apps/web-ui && NODE_ENV=production ../../node_modules/.bin/react-router build && ../../node_modules/.bin/vite preview --port=4300"
         ]
       },
       "configurations": {
@@ -67,7 +67,7 @@
               "command": "nx serve mock-admin-api"
             },
             {
-              "command": "cd apps/web-ui && ../../node_modules/.bin/remix vite:build && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/vite preview --port=4300"
+              "command": "cd apps/web-ui && NODE_ENV=production && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/vite preview --port=4300"
             }
           ],
           "parallel": true
@@ -78,7 +78,7 @@
               "command": "nx serve mock-admin-api -c proxy"
             },
             {
-              "command": "cd apps/web-ui && ../../node_modules/.bin/remix vite:build && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/vite preview --port=4300"
+              "command": "cd apps/web-ui && NODE_ENV=production ../../node_modules/.bin/react-router build && ADMIN_BASE_URL=http://localhost:4001 ../../node_modules/.bin/vite preview --port=4300"
             }
           ],
           "parallel": true

apps/web-ui/react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from '@react-router/dev/config';
+import { BASE_URL } from './constants';
+
+export default {
+  ssr: false,
+  basename: BASE_URL,
+} satisfies Config;

apps/web-ui/test-setup.ts

@@ -1,3 +1 @@
-import { installGlobals } from '@remix-run/node';
 import '@testing-library/jest-dom/matchers';
-installGlobals();

apps/web-ui/tests/routes/_index.spec.tsx

@@ -1,9 +1,9 @@
-import { createRemixStub } from '@remix-run/testing';
+import { createRoutesStub } from 'react-router';
 import { render, screen, waitFor } from '@testing-library/react';
 import Index, { clientLoader } from '../../app/routes/_index';
 
 test('renders loader data', async () => {
-  const RemixStub = createRemixStub([
+  const RemixStub = createRoutesStub([
     {
       path: '/',
       Component: Index,

apps/web-ui/tsconfig.app.json

@@ -1,10 +1,16 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": ["../../@types/vite.d.ts", "../../@types/global-env.d.ts"]
+    "types": [
+      "@react-router/node",
+      "vite/client",
+      "../../@types/vite.d.ts",
+      "../../@types/global-env.d.ts"
+    ],
+    "rootDirs": [".", "./.react-router/types"]
   },
   "include": [
-    "remix.env.d.ts",
+    ".react-router/types/**/*",
     "app/**/*.ts",
     "app/**/*.tsx",
     "app/**/*.js",

apps/web-ui/tsconfig.json

@@ -1,17 +1,19 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true
+    "noEmit": true,
+    "skipLibCheck": true,
+    "module": "ESNext"
   },
   "include": [],
   "files": [],

apps/web-ui/vite.config.ts

@@ -1,11 +1,9 @@
-import { vitePlugin as remix } from '@remix-run/dev';
-import { defineConfig, loadEnv } from 'vite';
+import { reactRouter } from '@react-router/dev/vite';
+import { defineConfig, loadEnv, Plugin } from 'vite';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import license from 'rollup-plugin-license';
 import path from 'path';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
-
-const BASE_URL = '/ui/';
+import { BASE_URL } from './constants';
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
@@ -37,19 +35,9 @@ export default defineConfig(({ mode }) => {
           return !env.isSsrBuild;
         },
       },
-      !process.env.VITEST &&
-        remix({
-          ssr: false,
-          basename: BASE_URL,
-          future: {
-            v3_fetcherPersist: true,
-            v3_relativeSplatPath: true,
-            v3_throwAbortReason: true,
-          },
-        }),
+      !process.env.VITEST && reactRouter(),
       nxViteTsPaths(),
-      nodePolyfills(),
-    ],
+    ] as Plugin[],
 
     // Uncomment this if you are using workers.
     worker: {

libs/features/overview-route/src/lib/DeleteDeployment.tsx

@@ -8,7 +8,7 @@ import {
   DELETE_DEPLOYMENT_QUERY_PARAM,
   DEPLOYMENT_QUERY_PARAM,
 } from './constants';
-import { Form, useSearchParams } from '@remix-run/react';
+import { Form, useSearchParams } from 'react-router';
 import { Button, SubmitButton } from '@restate/ui/button';
 import { ErrorBanner } from '@restate/ui/error';
 import { FormFieldInput } from '@restate/ui/form-field';

libs/features/overview-route/src/lib/Deployment.tsx

@@ -10,7 +10,7 @@ import {
 import { Revision } from './Revision';
 import { DEPLOYMENT_QUERY_PARAM } from './constants';
 import { Link } from '@restate/ui/link';
-import { useSearchParams } from '@remix-run/react';
+import { useSearchParams } from 'react-router';
 import { useRef } from 'react';
 
 const styles = tv({

libs/features/overview-route/src/lib/Details/Deployment.tsx

@@ -7,7 +7,7 @@ import {
   DELETE_DEPLOYMENT_QUERY_PARAM,
   DEPLOYMENT_QUERY_PARAM,
 } from '../constants';
-import { useSearchParams } from '@remix-run/react';
+import { useSearchParams } from 'react-router';
 import { Section, SectionContent, SectionTitle } from '@restate/ui/section';
 import { Icon, IconName } from '@restate/ui/icons';
 import {

libs/features/overview-route/src/lib/Details/Service.tsx

@@ -10,7 +10,7 @@ import {
   useModifyService,
   useServiceDetails,
 } from '@restate/data-access/admin-api';
-import { Form, useSearchParams } from '@remix-run/react';
+import { Form, useSearchParams } from 'react-router';
 import { Handler } from '../Handler';
 import { Icon, IconName } from '@restate/ui/icons';
 import { ServiceType } from '../ServiceType';

libs/features/overview-route/src/lib/Handler.tsx

@@ -12,7 +12,7 @@ import {
 } from '@restate/ui/popover';
 import { ServicePlaygroundTrigger } from './ServicePlayground';
 import { ComponentProps } from 'react';
-import { JsonSchemaViewer } from './StopLight';
+import { JsonSchemaViewer } from '@restate/ui/api';
 
 const styles = tv({
   base: 'flex flex-col gap-0.5 relative',
@@ -154,9 +154,7 @@ function HandlerInputOutput({
               >
                 <JsonSchemaViewer
                   className="font-mono [&>*>[aria-haspopup]]:mt-2 [&>*[data-test='property-description']]:mt-2"
-                  schema={schema as any}
-                  disableCrumbs
-                  renderRootTreeLines
+                  schema={schema}
                 />
               </DropdownSection>
             </PopoverContent>

libs/features/overview-route/src/lib/RegisterDeployment/Context.tsx

@@ -1,4 +1,4 @@
-import { Form } from '@remix-run/react';
+import { Form } from 'react-router';
 import {
   createContext,
   FormEvent,

libs/features/overview-route/src/lib/Service.tsx

@@ -5,7 +5,7 @@ import { Deployment } from './Deployment';
 import { TruncateWithTooltip } from '@restate/ui/tooltip';
 import { Link } from '@restate/ui/link';
 import { SERVICE_QUERY_PARAM } from './constants';
-import { useSearchParams } from '@remix-run/react';
+import { useSearchParams } from 'react-router';
 import { useRef } from 'react';
 
 const styles = tv({

libs/features/overview-route/src/lib/ServicePlayground.tsx

@@ -1,4 +1,4 @@
-import { useSearchParams, useNavigate } from '@remix-run/react';
+import { useSearchParams, useNavigate } from 'react-router';
 import { useServiceOpenApi } from '@restate/data-access/admin-api';
 import { Button } from '@restate/ui/button';
 import { QueryDialog, DialogContent, DialogClose } from '@restate/ui/dialog';
@@ -7,7 +7,7 @@ import { SERVICE_PLAYGROUND_QUERY_PARAM } from './constants';
 import { ComponentProps, useMemo } from 'react';
 import { useRestateContext } from '@restate/features/restate-context';
 import { tv } from 'tailwind-variants';
-import { API } from './StopLight';
+import { API } from '@restate/ui/api';
 
 const styles = tv({
   base: 'px-1.5 py-0.5 text-xs font-normal font-sans rounded-md flex items-center gap-1',
@@ -47,7 +47,6 @@ export function ServicePlaygroundTrigger({
       }}
       variant={variant}
       className={styles({ className })}
-      onHover={() => import('@stoplight/elements')}
     >
       Playground
       <Icon name={IconName.ExternalLink} className="w-3 h-3" />
@@ -79,12 +78,7 @@ export function ServicePlayground() {
       >
         {apiSpec ? (
           <>
-            <API
-              apiDescriptionDocument={apiSpec}
-              router="hash"
-              hideExport
-              layout="responsive"
-            />
+            <API apiDescriptionDocument={apiSpec} />
             <DialogClose>
               <Button variant="icon" className="absolute right-3 top-3">
                 <Icon name={IconName.X} className="w-5 h-5" />