Is there a way to prevent MDX from parsing the majority of the markdown file?

[chiedo]

I'm playing with MDX and want to use it to enable React components within Markdown but don't want it to parse the rest of the markdown file.

Does anyone know if it's possible to do something to the effect of:

const components = {
    CustomReactComponent: CustomReactComponent,
    p: null,
    h1: null,
    h2: null,
    h3: null,
}

const elementWithProvider = React.createElement(
    MDXProvider,
    { components },
    element
)

[ChristianMurphy]

Could you expand on what you mean by "enable React components within Markdown but don't want it to parse the rest of the markdown file"?

Are you looking to disable specific markdown features while keeping others? Something like https://github.com/zestedesavoir/zmarkdown/tree/HEAD/packages/remark-disable-tokenizers#readme

[ChristianMurphy]

The only thing I want to parse is but I want the rest of the string to remain untouched

I'm not sure I follow, could you show a source to output example?

I think what you pointed to is what I'm looking for! Could you point me to some resources to understand how I would utilize that link you sent me?

Sure, it's a remark plugin that can be plugged in similar to how frontmatter is here: https://mdxjs.com/advanced/api#compiler
There is a list of the different tokenizer types at https://github.com/remarkjs/remark/tree/12.0.1/packages/remark-parse#parserblocktokenizers and https://github.com/remarkjs/remark/tree/12.0.1/packages/remark-parse#parserinlinetokenizers

[chiedo]

Sure!

Source: A

### Hello World

<Blue>Hello World</Blue>

[Link to Google](http://google.com)

Source: B

const React = require('react')

const Blue = (props) => {
  return (
    <div style={{ color: 'blue' }}>
      {props.children}
    </div>
  )
}

module.exports = Blue

Output

### Hello World

<div style="color:blue">Hello world</div>

[Link to Google](http://google.com)

Does that make sense? I don't want any markdown parsed. I only want the React component parsed.

[ChristianMurphy]

Ah! that makes more sense, thanks for clarifying.

An interesting problem 🤔
It may be possible with more advanced usage https://mdxjs.com/advanced/transform-content, using remark and remark-mdx directly.

It may also be possible using https://babeljs.io/docs/en/babel-plugin-syntax-jsx or https://github.com/acornjs/acorn-jsx, though looking at your example these may need some additional work around(s) (like wrapping all the content in a fragment <></> to make the document valid and parse-able JSX.

[chiedo]

Darn! I was hoping it wasn’t an interesting problem hahaha

[chiedo]

Got something working! github/docs#610

But ultimately decided to wrap react components in a comment for easier identification.

[chiedo]

  const jsx = await mdx(mdxCode, {
    skipExport: true,
    remarkPlugins: [
      // Disable all these tokenizers so this function truly only
      // renders React
      // Listed: https://unifiedjs.com/explore/package/remark-parse/#parserinlinetokenizers
      [remarkDisableTokenizers, {
        block: [
          'blankLine',
          'indentedCode',
          'fencedCode',
          'blockquote',
          'atxHeading',
          'thematicBreak',
          'list',
          'setextHeading',
          'html',
          'definition',
          'table',
          'paragraph'
        ],
        inline: [
          'escape',
          'autoLink',
          'url',
          'email',
          'html',
          'link',
          'reference',
          'strong',
          'emphasis',
          'deletion',
          'code',
          'break',
          'text'
        ]
      }]
    ]
  })

[chiedo]

I'm getting this error Error: Infinite loop with the above code but ¯_(ツ)_/¯

[ChristianMurphy]

It looks like all of the markdown features are disabled? Is that intentional?

Taking a step back what is the end goal of the output?

I'm getting this error Error: Infinite loop with the above code

IIRC certain tokenizers are critical to parsing a document.
I believe paragraph is one of them. There may be others.
Again it comes back to:

It looks like all of the markdown features are disabled?

MDX without any markdown is JSX, If the goal is to parse JSX a JSX parser like: https://babeljs.io/docs/en/babel-plugin-syntax-jsx or https://github.com/acornjs/acorn-jsx may be best aligned with the end goal.

[chiedo]

Thank you! That may be what I'm looking for!