feat: compat parser (#1004)

[![PR App][icn]][demo] | :-------------------:| ## 🧰 Changes Moves the migration bits back to here. This PR attempts to pull in the changes from the main readme app that are specific to the on going migration to MDX. We had originally started moving migration specific changes to the main app for speed of development, and organization. But now, we need to be able to move the migration bits into the gitto backend. I tried to preserve the git histories of the specific files, so there's a little more context. ## 🧬 QA & Testing - [Broken on production][prod]. - [Working in this PR app][demo]. [demo]: https://markdown-pr-PR_NUMBER.herokuapp.com [prod]: https://SUBDOMAIN.readme.io [icn]: https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg
readmeio · Oct 30, 2024 · ead267e · ead267e
1 parent 7be267e
commit ead267e
Show file tree

Hide file tree

Showing 19 changed files with 970 additions and 194 deletions.
diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import fs from 'node:fs';
 import { vi } from 'vitest';
-import { render, screen, prettyDOM, configure } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
-import { mdx, compile, run } from '../../index';
-import * as rdmd from '@readme/markdown-legacy';
+import { mdastV6, mdx, compile, run } from '../../index';
 
 describe('compatability with RDMD', () => {
   it('compiles glossary nodes', () => {
@@ -126,7 +125,7 @@ describe('compatability with RDMD', () => {
 This is some in progress <!-- commented out stuff -->
 `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toBe('This is some in progress {/* commented out stuff */}');
+    expect(mdx(mdastV6(md)).trim()).toBe('This is some in progress {/* commented out stuff */}');
   });
 
   it('compiles multi-line html comments to JSX comments', () => {
@@ -140,7 +139,7 @@ This is some in progress <!-- commented out stuff -->
 -->
 `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toMatchInlineSnapshot(`
+    expect(mdx(mdastV6(md)).trim()).toMatchInlineSnapshot(`
       "## Wip
 
       {/*
@@ -156,52 +155,52 @@ This is some in progress <!-- commented out stuff -->
 This is a break: <br>
 `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toBe('This is a break: <br />');
+    expect(mdx(mdastV6(md)).trim()).toBe('This is a break: <br />');
   });
 
   it.skip('closes un-closed self closing tags with a space', () => {
     const md = `
 This is a break: <br >
 `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toBe('This is a break: <br />');
+    expect(mdx(mdastV6(md)).trim()).toBe('This is a break: <br />');
   });
 
   it.skip('closes complex un-closed self closing tags', () => {
     const md = `
 This is an image: <img src="http://example.com/#\\>" >
 `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toBe('This is an image: <img src="http://example.com/#\\>" />');
+    expect(mdx(mdastV6(md)).trim()).toBe('This is an image: <img src="http://example.com/#\\>" />');
   });
 
   it('compiles escapes', () => {
     const md = `
 \\- not a list item
     `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toBe('\\- not a list item');
+    expect(mdx(mdastV6(md)).trim()).toBe('\\- not a list item');
   });
 
   it('compiles escapes of backslashes', () => {
     const md = `
 \\\\**still emphatic**
     `;
 
-    expect(mdx(rdmd.mdast(md)).trim()).toBe('\\\\**still emphatic**');
+    expect(mdx(mdastV6(md)).trim()).toBe('\\\\**still emphatic**');
   });
 
   it('compiles magic block images into blocks', () => {
     const imageMd = fs.readFileSync('__tests__/fixtures/image-block-no-attrs.md', { encoding: 'utf8' });
     const imageMdx = fs.readFileSync('__tests__/fixtures/image-block-no-attrs.mdx', { encoding: 'utf8' });
 
-    expect(mdx(rdmd.mdast(imageMd))).toBe(imageMdx);
+    expect(mdx(mdastV6(imageMd))).toBe(imageMdx);
   });
 
   it('compiles user variables', () => {
     const md = `Contact me at <<email>>`;
 
-    expect(mdx(rdmd.mdast(md))).toBe(`Contact me at {user.email}\n`);
+    expect(mdx(mdastV6(md))).toBe(`Contact me at {user.email}\n`);
   });
 
   describe('<HTMLBlock> wrapping', () => {
@@ -225,7 +224,7 @@ This is an image: <img src="http://example.com/#\\>" >
     `;
 
     it('should wrap raw <style> tags in an <HTMLBlock>', async () => {
-      const legacyAST = rdmd.mdast(rawStyle);
+      const legacyAST = mdastV6(rawStyle);
       const converted = mdx(legacyAST);
       const compiled = compile(converted);
       const Component = (await run(compiled)).default;
@@ -238,7 +237,7 @@ This is an image: <img src="http://example.com/#\\>" >
     });
 
     it('should wrap raw <script> tags in an <HTMLBlock>', async () => {
-      const legacyAST = rdmd.mdast(rawScript);
+      const legacyAST = mdastV6(rawScript);
       const converted = mdx(legacyAST);
       const compiled = compile(converted);
       const Component = (await run(compiled)).default;
@@ -255,7 +254,7 @@ This is an image: <img src="http://example.com/#\\>" >
        * @note compatability mode has been deprecated for RMDX
        */
       const spy = vi.spyOn(console, 'log');
-      const legacyAST = rdmd.mdast(magicScript);
+      const legacyAST = mdastV6(magicScript);
       const converted = mdx(legacyAST);
       const compiled = compile(converted);
       const Component = await run(compiled);
@@ -287,7 +286,7 @@ This is an image: <img src="http://example.com/#\\>" >
 [/block]
 `;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
 
     expect(rmdx).toMatch('<Image align="center" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />');
   });
@@ -311,7 +310,7 @@ This is an image: <img src="http://example.com/#\\>" >
 }
 [/block]`;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(
       `
       "<Image alt="Data Plane Setup" align="center" border={true} src="https://files.readme.io/fd21f977cfbb9f55b3a13ab0b827525e94ee1576f21bbe82945cdc22cc966d82-Screenshot_2024-09-12_at_3.47.05_PM.png">
@@ -325,7 +324,7 @@ This is an image: <img src="http://example.com/#\\>" >
   it('trims whitespace surrounding phrasing content (emphasis, strong, etc)', () => {
     const md = `** bold ** and _ italic _ and ***   bold italic ***`;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(`
       "**bold** and *italic* and ***bold italic***
       "
@@ -352,7 +351,7 @@ This is an image: <img src="http://example.com/#\\>" >
 ## Tile View
     `;
 
-    const tree = rdmd.mdast(md);
+    const tree = mdastV6(md);
     const rmdx = mdx(tree);
     expect(rmdx).toMatchInlineSnapshot(`
       "![806](https://files.readme.io/9ac3bf4-SAP_Folders_Note.png "SAP Folders Note.png")
@@ -383,7 +382,7 @@ ${JSON.stringify(
 [/block]
 `;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(`
       "<Table align={["left","left"]}>
         <thead>
@@ -405,16 +404,8 @@ ${JSON.stringify(
             </td>
 
             <td style={{ textAlign: "left" }}>
-              Pseudo-list:
-
-
-
-
-              ● One
-
-
-
-
+              Pseudo-list:\\
+              ● One\\
               ● Two
             </td>
           </tr>
@@ -431,7 +422,7 @@ ${JSON.stringify(
 > Lorem ipsum dolor sit amet consectetur adipisicing elit. Error eos animi obcaecati quod repudiandae aliquid nemo veritatis ex, quos delectus minus sit omnis vel dolores libero, recusandae ea dignissimos iure?
 `;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(`
       "> 🥈
       >
@@ -461,7 +452,7 @@ ${JSON.stringify(
 [/block]
     `;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(`
       "<Table align={["left","left"]}>
         <thead>
@@ -483,10 +474,12 @@ ${JSON.stringify(
             </td>
 
             <td style={{ textAlign: "left" }}>
-              \`{
+              \`\`\`
+              {
                "field": "ID",
                "type": "ASC"
-               }\`
+               }
+              \`\`\`
             </td>
           </tr>
         </tbody>
@@ -498,7 +491,7 @@ ${JSON.stringify(
   it('compiles inline html', () => {
     const md = `Inline html: <small>_string_</small>`;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(`
       "Inline html: <small>*string*</small>
       "
@@ -508,7 +501,7 @@ ${JSON.stringify(
   it('compiles tag-like syntax', () => {
     const md = `Inline: <what even is this>`;
 
-    const rmdx = mdx(rdmd.mdast(md));
+    const rmdx = mdx(mdastV6(md));
     expect(rmdx).toMatchInlineSnapshot(`
       "Inline: <what even is this>
       "

diff --git a/__tests__/migration/emphasis.test.ts b/__tests__/migration/emphasis.test.ts
@@ -0,0 +1,34 @@
+import * as rmdx from '../../index';
+
+describe('migrating emphasis', () => {
+  it('trims whitespace surrounding phrasing content (emphasis, strong, etc)', () => {
+    const md = '** bold ** and _ italic _ and ***   bold italic ***';
+
+    const mdx = rmdx.mdx(rmdx.mdastV6(md));
+    expect(mdx).toMatchInlineSnapshot(`
+      "**bold** and *italic* and ***bold italic***
+      "
+    `);
+  });
+
+  it('moves whitespace surrounding phrasing content (emphasis, strong, etc) to the appropriate place', () => {
+    const md = '**bold **and also_ italic_ and*** bold italic***aaaaaah';
+
+    const mdx = rmdx.mdx(rmdx.mdastV6(md));
+    expect(mdx).toMatchInlineSnapshot(`
+      "**bold** and also *italic* and ***bold italic***aaaaaah
+      "
+    `);
+  });
+
+  it('migrates a complex case', () => {
+    const md =
+      '*the recommended initial action is to**initiate a [reversal operation (rollback)](https://docs.jupico.com/reference/ccrollback) test**. *';
+
+    const mdx = rmdx.mdx(rmdx.mdastV6(md));
+    expect(mdx).toMatchInlineSnapshot(`
+      "*the recommended initial action is to**initiate a [reversal operation (rollback)](https://docs.jupico.com/reference/ccrollback) test**.*
+      "
+    `);
+  });
+});
diff --git a/__tests__/migration/html-comments.test.ts b/__tests__/migration/html-comments.test.ts
@@ -0,0 +1,48 @@
+import * as rmdx from '../../index';
+
+describe('migrating html comments', () => {
+  it('migrates escaped html comments', () => {
+    const md = `
+<!--
+
+ 
+
+## Walkthrough
+
+[block:html]
+{
+  "html": "<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>"
+}
+[/block]
+
+
+<br />
+
+\\-->
+`;
+
+    const ast = rmdx.mdastV6(md);
+    const mdx = rmdx.mdx(ast);
+    expect(mdx).toMatchInlineSnapshot(`
+      "{/*
+
+       
+
+      ## Walkthrough
+
+
+      [block:html]
+      {
+        "html": "<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>"
+      }
+      [/block]
+
+
+
+      <br />
+
+      */}
+      "
+    `);
+  });
+});
diff --git a/__tests__/migration/image.test.ts b/__tests__/migration/image.test.ts
@@ -0,0 +1,30 @@
+import * as rmdx from '../../index';
+
+describe('migrating images', () => {
+  it('compiles images', () => {
+    const md = `
+[block:image]
+{
+  "images": [
+    {
+      "image": [
+        "https://fastly.picsum.photos/id/507/200/300.jpg?hmac=v0NKvUrOWTKZuZFmMlLN_7-RdRgeF-qFLeBGXpufxgg",
+        "",
+        ""
+      ],
+      "align": "center",
+      "border": true
+    }
+  ]
+}
+[/block]
+`;
+
+    const ast = rmdx.mdastV6(md);
+    const mdx = rmdx.mdx(ast);
+    expect(mdx).toMatchInlineSnapshot(`
+      "<Image align="center" className="border" border={true} src="https://fastly.picsum.photos/id/507/200/300.jpg?hmac=v0NKvUrOWTKZuZFmMlLN_7-RdRgeF-qFLeBGXpufxgg" />
+      "
+    `);
+  });
+});
diff --git a/__tests__/migration/link-reference.test.ts b/__tests__/migration/link-reference.test.ts
@@ -0,0 +1,31 @@
+import * as rmdx from '../../index';
+
+describe('mdx migration of link references', () => {
+  it('compiles link references correctly', () => {
+    const md = '[wat_wat]';
+
+    const ast = rmdx.mdastV6(md);
+    const mdx = rmdx.mdx(ast);
+    expect(mdx).toMatchInlineSnapshot(`
+      "\\[wat\\_wat]
+      "
+    `);
+  });
+
+  it('compiles link references with defintions correctly', () => {
+    const md = `
+[wat_wat]
+
+[wat_wat]: https://wat.com
+`;
+
+    const ast = rmdx.mdastV6(md);
+    const mdx = rmdx.mdx(ast);
+    expect(mdx).toMatchInlineSnapshot(`
+      "[wat\\_wat][wat_wat]
+
+      [wat_wat]: https://wat.com
+      "
+    `);
+  });
+});