Migrate to react-router 7.

LanDinh · Dec 24, 2024 · 9ee2e21 · 9ee2e21
1 parent da353a2
commit 9ee2e21
Show file tree

Hide file tree

Showing 27 changed files with 250 additions and 296 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # Frontend
 /frontend/node_modules/*
+/frontend/.react-router/*
 /frontend/khaleesi/app/khaleesi/proto/*
 
 # Backend

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -15,7 +15,7 @@ WORKDIR /code
 COPY ./package.json /code/
 COPY ./package-lock.json /code/
 COPY ./tsconfig.json /code/
-COPY vite.config.mts /code/
+COPY ./vite.config.mts /code/
 RUN sed -i "s/\${SITE}/${SITE}/" "/code/package.json"
 RUN sed -i "s/\${KHALEESI_VERSION}/${KHALEESI_VERSION}/" "/code/package.json"
 RUN sed -i "s/\${SITE}/${SITE}/" "/code/package-lock.json"
@@ -38,7 +38,7 @@ ENV SITE=${site}
 
 # Data.
 COPY ./.eslintrc.js /code/
-COPY ./jest.config.js /code/
+COPY ./jest.config.ts /code/
 COPY execute_develop.sh /code/execute.sh
 
 ################################################################################

diff --git a/frontend/admin/app/home/indexRoute.tsx b/frontend/admin/app/home/indexRoute.tsx
@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/node'
+import type { MetaFunction } from 'react-router'
 import { useContext } from 'react'
 import { AppContext } from '../khaleesi/home/document'
 

diff --git a/frontend/admin/app/routes.ts b/frontend/admin/app/routes.ts
@@ -1,5 +1,5 @@
-import type { RouteConfig } from '@remix-run/route-config'
-import { route } from '@remix-run/route-config'
+import type { RouteConfig } from '@react-router/dev/routes'
+import { route } from '@react-router/dev/routes'
 import { routes } from './khaleesi/routes'
 
 export default [

diff --git a/frontend/jest.config.js → frontend/jest.config.ts b/frontend/jest.config.js → frontend/jest.config.ts
@@ -1,5 +1,6 @@
-// noinspection JSUnresolvedReference
-module.exports = {
+import type { Config } from 'jest'
+
+export default {
   preset: 'ts-jest',
   testEnvironment: './app/khaleesi/testUtil/attachFetchApi.ts',
   transform: {
@@ -18,4 +19,4 @@ module.exports = {
     '^@web3-storage/multipart-parser$': require.resolve('@web3-storage/multipart-parser'),
   },
   testMatch: [ "**/tests/**/test*.ts?(x)" ]
-}
+} satisfies Config
diff --git a/frontend/khaleesi/app/khaleesi/auth/loginRoute.tsx b/frontend/khaleesi/app/khaleesi/auth/loginRoute.tsx
@@ -1,7 +1,5 @@
-import type { MetaFunction, ActionFunctionArgs, TypedResponse } from '@remix-run/node'
-import { data } from '@remix-run/node'
-import type { UNSAFE_DataWithResponseInit } from '@remix-run/router'
-import { Form } from 'react-router'
+import { Form, data } from 'react-router'
+import type { MetaFunction, ActionFunctionArgs, UNSAFE_DataWithResponseInit } from 'react-router'
 import { useContext } from 'react'
 import { AppContext } from '../home/document'
 import { breadcrumb } from '../navigation/breadcrumb'
@@ -25,9 +23,13 @@ export const meta: MetaFunction = () => {
 
 export async function action(
     { request }: ActionFunctionArgs,
-): Promise<TypedResponse<{ message: string }> | UNSAFE_DataWithResponseInit<{
-    fieldErrors: { user: string | null }, formError: string | null
-}>> {
+): Promise<Response
+    | UNSAFE_DataWithResponseInit<{ message: string }>
+    | UNSAFE_DataWithResponseInit<{
+        fieldErrors: { user: string | null },
+        formError: string | null,
+    }>
+> {
   const session = new Session()
   await session.init(request)
   const form = await request.formData()

diff --git a/frontend/khaleesi/app/khaleesi/auth/logoutRoute.tsx b/frontend/khaleesi/app/khaleesi/auth/logoutRoute.tsx
@@ -1,4 +1,4 @@
-import type { MetaFunction, ActionFunctionArgs, TypedResponse } from '@remix-run/node'
+import type { MetaFunction, ActionFunctionArgs, UNSAFE_DataWithResponseInit } from 'react-router'
 import { Form } from 'react-router'
 import { useContext } from 'react'
 import { AppContext } from '../home/document'
@@ -21,7 +21,7 @@ export const meta: MetaFunction = () => {
   ]
 }
 
-export async function action({ request }: ActionFunctionArgs): Promise<TypedResponse<never>> {
+export async function action({ request }: ActionFunctionArgs): Promise<Response | UNSAFE_DataWithResponseInit<{ message: string }>> {
   const session = new Session()
   await session.init(request)
   return session.destroy('/')

diff --git a/frontend/khaleesi/app/khaleesi/auth/session.server.ts b/frontend/khaleesi/app/khaleesi/auth/session.server.ts
@@ -1,11 +1,10 @@
+import type { UNSAFE_DataWithResponseInit, Session as RemixSession } from 'react-router'
 import {
   createCookieSessionStorage,
   redirectDocument,
   redirect,
-  json,
-  type Session as RemixSession,
-  type TypedResponse,
-} from '@remix-run/node'
+  data,
+} from 'react-router'
 
 
 const sessionSecret = 'shouldBeSetByBackend'
@@ -46,9 +45,9 @@ export class Session {
   async create(
     sessionId : string,
     redirectTo: string,
-  ): Promise<TypedResponse<never | { message: string }>> {
+  ): Promise<Response | UNSAFE_DataWithResponseInit<{ message: string }>> {
     if (!this.initialized) {
-      return json({ message: 'No session available yet!' })
+      return data({ message: 'No session available yet!' })
     }
     this.remixSession!.set('sessionId', sessionId)
     this.remixSession!.set('permission', sessionId)
@@ -58,7 +57,9 @@ export class Session {
     )
   }
 
-  async destroy(redirectTo: string): Promise<TypedResponse<never>> {
+  async destroy(
+      redirectTo: string,
+  ): Promise<Response | UNSAFE_DataWithResponseInit<{ message: string }>> {
     if (this.initialized) {
       this.initialized   = false
       this.authenticated = false
@@ -91,7 +92,7 @@ export class Session {
       if (!this.authenticated) {
         throw redirect('/login')
       }
-      throw json({ message: 'Permission denied.' }, { status: 403 })
+      throw data({ message: 'Permission denied.' }, { status: 403 })
     }
   }
 }
diff --git a/frontend/khaleesi/app/khaleesi/home/document.server.tsx b/frontend/khaleesi/app/khaleesi/home/document.server.tsx
@@ -1,4 +1,4 @@
-import type { LoaderFunctionArgs } from '@remix-run/node'
+import type { LoaderFunctionArgs } from 'react-router'
 import { navigationData } from '../../navigationData'
 import {
   topNavigationData,

diff --git a/frontend/khaleesi/app/khaleesi/home/document.tsx b/frontend/khaleesi/app/khaleesi/home/document.tsx
@@ -1,5 +1,5 @@
 import { createContext, type Context, type PropsWithChildren } from 'react'
-import type { LinksFunction } from '@remix-run/node'
+import type { LinksFunction } from 'react-router'
 import {
   Meta,
   Links as RemixLinks,

diff --git a/frontend/khaleesi/app/khaleesi/routes.ts b/frontend/khaleesi/app/khaleesi/routes.ts
@@ -1,5 +1,5 @@
-import type { RouteConfig } from '@remix-run/route-config'
-import { route } from '@remix-run/route-config'
+import type { RouteConfig } from '@react-router/dev/routes'
+import { route } from '@react-router/dev/routes'
 
 export const routes = [
   route('/login', 'khaleesi/auth/loginRoute.tsx'),

diff --git a/frontend/khaleesi/app/khaleesi/testUtil/remixStub.tsx b/frontend/khaleesi/app/khaleesi/testUtil/remixStub.tsx
@@ -1,18 +1,11 @@
-import type { HydrationState, InitialEntry } from '@remix-run/router'
-import type { UNSAFE_FutureConfig as FutureConfig } from '@remix-run/react'
-import { createRemixStub } from '@remix-run/testing'
+import { createRoutesStub } from 'react-router'
+import type { RoutesTestStubProps } from 'react-router'
 import type React from 'react'
 
 
-type RemixStubOptions = {
-  initialEntries?   : InitialEntry[]
-  hydrationData?    : HydrationState
-  initialIndex?     : number
-  remixConfigFuture?: Partial<FutureConfig>
-}
 export function createTestingStub(
   element: React.ComponentType,
   path   : string = '/',
-): (options: RemixStubOptions) => JSX.Element {
-  return createRemixStub([{ path: path, Component: element }])
+): (options: RoutesTestStubProps) => JSX.Element {
+  return createRoutesStub([{ path: path, Component: element }])
 }
diff --git a/frontend/khaleesi_frontend_tests/app/routes.ts b/frontend/khaleesi_frontend_tests/app/routes.ts
@@ -1,5 +1,5 @@
-import type { RouteConfig } from '@remix-run/route-config'
-import { route } from '@remix-run/route-config'
+import type { RouteConfig } from '@react-router/dev/routes'
+import { route } from '@react-router/dev/routes'
 import { routes } from './khaleesi/routes'
 
 export default [

diff --git a/frontend/khaleesi_frontend_tests/app/routes/kitchen._index.tsx b/frontend/khaleesi_frontend_tests/app/routes/kitchen._index.tsx
@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/node'
+import type { MetaFunction } from 'react-router'
 
 export const meta: MetaFunction = () => {
   return [

diff --git a/frontend/khaleesi_frontend_tests/app/routes/kitchen.cookbook._index.tsx b/frontend/khaleesi_frontend_tests/app/routes/kitchen.cookbook._index.tsx
@@ -1,4 +1,4 @@
-import type { MetaFunction } from '@remix-run/node'
+import type { MetaFunction } from 'react-router'
 import { useLoaderData } from 'react-router'
 import type { khaleesi } from '../khaleesi/proto/proto'
 

diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testLoginRoute.tsx b/frontend/khaleesi_frontend_tests/tests/testAuth/testLoginRoute.tsx
@@ -1,12 +1,12 @@
 import '@testing-library/jest-dom'
-import type { ActionFunctionArgs } from '@remix-run/node'
+import type { ActionFunctionArgs } from 'react-router'
 import { render, screen } from '@testing-library/react'
 import LoginRoute, { action } from '../../app/khaleesi/auth/loginRoute'
 import { suppressReactRouterFutureWarnings } from '../../app/khaleesi/testUtil/consoleLogging'
 import { createTestingStub } from '../../app/khaleesi/testUtil/remixStub'
 
 
-jest.mock('@remix-run/node', () => ({
+jest.mock('react-router', () => ({
   json: jest.fn(),
 }))
 const originalWarning = console.warn.bind(console.warn)

diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogoutRoute.tsx b/frontend/khaleesi_frontend_tests/tests/testAuth/testLogoutRoute.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom'
-import type { ActionFunctionArgs } from '@remix-run/node'
+import type { ActionFunctionArgs } from 'react-router'
 import { render, screen } from '@testing-library/react'
 import LogoutRoute, { action } from '../../app/khaleesi/auth/logoutRoute'
 import { suppressReactRouterFutureWarnings } from '../../app/khaleesi/testUtil/consoleLogging'
@@ -8,7 +8,7 @@ import { createTestingStub } from '../../app/khaleesi/testUtil/remixStub'
 
 const originalWarning = console.warn.bind(console.warn)
 
-jest.mock('@remix-run/node', () => ({
+jest.mock('react-router', () => ({
   json: jest.fn(),
 }))
 const sessionMock = jest.fn()

diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testSession.ts b/frontend/khaleesi_frontend_tests/tests/testAuth/testSession.ts
@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom'
-import * as nodeMock from '@remix-run/node'
+import * as nodeMock from 'react-router'
 import { Session } from '../../app/khaleesi/auth/session.server'
 
 
 // Need to mock everything instead of using jest.requireActual because of errors...
-jest.mock('@remix-run/node', () => ({
+jest.mock('react-router', () => ({
   createCookieSessionStorage: jest.fn(() => ({
     getSession    : jest.fn(() => ({
       set: jest.fn(),
@@ -16,7 +16,7 @@ jest.mock('@remix-run/node', () => ({
   })),
   redirectDocument: jest.fn(),
   redirect: jest.fn(),
-  json: jest.fn((json) => ({ json: jest.fn(() => json) })),
+  data: jest.fn((data) => ({ data: jest.fn(() => data) })),
 }))
 afterAll(() => {
   jest.clearAllMocks()
@@ -146,7 +146,7 @@ test('Initialize user session.', async () => {
 test('Create user session without initializing.', async () => {
   // Prepare data.
   const session = new Session()
-  const jsonSpy = jest.spyOn(nodeMock, 'json')
+  const jsonSpy = jest.spyOn(nodeMock, 'data')
   // Execute test.
   await session.create('id', 'redirect')
   // Assert result.

diff --git a/frontend/khaleesi_frontend_tests/tests/testHome/testDocument.tsx b/frontend/khaleesi_frontend_tests/tests/testHome/testDocument.tsx
@@ -18,11 +18,7 @@ const originalWarning = console.warn.bind(console.warn)
 jest.mock('../../app/khaleesi/navigation/navigation')
 jest.mock('../../app/khaleesi/home/content')
 jest.mock('../../app/khaleesi/navigation/breadcrumb')
-jest.mock('@remix-run/node')
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
-  useLoaderData: jest.fn(),
-}))
+jest.mock('react-router')
 
 const hasPermissionMock = jest.fn()
 jest.mock('../../app/khaleesi/auth/session.server', () => ({

diff --git a/frontend/khaleesi_frontend_tests/tests/testHome/testDocumentServer.tsx b/frontend/khaleesi_frontend_tests/tests/testHome/testDocumentServer.tsx
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom'
 import { loader } from '../../app/khaleesi/home/document.server'
 
 
-jest.mock('@remix-run/node')
+jest.mock('react-router')
 
 const hasPermissionMock = jest.fn()
 jest.mock('../../app/khaleesi/auth/session.server', () => ({