feat: highlight active item in package docs sidebar#2228
feat: highlight active item in package docs sidebar#2228iiio2 wants to merge 7 commits intonpmx-dev:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
📝 WalkthroughWalkthroughClient-side TOC active-link tracking was added to the package docs page. A Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
…ithub.com/iiio2/npmx.dev into feat/highlight-active-item-in-doc-sidebar
There was a problem hiding this comment.
Hmm I wonder if we should use an IntersectionObserver instead so that it highlights the top most visible one? That would mean that it wouldn't always show the one you have in your hash though, but when you load the page it would which I think works?
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5dadc5e7-0551-4e57-b284-b1c15d68840c
📒 Files selected for processing (1)
app/pages/package-docs/[...path].vue
| function onTocClick(e: Event) { | ||
| const link = (e.target as HTMLElement).closest('a[href^="#"]') | ||
| if (link) { | ||
| nextTick(updateActiveTocLink) | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Read-only verification: find cast-based EventTarget.closest usage patterns in Vue files.
rg -nP --type=vue -C2 '\(e\.target as HTMLElement\)\.closest\('Repository: npmx-dev/npmx.dev
Length of output: 88
🏁 Script executed:
# First, locate and read the specific file
cat -n app/pages/package-docs/[...path].vue | head -180 | tail -40Repository: npmx-dev/npmx.dev
Length of output: 1286
🏁 Script executed:
# Check the actual file structure and read lines around 159-163
wc -l app/pages/package-docs/[...path].vue && echo "---" && sed -n '150,170p' app/pages/package-docs/[...path].vueRepository: npmx-dev/npmx.dev
Length of output: 587
🏁 Script executed:
# Find similar patterns in .vue files
fd -e vue -x rg -l 'e\.target' {} \; | head -5Repository: npmx-dev/npmx.dev
Length of output: 230
🏁 Script executed:
# Search for similar EventTarget.closest patterns in .vue files
fd -e vue -x rg -n 'e\.target.*\.closest\|target.*as HTMLElement' {} +Repository: npmx-dev/npmx.dev
Length of output: 6990
🏁 Script executed:
# Search for similar patterns in all Vue files
rg -n 'target as HTMLElement' app/Repository: npmx-dev/npmx.dev
Length of output: 491
Guard EventTarget before calling closest().
e.target is not guaranteed to be an HTMLElement; this cast can fail at runtime on non-Element targets. Add a runtime instanceof Element check first.
🛠 Proposed fix
function onTocClick(e: Event) {
- const link = (e.target as HTMLElement).closest('a[href^="#"]')
+ const target = e.target
+ if (!(target instanceof Element)) return
+ const link = target.closest('a[href^="#"]')
if (link) {
nextTick(updateActiveTocLink)
}
}Per the coding guidelines, ensure strictly type-safe code by checking types at runtime before calling methods that don't exist on the source type.
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
3 participants
Clicking a sidebar TOC item on the docs page navigates to the section, but the sidebar doesn't visually indicate which item is currently selected. Now we can see which item is selected.
Before:
After: