refactor: move split line to extension host

Author: HerringtonDarkholme

src/types.ts

@@ -6,16 +6,27 @@ export type Position = {
   index?: number
 }
 
+export interface RangeInfo {
+  byteOffset: {
+    start: number
+    end: number
+  }
+  start: Position
+  end: Position
+}
+
+export interface DisplayResult {
+  file: string
+  startIdx: number
+  endIdx: number
+  displayLine: string
+  lineSpan: number
+  range: RangeInfo
+}
+
 export type SgSearch = {
   text: string
-  range: {
-    byteOffset: {
-      start: number
-      end: number
-    }
-    start: Position
-    end: Position
-  }
+  range: RangeInfo
   file: string
   lines: string
   language: string
@@ -24,7 +35,7 @@ export type SgSearch = {
 export type Definition = {
   parent2child: {
     searchResultStreaming: {
-      searchResult: SgSearch[]
+      searchResult: DisplayResult[]
       id: number
       inputValue: string
     }

src/view.ts

@@ -1,4 +1,4 @@
-import type { Definition, ParentPort, SgSearch } from './types'
+import type { Definition, ParentPort, SgSearch, DisplayResult } from './types'
 import { Unport, ChannelMessage } from 'unport'
 import * as vscode from 'vscode'
 import { workspace } from 'vscode'
@@ -15,6 +15,36 @@ export function activate(context: vscode.ExtensionContext) {
     )
   )
 }
+
+const LEADING_SPACES_RE = /^\s*/
+
+function splitByHighLightToken(search: SgSearch): DisplayResult {
+  const { start, end } = search.range
+  let startIdx = start.column
+  let endIdx = end.column
+  let displayLine = search.lines
+  // multiline matches! only display the first line!
+  if (start.line < end.line) {
+    displayLine = search.lines.split(/\r?\n/, 1)[0]
+    endIdx = displayLine.length
+  }
+  // strip leading spaces
+  const leadingSpaces = displayLine.match(LEADING_SPACES_RE)?.[0].length
+  if (leadingSpaces) {
+    displayLine = displayLine.substring(leadingSpaces)
+    startIdx -= leadingSpaces
+    endIdx -= leadingSpaces
+  }
+  return {
+    startIdx,
+    endIdx,
+    displayLine,
+    lineSpan: end.line - start.line,
+    file: search.file,
+    range: search.range
+  }
+}
+
 type StreamingHandler = (r: SgSearch[]) => void
 
 let child: ChildProcessWithoutNullStreams | undefined
@@ -143,7 +173,7 @@ function setupParentPort(webviewView: vscode.WebviewView) {
     await getPatternRes(payload.inputValue, ret => {
       parentPort.postMessage('searchResultStreaming', {
         ...payload,
-        searchResult: ret
+        searchResult: ret.map(splitByHighLightToken)
       })
     })
     parentPort.postMessage('searchEnd', payload)

src/webview/SearchSidebar/SearchResultList/comps/CodeBlock.tsx

@@ -1,39 +1,12 @@
 import { Box } from '@chakra-ui/react'
-import type { SgSearch } from '../../../../types'
+import type { DisplayResult } from '../../../../types'
 import { openFile } from '../../../postMessage'
 
 const style = {
   backgroundColor: 'var(--vscode-editor-findMatchHighlightBackground)',
   border: '1px solid var(--vscode-editor-findMatchHighlightBorder)'
 }
 
-const LEADING_SPACES_RE = /^\s*/
-
-function splitByHighLightToken(search: SgSearch) {
-  const { start, end } = search.range
-  let startIdx = start.column
-  let endIdx = end.column
-  let displayLine = search.lines
-  // multiline matches! only display the first line!
-  if (start.line < end.line) {
-    displayLine = search.lines.split(/\r?\n/, 1)[0]
-    endIdx = displayLine.length
-  }
-  // strip leading spaces
-  const leadingSpaces = displayLine.match(LEADING_SPACES_RE)?.[0].length
-  if (leadingSpaces) {
-    displayLine = displayLine.substring(leadingSpaces)
-    startIdx -= leadingSpaces
-    endIdx -= leadingSpaces
-  }
-  return {
-    startIdx,
-    endIdx,
-    displayLine,
-    lineSpan: end.line - start.line
-  }
-}
-
 // this is also hardcoded in vscode
 const lineIndicatorStyle = {
   margin: '0 7px 4px',
@@ -50,11 +23,10 @@ function MultiLineIndicator({ lineSpan }: { lineSpan: number }) {
 }
 
 interface CodeBlockProps {
-  match: SgSearch
+  match: DisplayResult
 }
 export const CodeBlock = ({ match }: CodeBlockProps) => {
-  const { startIdx, endIdx, displayLine, lineSpan } =
-    splitByHighLightToken(match)
+  const { startIdx, endIdx, displayLine, lineSpan } = match
 
   return (
     <Box

src/webview/SearchSidebar/SearchResultList/comps/TreeItem.tsx

@@ -1,14 +1,14 @@
 import { HStack, IconButton, VStack, Box } from '@chakra-ui/react'
 import { HiOutlineChevronDown, HiOutlineChevronRight } from 'react-icons/hi'
 import { useBoolean } from 'react-use'
-import type { SgSearch } from '../../../../types'
+import type { DisplayResult } from '../../../../types'
 import { CodeBlock } from './CodeBlock'
 import { FileLink } from './FileLink'
 import { VSCodeBadge } from '@vscode/webview-ui-toolkit/react'
 import { memo } from 'react'
 
 interface CodeBlockListProps {
-  matches: SgSearch[]
+  matches: DisplayResult[]
 }
 
 const CodeBlockList = memo(({ matches }: CodeBlockListProps) => {
@@ -37,7 +37,7 @@ const CodeBlockList = memo(({ matches }: CodeBlockListProps) => {
 
 interface TreeItemProps {
   filePath: string
-  matches: SgSearch[]
+  matches: DisplayResult[]
 }
 
 const TreeItem = ({ filePath, matches }: TreeItemProps) => {

src/webview/SearchSidebar/SearchResultList/index.tsx

@@ -1,9 +1,9 @@
 import { memo } from 'react'
-import { SgSearch } from '../../../types'
+import { DisplayResult } from '../../../types'
 import TreeItem from './comps/TreeItem'
 
 interface SearchResultListProps {
-  matches: Array<[string, SgSearch[]]>
+  matches: Array<[string, DisplayResult[]]>
 }
 
 const SearchResultList = ({ matches }: SearchResultListProps) => {

src/webview/hooks/useSearch.tsx

@@ -1,4 +1,4 @@
-import type { SgSearch } from '../postMessage'
+import type { DisplayResult } from '../postMessage'
 import { childPort } from '../postMessage'
 import {
   useCallback,
@@ -14,7 +14,7 @@ const MOD = 1e9 + 7
 
 // maintain the latest search task id and callback
 let id = 0
-let searchResult: SgSearch[] = []
+let searchResult: DisplayResult[] = []
 let queryInFlight = ''
 let searching = true
 let notify = () => {}
@@ -45,8 +45,8 @@ childPort.onMessage('searchEnd', event => {
   notify()
 })
 
-function groupBy(matches: SgSearch[]) {
-  const groups = new Map<string, SgSearch[]>()
+function groupBy(matches: DisplayResult[]) {
+  const groups = new Map<string, DisplayResult[]>()
   for (const match of matches) {
     if (!groups.has(match.file)) {
       groups.set(match.file, [])

src/webview/postMessage.ts

@@ -1,6 +1,6 @@
 import type { ChildPort, Definition } from '../types'
 import { Unport } from 'unport'
-export type { SgSearch } from '../types'
+export type { DisplayResult } from '../types'
 
 // @ts-expect-error
 let vscode = acquireVsCodeApi()