fix: resolve variables in TOC headings for MDX and MDXish #1292
Conversation
lib/plain.ts
Outdated
| variables?: Record<string, string>; | ||
| } | ||
|
|
||
| interface MdxExpressionNode { |
There was a problem hiding this comment.
Is this structure from a library? If so I wonder if we can just import it
There was a problem hiding this comment.
There are full types available from mdast-util-mdx-expression (MdxTextExpressionHast) and estree-jsx (MemberExpression, Identifier, etc.), but using them requires more verbose type narrowing since ESTree types are unions that can represent any JS expression, not just user.name. This interface would document exactly the shape we expect and avoids multiple type assertions.
There was a problem hiding this comment.
How much verbose it would be? I'm just worried we'll accidentally access some attribute that we didn't account for, or the type from the library changed unknowingly and we would have to update this. Could you explain how we get this type, or provide a link to the type from the library this is based on?
There was a problem hiding this comment.
The node structure comes from two libraries:
-
mdast-util-mdx-expression- defines MdxTextExpressionHast for the node wrapper
npm | types source -
estree-jsx(ESTree spec) - defines the Program, MemberExpression, Identifier structure inside data.estree
npm | ESTree spec
But yea it would be more maintainable using library types, have refactored it!
HugoHSun
requested review from
davinhazard,
domharrington,
jeffarnim,
julshotal,
kevinports and
rafegoldberg
Variables like {user.name} in headings were not resolving in the Table
of Contents, showing blank or the raw expression instead of the value.
Changes:
- Add ESTree AST inspection in plain.ts to resolve MDX expressions
(matches approach in processor/transform/variables.ts)
- Handle lowercase 'variable' tagName for MDXish (rehypeRaw normalizes
custom element names to lowercase)
- Flatten variables in tocToHast() to use user values or default
The fix ensures both rendering paths resolve variables:
- MDX: mdxTextExpression nodes → ESTree AST inspection
- MDXish: <variable> elements → tagName switch case
Adds tests for variable resolution in TOC headings for both MDX and
MDXish rendering paths.
Replace custom MdxExpressionNode interface with proper types from mdast-util-mdx-expression and estree for better type safety and maintainability.
HugoHSun
force-pushed
the
hugo/cx-2621-variables-inside-headings-do-not-resolve-in-refactored
branch
from
cfd37a3 to
f3430f9
Compare
HugoHSun
requested review from
dannobytes
and removed request for
davinhazard,
domharrington,
jeffarnim,
julshotal and
maximilianfalco
🧰 Changes
Variables like {user.name} in headings were not resolving in the Table of Contents, showing blank or the raw expression instead of the value.
Changes:
The fix ensures both rendering paths resolve variables:
🧬 QA & Testing
Adds tests for variable resolution in TOC headings for both MDX and MDXish rendering paths.