Skip to content

Commit 50d61fa

Browse files
authoredOct 22, 2023
fix(theme/search): prevent reactivity loss with i18n (#3121)
1 parent 5542f29 commit 50d61fa

File tree

3 files changed

+20
-14
lines changed

3 files changed

+20
-14
lines changed
 

‎src/client/theme-default/components/VPAlgoliaSearchBox.vue

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
2-
import type { DefaultTheme } from 'vitepress/theme'
32
import docsearch from '@docsearch/js'
4-
import { onMounted, watch } from 'vue'
5-
import { useRouter, useRoute } from 'vitepress'
3+
import { useRoute, useRouter } from 'vitepress'
4+
import type { DefaultTheme } from 'vitepress/theme'
5+
import { nextTick, onMounted, watch } from 'vue'
66
import { useData } from '../composables/data'
77
88
const props = defineProps<{
@@ -18,7 +18,8 @@ type DocSearchProps = Parameters<typeof docsearch>[0]
1818
onMounted(update)
1919
watch(localeIndex, update)
2020
21-
function update() {
21+
async function update() {
22+
await nextTick()
2223
const options = {
2324
...props.algolia,
2425
...props.algolia.locales?.[localeIndex.value]
@@ -86,12 +87,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
8687
8788
function getRelativePath(url: string) {
8889
const { pathname, hash } = new URL(url, location.origin)
89-
return (
90-
pathname.replace(
91-
/\.html$/,
92-
site.value.cleanUrls ? '' : '.html'
93-
) + hash
94-
)
90+
return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
9591
}
9692
</script>
9793

‎src/client/theme-default/components/VPLocalSearchBox.vue

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
computedAsync,
55
debouncedWatch,
66
onKeyStroke,
7+
reactify,
78
useEventListener,
89
useLocalStorage,
910
useScrollLock,
@@ -12,7 +13,7 @@ import {
1213
import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
1314
import Mark from 'mark.js/src/vanilla.js'
1415
import MiniSearch, { type SearchResult } from 'minisearch'
15-
import { inBrowser, useRouter, dataSymbol } from 'vitepress'
16+
import { dataSymbol, inBrowser, useRouter } from 'vitepress'
1617
import {
1718
computed,
1819
createApp,
@@ -22,6 +23,7 @@ import {
2223
onMounted,
2324
ref,
2425
shallowRef,
26+
toRef,
2527
watch,
2628
watchEffect,
2729
type Ref
@@ -352,7 +354,10 @@ const defaultTranslations: { modal: ModalTranslations } = {
352354
}
353355
}
354356
355-
const $t = createTranslate(theme.value.search?.options, defaultTranslations)
357+
const $t = reactify(createTranslate)(
358+
toRef(() => theme.value.search?.options),
359+
defaultTranslations
360+
)
356361
357362
// Back
358363

‎src/client/theme-default/components/VPNavBarSearchButton.vue

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts" setup>
2+
import { reactify } from '@vueuse/core'
3+
import { toRef } from 'vue'
24
import type { ButtonTranslations } from '../../../../types/local-search'
35
import { useData } from '../composables/data'
46
import { createTranslate } from '../support/translation'
@@ -9,11 +11,14 @@ const { theme } = useData()
911
const defaultTranslations: { button: ButtonTranslations } = {
1012
button: {
1113
buttonText: 'Search',
12-
buttonAriaLabel: 'Search',
14+
buttonAriaLabel: 'Search'
1315
}
1416
}
1517
16-
const $t = createTranslate(theme.value.search?.options, defaultTranslations)
18+
const $t = reactify(createTranslate)(
19+
toRef(() => theme.value.search?.options),
20+
defaultTranslations
21+
)
1722
</script>
1823

1924
<template>

0 commit comments

Comments
 (0)
Please sign in to comment.