feat(web-generator): update deprecation alertbox #518
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR enhances the deprecation documentation generator to display different alert box colors based on the deprecation type. Instead of showing all deprecation types with a red "danger" alert, the system now maps "Documentation" and "End-of-Life (Compilation)" types to blue "info" alerts, "Runtime" and "Runtime (Application)" types to orange "warning" alerts, and falls back to red "danger" for other types.
- Extracts and parses deprecation type text from various node types (text, inlineCode, links)
- Implements conditional logic to map deprecation types to appropriate AlertBox severity levels
- Adds comprehensive unit tests to verify the type-to-level mapping behavior
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/generators/jsx-ast/utils/buildContent.mjs | Adds text extraction and type matching logic to determine AlertBox level based on deprecation type keywords |
| src/generators/jsx-ast/utils/tests/transformHeadingNode.test.mjs | New test suite covering the three main code paths: info level (documentation), warning level (runtime), and danger level (fallback) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #518 +/- ##
==========================================
+ Coverage 79.58% 80.62% +1.03%
==========================================
Files 120 122 +2
Lines 12056 12108 +52
Branches 841 861 +20
==========================================
+ Hits 9595 9762 +167
+ Misses 2458 2343 -115
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| // Map user-facing deprecation types to AlertBox levels | ||
| // documentation / compilation -> blue (`info`) | ||
| // runtime / application -> orange (`warning`) | ||
| // fallback -> danger (red) | ||
| let level = 'danger'; | ||
|
|
||
| // Use stricter matching to avoid false positives (e.g., "compilation" inside "End-of-Life") | ||
| const normalizedTypeText = typeText | ||
| .replace(/[.,]/g, ' ') | ||
| .split(/\s+/) | ||
| .filter(Boolean); | ||
|
|
||
| if ( | ||
| normalizedTypeText.includes('documentation') || | ||
| normalizedTypeText.includes('compilation') | ||
| ) { | ||
| level = 'info'; | ||
| } else if ( | ||
| normalizedTypeText.includes('runtime') || | ||
| normalizedTypeText.includes('application') | ||
| ) { | ||
| level = 'warning'; | ||
| } | ||
|
|
||
| parent.children[index + 1] = createJSXElement(JSX_IMPORTS.AlertBox.name, { | ||
| children: slice( | ||
| parent.children[index + 1], | ||
| TYPE_PREFIX_LENGTH, | ||
| undefined, | ||
| { | ||
| textHandling: { boundaries: 'preserve' }, | ||
| } | ||
| ).node.children, | ||
| level: 'danger', | ||
| children: sliced, | ||
| level, | ||
| title: 'Type', | ||
| }); |
There was a problem hiding this comment.
| // Map user-facing deprecation types to AlertBox levels | |
| // documentation / compilation -> blue (`info`) | |
| // runtime / application -> orange (`warning`) | |
| // fallback -> danger (red) | |
| let level = 'danger'; | |
| // Use stricter matching to avoid false positives (e.g., "compilation" inside "End-of-Life") | |
| const normalizedTypeText = typeText | |
| .replace(/[.,]/g, ' ') | |
| .split(/\s+/) | |
| .filter(Boolean); | |
| if ( | |
| normalizedTypeText.includes('documentation') || | |
| normalizedTypeText.includes('compilation') | |
| ) { | |
| level = 'info'; | |
| } else if ( | |
| normalizedTypeText.includes('runtime') || | |
| normalizedTypeText.includes('application') | |
| ) { | |
| level = 'warning'; | |
| } | |
| parent.children[index + 1] = createJSXElement(JSX_IMPORTS.AlertBox.name, { | |
| children: slice( | |
| parent.children[index + 1], | |
| TYPE_PREFIX_LENGTH, | |
| undefined, | |
| { | |
| textHandling: { boundaries: 'preserve' }, | |
| } | |
| ).node.children, | |
| level: 'danger', | |
| children: sliced, | |
| level, | |
| title: 'Type', | |
| }); | |
| parent.children[index + 1] = createJSXElement(JSX_IMPORTS.AlertBox.name, { | |
| children: sliced, | |
| level: getLevelFromDeprecationType(type), | |
| title: 'Type', | |
| }); |
const getLevelFromDeprecationType = (type) => {
if (TYPES.EOL.includes(type) {...}
// etc
}
|
@AugustinMauroy Can you rebase so that #517 compares the build size here? |
Co-Authored-By: Aviv Keller <[email protected]>
AugustinMauroy
force-pushed
the
augustin/deprecation-alert-box-level
branch
from
67cfb85 to
5b5f601
Compare
Web Generator
Pages (8)
|
Co-Authored-By: Aviv Keller <[email protected]>
| * | ||
| * @param nodes | ||
| */ | ||
| const getTextValue = nodes => |
There was a problem hiding this comment.
As mentioned befroe, there's a method to get text value, you can get rid of this.
There was a problem hiding this comment.
I'm putting an explicit blocker on this until:
-
Either
transformNodeToStringis used, ornodes[0].valueis used.nodes[0].valueshould be sufficient, since the node immediately following the prefix slicing is the deprecation type. -
getLevelFromDeprecationTypedoes not use.includesto find words. This is extremely prone to false positives. I'd prefer usingnodes[0].value.startsWithor similar, since we know the nodes should start with the type.- While it's possible (and I haven't checked) that some nodes don't follow this rule due to inconsistencies in core, I'd much rather fix those inconsistencies in core, than make a too-loose check here.
Co-Authored-By: Aviv Keller <[email protected]> Co-Authored-By: Claudio Wunder <[email protected]>
| if (entry.api === 'deprecations' && node.depth === 3) { | ||
| // On the 'deprecations.md' page, "Type: <XYZ>" turns into an AlertBox | ||
| // Extract the nodes representing the type text | ||
| const sliced = slice( |
There was a problem hiding this comment.
Could you change to:
const { node: { children: sliced } } = slice(
parent.children[index + 1],
TYPE_PREFIX_LENGTH,
undefined,
{ textHandling: { boundaries: 'preserve' } }
);
* feat(comparisons): SHA unifying, `legacy-json` comparison * code review; * fixup! * fixup!
* chore: reduce dependency count * fixup!
* fix(changes): reverse change order * fixup!
Co-Authored-By: Aviv Keller <[email protected]>
Co-Authored-By: Aviv Keller <[email protected]>
Co-Authored-By: Aviv Keller <[email protected]> Co-Authored-By: Claudio Wunder <[email protected]>
Co-Authored-By: Claudio Wunder <[email protected]>
….com/nodejs/doc-kit into augustin/deprecation-alert-box-level
ovflowd
left a comment
ovflowd
left a comment
There was a problem hiding this comment.
@AugustinMauroy your rebase fucked up the whole PR 😓
Description
I'm back here 😁
I was reading this page using beta so need to fix this issue
Validation
Related Issues
close #419
Check List
node --run testand all tests passed.node --run format&node --run lint.