remove <MatchSorterSearch /> (#2246)

Author: Dimitri POSTOLOV

.changeset/wild-waves-invite.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': major
+---
+
+remove `<MatchSorterSearch />`

.eslintrc.cjs

@@ -47,6 +47,7 @@ module.exports = {
         'unicorn/no-array-for-each': 'error',
         'unicorn/prefer-string-replace-all': 'error',
         '@typescript-eslint/prefer-for-of': 'error',
+        quotes: ['error', 'single', { avoidEscape: true }], // Matches Prettier, but also replaces backticks
         // todo: enable
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
@@ -104,6 +105,7 @@ module.exports = {
       ],
       parserOptions: {
         project: [
+          'examples/*/tsconfig.json',
           'packages/*/tsconfig.json',
           'docs/tsconfig.json',
           'tsconfig.eslint.json'

examples/swr-site/vercel.json

@@ -0,0 +1,3 @@
+{
+  "public": true
+}

package.json

@@ -50,7 +50,7 @@
       "react-dom": "^18.2.0",
       "@mdx-js/react": "^2.3.0",
       "next-themes": "^0.2.1",
-      "next": "^13.4.8"
+      "next": "^13.4.19"
     },
     "patchedDependencies": {
       "@changesets/assemble-release-plan@5.2.4": "patches/@changesets__assemble-release-plan@5.2.4.patch"

packages/nextra-theme-docs/package.json

@@ -45,7 +45,6 @@
     "focus-visible": "^5.2.0",
     "git-url-parse": "^13.1.0",
     "intersection-observer": "^0.12.2",
-    "match-sorter": "^6.3.1",
     "next-seo": "^6.0.0",
     "next-themes": "^0.2.1",
     "scroll-into-view-if-needed": "^3.0.0",

packages/nextra-theme-docs/src/components/match-sorter-search.tsx

@@ -2,14 +2,13 @@ import { Menu, Transition } from '@headlessui/react'
 import cn from 'clsx'
 import { useFSRoute } from 'nextra/hooks'
 import { ArrowRightIcon, MenuIcon } from 'nextra/icons'
-import type { Item, MenuItem, PageItem } from 'nextra/normalize-pages'
+import type { MenuItem, PageItem } from 'nextra/normalize-pages'
 import type { ReactElement, ReactNode } from 'react'
 import { useConfig, useMenu } from '../contexts'
 import { renderComponent } from '../utils'
 import { Anchor } from './anchor'
 
 export type NavBarProps = {
-  flatDirectories: Item[]
   items: (PageItem | MenuItem)[]
 }
 
@@ -81,7 +80,7 @@ function NavbarMenu({
   )
 }
 
-export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
+export function Navbar({ items }: NavBarProps): ReactElement {
   const config = useConfig()
   const activeRoute = useFSRoute()
   const { menu, setMenu } = useMenu()
@@ -165,10 +164,10 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
           )
         })}
 
-        {renderComponent(config.search.component, {
-          directories: flatDirectories,
-          className: 'nx-hidden md:nx-inline-block mx-min-w-[200px]'
-        })}
+        {config.flexsearch &&
+          renderComponent(config.search.component, {
+            className: 'nx-hidden md:nx-inline-block mx-min-w-[200px]'
+          })}
 
         {config.project.link ? (
           <Anchor

packages/nextra-theme-docs/src/components/navbar.tsx

@@ -323,7 +323,6 @@ function Menu({
 
 interface SideBarProps {
   docsDirectories: PageItem[]
-  flatDirectories: Item[]
   fullDirectories: Item[]
   asPopover?: boolean
   headings: Heading[]
@@ -332,7 +331,6 @@ interface SideBarProps {
 
 export function Sidebar({
   docsDirectories,
-  flatDirectories,
   fullDirectories,
   asPopover = false,
   headings,
@@ -417,11 +415,11 @@ export function Sidebar({
         )}
         ref={containerRef}
       >
-        <div className="nx-px-4 nx-pt-4 md:nx-hidden">
-          {renderComponent(config.search.component, {
-            directories: flatDirectories
-          })}
-        </div>
+        {config.flexsearch && (
+          <div className="nx-px-4 nx-pt-4 md:nx-hidden">
+            {renderComponent(config.search.component)}
+          </div>
+        )}
         <FocusedItemContext.Provider value={focused}>
           <OnFocusItemContext.Provider
             value={item => {

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -2,12 +2,10 @@
 import type { NextSeoProps } from 'next-seo'
 import { useRouter } from 'next/router'
 import { DiscordIcon, GitHubIcon } from 'nextra/icons'
-import type { Item } from 'nextra/normalize-pages'
 import type { FC, ReactNode } from 'react'
 import { isValidElement } from 'react'
 import { z } from 'zod'
 import { Anchor, Flexsearch, Footer, Navbar, TOC } from './components'
-import { MatchSorterSearch } from './components/match-sorter-search'
 import type { NavBarProps } from './components/navbar'
 import { themeOptionsSchema, ThemeSwitch } from './components/theme-switch'
 import type { TOCProps } from './components/toc'
@@ -115,9 +113,7 @@ export const themeSchema = z.strictObject({
     link: z.string().startsWith('https://').optional()
   }),
   search: z.strictObject({
-    component: z.custom<
-      ReactNode | FC<{ className?: string; directories: Item[] }>
-    >(...reactNode),
+    component: z.custom<ReactNode | FC<{ className?: string }>>(...reactNode),
     emptyResult: z.custom<ReactNode | FC>(...reactNode),
     error: z.string().or(z.function().returns(z.string())),
     loading: z.custom<ReactNode | FC>(...reactNode),
@@ -285,14 +281,7 @@ export const DEFAULT_THEME: DocsThemeConfig = {
     )
   },
   search: {
-    component: function Search({ className, directories }) {
-      const config = useConfig()
-      return config.flexsearch ? (
-        <Flexsearch className={className} />
-      ) : (
-        <MatchSorterSearch className={className} directories={directories} />
-      )
-    },
+    component: Flexsearch,
     emptyResult: (
       <span className="nx-block nx-select-none nx-p-8 nx-text-center nx-text-sm nx-text-gray-400">
         No results found.

packages/nextra-theme-docs/src/constants.tsx

@@ -125,7 +125,6 @@ const InnerLayout = ({
     activePath,
     topLevelNavbarItems,
     docsDirectories,
-    flatDirectories,
     flatDocsDirectories,
     directories
   } = useMemo(
@@ -186,7 +185,6 @@ const InnerLayout = ({
       <Banner />
       {themeContext.navbar &&
         renderComponent(config.navbar.component, {
-          flatDirectories,
           items: topLevelNavbarItems
         })}
       <div
@@ -198,7 +196,6 @@ const InnerLayout = ({
         <ActiveAnchorProvider>
           <Sidebar
             docsDirectories={docsDirectories}
-            flatDirectories={flatDirectories}
             fullDirectories={directories}
             headings={headings}
             asPopover={hideSidebar}

packages/nextra-theme-docs/src/index.tsx

@@ -50,23 +50,23 @@ export const TagName = () => {
 ###### bar Qux [#]`,
       { mdxOptions }
     )
-    expect(result).toMatch(`<_components.h1 id="test-id">{"My Header"}`)
+    expect(result).toMatch('<_components.h1 id="test-id">{"My Header"}')
     expect(result).toMatch(
-      `<_components.h2 id="extra-space">{"Some extra space"}</_components.h2>`
+      '<_components.h2 id="extra-space">{"Some extra space"}</_components.h2>'
     )
     expect(result).toMatch(
-      `<_components.h3 id="extra-space-in-heading">{"Some extra space in heading"}`
+      '<_components.h3 id="extra-space-in-heading">{"Some extra space in heading"}'
     )
     expect(result).toMatch(
-      `<_components.h3 id="without-space">{"nospace"}</_components.h3>`
+      '<_components.h3 id="without-space">{"nospace"}</_components.h3>'
     )
-    expect(result).toMatch(`<_components.h4 id="другой-язык">{"foo"}`)
-    expect(result).toMatch(`<_components.h5 id="bar-baz-">{"bar Baz []"}`)
-    expect(result).toMatch(`<_components.h6 id="bar-qux-">{"bar Qux [#]"}`)
+    expect(result).toMatch('<_components.h4 id="другой-язык">{"foo"}')
+    expect(result).toMatch('<_components.h5 id="bar-baz-">{"bar Baz []"}')
+    expect(result).toMatch('<_components.h6 id="bar-qux-">{"bar Qux [#]"}')
   })
   it('use github-slugger', async () => {
-    const { result } = await compileMdx(`### My Header`, { mdxOptions })
-    expect(result).toMatch(`<_components.h3 id="my-header">{"My Header"}`)
+    const { result } = await compileMdx('### My Header', { mdxOptions })
+    expect(result).toMatch('<_components.h3 id="my-header">{"My Header"}')
   })
 
   it('should merge headings from partial components', async () => {
@@ -148,50 +148,50 @@ import Last from './three.mdx'
 
 describe('Link', () => {
   it('supports .md links', async () => {
-    const { result } = await compileMdx(`[link](../file.md)`, { mdxOptions })
-    expect(result).toMatch(`<_components.a href="../file">`)
+    const { result } = await compileMdx('[link](../file.md)', { mdxOptions })
+    expect(result).toMatch('<_components.a href="../file">')
   })
 
   it('supports .mdx links', async () => {
-    const { result } = await compileMdx(`[link](../file.mdx)`, { mdxOptions })
-    expect(result).toMatch(`<_components.a href="../file">`)
+    const { result } = await compileMdx('[link](../file.mdx)', { mdxOptions })
+    expect(result).toMatch('<_components.a href="../file">')
   })
 
   it('supports URL links', async () => {
-    const { result } = await compileMdx(`[link](../file)`, { mdxOptions })
-    expect(result).toMatch(`<_components.a href="../file">`)
+    const { result } = await compileMdx('[link](../file)', { mdxOptions })
+    expect(result).toMatch('<_components.a href="../file">')
   })
 
   it('supports query', async () => {
-    const { result } = await compileMdx(`[link](../file.md?query=a)`, {
+    const { result } = await compileMdx('[link](../file.md?query=a)', {
       mdxOptions
     })
-    expect(result).toMatch(`<_components.a href="../file?query=a">`)
+    expect(result).toMatch('<_components.a href="../file?query=a">')
   })
 
   it('supports anchor', async () => {
-    const { result } = await compileMdx(`[link](../file.md#anchor)`, {
+    const { result } = await compileMdx('[link](../file.md#anchor)', {
       mdxOptions
     })
-    expect(result).toMatch(`<_components.a href="../file#anchor">`)
+    expect(result).toMatch('<_components.a href="../file#anchor">')
   })
 
   it('supports external .md links', async () => {
-    const { result } = await compileMdx(`[link](https://example.com/file.md)`, {
+    const { result } = await compileMdx('[link](https://example.com/file.md)', {
       mdxOptions
     })
-    expect(result).toMatch(`<_components.a href="https://example.com/file.md">`)
+    expect(result).toMatch('<_components.a href="https://example.com/file.md">')
   })
 
   it('supports external .mdx links', async () => {
     const { result } = await compileMdx(
-      `[link](https://example.com/file.mdx)`,
+      '[link](https://example.com/file.mdx)',
       {
         mdxOptions
       }
     )
     expect(result).toMatch(
-      `<_components.a href="https://example.com/file.mdx">`
+      '<_components.a href="https://example.com/file.mdx">'
     )
   })
 })
@@ -242,15 +242,15 @@ describe('Code block', () => {
   describe('Copy code button', () => {
     for (const codeHighlight of [true, false]) {
       describe(`codeHighlight: ${codeHighlight}`, () => {
-        it(`attach with "copy"`, async () => {
+        it('attach with "copy"', async () => {
           const { result } = await compileMdx('```js copy\n```', {
             mdxOptions,
             codeHighlight
           })
           expect(result).toMatch('hasCopyCode>')
         })
 
-        it(`attach with "defaultShowCopyCode: true"`, async () => {
+        it('attach with "defaultShowCopyCode: true"', async () => {
           const { result } = await compileMdx('```js\n```', {
             mdxOptions,
             defaultShowCopyCode: true,
@@ -259,7 +259,7 @@ describe('Code block', () => {
           expect(result).toMatch('hasCopyCode>')
         })
 
-        it(`not attach with "defaultShowCopyCode: true" and "copy=false"`, async () => {
+        it('not attach with "defaultShowCopyCode: true" and "copy=false"', async () => {
           const { result } = await compileMdx('```js copy=false\n```', {
             mdxOptions,
             defaultShowCopyCode: true,

packages/nextra/__test__/compile.test.ts

@@ -6,10 +6,12 @@
  *
  * @todo once webpack supports ESM loaders, remove this wrapper.
  *
+ * @this {LoaderContext}
  * @param {string} code
  */
 module.exports = function (code) {
   const callback = this.async()
+
   // Note that `import()` caches, so this should be fast enough.
   import('./dist/loader.mjs').then(mod =>
     mod.default.call(this, code, callback)

packages/nextra/loader.js

@@ -289,7 +289,7 @@ ${
   }
 
   const stringifiedPageOpts =
-    JSON.stringify(pageOpts).slice(0, -1) + `,headings:__toc}`
+    JSON.stringify(pageOpts).slice(0, -1) + ',headings:__toc}'
   const stringifiedChecksum = IS_PRODUCTION
     ? "''"
     : JSON.stringify(hashFnv32a(stringifiedPageOpts))

packages/nextra/src/loader.ts

@@ -32,7 +32,7 @@ export function locales(request: NextRequest) {
 
   if (/\/_meta(\.[a-z]{2}-[A-Z]{2})?$/.test(nextUrl.pathname)) {
     const url = nextUrl.clone()
-    url.pathname = `/404`
+    url.pathname = '/404'
     return NextResponse.rewrite(url)
   }
 

packages/nextra/src/locales.ts

@@ -37,7 +37,7 @@ export function useInternals() {
 
   if (!context) {
     throw new Error(
-      `No content found for the current route. This is a Nextra bug.`
+      'No content found for the current route. This is a Nextra bug.'
     )
   }
 

packages/nextra/src/use-internals.ts

@@ -5,6 +5,6 @@
     // ensure that nobody can accidentally use this config for a build
     "noEmit": true
   },
-  "include": ["examples/swr-site/theme.config.tsx"],
+  "include": [],
   "exclude": []
 }