mdx

• remove unused dependencies
• update remark and other dependencies
• prevent unnecessary remounting of user-defined layouts (#307)

• add all missing dependencies to MDX packages, now they should work with Yarn Plug'n'Play
• get rid of React warning about metaString prop by renaming it to lowercase metastring instead
• remove a lot of unnecessary dependencies for modern React environments in @mdx-js/tag
  • ⚠️ this is a breaking change for React < 16.3

• add missing dependency detab to @mdx-js/mdx (#296)

• add support for remark and rehype plugins to @mdx-js/runtime

  <MDX
    components={components}
    mdPlugins={[slug, autolinkHeadings]}
    hastPlugins={[[addClasses, { h1: 'title' }]]}
    children="# Hello world!"
  />
  

• Formidable released spectacle-boilerplate-mdx!

• fix bug where a semicolon would break an export default statement (#277)

• move @mdx-js/mdx from devDependencies to dependencies in @mdx-js/loader (#276)
• @azz released eslint-plugin-mdx!
• fix webpack error when importing @mdx-js/runtime in create-react-app v1 (#281, #283)

Fix edge case with multiline default exports

The following export statement used to cause a syntax error if it was at the end of the MDX file:

export default ({ children }) => (
  <Layout>
    {children}
  </Layout>
)

This has now been fixed. (#188)

Better error upon encountering a named default export

The following exporting default via named exports used to cause an error that there are duplicate default exports (#205):

export { default } from './Layout'

Now it throws a better error, suggesting to use the default export statement instead:

import Layout from './Layout'
export default Layout

Fix translating style, aria-* and data-* properties to JSX

Some plugins like rehype-katex add style and aria-* properties. These properties need to be handled differently in JSX, so now we convert all style properties from string to object syntax, and all aria-* and data-* property names from camelCase to param-case. (#261)

Info string

Both CommonMark and GFM support adding additional text after language definition in fenced code blocks, a.k.a. the info string. Now MDX passes this data as props:

```js repl
console.log('Hello world!')
```

The above compiles roughly to:

<MDXTag name="pre" components={components}>
  <MDXTag
    name="code"
    components={components}
    parentName="pre"
    props={{
      className: 'language-js',
      metaString: 'repl',
      repl: true,
    }}
  >
    {`console.log('Hello world!');`}
  </MDXTag>
</MDXTag>

One use case for this is adding props for Prism's line-highlight plugin:

```js data-line=2
function doSomething() {
  throw new Error('Something went wrong') // this line will be highlighted!
}
```

More stable support for comments

Our support for comments was a spotty (#244, #256), but now we're taking advantage of remark's ability to recognize comments, which should take care of all edge cases.

Nested comments

We used to support Markdown-like comments nested in JSX:

## Heading

<MyComp>
  <!-- this is a comment?! -->
</MyComp>

This was odd and misleading because the rest of the comment wasn't being interpreted as MDX. We removed this feature, so if you were relying on this behavior, simply use JSX comments instead:

## Heading

<MyComp>
  {/* now that's a comment! */}
</MyComp>

• String interpolation and other syntax is now correctly handled with imports and exports
• Props passed in are now also exposed to JSX block
• skipExport option
• Examples improvements
• Parcel plugin now handles .md files
• npm init mdx

MDXTag now hoists non-React statics of Layout components. This is useful for usage with getInitialProps.

Uses create-react-context to ponyfill React's context API to ensure support for all React 16 versions.

npm install --save @mdx-js/runtime

Parses and renders MDX in a runtime environment

⚠️ Warning

This is not the preferred way to use MDX since it introduces a substantial amount of overhead and dramatically increases bundle sizes. It should only be used with sandboxed user input.

Components like Foo.Bar weren't parsed as JSX if they started the JSX block. They are now properly parsed.

If you're using an app layout that wraps your JSX, you can use the MDXProvider to only pass your components in one place:

import React from 'react'
import { MDXProvider } from '@mdx-js/tag'

import * as components from './markdown-components'

export default props =>
  <MDXProvider components={components}>
    <main {...props} />
  </MDXProvider>

You can now export a component as the default and it will wrap the output JSX. This is great when your MDX file is the entrypoint like a standalone page.

import MyLayout from '../somewhere'

# hello world 

some text

export default (props) => <MyLayout {...props} title="test" />