Update fuse to latest version

Closes #752

Also refactors search to use the current or default version of the CLI for results.

This also refactors the get nav util to make more items private.

Author: lukekarrys

package-lock.json

@@ -7,7 +7,6 @@
   },
   "private": true,
   "scripts": {
-    "//": "Fix for parcel segfaults",
     "//": "https://github.com/parcel-bundler/parcel/issues/7702",
     "gatsby": "PARCEL_WORKERS=0 gatsby",
     "develop": "npm run gatsby -- develop",
@@ -42,7 +41,7 @@
     "details-element-polyfill": "^2.4.0",
     "downshift": "^8.2.2",
     "framer-motion": "^10.16.4",
-    "fuse.js": "^3.6.1",
+    "fuse.js": "^6.6.2",
     "gatsby": "^5.12.7",
     "gatsby-plugin-manifest": "^5.12.1",
     "gatsby-plugin-mdx": "^5.12.1",

package.json

@@ -5,20 +5,18 @@ import * as getNav from '../util/get-nav'
 import usePage from '../hooks/use-page'
 
 const BreadcrumbItem = ({item, path}) => {
-  const href = getNav.getLocation(item.url)
-  const selected = getNav.isPathForItem(path, getNav.getItem(href))
+  const selected = getNav.isPathForItem(path, getNav.getItem(item.url))
 
   return (
-    <PrimerBreadcrumbs.Item as={GatsbyLink} to={href} {...(selected ? {selected} : {})}>
+    <PrimerBreadcrumbs.Item as={GatsbyLink} to={item.url} {...(selected ? {selected} : {})}>
       {item.shortName || item.title}
     </PrimerBreadcrumbs.Item>
   )
 }
 
 const Breadcrumbs = () => {
-  const {location} = usePage()
-  const path = getNav.getLocation(location.pathname)
-  const items = getNav.getItemBreadcrumbs(location.pathname, {hideVariants: true})
+  const {pathname} = usePage().location
+  const items = getNav.getItemBreadcrumbs(pathname, {hideVariants: true})
 
   if (items.length <= 1) {
     return null
@@ -27,7 +25,7 @@ const Breadcrumbs = () => {
   return (
     <PrimerBreadcrumbs sx={{mb: 4}}>
       {items.map(item => (
-        <BreadcrumbItem key={item.url} item={item} path={path} />
+        <BreadcrumbItem key={item.url} item={item} path={pathname} />
       ))}
     </PrimerBreadcrumbs>
   )

src/components/breadcrumbs.js

@@ -10,14 +10,13 @@ import usePage from '../hooks/use-page'
 import useSiteMetadata from '../hooks/use-site-metadata'
 
 const NavItem = ({item, path, depth}) => {
-  const href = getNav.getLocation(item.url)
-  const isCurrent = getNav.isActiveUrl(path, href)
-  const items = getNav.getHierarchy(item, {path: item.url, hideVariants: true})
+  const isCurrent = getNav.isActiveUrl(path, item.url)
+  const items = getNav.getHierarchy(item, item.url, {hideVariants: true})
 
   return (
     <NavList.Item
       as={Link}
-      to={href}
+      to={item.url}
       defaultOpen={items && isCurrent}
       aria-current={isCurrent ? 'page' : null}
       sx={{fontSize: depth === 1 ? 2 : 1}}
@@ -54,18 +53,17 @@ const ExternalNavItem = ({title, ...props}) => (
 )
 
 const Navigation = () => {
-  const {location} = usePage()
   const {repositoryUrl} = useSiteMetadata()
-  const path = getNav.getLocation(location.pathname)
-  const items = getNav.getHierarchy(null, {path, hideVariants: true})
+  const {pathname} = usePage().location
+  const items = getNav.getHierarchy(null, pathname, {hideVariants: true})
 
   return (
     <>
       <VisuallyHidden>
         <h3>Site navigation</h3>
       </VisuallyHidden>
       <NavList aria-label="Site">
-        <NavItems items={items} path={path} />
+        <NavItems items={items} path={pathname} />
         <NavList.Divider />
         {headerNavItems.map(item => (
           <Box key={item.title} sx={{display: ['flex', null, null, 'none']}}>

src/components/nav-items.js

@@ -5,7 +5,15 @@ import * as getNav from '../util/get-nav'
 
 const Breadcrumbs = ({item}) => {
   const siteMetadata = useSiteMetadata()
-  const hierarchy = getNav.getItemBreadcrumbs(item.path).slice(0, -1)
+  const variant = getNav.getVariant(getNav.getVariantRoot(item.path), item.path)
+  const hierarchy = getNav.getItemBreadcrumbs(item.path)
+
+  // keep the variant in the breadcrumb if we have one and its not the
+  // same as the last breadcrumb. this makes sure that variant index pages
+  // don't all appear the same in the search results
+  if (!variant || variant !== hierarchy[hierarchy.length - 1].shortName) {
+    hierarchy.pop()
+  }
 
   const text = hierarchy.length ? hierarchy.map(s => s.shortName || s.title).join(' / ') : siteMetadata.shortName
 

src/components/search-results.js

@@ -59,13 +59,11 @@ const VariantMenu = ({title, latest, current, prerelease, legacy, path}) => {
               {current && <VariantItem {...current} />}
               {prerelease && <VariantItem {...prerelease} />}
             </ActionList.Group>
-            {legacy && (
-              <ActionList.Group title="Legacy">
-                {legacy.map(item => (
-                  <VariantItem key={item.title} {...item} />
-                ))}
-              </ActionList.Group>
-            )}
+            <ActionList.Group title="Legacy">
+              {legacy.map(item => (
+                <VariantItem key={item.title} {...item} />
+              ))}
+            </ActionList.Group>
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
@@ -74,13 +72,10 @@ const VariantMenu = ({title, latest, current, prerelease, legacy, path}) => {
 }
 
 const useVariants = () => {
-  const {pathname} = usePage().location
+  const {pathname: path} = usePage().location
 
   return React.useMemo(() => {
-    const root = getNav.getVariantRoot(pathname)
-    const path = getNav.getPath(pathname)
-    const vp = getNav.getVariantAndPage(root, path)
-    const variantPages = vp ? getNav.getVariantsForPage(root, vp.page) : []
+    const variantPages = getNav.getVariantsForPath(path)
 
     if (!variantPages.length) {
       return null
@@ -106,7 +101,7 @@ const useVariants = () => {
           break
         default:
           result.legacy.push(item)
-          typeDesc = ' Legacy'
+          typeDesc = ' (Legacy)'
       }
       if (item.active) {
         result.title = `${item.title}${typeDesc}`
@@ -116,7 +111,7 @@ const useVariants = () => {
     result.legacy.sort((a, b) => parseInt(b.shortName.slice(1)) - parseInt(a.shortName.slice(1)))
 
     return result
-  }, [pathname])
+  }, [path])
 }
 
 const VariantSelect = () => {

src/components/variant-select.js

@@ -2,11 +2,15 @@ import React from 'react'
 import {useCombobox} from 'downshift'
 import {navigate, graphql, useStaticQuery} from 'gatsby'
 import {useIsMobile} from './use-breakpoint'
+import usePage from './use-page'
+import * as getNav from '../util/get-nav'
+
+// This worker can live for the entire duraction of the site
+const WORKER = new Worker(new URL('../util/search.worker.js', import.meta.url))
+const CLI_ROOT = '/cli'
 
 const useSearchData = () => {
-  // TODO: this static query runs for all pages changes in dev mode. When not
-  // testing search explicitly it should be replaced with some static data.
-  const rawData = useStaticQuery(graphql`
+  const data = useStaticQuery(graphql`
     {
       allMdx {
         nodes {
@@ -27,15 +31,13 @@ const useSearchData = () => {
   `)
 
   return React.useMemo(() => {
-    const mdxNodes = rawData.allMdx.nodes.reduce((map, obj) => {
+    const mdxNodes = data.allMdx.nodes.reduce((map, obj) => {
       map[obj.id] = obj
       return map
     }, {})
 
-    return rawData.allSitePage.nodes
-      .filter(node => {
-        return node.pageContext && node.pageContext.mdxId && mdxNodes[node.pageContext.mdxId] != null
-      })
+    return data.allSitePage.nodes
+      .filter(node => mdxNodes[node.pageContext?.mdxId] != null)
       .map(node => {
         const mdxNode = mdxNodes[node.pageContext.mdxId]
         return {
@@ -44,53 +46,58 @@ const useSearchData = () => {
           body: mdxNode.body,
         }
       })
-  }, [rawData])
+  }, [data])
 }
 
-function useSearch() {
-  const isMobile = useIsMobile()
-
-  const queryRef = React.useRef()
-  const workerRef = React.useRef()
+const useCliVersion = () => {
+  return getNav.getCurrentOrDefaultVariant(
+    getNav.getItem(getNav.getVariantRoot(`${CLI_ROOT}/`, {stripTrailing: false})),
+    usePage().location.pathname,
+  )
+}
 
+function useSearch() {
   const [query, setQuery] = React.useState()
-  const [items, setItems] = React.useState(null)
-
-  const searchData = useSearchData()
+  const [results, setResults] = React.useState(null)
+  const queryRef = React.useRef()
+  const items = useSearchData()
+  const isMobile = useIsMobile()
+  const {url: cliUrl} = useCliVersion()
 
   const handleSearchResults = React.useCallback(({data}) => {
+    if (data.debug) {
+      console.log(data.debug)
+    }
     if (data.query && data.results && data.query === queryRef.current) {
-      setItems(data.results)
+      setResults(data.results)
     }
   }, [])
 
   React.useEffect(() => {
-    const worker = new Worker(new URL('../util/search.worker.js', import.meta.url))
-    workerRef.current = worker
+    WORKER.addEventListener('message', handleSearchResults)
+  }, [handleSearchResults])
 
-    worker.addEventListener('message', handleSearchResults)
-    worker.postMessage({data: searchData})
+  React.useEffect(() => {
+    WORKER.postMessage({items})
+  }, [items])
 
-    return () => worker.terminate()
-  }, [searchData, handleSearchResults])
+  React.useEffect(() => {
+    WORKER.postMessage({cli: {root: CLI_ROOT, current: cliUrl}})
+  }, [cliUrl])
 
   React.useEffect(() => {
     queryRef.current = query
 
     if (query) {
-      workerRef.current.postMessage({query})
+      WORKER.postMessage({query})
     } else {
-      setItems(null)
+      setResults(null)
     }
   }, [query])
 
   const combobox = useCombobox({
     id: 'search-box',
-    // We don't need Downshift to keep track of a selected item because as
-    // soon as an item is selected we navigate to a new page.
-    // Let's avoid any unexpected states related to the selected item
-    // by setting it to always be `null`.
-    items: items || [],
+    items: results || [],
     onInputValueChange: ({inputValue}) => setQuery(inputValue),
     onSelectedItemChange: ({selectedItem}) => {
       if (selectedItem) {
@@ -126,8 +133,8 @@ function useSearch() {
 
   return {
     ...combobox,
-    results: items,
-    isOpen: !!(combobox.isOpen && items),
+    results,
+    isOpen: !!(combobox.isOpen && results),
   }
 }
 

src/hooks/use-search.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import {Box, Heading, themeGet, Text, Octicon} from '@primer/react'
-import {withPrefix} from 'gatsby'
 import styled from 'styled-components'
 import {variant as styledVariant} from 'styled-system'
 import {LinkIcon} from '@primer/octicons-react'
@@ -312,9 +311,7 @@ export const Image = styled(RequiredImage)`
   box-sizing: content-box;
 `
 
-const ScreenshotImage = ({src, ...props}) => <RequiredImage src={withPrefix(src)} {...props} />
-
-export const Screenshot = styled(ScreenshotImage)`
+export const Screenshot = styled(RequiredImage)`
   margin-top: 15px;
   max-width: min(100%, 525px);
   max-height: 300px;

src/mdx/index.js

@@ -4,43 +4,41 @@ import Link from '../components/link'
 import * as getNav from '../util/get-nav'
 import usePage from '../hooks/use-page'
 
-const HierarchyItem = ({item, depth, ...props}) => {
-  const hierarchy = getNav.getHierarchy(item, props)
+const HierarchyItem = ({item, maxDepth, depth, hideVariants}) => {
+  const hierarchy = getNav.getHierarchy(item, null, {hideVariants})
 
   return (
     <Box as="li" key={item.url}>
       <Link key={item.title} to={item.url}>
         {item.title}
       </Link>
       {item.description ? <Box sx={{fontSize: 1, mb: 1}}>{item.description}</Box> : null}
-      {hierarchy ? <Hierarchy items={hierarchy} depth={depth + 1} {...props} /> : null}
+      {hierarchy ? (
+        <Hierarchy items={hierarchy} maxDepth={maxDepth} depth={depth + 1} hideVariants={hideVariants} />
+      ) : null}
     </Box>
   )
 }
 
-const Hierarchy = ({items, ...props}) => {
-  if (props.maxDepth && props.depth > props.maxDepth) {
+const Hierarchy = ({items, maxDepth, depth, hideVariants}) => {
+  if (maxDepth && depth > maxDepth) {
     return null
   }
 
   return (
     <Box as="ul">
       {items.map(item => (
-        <HierarchyItem key={item.url} item={item} {...props} />
+        <HierarchyItem key={item.url} item={item} maxDepth={maxDepth} depth={depth} hideVariants={hideVariants} />
       ))}
     </Box>
   )
 }
 
-function NavHierarchy({depth, ...props}) {
-  const {location} = usePage()
-  const path = getNav.getLocation(location.pathname)
-  const navRoot = path.replace(/\/+$/g, '')
+function NavHierarchy({depth, hideVariants}) {
+  const {pathname} = usePage().location
+  const hierarchy = getNav.getHierarchy(getNav.getItem(pathname), null, {hideVariants})
 
-  const rootItem = getNav.getItem(navRoot)
-  const hierarchy = getNav.getHierarchy(rootItem, props)
-
-  return <Hierarchy items={hierarchy} maxDepth={depth} depth={1} {...props} />
+  return <Hierarchy items={hierarchy} maxDepth={depth} depth={1} hideVariants={hideVariants} />
 }
 
 export default NavHierarchy