Skip to content
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

feat: download snippet generation #7351

Open
wants to merge 26 commits into
base: main
Choose a base branch
from
Open

Conversation

ovflowd
Copy link
Member

@ovflowd ovflowd commented Dec 22, 2024

This PR attempts to introduce a system for dynamic download snippet generation. With the increasing number of different version managers, package managers, and installation methods for Node.js, we want to ease maintainability, translation, and viewing how the snippet would look with syntax highlighting.

This API allows these files to be loaded on demand, and then Shiki and MDX transpile them on the client side. This requires having Shiki and the MDX compiler present on the client side (which they already are).

This change introduces the ability to test the snippets in a sandboxed environment and, in the future, have every CodeBox be loaded on the client-side dynamically (including Learn codeboxes) on-demand without requiring them to be built during build time.

The trade-off is that the client side needs to fetch these snippets, but this request is prefetched and cached.

This introduces the API route, data generators and providers + replaces the usage of the old getDownloadSnippet with the new mechanism.

This PR also...

  • It makes Shiki compilation a fully synchronous process, removing the need for some asynchronous pieces and top-level awaits and being more client-side friendly. It also reduces ticks as multiple MDX compilation processes will not need to resolve Promises/ticks
  • Reduces usage of useDetectOS and optimizes it to use synchronous OS detection and reduce layout shift and state change as much as possible, keeping the initial state as clean as possible
  • Update the ReleaseCodeBox so that it can render the CodeBox in a fully synchronous way which is React-friendly and kills the CodeBox loading state / being empty/shifting values
  • Updates the Select component in such a way that it removes the flashing/initial state being empty for a while
  • Multiple minor bundle optimization and initial rendering improvements related to Downloads pages and overall App
  • Fixes Vercel Environment variables and errors on first builds (consuming wrong sources during self-consumption process)
  • Fixes Avatar rendering and placement / optimizing the rendering

@ovflowd ovflowd requested review from a team as code owners December 22, 2024 15:36
Copy link

vercel bot commented Dec 22, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
nodejs-org ✅ Ready (Inspect) Visit Preview Dec 24, 2024 6:52pm

Copy link
Contributor

github-actions bot commented Dec 22, 2024

Unit Test Coverage Report

Lines Statements Branches Functions
Coverage: 86%
84.47% (631/747) 65.24% (184/282) 83.91% (120/143)

Unit Test Report

Tests Skipped Failures Errors Time
137 0 💤 0 ❌ 0 🔥 5.05s ⏱️

@MattIPv4
Copy link
Member

MattIPv4 commented Dec 22, 2024

Note that this (at the time being) prevents the generation of the CodeBox for static exports since the combination of language+node version+installation method would blow the generation away.

This concerns me -- I would think we would absolutely want to prioritise these snippets being in the HTML sent over the wire initially as they're rather crucial content, and likely content that bots etc. would want to index/scrape too.

AugustinMauroy
AugustinMauroy previously approved these changes Dec 22, 2024
crowdin.yml Show resolved Hide resolved
@AugustinMauroy AugustinMauroy self-requested a review December 22, 2024 18:19
@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Dec 22, 2024
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Dec 22, 2024
@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Dec 22, 2024
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Dec 22, 2024
@ovflowd ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Dec 22, 2024
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Dec 22, 2024
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.

5 participants