feat(cli): code formatting support for advanced mdx (#656)

* feat(cli): code formatting support for advanced `mdx`

* feat: changeset

Author: maxprilutskiy

.changeset/warm-paws-sniff.md

@@ -0,0 +1,5 @@
+---
+"lingo.dev": minor
+---
+
+code formatting support for advanced mdx

packages/cli/src/cli/loaders/mdx.spec.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { createMdxFormatLoader } from "./mdx";
+
+// Helper to traverse mdast tree
+function traverse(node: any, visitor: (n: any) => void) {
+  visitor(node);
+  if (node && Array.isArray(node.children)) {
+    node.children.forEach((child: any) => traverse(child, visitor));
+  }
+}
+
+describe("mdx loader", () => {
+  const mdxSample = `\n# Heading\n\nHere is some code:\n\n\u0060\u0060\u0060js\nconsole.log("hello");\n\u0060\u0060\u0060\n\nSome inline \u0060world\u0060 and more text.\n`;
+
+  describe("createMdxFormatLoader", () => {
+    it("should strip values of code and inlineCode nodes on pull", async () => {
+      const loader = createMdxFormatLoader();
+      loader.setDefaultLocale("en");
+
+      const ast = await loader.pull("en", mdxSample);
+
+      // Assert that every code or inlineCode node now has an empty value
+      traverse(ast, (node) => {
+        if (node?.type === "code" || node?.type === "inlineCode") {
+          expect(node.value).toBe("");
+        }
+      });
+    });
+
+    it("should preserve original code & inlineCode content on push when incoming value is empty", async () => {
+      const loader = createMdxFormatLoader();
+      loader.setDefaultLocale("en");
+
+      const pulledAst = await loader.pull("en", mdxSample);
+      const output = await loader.push("es", pulledAst);
+
+      // The serialized output must still contain the original code and inline code content
+      expect(output).toContain('console.log("hello");');
+      expect(output).toMatch(/`world`/);
+    });
+  });
+});

packages/cli/src/cli/loaders/mdx.ts

@@ -1,42 +1,54 @@
 import _ from "lodash";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
-import remarkMdx from "remark-mdx";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
 import remarkStringify from "remark-stringify";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import { VFile } from "vfile";
-import { Root } from "mdast";
+import { Root, RootContent, RootContentMap } from "mdast";
 import { ILoader } from "./_types";
 import { createLoader } from "./_utils";
 
-const parser = unified()
-  .use(remarkParse)
-  .use(remarkMdx)
-  .use(remarkFrontmatter, ["yaml"])
-  .use(remarkMdxFrontmatter)
-  .use(remarkGfm);
-
-const serializer = unified()
-  .use(remarkStringify)
-  .use(remarkMdx)
-  .use(remarkFrontmatter, ["yaml"])
-  .use(remarkMdxFrontmatter)
-  .use(remarkGfm);
+const parser = unified().use(remarkParse).use(remarkFrontmatter, ["yaml"]).use(remarkGfm);
+const serializer = unified().use(remarkStringify).use(remarkFrontmatter, ["yaml"]).use(remarkGfm);
 
 export function createMdxFormatLoader(): ILoader<string, Record<string, any>> {
+  const skippedTypes: (keyof RootContentMap | "root")[] = ["code", "inlineCode"];
   return createLoader({
     async pull(locale, input) {
       const file = new VFile(input);
       const ast = parser.parse(file);
-      return JSON.parse(JSON.stringify(ast));
+
+      const result = _.cloneDeep(ast);
+
+      traverseMdast(result, (node) => {
+        if (skippedTypes.includes(node.type)) {
+          if ("value" in node) {
+            node.value = "";
+          }
+        }
+      });
+
+      return result;
     },
 
-    async push(locale, data) {
-      const ast = data as unknown as Root;
-      const content = String(serializer.stringify(ast));
-      return content;
+    async push(locale, data, originalInput, originalLocale, pullInput, pullOutput) {
+      const file = new VFile(originalInput);
+      const ast = parser.parse(file);
+
+      const result = _.cloneDeep(ast);
+
+      traverseMdast(result, (node, indexPath) => {
+        if ("value" in node) {
+          const incomingValue = findNodeByIndexPath(data, indexPath);
+          if (incomingValue && "value" in incomingValue && !_.isEmpty(incomingValue.value)) {
+            node.value = incomingValue.value;
+          }
+        }
+      });
+
+      return String(serializer.stringify(result));
     },
   });
 }
@@ -73,3 +85,35 @@ export function createMdxStructureLoader(): ILoader<Record<string, any>, Record<
     },
   });
 }
+
+function traverseMdast(
+  ast: Root | RootContent,
+  visitor: (node: Root | RootContent, path: number[]) => void,
+  indexPath: number[] = [],
+) {
+  visitor(ast, indexPath);
+
+  if ("children" in ast && Array.isArray(ast.children)) {
+    for (let i = 0; i < ast.children.length; i++) {
+      traverseMdast(ast.children[i], visitor, [...indexPath, i]);
+    }
+  }
+}
+
+function findNodeByIndexPath(ast: Root | RootContent, indexPath: number[]): Root | RootContent | null {
+  let result: Root | RootContent | null = null;
+
+  const stringifiedIndexPath = indexPath.join(".");
+  traverseMdast(ast, (node, path) => {
+    if (result) {
+      return;
+    }
+
+    const currentStringifiedPath = path.join(".");
+    if (currentStringifiedPath === stringifiedIndexPath) {
+      result = node;
+    }
+  });
+
+  return result;
+}