refactor(OACodeSamples): preload highlighter languages using Shiki

[enzonotario]

Description

Following #317 , I added preloading for all highlighted languages, since E2E tests were failing due to the time it takes to load each language, which caused screenthots to appear blank.

Related issues/external references

#317

Types of changes

• Refactor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vitepress-openapi	Ready	Preview	Feb 8, 2026 7:13pm

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vitepress-openapi@318

commit: 4c86e5a

[coderabbitai]

Walkthrough

A keyword "vitepress-plugin" was added to package.json metadata. The OACodeSamples.vue component was enhanced to preload syntax highlighting languages before rendering code samples, using the Shiki hook to ensure all required languages are available.

Changes

Cohort / File(s)	Summary
Metadata Update package.json	Added "vitepress-plugin" keyword to package metadata.
Component Enhancement src/components/Sample/OACodeSamples.vue	Added Shiki language preloading logic that collects unique languages from generated samples and ensures they are loaded before sample assignment, with immediate watcher re-enabled.

Sequence Diagram(s)

sequenceDiagram
    actor Component as Vue Component
    participant Watcher as Watcher (immediate: true)
    participant Shiki as Shiki Hook
    participant Render as Sample State

    Component->>Watcher: Sample type changed
    Watcher->>Watcher: Generate nextSamples
    Note over Watcher: Collect unique languages
    Watcher->>Shiki: ensureLanguage(lang) × N in Promise.all
    Shiki-->>Watcher: All languages preloaded
    Watcher->>Watcher: Check for cancellation
    Watcher->>Render: Assign samples
    Render-->>Component: Update with preloaded samples

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The PR title describes a refactor to preload highlighter languages in OACodeSamples component, which directly matches the main changes in the raw summary (importing useShiki, adding language preloading logic).
Description check	✅ Passed	The PR description explains the purpose of changes (preloading highlighted languages to fix E2E test failures) and references a related issue (#317).

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/e2e-ss

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@e2e/local/home.spec.ts`:
- Line 7: Replace the hard-coded sleep call `await page.waitForTimeout(1000)` in
the test(s) with deterministic Playwright waits: use `await
page.waitForLoadState('networkidle')` when waiting for network/activity to
settle, or use `await page.locator('...').waitFor()` / `await
expect(page.locator('...')).toBeVisible()` to wait for a specific element
rendered by the page (identify the appropriate selector for the UI element the
test relies on), and if visual flakiness is the issue use `toHaveScreenshot({
animations: 'disabled' })`; update the occurrences in the test files (e.g., the
`page` usage in home.spec.ts, onePage.spec.ts, tests.spec.ts and their staging
equivalents) to remove `waitForTimeout` and replace with the appropriate
deterministic wait per test.

In `@e2e/staging/sidebar.spec.ts`:
- Line 20: Replace the hardcoded sleep call page.waitForTimeout(1000) in
e2e/staging/sidebar.spec.ts with a deterministic wait: use
page.waitForLoadState('networkidle') or await
page.waitForSelector('<selector-for-final-rendered-element>') (an element that
signifies the page is ready), or adjust expect(page).toHaveScreenshot options
(e.g., animations: 'disabled') if animations cause flakiness; update every
occurrence of page.waitForTimeout in the seven test files to one of these
deterministic alternatives so tests become stable and CI-friendly.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/Sample/OACodeSamples.vue`:
- Around line 89-96: The Promise.all call preloading languages
(uniqueHighlighters -> shiki.ensureLanguage) can reject and block rendering;
change it to handle rejections (either wrap the await Promise.all(...) in a
try/catch and log/ignore individual errors, or use await
Promise.allSettled(uniqueHighlighters.map(lang => shiki.ensureLanguage(lang)))
and treat rejected results as non-fatal) so that a single failed language load
won't prevent samples.value from being set; preserve the existing cancelled
check after awaiting and make sure errors are logged or swallowed appropriately
before continuing to assign samples.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@e2e/local/home.spec.ts`:
- Around line 8-10: The test currently waits for a '.shiki' selector which never
appears on the home page; remove that wait or replace it with a guaranteed
selector (e.g., the page heading or an action button) used in the test in
e2e/local/home.spec.ts, or add a short timeout and explicit failure handling so
the test fails fast; locate the await page.waitForSelector('.shiki', { state:
'visible' }) call and either delete it, change the selector to a reliable
element (heading/button text), or add a timeout option and catch to log a
meaningful error.