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 { const { compile } = await import('@mdx-js/mdx'); @@ -69,11 +70,21 @@ export async function createMdxTransformer(ctx: BuildContext): Promise { - 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; `; diff --git a/packages/qwik-city/src/buildtime/markdown/mdx.unit.ts b/packages/qwik-city/src/buildtime/markdown/mdx.unit.ts index 79222658876..6729c2333bc 100644 --- a/packages/qwik-city/src/buildtime/markdown/mdx.unit.ts +++ b/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; ",