remcohaszing/rehype-mdx-import-media

An MDX rehype plugin for turning media paths into imports.

rehype-mdx-import-media's Issues

`visit()` video elements of type `mdxJsxFlowElement`?

Hi @remcohaszing 👋

I'm trying this out in our project, and I noticed that I am getting a different data structure than is maybe expected for video elements:

node {
  type: 'mdxJsxFlowElement',
  name: 'video',
  attributes: [
    {
      type: 'mdxJsxAttribute',
      name: 'src',
      value: './expo-android-virtual-device-start-expo-go.mp4',
      position: [Object]
    },
    {
      type: 'mdxJsxAttribute',
      name: 'controls',
      value: null,
      position: [Object]
    },
    {
      type: 'mdxJsxAttribute',
      name: 'style',
      value: [Object],
      position: [Object]
    }
  ],
  position: {
    start: { line: 7, column: 1, offset: 228 },
    end: { line: 16, column: 3, offset: 411 }
  },
  data: { _mdxExplicitJsx: true },
  children: []
}

This is for the following MDX:

<video
 src="./expo-android-virtual-device-start-expo-go.mp4"
 controls
 style={{
   minWidth: 480,
   maxWidth: '70%',
   margin: '0 auto 1.45em',
   display: 'block',
 }}
/>

Would it be an idea to change the 'element' on the line below to ['element', 'mdxJsxFlowElement']?

rehype-mdx-import-media/src/rehype-mdx-import-media.ts

Line 106 in 61233bf

visit(ast, 'element', (node, index, parent) => {

I'm thinking there will probably be other changes needed too for the attributes... 🤔

Document usage of imports with Next.js + webpack v5?

When using rehype-mdx-import-media with @next/mdx (Next.js with webpack v5), usage of rehype-mdx-import-media with a video URL (eg. *.mp4) fails because of a missing loader:

 ⨯ ../cheatsheet-expo-react-native/expo-android-virtual-device-close-app.mp4
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
../cheatsheet-expo-react-native/expo-android-virtual-device-close-app.mp4
../cheatsheet-expo-react-native/index.mdx
./app/page.tsx

It would be great for users to have recipes in the documentation that they could copy and paste, so that the plugin works out of the box.

import losing search params

I am trying to use this in NextJS app router with mdx files. I have the img tags being replaced by a custom component that reads the search param from the path and uses it to size the image. However, when I add this plugin, while the local image load works nicely, I lose the query param. Can it be preserved in the path, or moved to a different attribute?

Example MDX:

![alt text](images/IMG_1641-2.jpg?w=full)
![alt text](images/IMG_1643.jpg?w=400&h=300)

If there is a way to add more attributes, that is not clear from the documentation. Any help appreciated.