feat(config, theme): add clientOnly marker

__tests__/e2e/data-loading/data.test.ts

@@ -54,7 +54,7 @@ describe('static data file support in vite 3', () => {
           document.querySelector('pre#basic')?.textContent ===
           JSON.stringify([{ a: false }, { b: true }], null, 2),
         undefined,
-        { timeout: 3000 }
+        { timeout: 5000 }
       )
     } finally {
       await fs.writeFile(a, JSON.stringify({ a: true }, null, 2) + '\n')
@@ -69,7 +69,7 @@ describe('static data file support in vite 3', () => {
           document.querySelector('pre#basic')?.textContent ===
           JSON.stringify([{ a: true }], null, 2),
         undefined,
-        { timeout: 3000 }
+        { timeout: 5000 }
       )
       err = false
     } finally {
@@ -85,7 +85,7 @@ describe('static data file support in vite 3', () => {
           document.querySelector('pre#basic')?.textContent ===
           JSON.stringify([{ a: true }, { b: false }], null, 2),
         undefined,
-        { timeout: 3000 }
+        { timeout: 5000 }
       )
     } finally {
       await fs.writeFile(b, JSON.stringify({ b: true }, null, 2) + '\n')

package.json

@@ -107,6 +107,7 @@
     "@vueuse/core": "^13.1.0",
     "@vueuse/integrations": "^13.1.0",
     "focus-trap": "^7.6.4",
+    "living-object": "0.0.8",
     "mark.js": "8.11.1",
     "minisearch": "^7.1.2",
     "shiki": "^3.2.2",

src/client/app/components/ClientOnly.ts

@@ -1,7 +1,17 @@
 import { defineComponent, onMounted, ref } from 'vue'
 
 export const ClientOnly = defineComponent({
-  setup(_, { slots }) {
+  props: {
+    isClientOnly: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, { slots }) {
+    // Programmatically determine if this component should be
+    // client-only based on the presence of the isClientOnly attribute.
+    if (!props.isClientOnly) return () => slots.default?.(props) || null
+
     const show = ref(false)
 
     onMounted(() => {

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

@@ -2,29 +2,32 @@
 import { useData } from '../composables/data'
 import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
 import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
+import { isClientOnly } from '../../shared'
 
 const { theme } = useData()
 </script>
 
 <template>
-  <nav
-    v-if="theme.nav"
-    aria-labelledby="main-nav-aria-label"
-    class="VPNavBarMenu"
-  >
-    <span id="main-nav-aria-label" class="visually-hidden">
-      Main Navigation
-    </span>
-    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <VPNavBarMenuLink v-if="'link' in item" :item />
-      <component
-        v-else-if="'component' in item"
-        :is="item.component"
-        v-bind="item.props"
-      />
-      <VPNavBarMenuGroup v-else :item />
-    </template>
-  </nav>
+  <ClientOnly :is-client-only="isClientOnly(theme.nav)">
+    <nav
+      v-if="theme.nav"
+      aria-labelledby="main-nav-aria-label"
+      class="VPNavBarMenu"
+    >
+      <span id="main-nav-aria-label" class="visually-hidden">
+        Main Navigation
+      </span>
+      <template v-for="item in theme.nav" :key="JSON.stringify(item)">
+        <VPNavBarMenuLink v-if="'link' in item" :item />
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="item.props"
+        />
+        <VPNavBarMenuGroup v-else :item />
+      </template>
+    </nav>
+  </ClientOnly>
 </template>
 
 <style scoped>

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

@@ -5,7 +5,7 @@ import { ref, watch } from 'vue'
 import { useLayout } from '../composables/layout'
 import VPSidebarGroup from './VPSidebarGroup.vue'
 
-const { sidebarGroups, hasSidebar } = useLayout()
+const { sidebarGroups, hasSidebar, isSidebarClientOnly } = useLayout()
 
 const props = defineProps<{
   open: boolean
@@ -38,27 +38,18 @@ watch(
 </script>
 
 <template>
-  <aside
-    v-if="hasSidebar"
-    class="VPSidebar"
-    :class="{ open }"
-    ref="navEl"
-    @click.stop
-  >
+  <aside v-if="hasSidebar" class="VPSidebar" :class="{ open }" ref="navEl" @click.stop>
     <div class="curtain" />
 
-    <nav
-      class="nav"
-      id="VPSidebarNav"
-      aria-labelledby="sidebar-aria-label"
-      tabindex="-1"
-    >
+    <nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1">
       <span class="visually-hidden" id="sidebar-aria-label">
         Sidebar Navigation
       </span>
 
       <slot name="sidebar-nav-before" />
-      <VPSidebarGroup :items="sidebarGroups" :key />
+      <ClientOnly :is-client-only="isSidebarClientOnly">
+        <VPSidebarGroup :items="sidebarGroups" :key />
+      </ClientOnly>
       <slot name="sidebar-nav-after" />
     </nav>
   </aside>

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

@@ -2,6 +2,7 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import VPSidebarItem from './VPSidebarItem.vue'
+import { isClientOnly } from '../../shared'
 
 defineProps<{
   items: DefaultTheme.SidebarItem[]
@@ -33,7 +34,9 @@ onBeforeUnmount(() => {
     class="group"
     :class="{ 'no-transition': disableTransition }"
   >
-    <VPSidebarItem :item :depth="0" />
+    <ClientOnly :is-client-only="isClientOnly(item)">
+      <VPSidebarItem :item :depth="0" />
+    </ClientOnly>
   </div>
 </template>
 

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

@@ -3,6 +3,7 @@ import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
 import { useSidebarItemControl } from '../composables/sidebar'
 import VPLink from './VPLink.vue'
+import { isClientOnly } from '../../shared'
 
 const props = defineProps<{
   item: DefaultTheme.SidebarItem
@@ -55,56 +56,58 @@ function onCaretClick() {
 </script>
 
 <template>
-  <component :is="sectionTag" class="VPSidebarItem" :class="classes">
-    <div
-      v-if="item.text"
-      class="item"
-      :role="itemRole"
-      v-on="
-        item.items
-          ? { click: onItemInteraction, keydown: onItemInteraction }
-          : {}
-      "
-      :tabindex="item.items && 0"
-    >
-      <div class="indicator" />
-
-      <VPLink
-        v-if="item.link"
-        :tag="linkTag"
-        class="link"
-        :href="item.link"
-        :rel="item.rel"
-        :target="item.target"
-      >
-        <component :is="textTag" class="text" v-html="item.text" />
-      </VPLink>
-      <component v-else :is="textTag" class="text" v-html="item.text" />
-
+  <ClientOnly :is-client-only="isClientOnly(item)">
+    <component :is="sectionTag" class="VPSidebarItem" :class="classes">
       <div
-        v-if="item.collapsed != null && item.items && item.items.length"
-        class="caret"
-        role="button"
-        aria-label="toggle section"
-        @click="onCaretClick"
-        @keydown.enter="onCaretClick"
-        tabindex="0"
+        v-if="item.text"
+        class="item"
+        :role="itemRole"
+        v-on="
+          item.items
+            ? { click: onItemInteraction, keydown: onItemInteraction }
+            : {}
+        "
+        :tabindex="item.items && 0"
       >
-        <span class="vpi-chevron-right caret-icon" />
+        <div class="indicator" />
+
+        <VPLink
+          v-if="item.link"
+          :tag="linkTag"
+          class="link"
+          :href="item.link"
+          :rel="item.rel"
+          :target="item.target"
+        >
+          <component :is="textTag" class="text" v-html="item.text" />
+        </VPLink>
+        <component v-else :is="textTag" class="text" v-html="item.text" />
+
+        <div
+          v-if="item.collapsed != null && item.items && item.items.length"
+          class="caret"
+          role="button"
+          aria-label="toggle section"
+          @click="onCaretClick"
+          @keydown.enter="onCaretClick"
+          tabindex="0"
+        >
+          <span class="vpi-chevron-right caret-icon" />
+        </div>
+      </div>
+
+      <div v-if="item.items && item.items.length" class="items">
+        <template v-if="depth < 5">
+          <VPSidebarItem
+            v-for="i in item.items"
+            :key="i.text"
+            :item="i"
+            :depth="depth + 1"
+          />
+        </template>
       </div>
-    </div>
-
-    <div v-if="item.items && item.items.length" class="items">
-      <template v-if="depth < 5">
-        <VPSidebarItem
-          v-for="i in item.items"
-          :key="i.text"
-          :item="i"
-          :depth="depth + 1"
-        />
-      </template>
-    </div>
-  </component>
+    </component>
+  </ClientOnly>
 </template>
 
 <style scoped>

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

@@ -5,6 +5,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[]>([])
 const sidebar = shallowRef<DefaultTheme.SidebarItem[]>([])
@@ -28,6 +29,10 @@ export function useLayout(): ReturnType<typeof expected> {
 
   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) : []
   })
@@ -55,6 +60,7 @@ export function useLayout(): ReturnType<typeof expected> {
     sidebarGroups,
     hasSidebar,
     isSidebarEnabled,
+    isSidebarClientOnly,
     hasAside,
     leftAside,
     headers: shallowReadonly(headers),

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)
 }

src/node/build/build.ts

@@ -11,11 +11,11 @@ import type { BuildOptions, Rollup } from 'vite'
 import { resolveConfig, type SiteConfig } from '../config'
 import { clearCache } from '../markdownToVue'
 import { slash, type Awaitable, type HeadConfig } from '../shared'
-import { deserializeFunctions, serializeFunctions } from '../utils/fnSerialize'
 import { task } from '../utils/task'
 import { bundle } from './bundle'
 import { generateSitemap } from './generateSitemap'
 import { renderPage } from './render'
+import LivingObject from 'living-object'
 
 const require = createRequire(import.meta.url)
 
@@ -202,15 +202,11 @@ function generateMetadataScript(
   // It's also embedded as a string and JSON.parsed from the client because
   // it's faster than embedding as JS object literal.
   const hashMapString = JSON.stringify(JSON.stringify(pageToHashMap))
-  const siteDataString = JSON.stringify(
-    JSON.stringify(serializeFunctions({ ...config.site, head: [] }))
-  )
+  const siteDataString = new LivingObject({ ...config.site, head: [] })
+    .compile()
+    .complete((root) => `window.__VP_SITE_DATA__=${root}`)
 
-  const metadataContent = `window.__VP_HASH_MAP__=JSON.parse(${hashMapString});${
-    siteDataString.includes('_vp-fn_')
-      ? `${deserializeFunctions};window.__VP_SITE_DATA__=deserializeFunctions(JSON.parse(${siteDataString}));`
-      : `window.__VP_SITE_DATA__=JSON.parse(${siteDataString});`
-  }`
+  const metadataContent = `{window.__VP_HASH_MAP__=JSON.parse(${hashMapString});${siteDataString};}`
 
   if (!config.metaChunk) {
     return { html: `<script>${metadataContent}</script>`, inHead: false }