Skip to content

build(web): npm tooling upgrades (pre MUI)#1430

Closed
lygaret wants to merge 5 commits intogit-bug:masterfrom
lygaret:webui-upgrade-graphql-tools
Closed

build(web): npm tooling upgrades (pre MUI)#1430
lygaret wants to merge 5 commits intogit-bug:masterfrom
lygaret:webui-upgrade-graphql-tools

Conversation

@lygaret
Copy link
Contributor

@lygaret lygaret commented May 16, 2025

  • upgrade graphql codegen tooling; eslint plugin was left alone because eslint is a whole thing
  • upgrade remark+unified (markdown renderers)
    • implement syntax highlighting with new remark pipeline
  • fix error with strict-mode labels (p>div is illegal, allow labels to be spans)

eslint plugin was left alone because eslint is a whole thing
@sudoforge
Copy link
Contributor

upgrade eslint + all plugins
it might be hard to make this exactly the same, aim for close

i'm in the process of dropping prettier here: #1429

upgrade remark+unified (markdown formatters)

i'll be removing this too. #1429 exposes //webui for formatting by the nix format tooling; we format markdown with mdformat and a few plugins.


so basically, with that first box checked, you're done with these goals :)

@MichaelMure
Copy link
Contributor

remark is another thing, it's for mardown formatting of bug comments in the frontend

@sudoforge
Copy link
Contributor

oh, nvm then. i saw "formatter" and didn't put that together as the markdown rendering lib that's used.

@lygaret
Copy link
Contributor Author

lygaret commented May 16, 2025

oh, nvm then. i saw "formatter" and didn't put that together as the markdown rendering lib that's used.

yeah, sorry for the confusion, changed the wording to renderer so it shows up right in the squash

lygaret added 3 commits May 16, 2025 15:00
updates remark/rehype/unified to the latest versions, and reconfigures
the markdown pipeline to be more efficient and use the latest plugins.

the pipeline now includes GFM style features like code highlighting,
footnotes, inline urls, and hard line breaks, and no longer double
parses to html.

also implements the first part of code highlighting in markdown,
what's left is correctly bringing in theme css files
p>div is not a valid nesting in HTML, and with strict-mode turned on,
react complains about it.

this fix allows labels to be inline, and then uses that in the LabelChange
component to avoid getting hydration warnings from react
the full theme is loaded, but controled by a parent's data attribute.
@lygaret
Copy link
Contributor Author

lygaret commented May 16, 2025

with the latest remark/rehype/unified versions, I also brought in a syntax highlighting plugin, mostly because it was easy, since I had already dealt with hacking the pipeline to pieces. I think this would close #580.

The theme is base16-classic which is bundled with highlight.js; easy to change.

@sudoforge if you'd like, I can also submit PRs for each of these changes separately, I just got a bit carried away on this one.

Please test this out and let me know if there's any markdown that doesn't seem to be rendering correctly; I looked quite a bit, but it all looks normal to me.

Screenshot 2025-05-16 at 4 23 53 PM

Screenshot 2025-05-16 at 4 23 57 PM

@lygaret
Copy link
Contributor Author

lygaret commented May 16, 2025

Giving up on eslint for now, since I think that will have to change once nix is doing formatting.

@lygaret lygaret marked this pull request as ready for review May 16, 2025 22:30
@MichaelMure
Copy link
Contributor

Really nice!

@sudoforge
Copy link
Contributor

@sudoforge if you'd like, I can also submit PRs for each of these changes separately, I just got a bit carried away on this one.

this isn't a documented contribution requirement or anything, but yes, i would prefer that logically independent changes were submitted individually, however, i can enable rebase merging on the repository and take these commits in individually for now.

that does, however, require that the merge queue is bypassed -- which is fine, it's mostly just there for an easier autonomous submit/review/refactor/merge loop -- because it will squash all of the commits from a PR into one.

@lygaret lygaret marked this pull request as draft May 16, 2025 22:38
@lygaret
Copy link
Contributor Author

lygaret commented May 16, 2025

ok, @sudoforge I will break this into the graphql tools, then remark + highlighting (because those will be much harder to split).

I'll title the remark upgrade as intended to close the highlighting issue, where the upgrade is an implementation detail.

@sudoforge
Copy link
Contributor

no, no, my comment was telling you that there's no need to, i can merge it so that they're individual on HEAD.


i'll wait to test it out until i get the signal from you that it's ready to review again -- one quick q: can we adjust the indent level to 4? that feels like a sane default for now, and in the future we could expose this as a setting for the user.

@lygaret
Copy link
Contributor Author

lygaret commented May 16, 2025

one quick q: can we adjust the indent level to 4? that feels like a sane default for now, and in the future we could expose this as a setting for the user.

afaiu, the indent you're seeing in the screenshot is purely from the input; all the highlighting does is wrap tokens with syntax classes and add colors. That particular issue was a bad example, because I'm pretty sure that's 8 spaces lol

i'll wait to test it out until i get the signal from you that it's ready to review again

I think I'll be more comfortable if I break it up anyway, so no worries; they're pretty close to ready for cherry-picking.

@lygaret
Copy link
Contributor Author

lygaret commented May 16, 2025

I'll have these for you later this evening, time for me to go do family stuff! 👋

@sudoforge
Copy link
Contributor

sudoforge commented May 16, 2025

afaiu, the indent you're seeing in the screenshot is purely from the input; all the highlighting does is wrap tokens with syntax classes and add colors. That particular issue was a bad example, because I'm pretty sure that's 8 spaces lol

i assumed it was a tab character, and that remark was indenting it at 8, since a tab is the correct indentation character for a git config file, but now i'm seeing that even in my comments on that issue, which were copy-pasta'd from my config (in which i use tabs), it looks like github has converted it to 8 spaces (or maybe my browser did, when i pasted it, or something). 🤷 no need to adjust this!

@sudoforge
Copy link
Contributor

08ffc2b was merged in (from #1429), and as such prettier is now removed. sorry for the conflicts on //webui:package-lock.json!

@lygaret
Copy link
Contributor Author

lygaret commented May 17, 2025

closing in favor of #1443 and #1444

@lygaret lygaret closed this May 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants