diff --git a/app/composables/npm/useUserPackages.ts b/app/composables/npm/useUserPackages.ts index ed9f859382..1227461f76 100644 --- a/app/composables/npm/useUserPackages.ts +++ b/app/composables/npm/useUserPackages.ts @@ -110,7 +110,7 @@ export function useUserPackages(username: MaybeRefOrGetter) { return { ...response, isStale } }, - { default: emptySearchResponse }, + { default: emptySearchResponse, server: false }, ) // --- Fetch more (npm path only) --- /** diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts index c1454355f3..55c9caadd0 100644 --- a/app/composables/useSettings.ts +++ b/app/composables/useSettings.ts @@ -1,7 +1,7 @@ import type { RemovableRef } from '@vueuse/core' -import { useLocalStorage } from '@vueuse/core' -import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants' import type { LocaleObject } from '@nuxtjs/i18n' +import { useLocalStorage, useMounted } from '@vueuse/core' +import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants' import { BACKGROUND_THEMES } from '#shared/utils/constants' type BackgroundThemeId = keyof typeof BACKGROUND_THEMES @@ -197,9 +197,10 @@ export function useAccentColor() { */ export function useSearchProvider() { const { settings } = useSettings() + const isMounted = useMounted() const searchProvider = computed({ - get: () => settings.value.searchProvider, + get: () => (isMounted.value ? settings.value.searchProvider : DEFAULT_SETTINGS.searchProvider), set: (value: SearchProvider) => { settings.value.searchProvider = value }, diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue index 5c4bb941ae..e56d7efc4e 100644 --- a/app/pages/~[username]/index.vue +++ b/app/pages/~[username]/index.vue @@ -180,7 +180,7 @@ defineOgImage( diff --git a/test/e2e/hydration.spec.ts b/test/e2e/hydration.spec.ts index 0f1c6ae9e4..528fa3aa9c 100644 --- a/test/e2e/hydration.spec.ts +++ b/test/e2e/hydration.spec.ts @@ -10,8 +10,11 @@ const PAGES = [ '/search', '/package/nuxt', '/search?q=vue', + '/~qwerzl', ] as const +const SEARCH_PROVIDER_PAGES = ['/search?q=vue', '/~qwerzl'] as const + // --------------------------------------------------------------------------- // Test matrix // @@ -113,6 +116,20 @@ test.describe('Hydration', () => { }) } }) + + // Default: "algolia" in production -> test persisted "npm" + test.describe('search provider: npm', () => { + for (const page of SEARCH_PROVIDER_PAGES) { + test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => { + await injectLocalStorage(pw, { + 'npmx-settings': JSON.stringify({ searchProvider: 'npm' }), + }) + await goto(page, { waitUntil: 'hydration' }) + + expect(hydrationErrors).toEqual([]) + }) + } + }) }) async function injectLocalStorage(page: Page, entries: Record) {