valaxy-theme-press 0.28.5 → 0.28.7

package/components/PressAlgoliaSearch.vue

@@ -2,7 +2,8 @@
 import type { DocSearchInstance, DocSearchProps } from '@docsearch/js'
 import type { SidepanelInstance, SidepanelProps } from '@docsearch/sidepanel-js'
 import type { AlgoliaSearchOptions } from '../types/algolia'
-import { nextTick, onUnmounted, ref, watch } from 'vue'
+import { useAddonConfig } from 'valaxy'
+import { nextTick, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 import '../styles/docsearch.css'
@@ -16,14 +17,7 @@ const props = defineProps<{
 
 const router = useRouter()
 
-// Dynamically import addon to avoid hard dependency
-const algoliaConfig = ref<{ options?: AlgoliaSearchOptions }>()
-import('valaxy-addon-algolia').then(({ useAddonAlgoliaConfig }) => {
-  // Direct assignment — the synchronous watcher below will react to this change
-  algoliaConfig.value = useAddonAlgoliaConfig().value
-}).catch(() => {
-  console.warn('[valaxy-theme-press] valaxy-addon-algolia is not installed. Algolia search will not work.')
-})
+const algoliaConfig = useAddonConfig<AlgoliaSearchOptions>('valaxy-addon-algolia')
 
 let cleanup = () => {}
 let docsearchInstance: DocSearchInstance | undefined

package/components/PressNavBarSearch.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { AlgoliaSearchOptions } from '../types/algolia'
 import { onKeyStroke } from '@vueuse/core'
-import { useSiteConfig } from 'valaxy'
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
+import { useAddonConfig, useSiteConfig } from 'valaxy'
+import { computed, defineAsyncComponent, hydrateOnInteraction, onMounted, ref } from 'vue'
 import PressNavBarAskAiButton from './PressNavBarAskAiButton.vue'
 import PressNavBarSearchButton from './PressNavBarSearchButton.vue'
 
@@ -13,27 +13,37 @@ const isFuse = computed(() => siteConfig.value.search.provider === 'fuse')
 const isLocal = computed(() => siteConfig.value.search.provider === 'local')
 
 // Whether to show the Ask AI button (requires askAi config in addon-algolia)
-const showAskAi = ref(false)
-
-if (isAlgolia.value) {
-  import('valaxy-addon-algolia').then(({ useAddonAlgoliaConfig }) => {
-    const algoliaConfig = useAddonAlgoliaConfig()
-    const askAi = (algoliaConfig.value?.options as AlgoliaSearchOptions | undefined)?.askAi
-    showAskAi.value = !!askAi
-  }).catch(() => {})
-}
+const algoliaAddonConfig = useAddonConfig<AlgoliaSearchOptions>('valaxy-addon-algolia')
+const showAskAi = computed(() => {
+  if (!isAlgolia.value)
+    return false
+  const askAi = algoliaAddonConfig.value?.options?.askAi
+  return !!askAi
+})
 
 const PressAlgoliaSearch = isAlgolia.value
   ? defineAsyncComponent(() => import('./PressAlgoliaSearch.vue'))
   : () => null
 
-const PressFuseSearch = isFuse.value
-  ? defineAsyncComponent(() => import('./PressFuseSearch.vue'))
-  : () => null
+/**
+ * Use lazy hydration (Vue 3.5+) to avoid hydration mismatch.
+ *
+ * `defineAsyncComponent` without a hydration strategy causes mismatch because
+ * the SSR bundle resolves async components synchronously (real DOM), while the
+ * client hasn't loaded the chunk yet during hydration (comment placeholder).
+ *
+ * `hydrateOnInteraction` keeps code-splitting benefits and defers hydration
+ * until the user actually interacts with the search button.
+ */
+const PressFuseSearch = defineAsyncComponent({
+  loader: () => import('./PressFuseSearch.vue'),
+  hydrate: hydrateOnInteraction(['click', 'focusin']),
+})
 
-const PressLocalSearch = isLocal.value
-  ? defineAsyncComponent(() => import('./PressLocalSearch.vue'))
-  : () => null
+const PressLocalSearch = defineAsyncComponent({
+  loader: () => import('./PressLocalSearch.vue'),
+  hydrate: hydrateOnInteraction(['click', 'focusin']),
+})
 
 // #region Algolia lazy loading
 
@@ -46,7 +56,7 @@ const loaded = ref(false)
 const actuallyLoaded = ref(false)
 
 // Preconnect to Algolia DSN on idle
-onMounted(async () => {
+onMounted(() => {
   if (!isAlgolia.value)
     return
 
@@ -54,28 +64,19 @@ onMounted(async () => {
   if (document.getElementById(id))
     return
 
-  // Dynamically import addon config to get appId for preconnect
-  try {
-    const { useAddonAlgoliaConfig } = await import('valaxy-addon-algolia')
-    const algoliaConfig = useAddonAlgoliaConfig()
-    const appId = algoliaConfig.value?.options?.appId
-
-    if (!appId)
-      return
-
-    const rIC = window.requestIdleCallback || setTimeout
-    rIC(() => {
-      const preconnect = document.createElement('link')
-      preconnect.id = id
-      preconnect.rel = 'preconnect'
-      preconnect.href = `https://${appId}-dsn.algolia.net`
-      preconnect.crossOrigin = ''
-      document.head.appendChild(preconnect)
-    })
-  }
-  catch {
-    // valaxy-addon-algolia not installed, skip preconnect
-  }
+  const appId = algoliaAddonConfig.value?.options?.appId
+  if (!appId)
+    return
+
+  const rIC = window.requestIdleCallback || setTimeout
+  rIC(() => {
+    const preconnect = document.createElement('link')
+    preconnect.id = id
+    preconnect.rel = 'preconnect'
+    preconnect.href = `https://${appId}-dsn.algolia.net`
+    preconnect.crossOrigin = ''
+    document.head.appendChild(preconnect)
+  })
 })
 
 // Keyboard shortcuts for Algolia

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.28.5",
+  "version": "0.28.7",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -22,13 +22,13 @@
   "main": "node/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@docsearch/css": "^4.6.2",
-    "@docsearch/js": "^4.6.2",
-    "@docsearch/sidepanel-js": "^4.6.2",
-    "reka-ui": "^2.9.6",
+    "@docsearch/css": "^4.6.3",
+    "@docsearch/js": "^4.6.3",
+    "@docsearch/sidepanel-js": "^4.6.3",
+    "reka-ui": "^2.9.7",
     "vitepress": "^2.0.0-alpha.17"
   },
   "devDependencies": {
-    "valaxy": "0.28.5"
+    "valaxy": "0.28.7"
   }
 }