optimize deps

web/app/components/base/voice-input/index.tsx

@@ -82,7 +82,7 @@ const VoiceInput = ({
     const canvas = canvasRef.current!
     const ctx = ctxRef.current!
     ctx.clearRect(0, 0, canvas.width, canvas.height)
-    const mp3Blob = await convertToMp3(recorder.current as unknown as Parameters<typeof convertToMp3>[0])
+    const mp3Blob = convertToMp3(recorder.current)
     const mp3File = new File([mp3Blob], 'temp.mp3', { type: 'audio/mp3' })
     const formData = new FormData()
     formData.append('file', mp3File)

web/app/components/base/voice-input/utils.ts

@@ -1,55 +1,24 @@
-type RecorderLike = {
+import lamejs from 'lamejs'
-  getWAV: () => ArrayBufferLike
+import BitStream from 'lamejs/src/js/BitStream'
-  getChannelData: () => {
+import Lame from 'lamejs/src/js/Lame'
-    left: ArrayBufferView
+import MPEGMode from 'lamejs/src/js/MPEGMode'
-    right?: ArrayBufferView | null
+
-  }
+/* v8 ignore next - @preserve */
+if (globalThis) {
+  (globalThis as any).MPEGMode = MPEGMode
+  ; (globalThis as any).Lame = Lame
+  ; (globalThis as any).BitStream = BitStream
 }
 
-const toInt16Array = (view: ArrayBufferView) => {
+export const convertToMp3 = (recorder: any) => {
-  return new Int16Array(view.buffer, view.byteOffset, view.byteLength / 2)
+  const wav = lamejs.WavHeader.readHeader(recorder.getWAV())
-}
-
-const loadLame = async () => {
-  const [
-    lamejsModule,
-    bitStreamModule,
-    lameModule,
-    mpegModeModule,
-  ] = await Promise.all([
-    import('lamejs'),
-    import('lamejs/src/js/BitStream'),
-    import('lamejs/src/js/Lame'),
-    import('lamejs/src/js/MPEGMode'),
-  ])
-
-  const lamejs = lamejsModule.default
-  const BitStream = bitStreamModule.default
-  const Lame = lameModule.default
-  const MPEGMode = mpegModeModule.default
-
-  /* v8 ignore next - @preserve */
-  if (globalThis) {
-    ; (globalThis as any).MPEGMode = MPEGMode
-    ; (globalThis as any).Lame = Lame
-    ; (globalThis as any).BitStream = BitStream
-  }
-
-  return lamejs
-}
-
-export const convertToMp3 = async (recorder: RecorderLike) => {
-  const lamejs = await loadLame()
-  const wavBuffer = recorder.getWAV()
-  const wavView = wavBuffer instanceof DataView ? wavBuffer : new DataView(wavBuffer)
-  const wav = lamejs.WavHeader.readHeader(wavView)
   const { channels, sampleRate } = wav
   const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128)
   const result = recorder.getChannelData()
   const buffer: BlobPart[] = []
 
-  const leftData = toInt16Array(result.left)
+  const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2)
-  const rightData = result.right ? toInt16Array(result.right) : null
+  const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2)
   const remaining = leftData.length + (rightData ? rightData.length : 0)
 
   const maxSamples = 1152
@@ -65,7 +34,7 @@ export const convertToMp3 = async (recorder: RecorderLike) => {
     let mp3buf = null
 
     if (channels === 2) {
-      right = rightData?.subarray(i, i + maxSamples) || null
+      right = rightData.subarray(i, i + maxSamples)
       mp3buf = mp3enc.encodeBuffer(left, right)
     }
     else {

web/app/components/plugins/plugin-item/index.tsx

@@ -11,6 +11,7 @@ import {
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { gte } from 'semver'
 import Tooltip from '@/app/components/base/tooltip'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
 import { API_PREFIX } from '@/config'
@@ -19,7 +20,6 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
-import { gte } from '@/utils/semver'
 import { getMarketplaceUrl } from '@/utils/var'
 import Badge from '../../base/badge'
 import { Github } from '../../base/icons/src/public/common'
@@ -164,8 +164,8 @@ const PluginItem: FC<Props> = ({
           />
           {category === PluginCategoryEnum.extension && (
             <>
-              <div className="mx-2 text-text-quaternary system-xs-regular">·</div>
+              <div className="system-xs-regular mx-2 text-text-quaternary">·</div>
-              <div className="flex items-center gap-x-1 overflow-hidden text-text-tertiary system-xs-regular">
+              <div className="system-xs-regular flex items-center gap-x-1 overflow-hidden text-text-tertiary">
                 <RiLoginCircleLine className="size-3 shrink-0" />
                 <span
                   className="truncate"
@@ -183,7 +183,7 @@ const PluginItem: FC<Props> = ({
             && (
               <>
                 <a href={`https://github.com/${meta!.repo}`} target="_blank" className="flex items-center gap-1">
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">{t('from', { ns: 'plugin' })}</div>
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">{t('from', { ns: 'plugin' })}</div>
                   <div className="flex items-center space-x-0.5 text-text-secondary">
                     <Github className="h-3 w-3" />
                     <div className="system-2xs-semibold-uppercase">GitHub</div>
@@ -196,7 +196,7 @@ const PluginItem: FC<Props> = ({
             && (
               <>
                 <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="flex items-center gap-0.5">
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">
                     {t('from', { ns: 'plugin' })}
                     {' '}
                     <span className="text-text-secondary">marketplace</span>
@@ -210,7 +210,7 @@ const PluginItem: FC<Props> = ({
               <>
                 <div className="flex items-center gap-1">
                   <RiHardDrive3Line className="h-3 w-3 text-text-tertiary" />
-                  <div className="text-text-tertiary system-2xs-medium-uppercase">Local Plugin</div>
+                  <div className="system-2xs-medium-uppercase text-text-tertiary">Local Plugin</div>
                 </div>
               </>
             )}
@@ -219,14 +219,14 @@ const PluginItem: FC<Props> = ({
               <>
                 <div className="flex items-center gap-1">
                   <RiBugLine className="h-3 w-3 text-text-warning" />
-                  <div className="text-text-warning system-2xs-medium-uppercase">Debugging Plugin</div>
+                  <div className="system-2xs-medium-uppercase text-text-warning">Debugging Plugin</div>
                 </div>
               </>
             )}
         </div>
         {/* Deprecated */}
         {source === PluginSource.marketplace && enable_marketplace && isDeprecated && (
-          <div className="flex shrink-0 items-center gap-x-2 system-2xs-medium-uppercase">
+          <div className="system-2xs-medium-uppercase flex shrink-0 items-center gap-x-2">
             <span className="text-text-tertiary">·</span>
             <span className="text-text-warning">
               {t('deprecated', { ns: 'plugin' })}

web/eslint-suppressions.json

@@ -175,6 +175,19 @@
       "count": 18
     }
   },
+  "app/(shareLayout)/components/authenticated-layout.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
+  "app/(shareLayout)/components/splash.tsx": {
+    "react-hooks-extra/no-direct-set-state-in-use-effect": {
+      "count": 1
+    },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 1
+    }
+  },
   "app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2841,7 +2854,7 @@
   },
   "app/components/base/voice-input/utils.ts": {
     "ts/no-explicit-any": {
-      "count": 3
+      "count": 4
     }
   },
   "app/components/base/with-input-validation/index.stories.tsx": {
@@ -4963,6 +4976,11 @@
       "count": 1
     }
   },
+  "app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
   "app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4979,6 +4997,11 @@
       "count": 1
     }
   },
+  "app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx": {
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 2
+    }
+  },
   "app/components/plugins/marketplace/description/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 9
@@ -5457,6 +5480,9 @@
     "no-restricted-imports": {
       "count": 1
     },
+    "tailwindcss/enforce-consistent-class-order": {
+      "count": 7
+    },
     "ts/no-explicit-any": {
       "count": 1
     }

web/vite.config.ts

@@ -81,10 +81,26 @@ export default defineConfig(({ mode }) => {
           },
           environments: {
             rsc: {
-              optimizeDeps: { include: ['semver'] },
+              optimizeDeps: {
+                include: [
+                  'semver',
+                  'lamejs',
+                  'lamejs/src/js/BitStream',
+                  'lamejs/src/js/Lame',
+                  'lamejs/src/js/MPEGMode',
+                ],
+              },
             },
             ssr: {
-              optimizeDeps: { include: ['semver'] },
+              optimizeDeps: {
+                include: [
+                  'semver',
+                  'lamejs',
+                  'lamejs/src/js/BitStream',
+                  'lamejs/src/js/Lame',
+                  'lamejs/src/js/MPEGMode',
+                ],
+              },
             },
           },
         }