Enable use of search components in custom layouts

[dwgray]

Is your feature request related to a problem? Please describe.

I'm working on a vitepress site that uses a custom theme. Some time ago, another contributor added local search to the site.
He did this by enabling search in the config and then importing the VPNavBarSearch from vitepress/dist/client/theme-default/components/VPNavBarSearch.vue

This works. However, I don't believe it's best practice. The thing that is particularly annoying is that it generates a bunch of typescript errors and I'm hoping to get my docs build to be typescript clean and enforce that. The typescript team seems adamantly against enabling the kind of error supression that would enable this scenario and reinforces the concept that they don't believe importing *.ts files (presumably this includes *.vue files with script = "ts") in this issue: microsoft/TypeScript#40426

Describe the solution you'd like

One possible solution is for VitePress to export VPNavBarSearch and possibly other related components.
I monkey patched vitepress to export the component VPNavBarSearch and then added it to the normal imports from vitepress e.g. import { ..., VPNavBarSearch, ...} from 'vitepress' to prove to myself that this works, including getting rid of the typescript error.

Describe alternatives you've considered

The other alternative I briefly explored was moving to use the default theme with customizations, but the default Layout doesn't do everything that I'd like, even with liberal use of the slots.

(Most) of the reason the typescript is complaining is that I have noexplicit any set and it looks like vitepress doesn't, so it might be possible to make the vitepress components comply with stricter typescript config and have the direct import work, but I think this is a less desireable solution, since as noted above the typescript team doesn't believe this kind of import is best practice.

Additional context

I've pasted the errors I'm seeing below. If you want to reproduce them:

Create a vitepress site with a custom theme and Layout.vue file
Add the line import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNavBarSearch.vue

node_modules/vitepress/dist/client/theme-default/components/VPAlgoliaSearchBox.vue:6:25 - error TS7016: Could not find a declaration file for module '../composables/data'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/theme-default/composables/data.js' implicitly has an 'any' type.

6 import { useData } from '../composables/data'
                          ~~~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:2:30 - error TS2307: Cannot find module '@localSearchIndex' or its corresponding type declarations.

2 import localSearchIndex from '@localSearchIndex'
                               ~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:13:18 - error TS7016: Could not find a declaration file for module 'mark.js/src/vanilla.js'. 'C:/Projects/bootstrap-vue-next/node_modules/.pnpm/mark.js@8.11.1/node_modules/mark.js/src/vanilla.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/mark.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'mark.js/src/vanilla.js';`

13 import Mark from 'mark.js/src/vanilla.js'
                    ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:30:28 - error TS7016: Could not find a declaration file for module '../../app/utils'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/app/utils.js' implicitly has an 'any' type.

30 import { pathToFile } from '../../app/utils'
                              ~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:31:30 - error TS7016: Could not find a declaration file for module '../../shared'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/shared.js' implicitly has an 'any' type.

31 import { escapeRegExp } from '../../shared'
                                ~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:32:25 - error TS7016: Could not find a declaration file for module '../composables/data'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/theme-default/composables/data.js' implicitly has an 'any' type.

32 import { useData } from '../composables/data'
                           ~~~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:33:26 - error TS7016: Could not find a declaration file for module '../support/lru'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/theme-default/support/lru.js' implicitly has an 'any' type.

33 import { LRUCache } from '../support/lru'
                            ~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:34:39 - error TS7016: Could not find a declaration file for module '../support/translation'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/theme-default/support/translation.js' implicitly has an 'any' type.

34 import { createSearchTranslate } from '../support/translation'
                                         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:48:17 - error TS2339: Property 'hot' does not exist on type 'ImportMeta'.

48 if (import.meta.hot) {
                   ~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:49:15 - error TS2339: Property 'hot' does not exist on type 'ImportMeta'.

49   import.meta.hot.accept('/@localSearchIndex', (m) => {
                 ~~~

node_modules/vitepress/dist/client/theme-default/components/VPLocalSearchBox.vue:49:49 - error TS7006: Parameter 'm' implicitly has an 'any' type.

49   import.meta.hot.accept('/@localSearchIndex', (m) => {
                                                   ~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:10:35 - error TS7016: Could not find a declaration file for module '../../shared'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/shared.js' implicitly has an 'any' type.

10 import type { DefaultTheme } from '../../shared'
                                     ~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:11:25 - error TS7016: Could not find a declaration file for module '../composables/data'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/theme-default/composables/data.js' implicitly has an 'any' type.

11 import { useData } from '../composables/data'
                           ~~~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:14:26 - error TS2304: Cannot find name '__VP_LOCAL_SEARCH__'.

14 const VPLocalSearchBox = __VP_LOCAL_SEARCH__
                            ~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:18:28 - error TS2304: Cannot find name '__ALGOLIA__'.    

18 const VPAlgoliaSearchBox = __ALGOLIA__
                              ~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:48:8 - error TS2304: Cannot find name '__ALGOLIA__'.     

48   if (!__ALGOLIA__) {
          ~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:113:5 - error TS2304: Cannot find name '__VP_LOCAL_SEARCH__'.

113 if (__VP_LOCAL_SEARCH__) {
        ~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:129:18 - error TS2304: Cannot find name '__ALGOLIA__'.   

129 const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
                     ~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearch.vue:129:44 - error TS2304: Cannot find name '__VP_LOCAL_SEARCH__'.

129 const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
                                               ~~~~~~~~~~~~~~~~~~~

node_modules/vitepress/dist/client/theme-default/components/VPNavBarSearchButton.vue:3:39 - error TS7016: Could not find a declaration file for module '../support/translation'. 'C:/Projects/bootstrap-vue-next/apps/docs/node_modules/vitepress/dist/client/theme-default/support/translation.js' implicitly has an 'any' type.

3 import { createSearchTranslate } from '../support/translation'

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

In next version, you can use:

import { VPNavBarSearch } from 'vitepress/theme'

Temporarily, you can use the nightly release:

pnpm add -D https://pkg.pr.new/vitepress@23522ab

[dwgray]

Thank @brc-dd!