fix: add some polyfills for old browser, fixed #236

Signed-off-by: Innei <i@innei.in>

package.json

@@ -157,6 +157,7 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@vercel/ncc": "0.38.1",
+    "@vitejs/plugin-legacy": "5.4.2",
     "@vitejs/plugin-react": "^4.3.1",
     "drizzle-orm": "0.32.2",
     "electron": "32.0.1",

src/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx

@@ -9,6 +9,7 @@ import { useIsomorphicLayoutEffect } from "foxact/use-isomorphic-layout-effect"
 import type { FC } from "react"
 import {
   useInsertionEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -18,6 +19,7 @@ import type {
   BundledTheme,
   DynamicImportLanguageRegistration,
   DynamicImportThemeRegistration,
+  HighlighterCore,
 } from "shiki"
 import { createHighlighterCore } from "shiki/core"
 import { default as getWasm } from "shiki/wasm"
@@ -26,7 +28,7 @@ import { CopyButton } from "../copy-button"
 import { shikiTransformers } from "./shared"
 import styles from "./shiki.module.css"
 
-const shiki = await createHighlighterCore({
+const shikiPromise = createHighlighterCore({
   themes: [import("shiki/themes/github-dark.mjs")],
   langs: [],
   loadWasm: getWasm,
@@ -51,8 +53,39 @@ let langModule: Record<
 let themeModule: Record<BundledTheme, DynamicImportThemeRegistration> | null =
   null
 let bundledLanguagesKeysSet: Set<string> | null = null
+let resolvedShiki: HighlighterCore | null = null
+
+shikiPromise.then((shiki) => {
+  resolvedShiki = shiki
+})
 export const ShikiHighLighter: FC<ShikiProps> = (props) => {
-  const { code, language, className, theme: overrideTheme } = props
+  const [shiki, setShiki] = useState(resolvedShiki)
+
+  useLayoutEffect(() => {
+    shikiPromise.then((shiki) => {
+      resolvedShiki = shiki
+      setShiki(shiki)
+    })
+  }, [])
+
+  if (!shiki) {
+    const { code, className } = props
+    return (
+      <pre className={className}>
+        <code>{code}</code>
+      </pre>
+    )
+  }
+
+  return <ShikiHighLighterRender {...props} shiki={shiki} />
+}
+
+const ShikiHighLighterRender: FC<
+  ShikiProps & {
+    shiki: HighlighterCore
+  }
+> = (props) => {
+  const { code, language, className, theme: overrideTheme, shiki } = props
   const [currentLanguage, setCurrentLanguage] = useState(
     language || "plaintext",
   )
@@ -180,8 +213,9 @@ export const ShikiHighLighter: FC<ShikiProps> = (props) => {
 const ShikiCode: FC<
   ShikiProps & {
     codeTheme: string
+    shiki: HighlighterCore
   }
-> = ({ code, language, codeTheme, className, transparent }) => {
+> = ({ code, language, codeTheme, className, transparent, shiki }) => {
   const rendered = useMemo(() => {
     try {
       return shiki.codeToHtml(code, {

src/renderer/src/main.tsx

@@ -11,7 +11,7 @@ import { initializeApp } from "./initialize"
 import { getOS } from "./lib/utils"
 import { router } from "./router"
 
-await initializeApp().finally(() => {
+initializeApp().finally(() => {
   setAppIsReady(true)
 })
 

vite.config.ts

@@ -3,6 +3,7 @@ import { resolve } from "node:path"
 import { fileURLToPath } from "node:url"
 
 import { sentryVitePlugin } from "@sentry/vite-plugin"
+import legacy from "@vitejs/plugin-legacy"
 import react from "@vitejs/plugin-react"
 import { cyan, dim, green } from "kolorist"
 import { visualizer } from "rollup-plugin-visualizer"
@@ -49,6 +50,13 @@ const vite = ({ mode }) => {
       port: 2233,
     },
     plugins: [
+      mode !== "development" &&
+      legacy({
+        targets: "defaults",
+        renderLegacyChunks: false,
+        modernTargets: ">0.3%, last 2 versions, Firefox ESR, not dead",
+        modernPolyfills: ["es.array.find-last-index", "es.array.find-last"],
+      }),
       htmlPlugin(typedEnv),
       react(),
       mkcert(),