chore: some web fixes & deps (#415)

Author: scffs

apps/crypto/package.json

@@ -6,10 +6,10 @@
   "author": "scffs",
   "license": "MIT",
   "dependencies": {
-    "bun": "^1.1.29"
+    "bun": "^1.1.34"
   },
   "devDependencies": {
-    "bun-types": "^1.1.29"
+    "bun-types": "^1.1.34"
   },
   "exports": {
     ".": "./src/index.ts"

apps/web/package.json

@@ -2,6 +2,7 @@
   "name": "@diary-spo/web",
   "private": true,
   "version": "8.0.0",
+  "homepage": ".",
   "type": "module",
   "scripts": {
     "dev": "rsbuild dev",

apps/web/rsbuild.config.ts

@@ -8,11 +8,12 @@ const { publicVars } = loadEnv({ prefixes: ['VITE_'] })
 export default defineConfig({
   plugins: [pluginReact(), pluginBasicSsl()],
   output: {
-    polyfill: 'usage',
+    // polyfill: 'usage',
     minify: true
   },
   server: {
-    port: 5173
+    port: 5173,
+    base: import.meta.env.VITE_MODE === 'prod' ? './' : undefined
   },
   html: {
     template: './index.html'

apps/web/src/app/AppWrapper/App/Epic/index.tsx

@@ -21,7 +21,6 @@ import {
 } from '../../../../pages'
 
 import type { Pages } from '../../../../shared/types.ts'
-import { Suspense } from '../../../../shared/ui'
 
 import type { FC } from 'react'
 import Tabbar from './Tabbar'
@@ -50,21 +49,11 @@ const Epic: FC<IEpic> = ({ onStoryChange }) => {
         activePanel={activePanel}
         onSwipeBack={() => routeNavigator.back()}
       >
-        <Suspense id={MAIN_SETTINGS} mode='screen'>
-          <LoginForm id={MAIN_SETTINGS} />
-        </Suspense>
-        <Suspense id={VIEW_SCHEDULE} mode='screen'>
-          <Schedule id={VIEW_SCHEDULE} />
-        </Suspense>
-        <Suspense id={VIEW_MARKS} mode='screen'>
-          <Achievements id={VIEW_MARKS} />
-        </Suspense>
-        <Suspense id={VIEW_NOTIFICATIONS} mode='screen'>
-          <Notifications id={VIEW_NOTIFICATIONS} />
-        </Suspense>
-        <Suspense id={VIEW_SETTINGS} mode='screen'>
-          <Settings id={VIEW_SETTINGS} />
-        </Suspense>
+        <LoginForm id={MAIN_SETTINGS} />
+        <Schedule id={VIEW_SCHEDULE} />
+        <Achievements id={VIEW_MARKS} />
+        <Notifications id={VIEW_NOTIFICATIONS} />
+        <Settings id={VIEW_SETTINGS} />
       </View>
     </VKUIEpic>
   )

apps/web/src/app/AppWrapper/App/index.tsx

@@ -22,10 +22,9 @@ import {
   useAdaptivityConditionalRender,
   usePlatform
 } from '@vkontakte/vkui'
-import { type FC, lazy } from 'react'
+import type { FC } from 'react'
 
 import type { Pages } from '../../../shared/types.ts'
-import { Suspense } from '../../../shared/ui'
 import {
   MAIN_SETTINGS,
   VIEW_MARKS,
@@ -35,7 +34,7 @@ import {
 } from '../../routes'
 import ModalRoot from './ModalRoot'
 
-const Epic = lazy(() => import('./Epic'))
+import Epic from './Epic'
 
 const App: FC = () => {
   const routeNavigator = useRouteNavigator()
@@ -113,11 +112,9 @@ const App: FC = () => {
             </Panel>
           </SplitCol>
         )}
-        <Suspense id='Epic'>
-          <SplitCol width='100%' maxWidth='700px' stretchedOnMobile autoSpaced>
-            <Epic onStoryChange={onStoryChange} />
-          </SplitCol>
-        </Suspense>
+        <SplitCol width='100%' maxWidth='700px' stretchedOnMobile autoSpaced>
+          <Epic onStoryChange={onStoryChange} />
+        </SplitCol>
       </SplitLayout>
     </AppRoot>
   )

apps/web/src/app/AppWrapper/index.tsx

@@ -8,10 +8,11 @@ import {
 } from '@vkontakte/vkui'
 import { lazy } from 'react'
 
+import { Suspense } from '../../shared'
 import { router } from '../routes/router'
 
-const NotFoundCorrect = lazy(() => import('./NotFound'))
-const App = lazy(() => import('./App'))
+import App from './App'
+import NotFoundCorrect from './NotFound'
 
 vkBridge.send('VKWebAppInit')
 
@@ -27,7 +28,9 @@ const AppWrapper = () => {
           platform={platform}
           isWebView={vkBridge.isWebView()}
         >
-          <App />
+          <Suspense id='App' mode='screen'>
+            <App />
+          </Suspense>
         </ConfigProvider>
       </RouterProvider>
     </AdaptivityProvider>

apps/web/src/assets/images/diary-ava.png

@@ -1,6 +1,5 @@
 import { lazy } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Suspense } from './shared/ui'
 
 import '@vkontakte/vkui/dist/cssm/styles/themes.css'
 import './app/styles/index.css'
@@ -9,8 +8,4 @@ const AppWrapper = lazy(() => import('./app/AppWrapper'))
 
 const app = document.getElementById('app')
 
-createRoot(app!).render(
-  <Suspense id='RootAppWrapper' mode='screen'>
-    <AppWrapper />
-  </Suspense>
-)
+createRoot(app!).render(<AppWrapper />)

apps/web/src/main.tsx

@@ -1,13 +1,11 @@
 import type { PerformanceCurrent } from '@diary-spo/shared'
-import { lazy } from 'react'
 
-import { Suspense } from '../../../shared'
 import type { Tabs } from '../types.ts'
 
-const Summary = lazy(() => import('../Tabs/Summary'))
-const FinalMarks = lazy(() => import('../Tabs/FinalMarks'))
-const MarksByGroup = lazy(() => import('../Tabs/MarksByGroup'))
-const SubjectsList = lazy(() => import('../Tabs/SubjectsList'))
+import FinalMarks from '../Tabs/FinalMarks'
+import MarksByGroup from '../Tabs/MarksByGroup'
+import SubjectsList from '../Tabs/SubjectsList'
+import Summary from '../Tabs/Summary'
 
 export const useActiveTab = (
   selected: Tabs,
@@ -19,53 +17,35 @@ export const useActiveTab = (
   isLoading: boolean,
   setIsLoading: (value: boolean) => void
 ) => {
-  let activeTabComponent = null
-
   switch (selected) {
     case 'summary':
-      activeTabComponent = (
-        <Suspense id='UserInfo'>
-          <Summary
-            totalNumberOfMarks={totalNumberOfMarks}
-            averageMark={averageMark}
-            markCounts={markCounts}
-          />
-        </Suspense>
+      return (
+        <Summary
+          totalNumberOfMarks={totalNumberOfMarks}
+          averageMark={averageMark}
+          markCounts={markCounts}
+        />
       )
-      break
     case 'current':
-      activeTabComponent = (
-        <Suspense id='MarksByGroup'>
-          {/*TODO: fix*/}
-          <MarksByGroup marksForSubject={marksForSubject} />
-        </Suspense>
-      )
-      break
+      // TODO: fix
+      return <MarksByGroup marksForSubject={marksForSubject} />
     case 'finalMarks':
-      activeTabComponent = (
-        <Suspense id='FinalMarks'>
-          <FinalMarks
-            setIsError={setIsError}
-            isLoading={isLoading}
-            setIsLoading={setIsLoading}
-          />
-        </Suspense>
+      return (
+        <FinalMarks
+          setIsError={setIsError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+        />
       )
-      break
     case 'attestation':
-      activeTabComponent = (
-        <Suspense id='AttestationTab'>
-          <SubjectsList
-            setIsError={setIsError}
-            isLoading={isLoading}
-            setIsLoading={setIsLoading}
-          />
-        </Suspense>
+      return (
+        <SubjectsList
+          setIsError={setIsError}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+        />
       )
-      break
     default:
-      break
+      return null
   }
-
-  return <main className='activeTabWrapper'>{activeTabComponent}</main>
 }

apps/web/src/pages/Achievements/hooks/useActiveTab.tsx

@@ -7,7 +7,7 @@ import {
   TabsItem,
   Tabs as VKUITabs
 } from '@vkontakte/vkui'
-import { type FC, Suspense, useEffect, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import { handleResponse, isApiError, isNeedToUpdateCache } from '../../shared'
 
 import type { Props } from '../types.ts'
@@ -19,7 +19,11 @@ import type { Tabs } from './types.ts'
 import { getPerformance } from '../../shared/api'
 import { VKUI_ACCENT_BG, VKUI_RED } from '../../shared/config'
 import { useRateLimitExceeded, useSnackbar } from '../../shared/hooks'
-import { ErrorPlaceholder, PanelHeaderWithBack } from '../../shared/ui'
+import {
+  ErrorPlaceholder,
+  PanelHeaderWithBack,
+  Suspense
+} from '../../shared/ui'
 import LoadingData from './LoadingData.tsx'
 import { useActiveTab } from './hooks/useActiveTab.tsx'
 
@@ -153,9 +157,7 @@ const Achievements: FC<Props> = ({ id }) => {
         {isLoading && <LoadingData />}
       </PullToRefresh>
 
-      {!isLoading && !isError && (
-        <Suspense fallback='Загрузка...'>{activeTab}</Suspense>
-      )}
+      {!isLoading && !isError && <Suspense id='tab'>{activeTab}</Suspense>}
 
       {isError && <ErrorPlaceholder />}