feat: use sync external store to avoid React gymnastics

before we have to use ref and tricky dep

Author: HerringtonDarkholme

src/types.ts

@@ -26,6 +26,7 @@ export type Definition = {
     searchResultStreaming: {
       searchResult: SgSearch[]
       id: number
+      inputValue: string
     }
     searchEnd: {
       id: number

src/webview/hooks/useSearch.tsx

@@ -1,45 +1,42 @@
 import type { SgSearch } from '../postMessage'
 import { childPort } from '../postMessage'
-import { useCallback, useMemo, useState, useRef } from 'react'
+import { useCallback, useMemo, useSyncExternalStore } 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: (id: number) => void
-let currentReject = () => {}
-let currentHandler: StreamHandler
+let searchResult: SgSearch[] = []
+let queryInFlight = ''
+let searching = true
+let notify = () => {}
 
-function postSearch(inputValue: string, onStream: StreamHandler) {
+function postSearch(inputValue: string) {
   id = (id + 1) % MOD
   childPort.postMessage('search', { id, inputValue })
-  currentReject()
-  currentHandler = onStream
-  return new Promise<number>((resolve, reject) => {
-    currentResolve = resolve
-    currentReject = reject
-  })
+  searchResult = []
+  searching = true
+  notify()
 }
 
 childPort.onMessage('searchResultStreaming', event => {
   if (event.id !== id) {
     return
   }
-  currentHandler(event.searchResult)
+  queryInFlight = event.inputValue
+  searchResult = searchResult.concat(event.searchResult)
+  notify()
 })
+
 childPort.onMessage('searchEnd', event => {
   if (event.id !== id) {
     return
   }
-  currentResolve(id)
-  currentResolve = () => {}
-  currentReject = () => {}
-  currentHandler = () => {}
+  searching = false
+  notify()
 })
 
 function groupBy(matches: SgSearch[]) {
@@ -53,36 +50,41 @@ function groupBy(matches: SgSearch[]) {
   return groups
 }
 
+// version is for react to update view
+let version = 114514
+function subscribe(onChange: () => void): () => void {
+  notify = () => {
+    onChange()
+    version = (version + 1) % MOD
+  }
+  return () => {
+    // TODO: cleanup is not correct
+    notify = () => {}
+  }
+}
+
+function getSnapshot() {
+  return version // symbolic snapshot for react
+}
+
 export const useSearchResult = (inputValue: string) => {
-  const resultRef = useRef<SgSearch[]>([])
-  const [searching, setSearching] = useState(false)
-  const [queryInFlight, setQuery] = useState(inputValue)
+  useSyncExternalStore(subscribe, getSnapshot)
 
   const refreshSearchResult = useCallback(() => {
-    setSearching(true)
-    resultRef.current = []
-    postSearch(inputValue, ret => {
-      resultRef.current.push(...ret)
-      setQuery(inputValue + resultRef.current.length)
-    })
-      .then(() => {
-        setSearching(false)
-      })
-      .catch(() => {
-        // TODO: cancelled request, should send cancel to extension
-      })
+    // TODO: cancelled request, should send cancel to extension
+    postSearch(inputValue)
   }, [inputValue])
 
   const groupedByFileSearchResult = useMemo(() => {
-    return [...groupBy(resultRef.current).entries()]
-  }, [resultRef.current.length])
+    return [...groupBy(searchResult).entries()]
+  }, [searchResult])
 
   useDebounce(refreshSearchResult, 100, [inputValue])
 
   return {
     queryInFlight,
     searching,
-    searchResult: resultRef.current,
+    searchResult,
     groupedByFileSearchResult,
     refreshSearchResult
   }