From 0d410d62c6cd8d13a576f0376ec7c9d2774c3706 Mon Sep 17 00:00:00 2001
From: Yuxuan Zhang <github@z-yx.cc>
Date: Fri, 11 Apr 2025 05:10:03 -0400
Subject: [PATCH] fix: clientOnly marker lost during `addBase()`

---
 .../theme-default/components/VPSidebar.vue    |  5 ++---
 .../theme-default/composables/layout.ts       |  6 ++++++
 src/client/theme-default/support/sidebar.ts   |  9 +++++----
 src/shared/shared.ts                          | 19 +++++++++++++------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 08c154fb..92f4f521 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -4,9 +4,8 @@ import { inBrowser } from 'vitepress'
 import { ref, watch } from 'vue'
 import { useLayout } from '../composables/layout'
 import VPSidebarGroup from './VPSidebarGroup.vue'
-import { isClientOnly } from '../../shared'
 
-const { sidebarGroups, hasSidebar } = useLayout()
+const { sidebarGroups, hasSidebar, isSidebarClientOnly } = useLayout()
 
 const props = defineProps<{
   open: boolean
@@ -48,7 +47,7 @@ watch(
       </span>
 
       <slot name="sidebar-nav-before" />
-      <ClientOnly :is-client-only="isSidebarClientOnly || isClientOnly(sidebar) || isClientOnly(sidebarGroups)">
+      <ClientOnly :is-client-only="isSidebarClientOnly">
         <VPSidebarGroup :items="sidebarGroups" :key />
       </ClientOnly>
       <slot name="sidebar-nav-after" />
diff --git a/src/client/theme-default/composables/layout.ts b/src/client/theme-default/composables/layout.ts
index 85fb306b..6cad62a7 100644
--- a/src/client/theme-default/composables/layout.ts
+++ b/src/client/theme-default/composables/layout.ts
@@ -6,6 +6,7 @@ import { getSidebar, getSidebarGroups } from '../support/sidebar'
 import { useData } from './data'
 import { getHeaders } from './outline'
 import { useCloseSidebarOnEscape } from './sidebar'
+import { isClientOnly } from '../../shared'
 
 const headers = shallowRef<DefaultTheme.OutlineItem[]>([])
 
@@ -33,6 +34,10 @@ export function useLayout() {
 
   const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
 
+  const isSidebarClientOnly = computed(
+    () => isClientOnly(theme.value.sidebar) || isClientOnly(sidebar.value)
+  )
+
   const sidebarGroups = computed(() => {
     return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
   })
@@ -60,6 +65,7 @@ export function useLayout() {
     sidebarGroups,
     hasSidebar,
     isSidebarEnabled,
+    isSidebarClientOnly,
     hasAside,
     leftAside,
     headers,
diff --git a/src/client/theme-default/support/sidebar.ts b/src/client/theme-default/support/sidebar.ts
index 201f2536..e2afc591 100644
--- a/src/client/theme-default/support/sidebar.ts
+++ b/src/client/theme-default/support/sidebar.ts
@@ -1,5 +1,5 @@
 import type { DefaultTheme } from 'vitepress/theme'
-import { isActive } from '../../shared'
+import { isActive, propagateClientOnly } from '../../shared'
 import { ensureStartingSlash } from './utils'
 
 export interface SidebarLink {
@@ -108,12 +108,13 @@ export function hasActiveLink(
       : false
 }
 
-function addBase(items: SidebarItem[], _base?: string): SidebarItem[] {
-  return [...items].map((_item) => {
+function addBase(items: SidebarItem[], _base?: string) {
+  const result = [...items].map((_item) => {
     const item = { ..._item }
     const base = item.base || _base
     if (base && item.link) item.link = base + item.link
     if (item.items) item.items = addBase(item.items, base)
-    return item
+    return propagateClientOnly(item, _item)
   })
+  return propagateClientOnly(items, result)
 }
diff --git a/src/shared/shared.ts b/src/shared/shared.ts
index a8635af1..d777f039 100644
--- a/src/shared/shared.ts
+++ b/src/shared/shared.ts
@@ -231,13 +231,20 @@ export function escapeHtml(str: string): string {
     .replace(/&(?![\w#]+;)/g, '&amp;')
 }
 
-const CLIENT_ONLY = '[VP_CLIENT_ONLY]'
+const ClientOnlyMarker = Symbol.for('vitepress:client-only')
 
-export function clientOnly<T extends object>(obj: T): T {
-  ;(obj as any)[CLIENT_ONLY] = true
-  return obj
+export function clientOnly<T extends object>(object: T) {
+  ;(object as any)[ClientOnlyMarker] = true
+  return object
 }
 
-export function isClientOnly<T = any>(obj: T) {
-  return Boolean((obj as any)?.[CLIENT_ONLY])
+export function isClientOnly<T extends object>(object?: T): boolean {
+  return (object as any)?.[ClientOnlyMarker] ?? false
+}
+
+export function propagateClientOnly<T extends object>(src: T, dst: T): T {
+  if (isClientOnly(src)) {
+    clientOnly(dst)
+  }
+  return dst
 }