From 56e43f6e27e287eeefe06b28b942f891543e6b0b Mon Sep 17 00:00:00 2001
From: Shai Reznik <shairez@users.noreply.github.com>
Date: Mon, 16 Dec 2024 02:20:01 +0200
Subject: [PATCH] fix mdx not rendering

---
 .changeset/long-jobs-whisper.md               |  5 +++++
 .../qwik-city/src/buildtime/markdown/mdx.ts   | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/long-jobs-whisper.md

diff --git a/.changeset/long-jobs-whisper.md b/.changeset/long-jobs-whisper.md
new file mode 100644
index 00000000000..5a3f32b2e62
--- /dev/null
+++ b/.changeset/long-jobs-whisper.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+FIX: mdx not rendering
diff --git a/packages/qwik-city/src/buildtime/markdown/mdx.ts b/packages/qwik-city/src/buildtime/markdown/mdx.ts
index 00bd6f15cfa..0554a8033cf 100644
--- a/packages/qwik-city/src/buildtime/markdown/mdx.ts
+++ b/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;
 `;