Merge pull request #7168 from QwikDev/pr-fix-mdx

fix mdx not rendering

Author: shairez

.changeset/long-jobs-whisper.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+FIX: mdx not rendering

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

@@ -5,6 +5,7 @@ import type { BuildContext } from '../types';
 import { parseFrontmatter } from './frontmatter';
 import { getExtension } from '../../utils/fs';
 import type { CompileOptions } from '@mdx-js/mdx';
+import { createHash } from 'node:crypto';
 
 export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransform> {
   const { compile } = await import('@mdx-js/mdx');
@@ -69,11 +70,21 @@ export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransf
       const file = new VFile({ value: code, path: id });
       const compiled = await compile(file, options);
       const output = String(compiled.value);
-      const addImport = `import { jsx } from '@builder.io/qwik';\n`;
-      const newDefault = `
+      const hasher = createHash('sha256');
+      const key = hasher
+        .update(output)
+        .digest('base64')
+        .slice(0, 8)
+        .replace('+', '-')
+        .replace('/', '_');
+      const addImport = `import { jsx, _jsxC, RenderOnce } from '@builder.io/qwik';\n`;
+      const newDefault = ` 
 const WrappedMdxContent = () => {
-  const content = _createMdxContent({});
-  return typeof MDXLayout === 'function' ? jsx(MDXLayout, {children: content}) : content;
+  const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, ${JSON.stringify(key)});
+  if (typeof MDXLayout === 'function'){
+      return jsx(MDXLayout, {children: content});
+  }
+  return content;
 };
 export default WrappedMdxContent;
 `;

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

@@ -26,7 +26,7 @@ describe('mdx', async () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
-        "code": "import { jsx } from '@builder.io/qwik';
+        "code": "import { jsx, _jsxC, RenderOnce } from '@builder.io/qwik';
       import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "@builder.io/qwik/jsx-runtime";
       export const headings = [{
         "text": "Hello",
@@ -60,10 +60,13 @@ describe('mdx', async () => {
           })]
         });
       }
-
+       
       const WrappedMdxContent = () => {
-        const content = _createMdxContent({});
-        return typeof MDXLayout === 'function' ? jsx(MDXLayout, {children: content}) : content;
+        const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, "eB2HIyA1");
+        if (typeof MDXLayout === 'function'){
+            return jsx(MDXLayout, {children: content});
+        }
+        return content;
       };
       export default WrappedMdxContent;
       ",
@@ -95,7 +98,7 @@ export default function Layout({ children: content }) {
 
     expect(result).toMatchInlineSnapshot(`
       {
-        "code": "import { jsx } from '@builder.io/qwik';
+        "code": "import { jsx, _jsxC, RenderOnce } from '@builder.io/qwik';
       import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "@builder.io/qwik/jsx-runtime";
       export const headings = [{
         "text": "Hello",
@@ -134,10 +137,13 @@ export default function Layout({ children: content }) {
           })]
         });
       }
-
+       
       const WrappedMdxContent = () => {
-        const content = _createMdxContent({});
-        return typeof MDXLayout === 'function' ? jsx(MDXLayout, {children: content}) : content;
+        const content = _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, "UdQmQWC3");
+        if (typeof MDXLayout === 'function'){
+            return jsx(MDXLayout, {children: content});
+        }
+        return content;
       };
       export default WrappedMdxContent;
       ",