Replace react-syntax-highlighter with rehype-highlight to reduce memory footprint when scrolling code blocks

This commit is contained in:
Saoud Rizwan
2024-09-06 21:06:36 -04:00
parent 428d3c39b5
commit ea14481771
26 changed files with 3920 additions and 2051 deletions

View File

@@ -3,10 +3,12 @@ import { useEvent } from "react-use"
import { ExtensionMessage, ExtensionState } from "../../../src/shared/ExtensionMessage"
import { ApiConfiguration } from "../../../src/shared/api"
import { vscode } from "../utils/vscode"
import { convertTextMateToHljs } from "../utils/textMateToHljs"
interface ExtensionStateContextType extends ExtensionState {
didHydrateState: boolean
showWelcome: boolean
theme: any
setApiConfiguration: (config: ApiConfiguration) => void
setCustomInstructions: (value?: string) => void
setAlwaysAllowReadOnly: (value: boolean) => void
@@ -24,7 +26,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
})
const [didHydrateState, setDidHydrateState] = useState(false)
const [showWelcome, setShowWelcome] = useState(false)
const [theme, setTheme] = useState<any>(undefined)
const handleMessage = useCallback((event: MessageEvent) => {
const message: ExtensionMessage = event.data
if (message.type === "state" && message.state) {
@@ -43,6 +45,9 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
setShowWelcome(!hasKey)
setDidHydrateState(true)
}
if (message.type === "theme" && message.text) {
setTheme(convertTextMateToHljs(JSON.parse(message.text)))
}
}, [])
useEvent("message", handleMessage)
@@ -55,6 +60,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
...state,
didHydrateState,
showWelcome,
theme,
setApiConfiguration: (value) => setState((prevState) => ({ ...prevState, apiConfiguration: value })),
setCustomInstructions: (value) => setState((prevState) => ({ ...prevState, customInstructions: value })),
setAlwaysAllowReadOnly: (value) => setState((prevState) => ({ ...prevState, alwaysAllowReadOnly: value })),