-
Notifications
You must be signed in to change notification settings - Fork 9
feat(jsx): add jsx
generator
#273
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting basic, don't miss to add some test
I'm working on skipping the MDX and going to straight to JSX, so I'll add lots of tests when that's started |
60922b4
to
d2bd5f4
Compare
This uses pnpm for now, see #236 for reference. If we do adopt pnpm, it would be a seperate PR, this is just for development. |
8020c31
to
60e76e5
Compare
ef09a04
to
a002cc3
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've left a final round of comments; After that LGTM. But only approving the PR once the git-deps issue is addressed (either by the upstream npm publish or incorporating git-deps on @.pkgjs/@.nodejs)
maybe add little bit more test |
This review was specific to a security concern, which has since been resolved.
This PR introduces a
jsx
generator that transforms Markdown AST and metadata entries into a JSX (recma
) AST (with a root ofProgram
), which can then be compiled by thereact-web
generator from #7.The JSX generator produces AST that assumes the following components have been implemented:
CodeBox
: Implementation matches nodejs.org CodeBoxCodeTabs
: Implementation matches nodejs.org CodeTabsBlockquote
: Import from@node-core/ui-components/Common/Blockquote
AlertBox
: Import from@node-core/ui-components/Common/AlertBox
CircularIcon
: Accepts:symbol
: Icon emblem (e.g., "C" or "E")color
: Icon color (e.g., "red" or "#FFFFF")Design
ChangeHistory
: Similar to@node-core/ui-components/Common/Select
, accepts:changes
: Array of{ versions: string[], label: string, url?: string }
(whereversions[]
contains semver strings likev1.2.3
)Design
NavBar
: Wrapper of@node-core/ui-components/Containers/NavBar
, accepts no propsFooter
: Wrapper of@node-core/ui-components/Containers/Footer
, accepts no propsArticle
: Import from@node-core/ui-components/Containers/Article
SideBar
: Similar to@node-core/ui-components/Container/SideBar
, accepts:versions
: Array of versions (e.g.,v20.0.0
) where the document existscurrentVersion
: Current documentation version (e.g.,v20.1.0
)currentPage
: Current page (e.g.,async_context.html
) for highlighting in the sidebardocPages
: Array of[{ title: string, headings: [title, hash][], doc: string }]
pairs (e.g.,{ title: "Globals", headers: [["someGlobal", "#some-global"]], doc: "globals.html"}
)Design
MetaBar
: Wrapper of@node-core/ui-components/Containers/MetaBar
, accepts:headings
: Array of{ depth: number, value: string }
for table of contentsaddedIn
: Version when doc/module was added (e.g.,v0.10.0
)readingTime
: String like"9 min read"
viewAs
: Array of["Type", "URL"]
pairs (currently only supports["JSON", "globals.json"]
)editThisPage
: GitHub URL for editing the pageAs a reminder, the Figma design is:

As of 5/26/25, the generated AST is: https://aviv.sh/hostables/nodejs/1748274862-jsx-ast.json