mdx-js / mdx-analyzer

MDX extension for Visual Studio Code

Home Page:https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support remark/rehype/recma transformer plugins

remcohaszing opened this issue · comments

Initial checklist

Problem

Currentle the language service only supports unified plugins that register micromark syntax extensions. It doesn’t support transformer plugins yet.

For example, remark-mdx-frontmatter, rehype-mdx-title, and recma-nextjs-static-props provide a transformers that injects ESM exports into the AST.

Solution

TypeScript needs to be aware of injected variables and their types. I don’t know how yet.

Alternatives

🤷

I have some vague ideas, but none of these are ideal.

Firstly, let’s determine what it means for IntelliSense to apply a transformer.

Transformers can:

  1. Inject module level exports, which become available everywhere. (rehype-mdx-title, remark-mdx-frontmatter)
  2. Inject variables into _createMdxContent, which become available inside JSX and expressions.
  3. Give meaning to custom constructs (rehype-mdx-code-props, remark-mdx-math-enhanced).

Most transformers transform the hast in ways that doesn’t affect the editor experience. For example remark-toc injects a table of contents, but that doesn’t introduce variables nor remove anything relevant.

Some potential solutions:

  1. If custom plugins are defined, we can run all plugins, compiling to ESTree. We can then detect generated variable declarations and insert them into the virtual code.
    • Maybe we could even support expressions and JSX expressions if they have positional data and for example their value is an empty string?
    • Types now depends entirely on inference.
  2. Plugins could have a custom entrypoint for MDX analyzer, then use a special API to resolve types.
    • We need to define what that API is.
    • Custom logic is needed for a plugin to support IntelliSense.
    • Plugins have control to make types more specific.
  3. Add hardcoded support for a selective list of plugins.
    • Probably best support for these specific plugins.
    • Not pluggable.