search

uncenter / npm-on-github

📈 A Chrome extension to view NPM package downloads right on GitHub.
https://chrome.google.com/webstore/detail/npm-on-github/ldpbompbnpjmnfabebpbjohomchefogk
MIT License
5 stars 0 forks source link

Support linking to packages in .[c|m]?[j|t]s[x]? files #10

Closed uncenter closed 2 months ago

uncenter commented 9 months ago

As seen below!

image

Implementation thoughts:

  1. Check if we are on a GitHub file URL with an extension matching /\.[c|m]?[j|t]s[x]?/.
  2. Check for a .react-code-file-contents element.
  3. Go through each of the .react-code-line-contents in the react-code-file-contents .react-code-lines.
  4. Check if the line's textContent matches regex from mlly's findStaticImports.
  5. Add display: inline-flex; to the styles of the line's .react-file-line element.
  6. Find the span who's textContent contains the parseStaticImport(lineContents).specifier.
  7. Replace the span's innerHTML with <span>'</span><a style="color: inherit;text-decoration: underline;">${import.specifier}</a><span>'</span>.
  8. Done!
fregante commented 2 months ago

FYI there's a dedicated extension for this, but the react code editor you see broke it a while back, so now it only works on PRs and other code embeds.

See https://github.com/OctoLinker/OctoLinker/issues/1695

fregante commented 2 months ago

I found this gist that works already, on ctrl-click: https://gist.github.com/kiliman/5d7a3826bc16f5967978336d026805a3

However it does not give any feedback on hover because it does the parsing on click and it does not alter the DOM.

uncenter commented 2 months ago

Ah thank you! That's great. I might make this into a separate extension - support other package managers and file paths in general. Appreciate the advice!

fregante commented 2 months ago

The hope is to pick up Octolinker again since it already supports and parses a lot of package managers, rather than publish a brand new extension. The missing/broken part is the new React code widget parser/linkifier. I'm currently exploring what's possible, but it's not easy

uncenter commented 2 months ago

Sweet! I'll close this as not planned and look to improve upon those other solutions :)

Side note: have there been any benefits of GitHub's migration to React? Just breaks things, like external extensions, but also stuff on their own site! 😒

fregante commented 2 months ago

benefits of GitHub's migration to React

To extension developers absolutely not. For them I assume it's easier to create more interactive and faster UIs, like the file explorer. But particularly the file viewer has become insanely convoluted (not because of React though)