Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThe change modifies the package page to conditionally append a resolved version to the npmgraph.js.org dependency graph URL. When a resolvedVersion is available, the URL includes @ in the query string; otherwise, the URL remains unchanged. This adjustment affects how the "View Dependency Graph" button constructs its target link, enabling the dependency graph to reflect a specific package version when that information is present. The modification involves one line addition and one line removal. 🚥 Pre-merge checks | ❌ 1❌ Failed checks (1 inconclusive)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| variant="button-secondary" | ||
| size="small" | ||
| :to="`https://npmgraph.js.org/?q=${pkg.name}`" | ||
| :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find and examine the file
fd -t f '[name].vue' | grep -E 'package.*\[\[org\]\]'Repository: npmx-dev/npmx.dev
Length of output: 43
🏁 Script executed:
# Read the file around line 1126
wc -l app/pages/package/\[\[org\]\]/\[name\].vue 2>/dev/null || find . -path "*package/[[org]]/[name].vue" -o -path "*package*" -name "[name].vue" | head -5Repository: npmx-dev/npmx.dev
Length of output: 102
🏁 Script executed:
# Search for the exact file using git
git ls-files | grep -i 'name\.vue'Repository: npmx-dev/npmx.dev
Length of output: 43
🏁 Script executed:
# Read lines around 1126 to see the code and context
sed -n '1120,1135p' 'app/pages/package/[[org]]/[name].vue'Repository: npmx-dev/npmx.dev
Length of output: 766
🏁 Script executed:
# Search for where resolvedVersion and pkg are defined or used
sed -n '1,1126p' 'app/pages/package/[[org]]/[name].vue' | tail -100 | head -50Repository: npmx-dev/npmx.dev
Length of output: 1874
🏁 Script executed:
# Look for resolvedVersion definition in the file
rg 'resolvedVersion' 'app/pages/package/[[org]]/[name].vue' -B 3 -A 1Repository: npmx-dev/npmx.dev
Length of output: 5892
🏁 Script executed:
# Run the verification script from the review to confirm URL parsing behaviour
python - <<'PY'
from urllib.parse import urlparse, parse_qs, quote
spec = "@scope/pkg@1.2.3+build.1"
raw_url = f"https://npmgraph.js.org/?q={spec}"
enc_url = f"https://npmgraph.js.org/?q={quote(spec, safe='')}"
print("Raw URL:", raw_url)
print("Raw parsed q:", parse_qs(urlparse(raw_url).query).get("q"))
print()
print("Encoded URL:", enc_url)
print("Encoded parsed q:", parse_qs(urlparse(enc_url).query).get("q"))
PYRepository: npmx-dev/npmx.dev
Length of output: 285
🏁 Script executed:
# Search for URL encoding patterns in the codebase
rg 'encodeURIComponent|encodeURI|URLSearchParams' --type vue --type ts --type tsx -A 2Repository: npmx-dev/npmx.dev
Length of output: 88
🏁 Script executed:
# Check the useResolvedVersion composable to understand the format
fd -t f 'useResolvedVersion' || rg -t ts -t js 'export.*useResolvedVersion|function useResolvedVersion' -A 10Repository: npmx-dev/npmx.dev
Length of output: 102
🏁 Script executed:
# Look for similar URL construction patterns in the file
rg ':to="`https://' 'app/pages/package/[[org]]/[name].vue' -B 1 -A 1Repository: npmx-dev/npmx.dev
Length of output: 649
🏁 Script executed:
# Read the useResolvedVersion composable to understand the version format
cat 'app/composables/npm/useResolvedVersion.ts'Repository: npmx-dev/npmx.dev
Length of output: 734
🏁 Script executed:
# Search for URL encoding utilities in the codebase
rg 'encodeURIComponent|URLSearchParams' -t ts -t js | head -20Repository: npmx-dev/npmx.dev
Length of output: 2517
🏁 Script executed:
# Check what format versions are in across the codebase (looking for build metadata patterns)
rg '\+[a-zA-Z0-9.-]+' 'app/composables/' | head -10Repository: npmx-dev/npmx.dev
Length of output: 304
🏁 Script executed:
# Look at how other external links are constructed
rg ':to="`https://' -A 2 -B 2 | head -40Repository: npmx-dev/npmx.dev
Length of output: 3334
🏁 Script executed:
# Check if there's a similar issue on line 1131 with node-modules.dev
sed -n '1129,1133p' 'app/pages/package/[[org]]/[name].vue'Repository: npmx-dev/npmx.dev
Length of output: 228
🏁 Script executed:
# Look for URL encoding utilities that might already exist in the codebase
cat 'shared/utils/npm.ts' | head -50Repository: npmx-dev/npmx.dev
Length of output: 1652
Encode the npmgraph and node-modules query parameters before interpolation.
Lines 1126 and 1131 construct URLs with unencoded query parameters. If a resolved version contains + (valid semver build metadata), it is decoded as a space, producing an incorrect package specification. Wrap both query values with encodeURIComponent().
Suggested fixes
- :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+ :to="`https://npmgraph.js.org/?q=${encodeURIComponent(`${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`)}`"- :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+ :to="`https://node-modules.dev/grid/depth#install=${encodeURIComponent(`${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`)}`"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`" | |
| :to="`https://npmgraph.js.org/?q=${encodeURIComponent(`${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`)}`" |
2 participants
🔗 Linked issue
🧭 Context
📚 Description