feat: implement webview streaming

we should useSyncExternalStore instead

Author: HerringtonDarkholme

src/webview/hooks/useSearch.tsx

@@ -1,22 +1,26 @@
 import type { SgSearch } from '../postMessage'
 import { childPort } from '../postMessage'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState, useRef } from 'react'
 import { useDebounce } from 'react-use'
 
+type StreamHandler = (r: SgSearch[]) => void
+
 // id should not overflow, the MOD is large enough
 // for most cases (unless there is buggy search)
 const MOD = 1e9 + 7
 
 // maintain the latest search task id and callback
 let id = 0
-let currentResolve: (r: SgSearch[]) => void
+let currentResolve: (id: number) => void
 let currentReject = () => {}
+let currentHandler: StreamHandler
 
-function postSearch(inputValue: string) {
+function postSearch(inputValue: string, onStream: StreamHandler) {
   id = (id + 1) % MOD
   childPort.postMessage('search', { id, inputValue })
   currentReject()
-  return new Promise<SgSearch[]>((resolve, reject) => {
+  currentHandler = onStream
+  return new Promise<number>((resolve, reject) => {
     currentResolve = resolve
     currentReject = reject
   })
@@ -26,17 +30,16 @@ childPort.onMessage('searchResultStreaming', event => {
   if (event.id !== id) {
     return
   }
-  currentResolve(event.searchResult)
-  currentResolve = () => {}
-  currentReject = () => {}
+  currentHandler(event.searchResult)
 })
 childPort.onMessage('searchEnd', event => {
   if (event.id !== id) {
     return
   }
-  currentResolve([])
+  currentResolve(id)
   currentResolve = () => {}
   currentReject = () => {}
+  currentHandler = () => {}
 })
 
 function groupBy(matches: SgSearch[]) {
@@ -51,33 +54,35 @@ function groupBy(matches: SgSearch[]) {
 }
 
 export const useSearchResult = (inputValue: string) => {
-  const [searchResult, setResult] = useState<SgSearch[]>([])
+  const resultRef = useRef<SgSearch[]>([])
   const [searching, setSearching] = useState(false)
   const [queryInFlight, setQuery] = useState(inputValue)
 
   const refreshSearchResult = useCallback(() => {
     setSearching(true)
-    postSearch(inputValue)
-      .then(res => {
-        setResult(res)
+    resultRef.current = []
+    postSearch(inputValue, ret => {
+      resultRef.current.push(...ret)
+      setQuery(inputValue + resultRef.current.length)
+    })
+      .then(() => {
         setSearching(false)
-        setQuery(inputValue)
       })
       .catch(() => {
         // TODO: cancelled request, should send cancel to extension
       })
   }, [inputValue])
 
   const groupedByFileSearchResult = useMemo(() => {
-    return [...groupBy(searchResult).entries()]
-  }, [searchResult])
+    return [...groupBy(resultRef.current).entries()]
+  }, [resultRef.current.length])
 
   useDebounce(refreshSearchResult, 100, [inputValue])
 
   return {
     queryInFlight,
     searching,
-    searchResult,
+    searchResult: resultRef.current,
     groupedByFileSearchResult,
     refreshSearchResult
   }