Skip to content

fix: add version to npm graph #1809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 1 commit into from
Mar 2, 2026
+1 −1
Merged

fix: add version to npm graph #1809

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/pages/package/[[org]]/[name].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1123,7 +1123,7 @@ const showSkeleton = shallowRef(false)
<LinkBase
variant="button-secondary"
size="small"
:to="`https://npmgraph.js.org/?q=${pkg.name}`"
:to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 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 -5

Repository: 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 -50

Repository: 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 1

Repository: 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"))
PY

Repository: 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 2

Repository: 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 10

Repository: 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 1

Repository: 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 -20

Repository: 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 -10

Repository: 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 -40

Repository: 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 -50

Repository: 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.

Suggested change
:to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
:to="`https://npmgraph.js.org/?q=${encodeURIComponent(`${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`)}`"

:title="$t('package.stats.view_dependency_graph')"
classicon="i-lucide:network -rotate-90"
>
Expand Down
Loading