从 v0 迁移到 v1 版本
不幸的是,我们不得不引入一些重大变化,因此我们编写了此迁移指南。 为了确保尽可能地无缝升级,我们计划在 未来的 12 个月内仍提供对 v0 的支持,因此不用着急升级(尽管我们还是希望你尽快升级) 📆。
⚠️ 重大变化
- 🚨
@mdx-js/tag
被@mdx-js/react
和mdx
编译指示(pragma)所替代 🚨 - MDXProvider 在嵌套式合并组件的上下文(contexts)
@mdx-js/react
目前只支持>= 16.8
版本的 React
Pragma
For v1 you need to remove @mdx-js/tag
and replace it with @mdx-js/react
:
yarn remove @mdx-js/tagyarn add @mdx-js/react
What’s different?
The MDXTag implementation has been removed with a custom pragma implementation inspired by
Emotion.
This ensures that transpiled JSX is more readable and that JSX blocks use the same component
as its markdown counterpart.
It also allows MDXProvider to provide global component scope like a Youtube
or Twitter
component.
The pragma implementation will also cause JSX HTML elements to be rendered with the component
mapping passed to MDXProvider.
So, the following will result in two identically rendered h1
s:
# Hello, world!<h1>Hello, world!</h1>
See the blog post for further reading
MDXProvider
This shouldn’t affect most usecases, however if you’re nesting component contexts and rely on them not being merged you will have to use the functional form which allows you to customize the merge. By ignoring outer context components and returning a new component mapping, you will restore the old behavior:
<MDXProvider components={components}><MDXProvider components={outerComponents => newComponents}>{children}</MDXProvider></MDXProvider>
React
Before upgrading to @mdx-js/mdx@1
, update your website/application to react@16.8 react-dom@16.8
and ensure it works as expected. Then upgrade to v1.