Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

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.

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

Closed
uncenter opened this issue Jan 3, 2024 · 6 comments
Closed

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

uncenter opened this issue Jan 3, 2024 · 6 comments
Labels
enhancement New feature or request

Comments

@uncenter
Copy link
Owner

uncenter commented Jan 3, 2024

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!
@uncenter uncenter changed the title Support linking to packages in .[j|t]s[x]? files Support linking to packages in .[c|m]?[j|t]s[x]? files Jan 3, 2024
@uncenter uncenter added the enhancement New feature or request label Jan 11, 2024
@fregante
Copy link

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 OctoLinker/OctoLinker#1695

@fregante
Copy link

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
Copy link
Owner Author

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
Copy link

fregante commented Aug 10, 2024

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
Copy link
Owner Author

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! πŸ˜’

@uncenter uncenter closed this as not planned Won't fix, can't repro, duplicate, stale Aug 11, 2024
@fregante
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants