Merge pull request #7277 from double-thinker/custom-components-mdx

fix(mdx): support passing props to MDX content

Author: wmertens

.changeset/breezy-lizards-dress.md

@@ -0,0 +1,18 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+FIX: MDX content now accepts `props`, including `components` that lets you use your own custom components
+
+To add custom components to your MDX content, you can now do this:
+
+```tsx
+// routes/example/index.tsx
+import Content from './markdown.mdx';
+import MyComponent from '../../components/my-component/my-component';
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => <Content components={{ MyComponent }} />);
+```
+
+You can also use props in JS expressions. See https://mdxjs.com/docs/using-mdx/#props

packages/qwik-city/src/buildtime/markdown/mdx.ts

@@ -79,8 +79,8 @@ export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransf
         .replace('/', '_');
       const addImport = `import { jsx, _jsxC, RenderOnce } from '@builder.io/qwik';\n`;
       const newDefault = ` 
-const WrappedMdxContent = () => {
-  const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, ${JSON.stringify(key)});
+const WrappedMdxContent = (props = {}) => {
+  const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, props, 3, null)}, 3, ${JSON.stringify(key)});
   if (typeof MDXLayout === 'function'){
       return jsx(MDXLayout, {children: content});
   }

packages/qwik-city/src/buildtime/markdown/mdx.unit.ts

@@ -61,8 +61,8 @@ describe('mdx', async () => {
         });
       }
        
-      const WrappedMdxContent = () => {
-        const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, "eB2HIyA1");
+      const WrappedMdxContent = (props = {}) => {
+        const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, props, 3, null)}, 3, "eB2HIyA1");
         if (typeof MDXLayout === 'function'){
             return jsx(MDXLayout, {children: content});
         }
@@ -138,8 +138,8 @@ export default function Layout({ children: content }) {
         });
       }
        
-      const WrappedMdxContent = () => {
-        const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, "UdQmQWC3");
+      const WrappedMdxContent = (props = {}) => {
+        const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, props, 3, null)}, 3, "UdQmQWC3");
         if (typeof MDXLayout === 'function'){
             return jsx(MDXLayout, {children: content});
         }