React v19 & その他対応

package.json

@@ -25,7 +25,6 @@
     "concurrently": "^9.0.1",
     "mzm-auth": "^1.0.1",
     "mzm-frontend": "^0.0.0",
-    "prettier": "^3.2.5",
-    "vitest": "^2.1.4"
+    "prettier": "^3.5.1"
   }
 }

packages/auth/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "bunyan": "^1.8.15",
-    "connect-redis": "^7.1.1",
+    "connect-redis": "^8.0.1",
     "cors": "^2.8.5",
     "express": "^4.21.1",
     "express-session": "^1.18.1",
@@ -40,8 +40,10 @@
     "@types/passport": "^1.0.17",
     "@types/passport-github": "^1.1.7",
     "@types/passport-twitter": "^1.0.37",
-    "eslint": "^9.13.0",
+    "eslint": "^9.20.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2"
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.5"
   }
 }

packages/auth/src/app.ts

@@ -4,7 +4,7 @@ import express, { type Request } from 'express'
 import cors from 'cors'
 import helmet from 'helmet'
 import passport from 'passport'
-import RedisStore from 'connect-redis'
+import { RedisStore } from 'connect-redis'
 import { Strategy as GitHubStrategy } from 'passport-github'
 import { Strategy as TwitterStrategy } from 'passport-twitter'
 import session from 'express-session'
@@ -121,13 +121,9 @@ export const createApp = ({ client }: Options) => {
     wrap(authorizeHandlers.token)
   )
 
-  app.get(
-    '/auth/twitter',
-    defaultHelmet,
-    (req, res, next) => {
-      oauthHandlers.oauth(passport, 'twitter')(req, res, next)
-    }
-  )
+  app.get('/auth/twitter', defaultHelmet, (req, res, next) => {
+    oauthHandlers.oauth(passport, 'twitter')(req, res, next)
+  })
   app.get(
     '/auth/twitter/callback',
     defaultHelmet,
@@ -145,13 +141,9 @@ export const createApp = ({ client }: Options) => {
     wrap(twitterHandlers.removeTwitter)
   )
 
-  app.get(
-    '/auth/github',
-    defaultHelmet,
-    (req, res, next) => {
-      oauthHandlers.oauth(passport, 'github')(req, res, next)
-    }
-  )
+  app.get('/auth/github', defaultHelmet, (req, res, next) => {
+    oauthHandlers.oauth(passport, 'github')(req, res, next)
+  })
   app.get(
     '/auth/github/callback',
     defaultHelmet,

packages/backend/package.json

@@ -31,7 +31,7 @@
     "mongodb": "^6.10.0",
     "multer": "^1.4.2",
     "node-schedule": "^2.1.0",
-    "undici": "^6.20.1",
+    "undici": "^7.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -40,8 +40,10 @@
     "@types/jsonwebtoken": "^9.0.7",
     "@types/multer": "^1.4.12",
     "@types/node-schedule": "^2.1.7",
-    "eslint": "^9.13.0",
+    "eslint": "^9.20.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2"
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.5"
   }
 }

packages/frontend/package.json

@@ -22,17 +22,19 @@
   "license": "MIT",
   "devDependencies": {
     "@types/dompurify": "^3.0.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react": "^19.0.9",
+    "@types/react-dom": "^19.0.3",
     "@types/validator": "^13.12.2",
-    "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.13.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.20.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0-rc-603e6108-20241029",
     "globals": "^15.11.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2"
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.0.11",
+    "vite-plugin-pwa": "^0.21.1",
+    "vitest": "^3.0.5"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -43,17 +45,15 @@
     "dayjs": "^1.11.13",
     "dompurify": "^3.1.7",
     "highlight.js": "^11.10.0",
-    "jsdom": "^25.0.1",
+    "jotai": "^2.12.0",
+    "jsdom": "^26.0.0",
     "jwt-decode": "^4.0.0",
-    "marked": "^11.0.1",
-    "marked-mangle": "^1.1.0",
+    "marked": "^15.0.6",
+    "marked-mangle": "^1.1.9",
     "normalize.css": "^8.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0",
-    "recoil": "^0.7.6",
-    "validator": "^13.12.0",
-    "vite": "^5.4.10",
-    "vite-plugin-pwa": "^0.20.5"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.5",
+    "validator": "^13.12.0"
   }
 }

packages/frontend/src/App.hooks.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
-import { useMessageListener } from './recoil/socket/hooks'
-import { useMyInfoActions } from './recoil/user/hooks'
-import { useAuth, useLoginFlag } from './recoil/auth/hooks'
+import { useLocation } from 'react-router'
+import { useMessageListener } from './state/socket/hooks'
+import { useMyInfoActions } from './state/user/hooks'
+import { useAuth, useLoginFlag } from './state/auth/hooks'
 import { getRoomName } from './lib/util'
-import { useUiActions } from './recoil/ui/hooks'
+import { useUiActions } from './state/ui/hooks'
 import { logger } from './lib/logger'
 import { comsumeSocket } from './lib/auth'
 import { events, type MessageEvent } from './lib/events'

packages/frontend/src/App.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 import { useApp } from './App.hooks'
 
-const App = () => {
+export default function App() {
   useApp()
 
   return (
@@ -11,4 +10,3 @@ const App = () => {
     </>
   )
 }
-export default App

packages/frontend/src/components/Header/MyInfo.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react'
 import styled from '@emotion/styled'
 import Settings from '@mui/icons-material/Settings'
-import { useUiActions } from '../../recoil/ui/hooks'
-import { useUserIdAndAccount } from '../../recoil/user/hooks'
+import { useUiActions } from '../../state/ui/hooks'
+import { useUserIdAndAccount } from '../../state/user/hooks'
 
 export const MyInfo = () => {
   const { userAccount, userIconUrl } = useUserIdAndAccount()

packages/frontend/src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { useUiActions } from '../../recoil/ui/hooks'
+import { useUiActions } from '../../state/ui/hooks'
 import { WIDTH_MOBILE } from '../../constants'
 import { Link } from '../atoms/Link'
 import { MobileMenuIcon } from '../atoms/MobileMenuIcon'

packages/frontend/src/components/Menu.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
 import Settings from '@mui/icons-material/Settings'
 import { WIDTH_MOBILE } from '../constants'
 import { useNumberLocalStorage } from '../lib/hooks/useLocalStorage'
-import { useMenuUi, useUiActions } from '../recoil/ui/hooks'
+import { useMenuUi, useUiActions } from '../state/ui/hooks'
 import { ResizerX } from './atoms/ResizerX'
 import { MobileMenuIcon } from './atoms/MobileMenuIcon'
 import { RoomNavi } from './RoomNavi'

packages/frontend/src/components/ModalUserProfile.tsx

@@ -4,7 +4,7 @@ import Clear from '@mui/icons-material/Clear'
 import { ModalBase } from './atoms/Modal'
 import { IconButton } from './atoms/Button'
 import { WIDTH_MOBILE } from '../constants'
-import { useUiActions, useUserDetailUi } from '../recoil/ui/hooks'
+import { useUiActions, useUserDetailUi } from '../state/ui/hooks'
 
 export const ModalUserProfile: React.FC = () => {
   const { closeUserDetail } = useUiActions()

packages/frontend/src/components/PageWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { type PropsWithChildren, type FC, type ReactNode } from 'react'
 import styled from '@emotion/styled'
-import { useUiActions, useMenuUi } from '../recoil/ui/hooks'
+import { useUiActions, useMenuUi } from '../state/ui/hooks'
 import { WIDTH_MOBILE } from '../constants'
 export { Header } from './Header'
 

packages/frontend/src/components/Room/InputArea/PlusMenu/VoteMessageBox.tsx

@@ -7,8 +7,8 @@ import React, {
 import styled from '@emotion/styled'
 import { Add } from '@mui/icons-material'
 import { WIDTH_MOBILE } from '../../../../constants'
-import { useCurrentRoom } from '../../../../recoil/rooms/hooks'
-import { useSocketActions } from '../../../../recoil/socket/hooks'
+import { useCurrentRoom } from '../../../../state/rooms/hooks'
+import { useSocketActions } from '../../../../state/socket/hooks'
 import { TextArea, type Props as TextAreaProps } from '../../../atoms/TextArea'
 import { Button } from '../../../atoms/Button'
 import { TransparentButton } from '../../../atoms/Button'

packages/frontend/src/components/Room/InputArea/index.tsx

@@ -9,9 +9,9 @@ import Add from '@mui/icons-material/Add'
 import SendIcon from '@mui/icons-material/Send'
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'
 import { WIDTH_MOBILE } from '../../../constants'
-import { useCurrentRoom } from '../../../recoil/rooms/hooks'
-import { useSocketActions } from '../../../recoil/socket/hooks'
-import { usePostTextArea } from '../../../recoil/postTextArea/hooks'
+import { useCurrentRoom } from '../../../state/rooms/hooks'
+import { useSocketActions } from '../../../state/socket/hooks'
+import { usePostTextArea } from '../../../state/postTextArea/hooks'
 import { Button } from '../../atoms/Button'
 import { ResizerY } from '../../atoms/ResizerY'
 import { TextArea } from '../../atoms/TextArea'

packages/frontend/src/components/Room/Messages/Message.hooks.tsx

@@ -1,9 +1,9 @@
 import { useRef, useEffect, useMemo, useCallback } from 'react'
 import dayjs from 'dayjs'
-import { useMessageById } from '../../../recoil/messages/hooks'
-import { useUserAccount } from '../../../recoil/user/hooks'
-import { usePostTextArea } from '../../../recoil/postTextArea/hooks'
-import { useSocketActions } from '../../../recoil/socket/hooks'
+import { useMessageById } from '../../../state/messages/hooks'
+import { useUserAccount } from '../../../state/user/hooks'
+import { usePostTextArea } from '../../../state/postTextArea/hooks'
+import { useSocketActions } from '../../../state/socket/hooks'
 import { isReplied } from '../../../lib/util'
 
 export const useMessage = (id: string) => {
@@ -88,7 +88,7 @@ export const useMessage = (id: string) => {
     startToEdit(id, message)
   }, [id, message, startToEdit])
 
-  const prevIineRef = useRef<number>()
+  const prevIineRef = useRef<number | undefined>(undefined)
   useEffect(() => {
     prevIineRef.current = messageObj?.iine ?? undefined
   })

packages/frontend/src/components/Room/Messages/Message.tsx

@@ -29,7 +29,7 @@ const MessageElementInner: React.FC<Props> = (props) => {
     startEditHandler
   } = useMessage(props.id)
 
-  const firstIineRef = useRef<number>()
+  const firstIineRef = useRef<number | undefined>(undefined)
   useEffect(() => {
     firstIineRef.current = iine ?? undefined
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -85,6 +85,7 @@ const MessageElementInner: React.FC<Props> = (props) => {
         className="body"
         removed={removed}
         message={message}
+        // todo: worker
         html={sanitize(html)}
       />
       {vote && (

packages/frontend/src/components/Room/Messages/MessageHeader.tsx

@@ -6,8 +6,8 @@ import {
   Delete as DeleteIcon
 } from '@mui/icons-material'
 import { IconButton } from '../../atoms/Button'
-import { useUiActions } from '../../../recoil/ui/hooks'
-import { useUserAccount } from '../../../recoil/user/hooks'
+import { useUiActions } from '../../../state/ui/hooks'
+import { useUserAccount } from '../../../state/user/hooks'
 
 type Props = {
   id: string

packages/frontend/src/components/Room/Messages/MessageVote/Question.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import styled from '@emotion/styled'
-import { useSocketActions } from '../../../../recoil/socket/hooks'
-import { useUserIdAndAccount } from '../../../../recoil/user/hooks'
+import { useSocketActions } from '../../../../state/socket/hooks'
+import { useUserIdAndAccount } from '../../../../state/user/hooks'
 import {
   useVoteSocket,
   useVoteAnswerByIdAndIndex
-} from '../../../../recoil/messages/hooks'
+} from '../../../../state/messages/hooks'
 import { VoteAnswerTypeEnum } from './constants'
 import { VoteAnswer } from './VoteAnswer'
 import { VoteAnswerBar } from './VoteAnswerBar'

packages/frontend/src/components/Room/Messages/MessageVote/VoteAnswer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { VoteAnswerType } from '../../../../recoil/messages/hooks'
+import { VoteAnswerType } from '../../../../state/messages/hooks'
 import { VoteAnswerTypeEnum } from './constants'
 
 type Props = {

packages/frontend/src/components/Room/Messages/MessageVote/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { type StateMessageType } from '../../../../recoil/messages/hooks'
+import { type StateMessageType } from '../../../../state/messages/hooks'
 import { Question } from './Question'
 
 type Props = {

packages/frontend/src/components/Room/Messages/index.tsx

@@ -1,11 +1,11 @@
 import React, { useRef, useEffect, useMemo } from 'react'
 import styled from '@emotion/styled'
-import { useSocketActions } from '../../../recoil/socket/hooks'
+import { useSocketActions } from '../../../state/socket/hooks'
 import {
   useRooms,
   useCurrentRoom,
   useRoomById
-} from '../../../recoil/rooms/hooks'
+} from '../../../state/rooms/hooks'
 import { useIntersectionObserver } from '../../../lib/hooks/useIntersectionObserver'
 import { MessageElement } from './Message'
 

packages/frontend/src/components/Room/ModalUsersList.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react'
 import styled from '@emotion/styled'
 import CancelIcon from '@mui/icons-material/Cancel'
 import { ModalProps, ModalBase } from '../atoms/Modal'
-import { useRoomUserActions, useGetUsersById } from '../../recoil/rooms/hooks'
+import { useRoomUserActions, useGetUsersById } from '../../state/rooms/hooks'
 import { useIntersectionObserver } from '../../lib/hooks/useIntersectionObserver'
 import { WIDTH_MOBILE } from '../../constants'
 

packages/frontend/src/components/Room/RoomInfo.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react'
 import styled from '@emotion/styled'
 import { Home, Person, ExpandMore } from '@mui/icons-material'
-import { useUiActions } from '../../recoil/ui/hooks'
+import { useUiActions } from '../../state/ui/hooks'
 import {
   useRoomUserActions,
   useRoomSettingActions,
   useGetUsersById,
   useOpenRoomSettingFlag,
   useCurrentRoom
-} from '../../recoil/rooms/hooks'
+} from '../../state/rooms/hooks'
 import { WIDTH_MOBILE } from '../../constants'
 import { ModalUsersList } from './ModalUsersList'
 

packages/frontend/src/components/Room/SettingRoom/RoomStatus.tsx

@@ -5,8 +5,8 @@ import {
   useCurrentRoom,
   useRoomById,
   useRoomStatusActions
-} from '../../../recoil/rooms/hooks'
-import { useSocketActions } from '../../../recoil/socket/hooks'
+} from '../../../state/rooms/hooks'
+import { useSocketActions } from '../../../state/socket/hooks'
 
 export const SettingRoomStatus = () => {
   const { currentRoomId } = useCurrentRoom()

packages/frontend/src/components/Room/SettingRoom/index.hooks.tsx

@@ -1,11 +1,11 @@
 import { useState, useMemo, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import {
   useRoomActions,
   useCurrentRoom,
   useRoomById
-} from '../../../recoil/rooms/hooks'
-import { useSocketActions } from '../../../recoil/socket/hooks'
+} from '../../../state/rooms/hooks'
+import { useSocketActions } from '../../../state/socket/hooks'
 import { Props as RoomInfoProps } from './RoomInfo'
 
 export const useSettiongRooms = () => {