fix: some optimize

Signed-off-by: Innei <[email protected]>

Author: Innei

package.json

@@ -48,6 +48,7 @@
     "@vercel/analytics": "1.1.1",
     "@vercel/postgres": "0.5.0",
     "axios": "1.6.0",
+    "bypass-vue-devtools": "0.0.6",
     "clsx": "2.0.0",
     "daisyui": "3.9.4",
     "dayjs": "1.11.10",

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { cheatVueDevtools } from 'bypass-vue-devtools'
+
+import { init } from './init'
+
+init()
+
+export const InitInClient = () => {
+  useEffect(() => {
+    cheatVueDevtools()
+  }, [])
+  return null
+}

src/app/InitInClient.ts

@@ -1,6 +1,7 @@
-import dayjs from "dayjs"
+import dayjs from 'dayjs'
+
 import 'dayjs/locale/zh-cn'
 
 export const init = () => {
   dayjs.locale('zh-cn')
-}
+}

src/app/init.ts

@@ -23,6 +23,7 @@ import { queries } from '~/queries/definition'
 import { Providers } from '../providers/root'
 import { Analyze } from './analyze'
 import { init } from './init'
+import { InitInClient } from './InitInClient'
 
 const { version } = PKG
 init()
@@ -162,6 +163,7 @@ export default async function RootLayout(props: Props) {
           </Providers>
           <ToastContainer />
           <ScrollTop />
+          <InitInClient />
         </body>
       </html>
       <Analytics />

src/app/layout.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useCallback } from 'react'
+import { flushSync } from 'react-dom'
 import { atom } from 'jotai'
 import { useTheme } from 'next-themes'
 import { tv } from 'tailwind-variants'
@@ -146,8 +147,7 @@ const ButtonGroup = () => {
 
     document
       .startViewTransition(() => {
-        setTheme(theme)
-        return Promise.resolve()
+        flushSync(() => setTheme(theme))
       })
       ?.ready.then(() => {
         if (mousePosition.x === 0) return

src/components/ui/theme-switcher/ThemeSwitcher.tsx

@@ -20,8 +20,8 @@ import { CloseIcon } from '~/components/icons/close'
 import { DialogOverlay } from '~/components/ui/dialog/DialogOverlay'
 import { Divider } from '~/components/ui/divider'
 import { microReboundPreset } from '~/constants/spring'
-import { useEventCallback } from '~/hooks/common/use-event-callback'
 import { useIsClient } from '~/hooks/common/use-is-client'
+import { useIsUnMounted } from '~/hooks/common/use-is-unmounted'
 import { stopPropagation } from '~/lib/dom'
 import { clsxm } from '~/lib/helper'
 import { jotaiStore } from '~/lib/store'
@@ -55,23 +55,26 @@ export const useModalStack = () => {
   const id = useId()
   const currentCount = useRef(0)
   return {
-    present(props: ModalProps & { id?: string }) {
-      const modalId = `${id}-${currentCount.current++}`
-      jotaiStore.set(modalStackAtom, (p) => {
-        const modalProps = {
-          ...props,
-          id: props.id ?? modalId,
-        }
-        modalIdToPropsMap[modalProps.id] = modalProps
-        return p.concat(modalProps)
-      })
-
-      return () => {
+    present: useCallback(
+      (props: ModalProps & { id?: string }) => {
+        const modalId = `${id}-${currentCount.current++}`
         jotaiStore.set(modalStackAtom, (p) => {
-          return p.filter((item) => item.id !== modalId)
+          const modalProps = {
+            ...props,
+            id: props.id ?? modalId,
+          }
+          modalIdToPropsMap[modalProps.id] = modalProps
+          return p.concat(modalProps)
         })
-      }
-    },
+
+        return () => {
+          jotaiStore.set(modalStackAtom, (p) => {
+            return p.filter((item) => item.id !== modalId)
+          })
+        }
+      },
+      [id],
+    ),
 
     ...actions,
   }
@@ -136,11 +139,11 @@ const Modal: Component<{
   index: number
 }> = memo(function Modal({ item, index }) {
   const setStack = useSetAtom(modalStackAtom)
-  const close = useEventCallback(() => {
+  const close = useCallback(() => {
     setStack((p) => {
       return p.filter((modal) => modal.id !== item.id)
     })
-  })
+  }, [item.id, setStack])
 
   const onClose = useCallback(
     (open: boolean): void => {
@@ -170,6 +173,8 @@ const Modal: Component<{
     },
     [close],
   )
+
+  const isUnmounted = useIsUnMounted()
   const noticeModal = useCallback(() => {
     animateController
       .start({
@@ -179,6 +184,7 @@ const Modal: Component<{
         },
       })
       .then(() => {
+        if (isUnmounted.current) return
         animateController.start({
           scale: 1,
         })