feat(qwik-city): upgrade to mdxjs v3

QwikDev · Feb 23, 2024 · 95d5bc3 · 95d5bc3
1 parent 007982f
commit 95d5bc3
Show file tree

Hide file tree

Showing 5 changed files with 450 additions and 641 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@builder.io/qwik": "workspace:^",
     "@clack/prompts": "^0.7.0",
     "@eslint/eslintrc": "^3.0.0",
-    "@mdx-js/mdx": "2.3.0",
+    "@mdx-js/mdx": "^3.0.0",
     "@microsoft/api-documenter": "^7.23.19",
     "@microsoft/api-extractor": "^7.39.3",
     "@napi-rs/cli": "^2.18.0",

diff --git a/packages/qwik-city/buildtime/markdown/mdx.ts b/packages/qwik-city/buildtime/markdown/mdx.ts
@@ -1,16 +1,14 @@
-import type { CompileOptions } from '@mdx-js/mdx/lib/compile';
 import { SourceMapGenerator } from 'source-map';
 import { rehypePage, rehypeSlug, renameClassname, wrapTableWithDiv } from './rehype';
 import { rehypeSyntaxHighlight } from './syntax-highlight';
 import type { BuildContext } from '../types';
 import { parseFrontmatter } from './frontmatter';
 import { getExtension } from '../../utils/fs';
 import { createHash } from 'node:crypto';
+import type { CompileOptions } from '@mdx-js/mdx';
 
 export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransform> {
-  const { createFormatAwareProcessors } = await import(
-    '@mdx-js/mdx/lib/util/create-format-aware-processors.js'
-  );
+  const { compile } = await import('@mdx-js/mdx');
   const { default: remarkFrontmatter } = await import('remark-frontmatter');
   const { default: remarkGfm } = await import('remark-gfm');
   const { default: rehypeAutolinkHeadings } = await import('rehype-autolink-headings');
@@ -46,7 +44,7 @@ export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransf
     coreRehypePlugins.push(rehypeAutolinkHeadings);
   }
 
-  const mdxOpts: CompileOptions = {
+  const options: CompileOptions = {
     SourceMapGenerator,
     jsxImportSource: '@builder.io/qwik',
     ...userMdxOpts,
@@ -66,14 +64,11 @@ export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransf
       wrapTableWithDiv,
     ],
   };
-
-  const { extnames, process } = createFormatAwareProcessors(mdxOpts);
-
   return async function (code: string, id: string) {
     const ext = getExtension(id);
-    if (extnames.includes(ext)) {
+    if (['.mdx', '.md', '.markdown'].includes(ext)) {
       const file = new VFile({ value: code, path: id });
-      const compiled = await process(file);
+      const compiled = await compile(file, options);
       const output = String(compiled.value);
       const hasher = createHash('sha256');
       const key = hasher
@@ -85,13 +80,17 @@ export async function createMdxTransformer(ctx: BuildContext): Promise<MdxTransf
       const addImport = `import { _jsxC, RenderOnce } from '@builder.io/qwik';\n`;
       const newDefault = `
 const WrappedMdxContent = () => {
-  return _jsxC(RenderOnce, {children: _jsxC(MDXContent, {}, 3, null)}, 3, ${JSON.stringify(key)});
+  return _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, ${JSON.stringify(key)});
 };
 export default WrappedMdxContent;
 `;
-
+      const exportIndex = output.lastIndexOf('export default ');
+      if (exportIndex === -1) {
+        throw new Error('Could not find default export in mdx output');
+      }
+      const wrappedOutput = addImport + output.slice(0, exportIndex) + newDefault;
       return {
-        code: addImport + output.replace('export default MDXContent;\n', newDefault),
+        code: wrappedOutput,
         map: compiled.map,
       };
     }

diff --git a/packages/qwik-city/buildtime/markdown/mdx.unit.ts b/packages/qwik-city/buildtime/markdown/mdx.unit.ts
@@ -0,0 +1,78 @@
+import { describe, expect, test } from 'vitest';
+import { createMdxTransformer } from './mdx';
+
+describe('mdx', () => {
+  test('convert mdx', async () => {
+    const ctx = {
+      frontmatter: new Map(),
+      opts: {
+        mdx: {
+          remarkPlugins: [],
+          rehypePlugins: [],
+        },
+        mdxPlugins: {},
+      },
+    };
+    const transformer = await createMdxTransformer(ctx as any);
+    const mdx = `
+# Hello
+<a href="http://example.com">Hello</a>
+<div>World</div>
+`;
+    const result = await transformer(mdx, 'file.mdx');
+    // It could be that new mdx versions change this output, make sure it still makes sense
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "code": "import { _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",
+        "id": "hello",
+        "level": 1
+      }];
+      export const frontmatter = undefined;
+      function _createMdxContent(props) {
+        const _components = {
+          a: "a",
+          h1: "h1",
+          span: "span",
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsxs(_components.h1, {
+            id: "hello",
+            children: [_jsx(_components.a, {
+              "aria-hidden": "true",
+              tabindex: "-1",
+              href: "#hello",
+              children: _jsx(_components.span, {
+                class: "icon icon-link"
+              })
+            }), "Hello"]
+          }), "\\n", _jsx("a", {
+            href: "http://example.com",
+            children: "Hello"
+          }), "\\n", _jsx("div", {
+            children: "World"
+          })]
+        });
+      }
+
+      const WrappedMdxContent = () => {
+        return _jsxC(RenderOnce, {children: _jsxC(_createMdxContent, {}, 3, null)}, 3, "eB2HIyA1");
+      };
+      export default WrappedMdxContent;
+      ",
+        "map": {
+          "file": "file.mdx",
+          "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;UACE;;;gBAC2B;;gBACxB",
+          "names": [],
+          "sources": [
+            "file.mdx",
+          ],
+          "version": 3,
+        },
+      }
+    `);
+  });
+});
diff --git a/packages/qwik-city/package.json b/packages/qwik-city/package.json
@@ -4,8 +4,8 @@
   "version": "1.4.5",
   "bugs": "https://github.com/BuilderIO/qwik/issues",
   "dependencies": {
-    "@mdx-js/mdx": "2.3.0",
-    "@types/mdx": "^2.0.8",
+    "@mdx-js/mdx": "^3.0.0",
+    "@types/mdx": "^2.0.11",
     "source-map": "0.7.4",
     "svgo": "^3.2.0",
     "undici": "*",
@@ -32,13 +32,13 @@
     "marked": "5.1.2",
     "mdast-util-mdx": "^3.0.0",
     "refractor": "4.8.1",
-    "rehype-autolink-headings": "6.1.1",
-    "remark-frontmatter": "4.0.1",
-    "remark-gfm": "3.0.1",
+    "rehype-autolink-headings": "7.1.0",
+    "remark-frontmatter": "5.0.0",
+    "remark-gfm": "4.0.0",
     "set-cookie-parser": "^2.6.0",
     "tsm": "^2.3.0",
     "typescript": "5.3.3",
-    "unified": "10.1.2",
+    "unified": "11.0.4",
     "unist-util-visit": "5.0.0",
     "uvu": "0.5.6",
     "yaml": "^2.3.2"