perf(search): use dom apis instead of regex-based section parsing (#2486)

pull/2488/head
Divyansh Singh 2 years ago committed by GitHub
parent c995b9f61d
commit d62e6f6dd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -119,8 +119,6 @@ watchEffect(() => {
const results: Ref<(SearchResult & Result)[]> = shallowRef([]) const results: Ref<(SearchResult & Result)[]> = shallowRef([])
const headingRegex = /<h(\d*).*?>.*?<a.*? href="#(.*?)".*?>.*?<\/a><\/h\1>/gi
const enableNoResults = ref(false) const enableNoResults = ref(false)
watch(filterText, () => { watch(filterText, () => {
@ -158,10 +156,8 @@ debouncedWatch(
const mapId = id.slice(0, id.indexOf('#')) const mapId = id.slice(0, id.indexOf('#'))
let map = c.get(mapId) let map = c.get(mapId)
if (map) continue if (map) continue
else {
map = new Map() map = new Map()
c.set(mapId, map) c.set(mapId, map)
}
const comp = mod.default ?? mod const comp = mod.default ?? mod
if (comp?.render) { if (comp?.render) {
const app = createApp(comp) const app = createApp(comp)
@ -182,14 +178,17 @@ debouncedWatch(
}) })
const div = document.createElement('div') const div = document.createElement('div')
app.mount(div) app.mount(div)
const sections = div.innerHTML.split(headingRegex) const headings = div.querySelectorAll('h1, h2, h3, h4, h5, h6')
headings.forEach((el) => {
const href = el.querySelector('a')?.getAttribute('href')
const anchor = href?.startsWith('#') && href.slice(1)
if (!anchor) return
let html = ''
while ((el = el.nextElementSibling!) && !/^h[1-6]$/i.test(el.tagName))
html += el.outerHTML
map!.set(anchor, html)
})
app.unmount() app.unmount()
sections.shift()
for (let i = 0; i < sections.length; i += 3) {
const anchor = sections[i + 1]
const html = sections[i + 2]
map.set(anchor, html)
}
} }
if (canceled) return if (canceled) return
} }

Loading…
Cancel
Save