fix: fall back to an available choice when the selected one is absent on the page (#169)

[brillout]

Fixes #169.

Root cause

A page can define a choice group with only a subset of the group's choices. For uiFramework (React/Vue/Solid), https://vike.dev/ClientOnly has all three, but https://vike.dev/bodyHtmlEnd only has React/Vue — so Solid is an empty choice there.

When Solid is selected on ClientOnly, it's persisted to localStorage (docpress:choice:uiFramework). Navigating to bodyHtmlEnd:

• The hidden <select> that drives choice visibility via CSS still renders an <option value="Solid"> (the option list is the full config, not just the page's choices). With value="Solid" it gets :checked, so the CSS hides every real .choice and shows only the empty Solid one → no content.
• The visible CustomSelect filters out empty choices and adds a hidden class when the selected choice is empty → no selector either.

Net result: nothing is shown.

Fix

Resolve the displayed choice to one that actually has content on the current page, via a small helper getAvailableChoice():

1. the stored choice, if it's available on the page; otherwise
2. the group's default, if available; otherwise
3. the first available choice.

This is applied to the hidden <select> (drives content visibility), CustomSelect, and Tabs. The stored global preference is not overwritten — pages that do have Solid keep showing it.

To avoid a pre-hydration flash, the inline SSR script (initializeChoiceGroup) now marks empty <option>s with data-empty and only applies the stored choice when it has content on the page, keeping the server-rendered fallback otherwise. Stale choices (no longer in the config at all) are still cleaned up from localStorage.

Tests

• Unit (getAvailableChoice.spec.ts): covers the fallback cases (default available, default empty, nothing empty, everything empty).
• E2E (demo/testRun.ts + demo/pages/page-4): page-4 now defines uiFramework with only React/Vue. The test selects Solid (absent here), reloads, and asserts the content falls back to React instead of showing nothing.

Verified locally against the demo dev server with Playwright: the fix renders the fallback content, keeps the selector visible, preserves the Solid preference, and features (which has Solid) still renders Solid. Reverting the fix reproduces the blank page, confirming the test catches the regression. build, test:types, and test:units all pass.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BcbPYNNRXEBpDZEzzZwVkT

---

Generated by Claude Code

[phonzammi]

@brillout, LGTM ?

[brillout]

I didn't review the code in details, so as you wish. From my high-level perspective I think we can merge.

[phonzammi]

Alright, thanks. Merging now.