Skip to content

Add MDX JSX runtime PoC#111

Draft
brnrdog wants to merge 4 commits into
mainfrom
brnrdog/mdx-support
Draft

Add MDX JSX runtime PoC#111
brnrdog wants to merge 4 commits into
mainfrom
brnrdog/mdx-support

Conversation

@brnrdog

@brnrdog brnrdog commented May 3, 2026

Copy link
Copy Markdown
Owner

Summary

  • Add standard JSX automatic runtime entrypoints for Xote via xote/jsx-runtime and xote/jsx-dev-runtime.
  • Add a public Xote.Mdx helper module for ReScript-native MDX consumption: direct .mdx externals, Mdx.render, component maps, component adapters, and child normalization helpers.
  • Add focused JS runtime coverage for MDX-style compiled output, component overrides, reactive attributes, and events.
  • Add a Vite + MDX proof-of-concept example that now imports the MDX document directly from ReScript and passes ReScript/Xote components through Mdx.components.
  • Convert docs website content pages from generated ReScript components to Markdown-first MDX files loaded directly from MdxDocs.res through the Xote JSX runtime.
  • Add rehype-slug so Markdown headings keep stable anchor IDs for the docs table of contents.
  • Remove the old Markdown-to-ReScript docs generator path and the hand-written MDX ESM bridge; the changelog remains data-driven and is embedded from MDX.

Validation

  • npm test
  • npm run build
  • npm run mdx:poc
  • cd docs-website && npm run build
  • git diff --check

Note: the docs build still reports pre-existing ReScript unused-variable warnings in ColorMixerDemo.res.

@brnrdog

brnrdog commented May 6, 2026

Copy link
Copy Markdown
Owner Author

@codex review and suggest improvements about the DX and API

@chatgpt-codex-connector

Copy link
Copy Markdown

💡 Codex Review

xote/src/jsx-runtime.mjs

Lines 212 to 214 in 3cf476c

if (value === false) {
continue;
}

P2 Badge Preserve explicit false on non-boolean attributes

This branch drops every prop whose value is false before checking whether the target attribute is actually boolean. As a result, valid non-boolean attributes such as data-* (and other string-valued attributes) cannot be intentionally set to "false", which breaks downstream logic that reads those values from DOM attributes/datasets and makes JSX behavior inconsistent with the rest of the Xote prop conversion path.


xote/src/jsx-runtime.mjs

Lines 224 to 225 in 3cf476c

if (key === undefined || key === null) {
return node;

P2 Badge Extract key from props when runtime key arg is absent

The runtime only keys nodes from the third key parameter and never falls back to props.key. In automatic JSX runtimes, keys introduced through object spread are carried on props, so those elements become unkeyed here and can be remounted/reordered incorrectly during keyed reconciliation. This also leaks key into component props in cases where JSX users expect it to be treated as a reserved field.


return name.toLowerCase();

P3 Badge Keep SVG attribute casing for unmapped props

Lowercasing all unknown attribute names causes case-sensitive SVG attributes that are not explicitly aliased (for example markerWidth / markerHeight) to be emitted with incorrect names. Inline SVG in MDX/JSX can therefore silently lose rendering behavior unless every mixed-case SVG prop is pre-mapped, which is a brittle API surface for users.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

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.

1 participant