search

brillout / vite-plugin-mdx

Vite Plugin for MDX
MIT License
113 stars 36 forks source link

Compatibility with MDX v2 #1

Closed hastebrot closed 3 years ago

hastebrot commented 3 years ago

Very great work to make this vite plugin framework-independent!

I've tested this with MDX v2 (currently unreleased) by changing the dependencies in this plugin and my project. It works great and fixes some issues I have when using MDX within a react component within MDX.

  "dependencies": {
    "@mdx-js/mdx": "^2.0.0-next.8",
    "@mdx-js/react": "^2.0.0-next.8",
    "@mdx-js/util": "^2.0.0-next.8",

Example document:

### hello page

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum alias
vero cupiditate optio blanditiis adipisci eveniet. Error magnam
vel soluta, dolores unde laborum omnis numquam eaque itaque atque,
sunt perspiciatis.

export const Foo = ({ children, ...otherProps }) => (
  <div style={{ color: "red" }} {...otherProps}>
    {children}
  </div>
);

<Foo>
lorem **ipsum** dolor.

> foo [bar](https://example.org/)

</Foo>
brillout commented 3 years ago

Servus,

great work to make this vite plugin framework-independent

Yep, that's the goal. Right now it only works with React but it should be easy to make it work with Vue & co. (I've an idea how to do this.)

About MDX v2; I've an idea how to allow the user to use vite-plugin-mdx with any MDX version. Would you be up for a PR?

brillout commented 3 years ago

MDX is now a peer depedency; you should now be able to use @brillout/vite-plugin-mdx with MDX v1 as well as MDX v2.