refactor: move useSidebar to vitepress/theme

__tests__/unit/vitest.config.ts

@@ -1,17 +1,26 @@
 import { dirname, resolve } from 'path'
 import { fileURLToPath } from 'url'
 import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
 
 const dir = dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
+  plugins: [vue()],
   resolve: {
-    alias: {
-      '@siteData': resolve(dir, './shims.ts'),
-      client: resolve(dir, '../../src/client'),
-      node: resolve(dir, '../../src/node'),
-      vitepress: resolve(dir, '../../src/client')
-    }
+    alias: [
+      { find: '@siteData', replacement: resolve(dir, './shims.ts') },
+      { find: 'client', replacement: resolve(dir, '../../src/client') },
+      { find: 'node', replacement: resolve(dir, '../../src/node') },
+      {
+        find: /^vitepress$/,
+        replacement: resolve(dir, '../../src/client/index.js')
+      },
+      {
+        find: /^vitepress\/theme$/,
+        replacement: resolve(dir, '../../src/client/theme-default/index.js')
+      }
+    ]
   },
   test: {
     globals: true

src/client/index.ts

@@ -4,7 +4,6 @@
 // generic types
 export type { VitePressData } from './app/data'
 export type { Route, Router } from './app/router'
-export type { Sidebar } from './theme-default/composables/sidebar'
 
 // theme types
 export type { EnhanceAppContext, Theme } from './app/theme'
@@ -14,8 +13,7 @@ export type { HeadConfig, Header, PageData, SiteData } from '../../types/shared'
 
 // composables
 export { useData, dataSymbol } from './app/data'
-export { useRoute, useRouter, createRouter } from './app/router'
-export { useSidebar } from './theme-default/composables/sidebar'
+export { useRoute, useRouter } from './app/router'
 
 // utilities
 export {

src/client/theme-default/Layout.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
 import { computed, provide, useSlots, watch } from 'vue'
-import { useRoute, useSidebar } from 'vitepress'
-import { useData } from './composables/data'
-import { useCloseSidebarOnEscape } from './composables/sidebar'
-import VPSkipLink from './components/VPSkipLink.vue'
 import VPBackdrop from './components/VPBackdrop.vue'
-import VPNav from './components/VPNav.vue'
-import VPLocalNav from './components/VPLocalNav.vue'
-import VPSidebar from './components/VPSidebar.vue'
 import VPContent from './components/VPContent.vue'
 import VPFooter from './components/VPFooter.vue'
+import VPLocalNav from './components/VPLocalNav.vue'
+import VPNav from './components/VPNav.vue'
+import VPSidebar from './components/VPSidebar.vue'
+import VPSkipLink from './components/VPSkipLink.vue'
+import { useData } from './composables/data'
+import { useCloseSidebarOnEscape } from './composables/sidebar'
 
 const {
   isOpen: isSidebarOpen,

src/client/theme-default/components/VPContent.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useSidebar } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
+import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
-import VPPage from './VPPage.vue'
-import VPHome from './VPHome.vue'
 import VPDoc from './VPDoc.vue'
-import NotFound from '../NotFound.vue'
+import VPHome from './VPHome.vue'
+import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
 const { hasSidebar } = useSidebar()

src/client/theme-default/components/VPDoc.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { useRoute, useSidebar } from 'vitepress'
+import { useRoute } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
 import { computed } from 'vue'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'

src/client/theme-default/components/VPFooter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSidebar } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
 import { useData } from '../composables/data'
 
 const { theme } = useData()

src/client/theme-default/components/VPLocalNav.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
+import { onContentUpdated } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
 import { computed, shallowRef } from 'vue'
-import { onContentUpdated, useSidebar } from 'vitepress'
 import { useData } from '../composables/data'
 import { getHeaders, type MenuItem } from '../composables/outline'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'

src/client/theme-default/components/VPNavBar.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
-import { useSidebar } from 'vitepress'
-import VPNavBarTitle from './VPNavBarTitle.vue'
-import VPNavBarSearch from './VPNavBarSearch.vue'
-import VPNavBarMenu from './VPNavBarMenu.vue'
-import VPNavBarTranslations from './VPNavBarTranslations.vue'
+import { useSidebar } from 'vitepress/theme'
+import { computed } from 'vue'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
-import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
+import VPNavBarMenu from './VPNavBarMenu.vue'
+import VPNavBarSearch from './VPNavBarSearch.vue'
+import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
+import VPNavBarTitle from './VPNavBarTitle.vue'
+import VPNavBarTranslations from './VPNavBarTranslations.vue'
 
 defineProps<{
   isScreenOpen: boolean

src/client/theme-default/components/VPNavBarTitle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSidebar } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
 import { useData } from '../composables/data'
 import { useLangs } from '../composables/langs'
 import { normalizeLink } from '../support/utils'

src/client/theme-default/components/VPSidebar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
+import { useSidebar } from 'vitepress/theme'
 import { ref, watchPostEffect } from 'vue'
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-import { useSidebar } from 'vitepress'
 import VPSidebarItem from './VPSidebarItem.vue'
 
 const { sidebarGroups, hasSidebar } = useSidebar()

src/client/theme-default/composables/aside.ts

@@ -1,6 +1,6 @@
-import { computed } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
-import { useSidebar } from 'vitepress'
+import { useSidebar } from 'vitepress/theme'
+import { computed } from 'vue'
 
 export function useAside() {
   const { hasSidebar } = useSidebar()

src/client/theme-default/composables/sidebar.ts

@@ -18,19 +18,6 @@ import {
 } from '../support/sidebar'
 import { useData } from './data'
 
-export interface Sidebar {
-  isOpen: Ref<boolean>
-  sidebar: Ref<DefaultTheme.SidebarItem[]>
-  sidebarGroups: Ref<DefaultTheme.SidebarItem[]>
-  hasSidebar: Ref<boolean>
-  hasAside: Ref<boolean>
-  leftAside: Ref<boolean>
-  isSidebarEnabled: Ref<boolean>
-  open: () => void
-  close: () => void
-  toggle: () => void
-}
-
 export interface SidebarControl {
   collapsed: Ref<boolean>
   collapsible: ComputedRef<boolean>
@@ -41,7 +28,7 @@ export interface SidebarControl {
   toggle(): void
 }
 
-export function useSidebar(): Sidebar {
+export function useSidebar() {
   const route = useRoute()
   const { theme, frontmatter } = useData()
   const is960 = useMediaQuery('(min-width: 960px)')

src/client/theme-default/without-fonts.ts

@@ -23,6 +23,8 @@ export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
 
+export { useSidebar } from './composables/sidebar'
+
 const theme: Theme = {
   Layout,
   enhanceApp: ({ app }) => {

theme.d.ts

@@ -14,9 +14,10 @@ export const VPTeamMembers: DefineComponent
 
 declare const theme: {
   Layout: DefineComponent
-  NotFound: DefineComponent
   enhanceApp: (ctx: EnhanceAppContext) => void
 }
 
 export default theme
 export type { DefaultTheme } from './types/default-theme.js'
+
+export const useSidebar: () => DefaultTheme.SideBar

types/default-theme.d.ts

@@ -209,6 +209,22 @@ export namespace DefaultTheme {
     collapsed?: boolean
   }
 
+  /**
+   * ReturnType of `useSidebar`
+   */
+  export interface Sidebar {
+    isOpen: Ref<boolean>
+    sidebar: ComputedRef<SidebarItem[]>
+    sidebarGroups: ComputedRef<SidebarItem[]>
+    hasSidebar: ComputedRef<boolean>
+    hasAside: ComputedRef<boolean>
+    leftAside: ComputedRef<boolean>
+    isSidebarEnabled: ComputedRef<boolean>
+    open: () => void
+    close: () => void
+    toggle: () => void
+  }
+
   // edit link -----------------------------------------------------------------
 
   export interface EditLink {